하위 버퍼가있는 버퍼를 그립니다. webgl

Question

어떻게 webgl에 하위 버퍼가있는 버퍼를 그릴 수 있습니까? 예를 들어, 선을 만드는 데는 다른 점이 있지만 연결하고 싶지 않은 부분이 있습니다.

///Example code 
    var lines = [ 
     [0, 0, 0, 1, 1, 1], 
     [2, 2, 2, 3, 3, 3], 
     [5, 5, 5, 7, 7, 7] 
    ]; 
    var colores = [ 
     [10, 43, 100, 1, ], 
     [0, 100, 0, 1], 
     [100, 100, 0, 1] 
    ] 
    for (var i = 0; i < lines.length; i++) { 
     lineVertexPositionBuffer[i] = gl.createBuffer(); 
     gl.bindBuffer(gl.ARRAY_BUFFER, lineVertexPositionBuffer[i]); 
     lineVertexPositionBuffer[i].itemSize = 3; 
     lineVertexPositionBuffer[i].numItems = line[i].length/3; 

     colorVertexBuffer[i] = gl.createBuffer(); 
     gl.bindBuffer(gl.ARRAY_BUFFER, colorVertexBuffer[i]); 
     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colores[i]), gl.DYNAMIC_DRAW); 
     colorVertexBuffer[i].itemSize = 4; 
     colorVertexBuffer[i].numItems = colores[i].length/4; 

    } 

    function DrawScene() { 
     for (var i = 0; i < lineVertexPositionBuffer.length; i++) { 
      gl.bindBuffer(gl.ARRAY_BUFFER, colorVertexBuffer[i]); 
      gl.vertexAttribPointer(currentProgram.textureCoordAttribute, colorVertexBuffer[i].itemSize, gl.FLOAT, false, 0, 0); 
      gl.bindBuffer(gl.ARRAY_BUFFER, null); 

      gl.bindBuffer(gl.ARRAY_BUFFER, lineVertexPositionBuffer[i]); 
      gl.vertexAttribPointer(currentProgram.vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0); 
      gl.drawArrays(gl.LINE_STRIP, 0, lineVertexPositionBuffer[i].numItems); 
      gl.bindBuffer(gl.ARRAY_BUFFER, null); 
     } 
    } 

Answer 1

gl.drawElements를 사용하고 GL에 실제로 사용 된 정점을 알려주는 인덱스 목록을 제공 할 수 있습니다. 한 번의 호출로 여러 세그먼트를 그리려면 gl.LINES를 사용할 수 있습니다. 점 p0..p6이있는 곳에 0,1,2와 4,5가 연결되어 있으면 0, 1, 1, 2, 4, 5의 인덱스가 필요합니다. 기본적으로 연결할 vertex를 gl에 알려주는 두 개의 인덱스 윤곽. 당신은 당신이 그들을 인터리브 또는

/* interleaved. Padding isn't mandator but it keeps math simpler 
    and GPUs often prefer cache aligned data. */ 
[x0, y0, z0, pad0, r0, g0, b0, a0, 
x1, y1, z1, pad1, r1, g1, b1, a1,...] 
gl.vertexAttribPointer(vertexLocation, 3, gl.FLOAT, false, 4*4*2, 0); 
gl.vertexAttribPointer(colorLocation, 4, gl.FLOAT, false, 4*4*2, 4*4); 

/* n positions followed by n colors */ 
[x0, y0, z0, pad0, 
x1, y1, z1, pad1, 
... 
r0, g0, b0, a0, 
r1, g1, b1, a1,...] /* to WebGLBuffer in ARRAY_BUFFER_BINDING */ 
gl.vertexAttribPointer(vertexLocation, 3, gl.FLOAT, false, 4*4, 0); 
gl.vertexAttribPointer(colorLocation, 4, gl.FLOAT, false, 4*4, 4*4*n); 

/* Index buffer to draw lines between vertices 0->1,1->3, 1->4 and 7->9 with gl.LINES */ 
[0, 1, 1, 3, 1, 4, 7, 9] /* to WebGLBuffer in ELEMENT_ARRAY_BUFFER_BINDING */ 

