如何通过WebGL的uniform变量在HTML中传递变换矩阵参数给着色器？

本文共计928个文字，预计阅读时间需要4分钟。

在WebGL中，必须先使用`gl.getUniformLocation`获取uniform变量的位置（location），再使用`gl.uniformMatrix4fv`传递值。如果变量名拼写错误、着色器未编译成功或变量未被使用，`gl.getUniformLocation`会返回`null`——这是最常见的陷阱。

• 确保顶点着色器里声明了 uniform mat4 u_modelViewProjection;，且该变量在 main 中被实际使用（否则编译器可能优化掉）
• 调用 gl.getUniformLocation 后立刻检查返回值：

  const loc = gl.getUniformLocation(program, 'u_modelViewProjection');<br>if (loc === null) { console.error('Uniform not found: u_modelViewProjection'); }

• 不要在着色器里用 #define 或条件编译隐藏该 uniform，否则它可能“存在但不可见”

为什么必须用 gl.uniformMatrix4fv 而不是 gl.uniform4fv

矩阵是 4×4 共 16 个浮点数，gl.uniform4fv 只能传 4 个分量，直接用会导致数据错位、渲染异常。WebGL 提供专用函数处理矩阵布局，且默认按列主序（column-major）接收数据。