我有一个顶点缓冲区，其中包含以下结构的几个（在本例中为2个）图形：
var vertices = [
x0, y00, y10,
x1, y01, y11,
x2, y02, y12,
...
xn, y0n, y1n
];
及其索引
var indices = [0, 1, 2, 3, ... n-1];
您会注意到，对于每个x值，都有2y个值分别确定了图形。
我想要的是使用此单个缓冲区渲染这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因为您暗示您总有一个线性索引缓冲区。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句