webgl2三维对象转换

Question

我试图分别转换两个3D对象，但失败了，似乎每个翻译都适用于这两个对象。他们正在一起翻译。真正令人困惑的是t1，它正在缩放，它只成功地应用于一个对象，但是它的翻译，t2会影响自身，也会影响另一个对象，翻译t1 .Any help也会受到赞赏。重要守则：

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

您不需要2个属性和2个矩阵一致变量。

创建一个简单的着色器程序：

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

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

在绘制对象之前，绑定顶点数组对象并设置统一：

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