webgl2 3D object 翻译

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);