如何用原生WebGL替代twgl.setUniforms为创建的纹理设置Uniform？

要替换twgl.setUniforms的逻辑，用原生WebGL完成纹理Uniform的设置，需要分三步操作：

• 获取Uniform变量的位置：通过gl.getUniformLocation拿到着色器中u_projectedTexture的位置，前提是当前已绑定对应的着色器程序。
• 绑定纹理到纹理单元：WebGL中纹理需绑定到特定纹理单元，先激活目标单元，再将创建好的纹理绑定到该单元。
• 传递纹理单元索引给Uniform：把激活的纹理单元编号传给Uniform变量，着色器就能通过这个索引访问到对应纹理。

完整替换代码示例 #

// 确保当前使用目标着色器程序
gl.useProgram(program);

// 1. 获取uniform位置
const projectedTextureLoc = gl.getUniformLocation(program, 'u_projectedTexture');

// 2. 激活并绑定纹理到纹理单元（这里用TEXTURE0，也可使用TEXTURE1等其他单元）
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, depthTexture);
// 若depthTexture是特殊类型纹理（如立方体贴图），需对应调整绑定目标，比如gl.TEXTURE_CUBE_MAP

// 3. 将纹理单元索引传递给uniform
gl.uniform1i(projectedTextureLoc, 0); // 0对应激活的TEXTURE0

额外注意事项 #

• 若使用多个纹理，需为每个纹理分配不同的纹理单元（如TEXTURE0、TEXTURE1...），并对应传递不同索引给各自的Uniform。
• 深度纹理的参数配置（如过滤方式、包裹模式）需在绑定前完成，示例如下：

gl.bindTexture(gl.TEXTURE_2D, depthTexture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

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