Multiple objects in webgl

Question

I'm trying to render a few objects to a canvas and I'm having a bit of trouble understanding what's not working. I'm building two objects at the moment that represent the two meshes that I want to render. If I create one mesh the code works fine so the problem, I think, is that the data gets screwed up when I'm building two or more. Here's an example of the mesh data: ``` "name":"cone", "buffers":{ "vertexPosition":{}, // Buffer "vertexIndex":{} // Buffer }, "mesh":{ "vertices":[], // emptied it to fit on page "faces":[] // emptied it to fit on page }, "mvMatrix": Float32Array[16], "itemSize":3, "numItems":12, "program":{ "vertexPosAttrib":0, "mvMatrixUniform":{}, "pMatrixUniform":{} } ``` This is build from this function: ``` buildMeshData: function(){ this.mvMatrix = mat4.create(); this.buffers.vertexPosition = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers.vertexPosition); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.mesh.vertices), gl.STATIC_DRAW); this.buf…

Accepted Answer

This code

```
gl.vertexAttribPointer(this.program.vertexPosAttrib, this.itemSize, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(this.program.vertexPosAttrib);
```

Need to be called when drawing each mesh and not where it's called now. Additionally before calling `gl.vertexAttribPointer` for `this.program.vertexPosAttrib` you need to call

```
gl.bindBuffer(gl.ARRAY_BUFFER, mesh.buffers.vertexPosition);
```

Because `gl.vertexAttribPointer` binds the buffer currently bound to `gl.ARRAY_BUFFER` to the specified attribute.

In other words

```
gl.bindBuffer(gl.ARRAY_BUFFER, mesh.buffers.vertexPosition);
gl.vertexAttribPointer(mesh.program.vertexPosAttrib, mesh.itemSize, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(mesh.program.vertexPosAttrib);
```

Multiple objects in webgl

Solution

Problem