从单个顶点缓冲区渲染多个图形
Render several graphs from single vertex buffer
我有一个顶点缓冲区,其中包含以下结构中的多个(在本例中为 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 值,每个值都决定了图形。
我想要的是使用这个单个缓冲区渲染这 2 个图形,而不重复 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
// ?
}
如果你真的想通过属性指针来做到这一点,你可以将你的位置分成两个引用同一个缓冲区的属性:
// 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
,因为您暗示无论如何您都有一个线性索引缓冲区。
我有一个顶点缓冲区,其中包含以下结构中的多个(在本例中为 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 值,每个值都决定了图形。
我想要的是使用这个单个缓冲区渲染这 2 个图形,而不重复 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
// ?
}
如果你真的想通过属性指针来做到这一点,你可以将你的位置分成两个引用同一个缓冲区的属性:
// 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
,因为您暗示无论如何您都有一个线性索引缓冲区。