webgl2 3D对象翻译

Question

我尝试分别转换两个 3D 对象但失败了，似乎每个转换都适用于两个对象。他们一起翻译。真正令人困惑的是 t1，它正在缩放，它只成功地应用于一个对象，但它的平移 t2 会影响自身和另一个对象，平移 t1 也是如此。感谢任何帮助。重要代码：

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

webgl2 3D对象翻译

webgl2 3D object translation

javascript

glsl

webgl

translation