WebGL绘制四边形后纹理立方体丢失纹理的问题及解决

问题场景 #

原本渲染正常的带纹理立方体，在调用自定义的drawQuad函数绘制一个使用不同纹理的调试四边形后，立方体纹理消失。当前渲染流程如下：

// 绘制纹理立方体
gl.render(scene, camera);
 
// 在屏幕上绘制四边形（用于调试），该纹理与立方体纹理不同  
drawQuad(tex);

drawQuad内部伪代码：

setupVertexBuffer();
gl.activeTexture(...);
gl.bindTexture(...);
gl.drawArrays(...);
gl.bindTexture(null);

我的猜测与尝试 #

我怀疑问题出在gl.bindTexture操作替换了TEXTURE0的纹理绑定（设为null或其他纹理），导致后续渲染立方体时纹理丢失或显示错误（若猜测有误请指正）。同时我有疑问：WebGL难道不应该在每次渲染前重新绑定几何体的纹理吗？

尝试过两种解决方法，但都无效：

1. 渲染场景前重新绑定立方体纹理：

cube.map.texture = cubeTexture;
gl.render(scene, camera);

2. 在drawQuad中绑定新纹理前备份旧纹理：

const lastTex = gl.getParameter(gl.TEXTURE_BINDING_2D);

但lastTex始终返回undefined。

请问如何让立方体和四边形都能正常渲染？

解决方案 #

核心问题分析 #

你的猜测方向正确，但细节有偏差：WebGL的纹理绑定是基于当前激活的纹理单元的。你在drawQuad中调用gl.activeTexture(...)切换了纹理单元，绑定新纹理后又将该单元的绑定设为null，但没有切回原本的纹理单元（比如默认的TEXTURE0），导致后续渲染立方体时依赖的纹理单元状态被破坏。

另外，gl.getParameter(gl.TEXTURE_BINDING_2D)获取的是当前激活纹理单元上的2D纹理绑定，如果调用前没激活正确的单元，自然会得到undefined。

具体修复步骤 #

1. 在drawQuad中完整恢复WebGL状态
   修改drawQuad函数，先保存当前激活的纹理单元和对应绑定的纹理，绘制完成后完全恢复原状态：

   function drawQuad(tex) {
     // 保存当前全局状态
     const originalActiveUnit = gl.getParameter(gl.ACTIVE_TEXTURE);
     const originalBoundTex = gl.getParameter(gl.TEXTURE_BINDING_2D);
   
     setupVertexBuffer();
     // 使用独立的纹理单元（比如TEXTURE1）绘制调试四边形，避免干扰默认单元
     gl.activeTexture(gl.TEXTURE1);
     gl.bindTexture(gl.TEXTURE_2D, tex);
     gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); // 假设是三角带绘制四边形
     // 恢复到进入函数前的状态
     gl.bindTexture(gl.TEXTURE_2D, originalBoundTex);
     gl.activeTexture(originalActiveUnit);
   }
   

2. 避免纹理单元冲突
   如果你必须使用和立方体相同的纹理单元（比如TEXTURE0），那么在drawQuad绘制完成后，需要将立方体纹理重新绑定回该单元，而不是设为null：

   function drawQuad(tex) {
     setupVertexBuffer();
     gl.activeTexture(gl.TEXTURE0);
     // 保存原绑定的纹理
     const originalTex = gl.getParameter(gl.TEXTURE_BINDING_2D);
     gl.bindTexture(gl.TEXTURE_2D, tex);
     gl.drawArrays(...);
     // 恢复原纹理绑定
     gl.bindTexture(gl.TEXTURE_2D, originalTex);
   }
   

3. 确保渲染框架的状态独立性
   如果你使用的是封装后的WebGL框架（如Three.js），框架通常会在渲染前自动设置所需的纹理状态，但手动修改全局WebGL状态后，框架不会自动恢复。因此自定义绘制函数必须严格做到“状态隔离”——进入时保存状态，退出时恢复状态。

关键说明 #

WebGL是全局状态机，所有绑定、激活操作都会持续影响后续绘制，直到再次修改。任何自定义绘制逻辑都必须保证不污染全局状态，否则会导致后续渲染出现异常。

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