React Native中使用WebGL(expo-gl)的代码无法渲染正方形是什么原因？

核心错误1：矩阵存储格式与WebGL要求不匹配 #

• mathjs生成的矩阵为行主序存储的DenseMatrix对象，而WebGL的gl.uniformMatrix4fv接口要求传入列主序的扁平化数组，你直接将mathjs矩阵对象直接传入该接口，首先数据格式不符合要求，其次就算展开后行主序的矩阵会被WebGL错误解析，导致实际传到着色器中的变换矩阵完全错误，自然无法渲染出内容。

核心错误2：矩阵传参格式错误 #

你调用gl.uniformMatrix4fv时传入的testTransform是mathjs的矩阵对象，不是WebGL要求的Float32Array类型，WebGL无法正确读取uniform参数的值。

修复步骤 #

1. 新增工具函数将mathjs矩阵转换为符合WebGL要求的数组：

function matrixToWebGLArray(mathMatrix) {
  // 先对行主序的矩阵做转置，适配WebGL列主序要求
  const transposedMatrix = mathMatrix.transpose();
  // 扁平化后转换为Float32Array
  return new Float32Array(transposedMatrix.toArray().flat());
}

2. 修改renderGameBoard函数中矩阵uniform的赋值逻辑：

// 替换原来的gl.uniformMatrix4fv调用
gl.uniformMatrix4fv(glParameters.uniform_modToClip, false, matrixToWebGLArray(testTransform));

额外验证建议 #

如果修复后仍有问题，可临时修改顶点着色器直接输出顶点坐标，验证渲染流程是否正常：

void main(void) {
  // 临时固定输出，测试是否能渲染出右上角的蓝色方块
  gl_Position = vec4(modPosition.x/2.0 - 0.5, modPosition.y/2.0 - 0.5, 0.0, 1.0);
}

如果能正常渲染方块，说明渲染流程无问题，只需排查矩阵相关逻辑即可。

内容的提问来源于stack exchange，提问作者Ste1891