webgl2三维对象翻译

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