从单个顶点缓冲区渲染多个图形
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
,因为您暗示无论如何您都有一个线性索引缓冲区。
【讨论】:
以上是关于从单个顶点缓冲区渲染多个图形的主要内容,如果未能解决你的问题,请参考以下文章