WebGL单反射镜面实现：玻璃地板反射及代码报错排查

需求与问题背景 #

我正在用WebGL开发一个走廊场景的复杂动画：墙面带有音频分析器，侧边装有灯带，但目前地板区域显得空旷，想要将地板做成玻璃质感，实现墙面在地板表面的反射效果。作为WebGL新手，我能完成基础场景渲染，但完全不清楚反射效果的实现方法，搜索后也没找到可行的解决方案。

更新：代码报错问题 #

我尝试编写了实现反射的代码，但无法运行，报错提示：no buffer is bound to enable attribute，请帮忙检查是否存在拼写错误或流程问题？

相关代码 #

JavaScript绘制函数

function drawMirrors(x1, y1, z1, x2, y2, z2) {
    let shader = ResourceManager["shaders"]["blit_frame"];
    let buffer = gl.createBuffer();
    let posAtt = gl.getAttribLocation(shader, "vertPosition");
    let prjUni = gl.getUniformLocation(shader, "projMat");
    let vewUni = gl.getUniformLocation(shader, "viewMat");
    let scnUni = gl.getUniformLocation(shader, "scneMat");
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
    x1, y1, z1, x1, y1, z2, x2, y1, z2, x1, y1, z1, x2, y1, z2, x2, y1, z1,
    x1, y2, z1, x1, y2, z2, x2, y2, z2, x1, y2, z1, x2, y2, z2, x2, y2, z1
    ]), gl.STATIC_DRAW);
    gl.vertexAttribPointer(posAtt, 3, gl.FLOAT, gl.FALSE, 3 * Float32Array.BYTES_PER_ELEMENT, 0);
    gl.enableVertexAttribArray(posAtt);
    gl.bindTexture(gl.TEXTURE_2D, mirrorTex); // mirrorTex是绑定到包含两个镜像视角的帧缓冲的纹理
    gl.activeTexture(gl.TEXTURE0);
    gl.useProgram(shader);
    gl.uniformMatrix4fv(prjUni, gl.FALSE, projMat);
    gl.uniformMatrix4fv(vewUni, gl.FALSE, viewMat);
    gl.uniformMatrix4fv(scnUni, gl.FALSE, scneMat);
    gl.drawArrays(gl.TRIANGLES, 0, 12);
    gl.deleteBuffer(buffer);
}

顶点着色器

precision mediump float;

attribute vec3 vertPosition;

uniform mat4 projMat;
uniform mat4 viewMat;
uniform mat4 scneMat;

void main() {
    gl_Position = projMat * viewMat * scneMat * vec4(vertPosition, 1.0);
}

片元着色器

precision mediump float;

uniform sampler2D Sampler0;

void main() {
    vec4 color = texture2D(Sampler0, gl_FragCoord.xy/2.0+1.0);
    if (color.a == 0.0) discard;
    gl_FragColor = color;
}

问题排查与解决方案 #

1. 报错直接原因：着色器程序绑定顺序错误 #

WebGL中，顶点属性的配置（vertexAttribPointer、enableVertexAttribArray）是与当前激活的着色器程序绑定的。你现在的代码是先配置顶点属性，再调用gl.useProgram(shader)，这会导致属性配置无法关联到正确的程序，触发no buffer is bound to enable attribute错误。

修正步骤：

• 先调用gl.useProgram(shader)，再执行获取属性位置、绑定缓冲、配置顶点属性的操作。

2. 其他代码问题 #

• 纹理激活顺序错误：gl.activeTexture(gl.TEXTURE0)应该在gl.bindTexture之前执行，确保绑定的纹理到正确的纹理单元。
• 缺失纹理采样器的uniform赋值：片元着色器中的Sampler0需要指定使用的纹理单元（这里是0），需要添加一行代码：

  gl.uniform1i(gl.getUniformLocation(shader, "Sampler0"), 0);
  

• 拼写错误：scneMat是sceneMat的笔误，虽然当前着色器和JS中保持了一致，但建议修正为规范的命名，避免后续混淆。
• 顶点数据冗余：你当前的顶点数据绘制了两个矩形，地板只需要一个平面，可简化顶点数据减少绘制开销。

3. 玻璃反射实现的核心思路 #

玻璃质感反射需要两步渲染：

• 第一步：渲染反射场景：通过矩阵变换将相机沿地板平面镜像，把场景渲染到一个帧缓冲纹理（即你的mirrorTex）。
• 第二步：渲染地板：使用包含反射场景的纹理，结合地板的基础颜色/透明度，混合出玻璃反射效果，同时可以添加菲涅尔效应增强真实感（视角越倾斜，反射越强）。

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