Translating 3d Objects With Webgl And Glmatrix

I want to translate two 3D objects separately in WebGl, right now my code changes only the position and rotation of the camera. I'm using glMatrix for vector math.'buffers' is an

Solution 1:

Your code should be structured to compute matrices for each object separately

A typical program is

renderloop
  set viewport
  clear
  compute projection matrix
  compute view matrix
  foreachobject
    use program forobjectset buffers and attributes (or vertex array object)
    compute a modelView matrix
    set uniforms 
    draw

In your case you have this outside the for each object loop

mat4.translate(modelViewMatrix,modelViewMatrix,[-0.0 + cubeTranslate, 0.0, -6.0]);
mat4.rotate(modelViewMatrix,modelViewMatrix,cubeRotation,[0, 0, 1]);

That's computing a camera matrix really. To get view matrix take the inverse

m4.invert(modelViewMatrix, modelViewMatrix);

Then inside your loop start with that matrix

for each objectconst mat = mat4.clone(modelViewMatrix);

     // now do something specific for each this object// for example
     mat4.translate(mat, mat, [objectNdx, 0, 0]);

Honestly I'd rename your matrices like this

   camera = mat4.create();

    // Camera Movement
    mat4.translate(camera,camera,[-0.0 + cubeTranslate, 0.0, -6.0]);
    mat4.rotate(camera,camera,cubeRotation,[0, 0, 1]);

    view = mat4.create();
    mat4.invert(view, camera);

    modelViewMatrix = mat4.create();

    for( i = 0; i < 2; i++ ){

        mat4.copy(modelViewMatrix, view);

        // now manipulate the matrix in ways specific to this model// example
        mat4.translate(modelViewMatrix, modelViewMatrix, [i, 0, 0]);

You might find this article helpful

Note that often the "compute modelView matrix" part is separated into a scene graph or at least partially separated. the scene graph returns "world matrices" which are then combined with the view matrix either in code or in the shader.