달력

10

« 2017/10 »

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  •  
  •  
  •  
  •  

'webgl'에 해당되는 글 1

  1. 2012.11.12 WebGL - Drawing ConvexHull (1)
2012.11.12 20:17

WebGL - Drawing ConvexHull 2012/OpenGL2012.11.12 20:17

임의의 점 10개를 생성하여, convexthull을 그려주는 webgl 예제.


아래는 정점 버퍼 초기화 함수. viewport의 크기는 640x480이다.


function initBuffers() {


var maxPoints = 10;
var i = 0
var vertices=[];
var points = [];

while(i!= maxPoints)
{
var vertexElement = [];
vertexElement.push(getRandomInt(0,640));
vertexElement.push(getRandomInt(0,480));
vertexElement.push(0);

points.push(vertexElement[0]);
points.push(vertexElement[1]);
points.push(0);

vertices.push(vertexElement);
i++;
}

var convexVertcies = [];
convexVertcies = getConvexHull(vertices);


var newVertices = [];
for (var idx in convexVertcies) {
var temp = convexVertcies[idx];

for (var i in temp) {
newVertices.push(temp[i][0]);
newVertices.push(temp[i][1]);
newVertices.push(temp[i][2]);
}

}

console.log(newVertices);
console.log(points);

lineBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, lineBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(newVertices), gl.STATIC_DRAW);

lineBuffer.itemSize = 3;
lineBuffer.numItems = newVertices.length / lineBuffer.itemSize;

pointsBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, pointsBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(points), gl.STATIC_DRAW);

pointsBuffer.itemSize = 3;
pointsBuffer.numItems = maxPoints;

}

아래는 convexhull을 만드는 함수. x좌표의 최소값과 최대값을 찾고, 두 개를 기준으로 상단 convexhull과 하단을
만든 후 결합한다. 알고리즘은 quickhull이라 불리는 것을 가져옴. 근데 이게 진짜 정확한 방식인지는 모르겠으나, 
여러번 테스트 결과는 이상없이 결과 나옴.

function getDistant(cpt, bl) {
var Vy = bl[1][0] - bl[0][0];
var Vx = bl[0][1] - bl[1][1];
return (Vx * (cpt[0] - bl[0][0]) + Vy * (cpt[1] -bl[0][1]))
}


function findMostDistantPointFromBaseLine(baseLine, points) {
var maxD = 0;
var maxPt = new Array();
var newPoints = new Array();
for (var idx in points) {
var pt = points[idx];
var d = getDistant(pt, baseLine);

if ( d > 0) {
newPoints.push(pt);
} else {
continue;
}

if ( d > maxD ) {
maxD = d;
maxPt = pt;
}

}
return {'maxPoint':maxPt, 'newPoints':newPoints}
}

var allBaseLines = new Array();
function buildConvexHull(baseLine, points) {

allBaseLines.push(baseLine)
var convexHullBaseLines = new Array();
var t = findMostDistantPointFromBaseLine(baseLine, points);
if (t.maxPoint.length) { // if there is still a point "outside" the base line
convexHullBaseLines =
convexHullBaseLines.concat(
buildConvexHull( [baseLine[0],t.maxPoint], t.newPoints)
);
convexHullBaseLines =
convexHullBaseLines.concat(
buildConvexHull( [t.maxPoint,baseLine[1]], t.newPoints)
);
return convexHullBaseLines;
} else { // if there is no more point "outside" the base line, the current base line is part of the convex hull
return [baseLine];
}
}

function getConvexHull(points) {
//find first baseline
var maxX, minX;
var maxPt, minPt;
for (var idx in points) {
var pt = points[idx];
if (pt[0] > maxX || !maxX) {
maxPt = pt;
maxX = pt[0];
}
if (pt[0] < minX || !minX) {
minPt = pt;
minX = pt[0];
}
}
var ch = [].concat(buildConvexHull([minPt, maxPt], points),
buildConvexHull([maxPt, minPt], points))
return ch;
}

결과는 다음과 같다.


전체 소스 코드는 아래에서 확인~

https://github.com/airyym/webgl/blob/master/triangulation.html




저작자 표시
신고
TAG
Posted by 에어림