webgl2 3D object translation

Question

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 :

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, "u_mvp1"),
    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, "u_mvp2"),
    gl.FALSE,
    flatten(changedMvpmodelMatrix2));

  
  gl.drawArrays(gl.TRIANGLES, 0, vertexCounter);

html:

          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) 

                ;

Answer 1

You don't need 2 attributes and 2 matrix uniform variables.

Create a simple shader program:

layout(location = 0) in vec3 a_position;
      
uniform mat4 u_mvp;

void main() 
{
    gl_Position = u_mvp * a_position; 
}

Bind the Vertex Array Object and set the uniform before drawing the object:

gl.bindVertexArray(vao2);
gl.uniformMatrix4fv(
    gl.getUniformLocation(program, "u_mvp"),
    gl.FALSE,
    flatten(changedMvpmodelMatrix1));
gl.drawArrays(gl.TRIANGLES, 0, 18); 

gl.bindVertexArray(vao1);
gl.uniformMatrix4fv(
    gl.getUniformLocation(program, "u_mvp"),
    gl.FALSE,
    flatten(changedMvpmodelMatrix2));
gl.drawArrays(gl.TRIANGLES, 0, vertexCounter);