/* gl.drawArrays can't duplicate same drawing 
    because vertices are referenced out of order. drawElements 
    also allows using a vertex for multiple lines. */ 
gl.drawElements(gl.LINES, 4*2, GL_UNSIGNED_BYTE, 0); 

/* Alternative with only inorder but skiped vertices that can be duplicated with DrawArrays. 
    Connections are 0->1, 1->2, 4->5 and 6->7*/ 
[0, 1, 1, 2, 4, 5, 6, 7] /* to WebGLBuffer in ELEMENT_ARRAY_BUFFER_BINDING */ 
gl.drawElements(GL.LINES, 4*2, GL_UNSIGNED_BYTE, 0); 

/* Same rendering with multiple drawArrays calls */ 
gl.DrawArrays(gl.LINE_STRIP, 0, 3) /* Draw strip from 0 to 3 */ 
gl.DrawArrays(gl.LINES, 4, 2) /* Draw line between 4 and 5 */ 
gl.DrawArrays(gl.LINES, 6, 2) /* Draw line between 6 and 7 */ 

같은 서로 후에 넣어 수 있습니다 0, 5, 4, 3, 5, 3

이 같은 버퍼에 정점 색상 데이터를 넣어 같은 순서가 인덱스를 할 수

그 대답을 찾는 데 도움이됩니까?

Answer 2

당신이하려는 일이 명확하지 않습니다. 선이 동적 인 경우 버퍼에 넣고 그립니다. 그런 다음 버퍼에 새 선을 긋고 그리기, 헹굼 및 반복합니다.

는 전체 버퍼 당신이 최대 크기를 할당하고 내 경험에 gl.bufferData 대부분의 경우 gl.bufferSubData보다 빠른 있지만 gl.bufferSubData을 사용할 수 있습니다마다 교체하지 않으려면

var gl = document.querySelector("canvas").getContext("webgl", { 
 
    preserveDrawingBuffer: true, 
 
}); 
 

 
var program = twgl.createProgramFromScripts(gl, ["vs", "fs"]); 
 
var positionLoc = gl.getAttribLocation(program, "position"); 
 
var colorLoc = gl.getUniformLocation(program, "u_color"); 
 

 
var buffer = gl.createBuffer(); 
 

 
function putRandomLinesInBuffer(buf, numLines) { 
 
    var points = new Float32Array(numLines * 4); 
 
    for (var i = 0; i < numLines; ++i) { 
 
    points[i * 4 + 0] = Math.random() * 2 - 1; 
 
    points[i * 4 + 1] = Math.random() * 2 - 1; 
 
    points[i * 4 + 2] = Math.random() * 2 - 1; 
 
    points[i * 4 + 3] = Math.random() * 2 - 1; 
 
    } 
 
    gl.bindBuffer(gl.ARRAY_BUFFER, buf); 
 
    gl.bufferData(gl.ARRAY_BUFFER, points, gl.DYNAMIC_DRAW); 
 
} 
 

 
function render() { 
 
    var numLines = 5 + Math.random() * 10 | 0; 
 
    putRandomLinesInBuffer(buffer, numLines); 
 
    
 
    gl.useProgram(program); 
 
    
 
    gl.enableVertexAttribArray(positionLoc); 
 
    gl.bindBuffer(gl._ARRAY_BUFFER, buffer); 
 
    gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0); 
 
    
 
    gl.uniform4f(colorLoc, Math.random(), Math.random(), Math.random(), 1); 
 
    
 
    gl.drawArrays(gl.LINES, 0, numLines * 2); 
 
    requestAnimationFrame(render); 
 
} 
 
requestAnimationFrame(render);

<script src="https://twgljs.org/dist/2.x/twgl.min.js"></script> 
 
<canvas></canvas> 
 
<script id="vs" type="foo"> 
 
attribute vec4 position; 
 
void main() { 
 
    gl_Position = position; 
 
} 
 
</script> 
 
<script id="fs" type="foo"> 
 
precision mediump float; 
 
uniform vec4 u_color; 
 
void main() { 
 
    gl_FragColor = u_color; 
 
} 
 
</script>

. 체크 아웃하지 않은 경우

또한 http://webglfundamentals.org