WebGL- Issue when rendering one shape after another

Question

I've been following along with a WebGL tutorial series and the point I'm at in the series deals with applying both textures and lighting to a 3D sphere. In order to actually grasp the proper implementation of such programs so I can write them in the future, I'm trying to implement a version of the code without the lighting and textures. I've been able to draw 3D parametric shapes before where one was drawn on a canvas at a time (using a different setup) so I'm essentially adding that code into the program provided from the tutorial. The tutorial code follows a structure where there is function named webGLStart() that is called when the page loads which itself calls initGL() (which sets up the canvas), initShaders(), initBuffers() (for the shapes to be drawn), and ``drawScene()```.

I've able to successfully draw one shape in the middle of the canvas, but for some reason, when I try to subsequently draw another shape, I'm getting the error: Cannot read property '0' of undefined on the line where I translate the model view matrix to the position for the new shape. Following the methods from the tutorial, there is an array used as a stack to save the current state of the mvMatrix before a transformation for each shape and the state is restored after the last transformation has been performed on each shape. I was thinking that maybe the current copy of the mvMatrix wasn't getting popped properly after the first shape was drawn as after some debugging, it seems that there are the same amount of stack frames before and after the pop. I don't think this is causing the error, but it was the only possible problem I could find.

I'm pretty sure I am setting up the buffers for each shape properly as I am doing essentially what was done in the tutorial source code so I have no idea what is going wrong. I have a snippet (but still very long segment) of my code here for the initBuffers() and drawScene() functions.

What could be causing the problem?

Answer 1

The code was correct except that there was a parameter left out of the translate() function before the shape was drawn.