webGL gl.uniformMatrix4v 函数

Question

我正在学习教程，虽然有资源，但我仍然不确定为什么我们使用 uniformMatrix4v function.Here 的代码片段。

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

评论准确地说明了为什么使用 gl.uniformMatrix4v // send matrices to shader。

如果你不明白什么是制服，那么你需要read some more tutorials on WebGL. If you don't understand what matrices are then you need to read some articles on matrices

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

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

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

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

如果您点击上面的链接，他们将制作您自己的 3D 数学函数，以便您了解它们的作用和工作原理。

webGL gl.uniformMatrix4v 函数

webGL gl.uniformMatrix4v function

webgl

webgl2