Question

https://jsfiddle.net/sepoto/Ln7qvv7w/2/

我有一个基础设置来显示具有不同颜色面的立方体。我要做的是设置一个摄像机并应用组合的X轴和Y轴旋转，以便立方体同时围绕两个轴旋转。我设置的矩阵似乎有些问题，因为我看到蓝色的脸看起来不太对劲。有一些示例说明如何使用旧版本的glMatrix完成此操作，但是由于glMatrix库的vec4中的某些更改，示例中的代码不再有效。有没有人知道如何使用最新版本的glMatrix来完成这项工作，因为我已将CDN附加到小提琴上了？

谢谢！

            function drawScene() {

            gl.viewport(0,0,gl.viewportWidth, gl.viewportHeight);

            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

            mat4.ortho( mOrtho, -5, 5, 5, -5, 2, -200);

            mat4.identity(mMove);

            var rotMatrix = mat4.create();

            mat4.identity(rotMatrix);

            rotMatrix = mat4.fromYRotation(rotMatrix, yRot,rotMatrix);

            rotMatrix = mat4.fromXRotation(rotMatrix, xRot,rotMatrix);

            mat4.multiply(mMove, rotMatrix, mMove);

            setMatrixUniforms();

            gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);

            gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

            gl.bindBuffer(gl.ARRAY_BUFFER, triangleColorBuffer);

            gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, triangleColorBuffer.itemSize, gl.FLOAT, false, 0, 0);

            gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);

            yRot += 0.01;

            xRot += 0.01;

        }

Answer 1

顾名思义，fromYRotation()将矩阵初始化为给定的旋转。因此，您需要两个临时矩阵用于部分旋转，然后您可以将它们组合在一起：

var rotMatrix = mat4.create();
var rotMatrixX = mat4.create();
var rotMatrixY = mat4.create();

mat4.fromYRotation(rotMatrixY, yRot);   
mat4.fromXRotation(rotMatrixX, xRot);
mat4.multiply(rotMatrix, rotMatrixY, rotMatrixX);

你的蓝脸表现奇怪的原因是缺少深度测试。在初始化方法中启用它：

gl.enable(gl.DEPTH_TEST);

Answer 2

您不需要使用三个矩阵：

// you should do allocations outside of the renderloop
var rotMat = mat4.create();

// no need to set the matrix to identity as
// fromYRotation resets rotMats contents anyway
mat4.fromYRotation(rotMat, yRot);
mat4.rotateX(rotMat,xRot);

使用glMatrix在WebGL中轨道运行多维数据集

2 个答案: