3 index buffers asks a more difficult question, but I feel like their main problem boils down to mine: is there a way to use index buffers to visit the same vertex multiple times in WebGL rather than duplicating the vertices? All I was able to find is using index buffers to associate textures, normals, etc. to vertices in a model. I wasn't able to find a way to use an index buffer to tell drawArrays the order in which to visit the vertices in a position array.
Yes, use gl.drawElements and upload the buffer with your vertex indices to gl.ELEMENT_ARRAY_BUFFER.
... upload vertex data to buffers, vertexAttribPointer them.
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indicesBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indicesData, gl.STATIC_DRAW);
gl.drawElements(gl.TRIANGLES, indicesData.length/3, gl.UNSIGNED_SHORT, 0);
See https://developer.mozilla.org/en/WebGL/Creating_3D_objects_using_WebGL for a full example.
When you use indices, you can just double the indexes. However, this makes no sense to me as processing the same vertex data multiple times with the same global state, results would be the same for each duplicate.
What I suspect you really want to do is to make multiple Draw calls on the same vertex data with different uniforms.
- Create vertex data/indices (if wanted) at startup
- Each Frame, set global state A, call DrawElements/Array, set state B, call DrawElements/Array
- From time to time, change vertex data (e.g. if objects are moving)..
As long as you don't change vertex data, there is just minor uploads to the gpu (needing low bandwidth).
来源：https://stackoverflow.com/questions/6077002/using-webgl-index-buffers-for-drawing-meshes