WebGL多3D对象绘制异常：添加地板缓冲区导致渲染失败

核心原因 #

WebGL的顶点缓冲区、属性绑定、Shader Program都是全局状态。你创建地板的缓冲区和Program时，覆盖了之前猴子模型的全局绑定状态，导致后续渲染猴子时，WebGL用的是地板的配置，自然渲染不出猴子。另外，两个Program的顶点属性位置可能不匹配，或者你没在渲染前重新切换到猴子的状态。

具体修复方法 #

1. 用VAO隔离每个模型的顶点状态 #

不管是WebGL 1.0（需启用OES_vertex_array_object扩展）还是2.0，VAO都能帮你把每个模型的顶点缓冲区、属性指针、索引缓冲区状态打包保存，渲染时直接绑定对应VAO就行，彻底避免全局状态混乱。

示例代码：

// 初始化猴子VAO
const monkeyVAO = gl.createVertexArray();
gl.bindVertexArray(monkeyVAO);
// 绑定猴子顶点缓冲区，设置属性指针
gl.bindBuffer(gl.ARRAY_BUFFER, monkeyVertexBuffer);
const monkeyPosLoc = gl.getAttribLocation(monkeyProgram, 'aPosition');
gl.vertexAttribPointer(monkeyPosLoc, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(monkeyPosLoc);
// 绑定猴子索引缓冲区（如果用索引绘制）
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, monkeyIndexBuffer);
gl.bindVertexArray(null);

// 初始化地板VAO
const floorVAO = gl.createVertexArray();
gl.bindVertexArray(floorVAO);
gl.bindBuffer(gl.ARRAY_BUFFER, floorVertexBuffer);
const floorPosLoc = gl.getAttribLocation(floorProgram, 'aPosition');
gl.vertexAttribPointer(floorPosLoc, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(floorPosLoc);
gl.bindVertexArray(null);

// 渲染猴子
gl.useProgram(monkeyProgram);
gl.bindVertexArray(monkeyVAO);
// 传入视图、模型矩阵等uniform
gl.drawElements(gl.TRIANGLES, monkeyIndexCount, gl.UNSIGNED_SHORT, 0);

// 渲染地板
gl.useProgram(floorProgram);
gl.bindVertexArray(floorVAO);
// 传入uniform
gl.drawArrays(gl.TRIANGLES, 0, floorVertexCount);

2. 手动切换全局状态（不用VAO的情况下） #

如果不想用VAO，每次渲染前必须手动重置对应模型的状态：

// 渲染猴子前
gl.useProgram(monkeyProgram);
// 重新绑定猴子的顶点缓冲区，设置属性指针
gl.bindBuffer(gl.ARRAY_BUFFER, monkeyVertexBuffer);
const monkeyPosLoc = gl.getAttribLocation(monkeyProgram, 'aPosition');
gl.vertexAttribPointer(monkeyPosLoc, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(monkeyPosLoc);
// 绑定猴子的索引缓冲区
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, monkeyIndexBuffer);
// 执行绘制
gl.drawElements(gl.TRIANGLES, monkeyIndexCount, gl.UNSIGNED_SHORT, 0);

3. 统一属性位置避免冲突 #

如果两个Shader的顶点属性名相同（比如都叫aPosition），可以在链接Program前手动指定属性位置，确保两个Program的属性位置一致，这样切换Program时不用重新设置指针：

// 链接猴子Program前
gl.bindAttribLocation(monkeyProgram, 0, 'aPosition');
gl.linkProgram(monkeyProgram);

// 链接地板Program前
gl.bindAttribLocation(floorProgram, 0, 'aPosition');
gl.linkProgram(floorProgram);

4. 加错误检查定位问题 #

在代码里加这些检查，能快速找到具体哪里出问题：

• 检查Program是否链接成功：if (!gl.getProgramParameter(program, gl.LINK_STATUS)) console.log(gl.getProgramInfoLog(program))
• 检查缓冲区创建是否成功：创建后用gl.getError()看有没有错误
• 检查属性是否存在：gl.getAttribLocation(program, 'aPosition') 如果返回-1，说明Shader里没有这个属性名

关键提醒 #

WebGL没有“模型状态隔离”的概念，所有状态都是全局的。每次绘制前，必须确保当前的Program、缓冲区、属性配置完全对应要渲染的模型，不然就会出现状态混乱导致的渲染失效。

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