title: webgl2 3D object translation
body: <p>I try to transform two 3D objects separately and I failed, it seems each translation is apply to both objects . They are translating together. And what really confusing is t1,which is scaling,it  applys to only one object successfully , but its translation ,t2 affects itself and also the another object ,and so do the translation t1 .Any help is appreciated.
  The important codes :</p>
  <pre><code>gl.bindVertexArray(vao2);
  
    var t1 = mat4(2.0, 0.0, 0.0, 0.0,
      0.0, 1.0, 0.0, 0.0,
      0.0, 0.0, 2.0, 0.0,
      0.0, 0.0, 0.0, 1.0);
    
    var t2 = translate( 0.0, -0.5, 0.0 );
  
    let changedmodelMatrix1 = mat4(1.0)
    changedmodelMatrix1 =mult(t2,mult(t1,modelMatrix));
    let changedMvpmodelMatrix1 = mult(mult(projectionMatrix, viewMatrix), changedmodelMatrix1);
  
    gl.uniformMatrix4fv(
      gl.getUniformLocation(program, &quot;u_mvp1&quot;),
      gl.FALSE,
      flatten(changedMvpmodelMatrix1));
  
    gl.drawArrays(gl.TRIANGLES, 0, 18); 
  
  
  
    gl.bindVertexArray(vao1);
  
    
    var t3 = translate(0.0, 0.3, 0.0);
    let changedmodelMatrix2 = mat4(1.0);
    changedmodelMatrix2 = mult(t3,modelMatrix);
    let changedMvpmodelMatrix2 = mult(mult(projectionMatrix, viewMatrix), changedmodelMatrix2);
  
    gl.uniformMatrix4fv(
      gl.getUniformLocation(program, &quot;u_mvp2&quot;),
      gl.FALSE,
      flatten(changedMvpmodelMatrix2));
  
    
    gl.drawArrays(gl.TRIANGLES, 0, vertexCounter);
  </code></pre>
  <p>html:</p>
  <pre><code>          layout(location = 0) in vec3 a_position;
            layout(location = 1) in vec4 a_teapotposition;
        
            uniform mat4 u_mvp1;
            uniform mat4 u_mvp2;
                    
  
            void main() {
             
              gl_Position = u_mvp2 * 
                     a_teapotposition   
                      +
                       u_mvp1 *
                    vec4(a_position, 1.0) 
  
                  ;
  </code></pre>