WebGl에서 런타임 동안 다양한 크기의 다양한 모양을 그리는 방법은 무엇입니까?

Question

나는 here을 읽고 있습니다. initBuffers 함수는 버퍼에 그릴 필요가있는 객체의 정점을 저장하는 데 사용됩니다.

var triangleVertexPositionBuffer; 
var triangleVertexColorBuffer; 
function initBuffers() { 
    triangleVertexPositionBuffer = gl.createBuffer(); 
    gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer); 
    var vertices = [ 
     0.0, 1.0, 0.0, 
     -1.0, -1.0, 0.0, 
     1.0, -1.0, 0.0 
    ]; 
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); 
    triangleVertexPositionBuffer.itemSize = 3; 
    triangleVertexPositionBuffer.numItems = 3; 

    triangleVertexColorBuffer = gl.createBuffer(); 
    gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer); 
    var colors = [ 
     1.0, 0.0, 0.0, 1.0, 
     0.0, 1.0, 0.0, 1.0, 
     0.0, 0.0, 1.0, 1.0, 
    ]; 
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW); 
    triangleVertexColorBuffer.itemSize = 4; 
    triangleVertexColorBuffer.numItems = 3; 
} 

이제 삼각형에 대해 정의 된 일종의 "모양"입니다. 자, 만약 내가 모든 종류와 크기의 모양을 원한다면 나는처럼 triangleVertexPositionBuffer과 같은 버퍼를 유지해야 할 것인가? 그리고 그것은 초기화되어야합니다 오른쪽?

새로운 도형에 대한 새로운 버퍼 객체는 필수 항목입니까?

버튼을 사용하여 런타임 중에 모든 종류의 도형을 만들 수있는 시스템을 만들 계획입니다. 그래서이 문제에 대한 해결책이 있습니까? 런타임 중에 새 버퍼를 만드는 방법은 무엇입니까? 공통적 인 기존 솔루션이 있습니까?

버퍼 객체의 배열을 생성하면 성능이 저하 될 수 있습니까?

Answer 1

프레임마다 initBuffers를 호출해도 WebGl은 상관하지 않습니다. 글쎄, 성능 수도 있습니다.

javascript는 언어로 해석되므로 런타임과 컴파일 시간의 개념은 실제로 존재하지 않습니다. 그러나 한 가지 진보 된 점은 webgl에 필요한 쉐이더가 런타임시뿐만 아니라 외부 파일 및 html 요소에서 생성되는 "리터럴"문자열에서 생성 될 수 있다는 것입니다.

사용할 수있는 웹 기반 인프라가 있습니다. three.js하지만 Javascript 자체가 답이라고 생각합니다.

편집 : 덧글에 귀하의 추가 질문에 대해. OpenGL과 WebGL은 본질적으로 당신이 묘사 한 방식으로 작동하지만, 객체에 오프셋을주는 것보다 유연한 행렬을 사용합니다. 삼각형 사이에 정점을 공유하는 데 도움이되는 '인덱스 버퍼'도 있습니다.

CubeCorners = [0,0,0, 0,0,1, 0,1,0, 0,1,1, 1,0,0, 1,0,1, 1,1,0, 1,1,1 ]; 
// There are 8 corners in a cube 
//    0----1 <-- vertices (aka corners, with x=0) 
//    /| /| 
//   4-+--5 | 
//   | 2--|-3 
//   |/ |/ 
//   6----7 
Triangles = [0,1,2, 1,3,2, 6,4,2, 2,4,0, 5,4,7, 4,6,7, ... + 6 other triangles ]; 
// 
TransScaleMatrix = [X,0,0,0, 0,Y,0,0, 0,0,Z,0, ox,oy,oz,1]; 
// scales the object and sets an internal origin (around which object is rotated) 
RotMatrix = [rx,ry,rz, 0, ux,uy,yz,0, tx,ty,tz, 0, Ox,Oy,Oz,1]; 
// aligns the objects orthogonal up,right,toward vectors to r,u,t, (i.e. rotates it) 
// and translates it to new origin O. 
CameraOrientationMatrix = [ ... ... ]; 
// sets cameras lookat, up and right vector + position 
PerspectiveMatrix = [ ... ...]; 
// transforms viewing frustums 6 planes left,right,top,bottom,near and far planes 
// to unit cube. (objects outside this cube are clipped away) 

이러한 배열을 사용하면 일반적으로 정점과 객체가 다시 사용되는 계층 적 장면이 렌더링됩니다. 수 있습니다 장소 큐브뿐만 아니라 두 가지 다른 위치에 있지만, 다른 규모와 다른 방향. 그런 다음 장면이 "세계 좌표"로 모델링되면 카메라를 일부 장소와 방향에 배치하고 원근감 행렬을 적용하여 화면 좌표 x, y 및 깊이 z를 모델링하는 "클립 공간"으로 좌표를 변환합니다.

이러한 행렬의 장점은 이들 각각을 언급 된 모든 것을 수행하는 단일 행렬로 미리 곱할 수 있다는 것입니다. 또는이 연산 연쇄를 셰이더에서 즉시 계산되거나 정점 버퍼에서 미리 계산되는 최상의 작업량으로 나눌 수 있습니다. 렌더링의 병목 현상은 일반적으로 객체 당 정점 수 대신에 drawElements/drawArray-call 및 상태 변경 (gl.useProgram)의 양이므로 객체 재사용의 최적 균형을 신중하게 고려해야합니다.