WebGL离屏渲染的核心是创建并绑定自定义帧缓冲区（FBO），使其替代默认屏幕缓冲区作为渲染目标，从而支持后处理等高级效果；关键步骤包括：1. 用gl.createFramebuffer()创建FBO；2. 用gl.bindFramebuffer()切换目标；3. 附加纹理（颜色附件）和/或渲染缓冲区（深度附件）；4. 调用gl.checkFramebufferStatus()确认FBO完整；5. 渲染到FBO后，切回默认缓冲区，用该纹理在全屏四边形上执行后处理着色器。
WebGL离屏渲染的核心是绑定自定义 framebuffer 而非默认屏幕缓冲区
直接渲染到屏幕（即默认帧缓冲）无法做后处理，因为片元着色器输出后就“交出去”了。离屏渲染的第一步，就是用 gl.createFramebuffer() 创建一个新 framebuffer，再用 gl.bindFramebuffer(gl.FRAMEBUFFER, fbo) 切换目标——此后所有 gl.drawArrays() 或 gl.drawElements() 都写入这个 FBO，而不是屏幕。
关键点在于：切换后必须检查 FBO 是否完整，否则后续渲染会静默失败。调用 gl.checkFramebufferStatus(gl.FRAMEBUFFER)，返回值必须是 gl.FRAMEBUFFER_COMPLETE 才能继续。常见不完整原因包括纹理尺寸为 0、附件格式不被支持、缺少颜色或深度附件等。
颜色附件必须用 texture，深度附件推荐用 renderbuffer
颜色附件决定你最终能采样的图像内容，必须用 gl.createTexture() 创建纹理并附加到 gl.COLOR_ATTACHMENT0。注意：gl.texImage2D() 的内部格式（如 gl.RGBA）和像素类型（如 gl.UNSIGNED_BYTE）要匹配，且纹理尺寸需为 2 的幂（除非启用 gl.TEXTURE_WRAP 的 CLAMP_TO_EDGE 并禁用 mipmap）。
深度测试需要深度附件，但纹理对象不高效支持深度数据存储；此时应使用 gl.createRenderbuffer() + gl.renderbufferStorage() 创建 gl.DEPTH_COMPONENT16 或 gl.DEPTH_COMPONENT24 渲染缓冲，并通过 gl.framebufferRenderbuffer() 绑定到 gl.DEPTH_ATTACHMENT。
立即学习“前端免费学习笔记（深入）”；
- 不用深度附件？某些纯后处理（如色彩校正）可省略，但带 3D 几何的场景几乎都得加
- 别把同一纹理既当颜色附件又当采样源——WebGL 不允许读写同一纹理，会触发未定义行为
-
renderbuffer不能被着色器sampler2D采样，只用于深度/模板测试
后处理必须分两步：先渲染到 FBO，再用该纹理全屏四边形绘制
离屏渲染本身不等于后处理。它只是把一帧画面存成纹理；真正实现模糊、灰度、边缘检测等效果，得靠第二个渲染阶段：画一个铺满视口的四边形（两个三角形），把上一步生成的纹理传给片元着色器，在着色器里对 texture2D(u_texture, v_texCoord) 做计算。
这个阶段的着色器才是后处理逻辑所在。例如灰度化只需：
vec4 color = texture2D(u_texture, v_texCoord); float gray = dot(color.rgb, vec3(0.299, 0.587, 0.114)); gl_FragColor = vec4(gray, gray, gray, color.a);
容易踩的坑：
- 忘记在后处理绘制前调用
gl.bindFramebuffer(gl.FRAMEBUFFER, null)切回屏幕缓冲区 - 没设置正确的
gl.viewport()——离屏时设为 FBO 尺寸，后处理时必须设回 canvas 实际宽高 - 顶点坐标没归一化（NDC 范围应为 [-1,1]），导致四边形错位或不可见
WebGL 1.0 下深度纹理不可用，renderbuffer 是唯一可靠选择
如果后处理需要访问深度值（比如景深、SSAO），别试图用 gl.TEXTURE_2D + gl.DEPTH_COMPONENT——WebGL 1.0 不支持可采样的深度纹理（OES_depth_texture 扩展虽存在但兼容性差，Cesium 等主流库默认不启用）。强行使用会导致 gl.checkFramebufferStatus 返回 INCOMPLETE_ATTACHMENT。
务实做法是：用 renderbuffer 存深度，仅用于深度测试；若真需深度图参与后处理，得在离屏渲染阶段额外用一个 RGBA 纹理编码深度值（例如把 depth 写入 color.r），再传给后处理着色器。这会损失精度，但兼容性拉满。
最易被忽略的一点：FBO 和其附件（texture / renderbuffer）生命周期必须同步管理。销毁 FBO 前，务必手动调用 gl.deleteTexture() 和 gl.deleteRenderbuffer()，否则内存泄漏在长时间运行的可视化应用中会快速暴露。
