从单个顶点缓冲区渲染多个图形

Posted

技术标签:

【中文标题】从单个顶点缓冲区渲染多个图形【英文标题】:Render several graphs from single vertex buffer 【发布时间】:2019-03-19 22:08:21 【问题描述】:

我有一个顶点缓冲区,其中包含多个(在本例中为 2 个)图形,结构如下:

var vertices = [ 
  x0, y00, y10,
  x1, y01, y11,
  x2, y02, y12,
  ...
  xn, y0n, y1n
];

及其索引

var indices = [0, 1, 2, 3, ... n-1];

您会注意到,对于每个 x 值,都有 2 y 值,每个值都决定了图形。

我想要的是使用这个单一的缓冲区来渲染这两个图形,而不需要重复任何 x 值。

目前在渲染循环中我有这个:

    function render()          
        gl.bindBuffer(gl.ARRAY_BUFFER, vBuff);  // bind our buffer                                                      

        // with this setup it renders only first graph:
        // x0, y00,  
        // x1, y01, 
        // x2, y02, 
        // ... 
        // xn, y0n
        gl.vertexAttribPointer(vertexPositionLocation, 2, gl.FLOAT, false, 4*3, 0);     
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);                                            
        gl.drawElements(gl.LINE_STRIP, indices.length, gl.UNSIGNED_SHORT, 0);

        // now how do I set up the vertexAttribPointer such that next draw call here 
        // would render second graph containing these points
        // x0, y10,  
        // x1, y11, 
        // x2, y12, 
        // ... 
        // xn, y1n      
        // ?
    

【问题讨论】:

【参考方案1】:

如果您严格希望通过属性指针来执行此操作,您可以将您的位置拆分为两个引用同一缓冲区的属性:

    // first call
    gl.vertexAttribPointer(vertexPositionXLocation, 1, gl.FLOAT, false, 4*3, 0);
    gl.vertexAttribPointer(vertexPositionYLocation, 1, gl.FLOAT, false, 4*3, 4);
    gl.drawArrays(gl.LINE_STRIP, 0, numDataPoints);

    // second call
    gl.vertexAttribPointer(vertexPositionYLocation, 1, gl.FLOAT, false, 4*3, 8);
    gl.drawArrays(gl.LINE_STRIP, 0, numDataPoints);

你的顶点着色器看起来像这样:

attribute float vX;
attribute float vY;
void main ()  gl_Position=vec4(vX,vY,0,1); 

还请注意,我使用了drawArrays 而不是drawElements,因为您暗示无论如何您都有一个线性索引缓冲区。

【讨论】:

以上是关于从单个顶点缓冲区渲染多个图形的主要内容,如果未能解决你的问题,请参考以下文章

OpenGL/C++:使用顶点缓冲区进行从后到前渲染

高效合并交错索引数据

在 Metal 中从顶点缓冲区渲染四边形

在两个不同的顶点数组对象中使用顶点缓冲区

C++ DirectX 11 从第二个顶点缓冲区渲染问题

OpenGL ES 渲染立体图形