Question

我正在关注一个教程，尽管有很多资源，但是我仍然不确定为什么要使用 uniformMatrix4v 函数。这是代码段。

var matWorldMatrixLocation = gl.getUniformLocation(program,'mWorld');
    var matViewMatrixLocation = gl.getUniformLocation(program,'mView');
    var matProjMatrixLocation = gl.getUniformLocation(program,'mProj');

    var worldMatrix = new Float32Array(16);
    var viewMatrix = new Float32Array(16);
    var projMatrix = new Float32Array(16);

    mat4.identity(worldMatrix);
    mat4.lookAt(viewMatrix,[0, 0, -5], [0, 0, 0], [0, 1, 0]);
    mat4.perspective(projMatrix,glMatrix.toRadian(45), canvas.width / canvas.clientHeight, 1e-4, 1e4);

    //send matrices to shader
    gl.uniformMatrix4fv(matWorldMatrixLocation, false, worldMatrix);
    gl.uniformMatrix4fv(matViewMatrixLocation, false, viewMatrix);
    gl.uniformMatrix4fv(matProjMatrixLocation, false, projMatrix)

Answer 1

该评论正好说明了为什么// send matrices to shader使用gl.uniformMatrix4v。

如果您不了解什么是制服，则需要read some more tutorials on WebGL。如果您不了解什么是矩阵，则需要read some articles on matrices

简短版本是使用WebGL时，您在GPU上运行称为“着色器”的小程序。在运行着色器之前，需要设置其输入。为此，您需要根据输入的类型使用gl.getUniformLocation或gl.getAttribLocation查找这些输入的位置。

对于制服，您可以根据制服的类型调用gl.uniform???的多种形式中的一种。

对于上面的代码，首先创建3个数组，然后调用mat4函数，这与WebGL完全无关。这就是某些JavaScript数学希望您使用它来生成矩阵的方式。我猜数学库是this one。

它希望您首先创建一个数组，您可以像上面的代码一样手动执行此操作，也可以调用mat4.create。然后，将它们作为第一个参数传递给它的函数。这将使用那些函数应该计算的值填充数组的值。然后将这些数组传递到gl.uniformMatrix4v函数，以在着色器中设置均匀度。

如果您点击上面的链接，它们将完成您自己的3D数学功能，以便您查看它们的功能以及工作方式。

webGL gl.uniformMatrix4v函数

1 个答案: