RenderTarget + 全屏四边形

很多效果并不是在“物体表面”完成的，而是在整张屏幕上对最终图像做处理，例如灰度、模糊、泛光、描边、色彩校正等。这类技术通常称为“后处理”。

本节我们实现一个最小的两阶段渲染流程：

1. 先把主场景渲染到 WebGLRenderTarget（离屏渲染）
2. 再用一个全屏四边形，把 renderTarget.texture 作为输入纹理进行二次处理

目标

• 学会使用 renderer.setRenderTarget(...) 控制渲染输出
• 理解“后处理 = 把上一阶段结果当纹理采样”
• 认识全屏四边形的基本写法（最简单的顶点着色器之一）

代码要点

文件：Application.ts

• 第一次渲染：
  • renderer.setRenderTarget(renderTarget)
  • renderer.render(worldScene, camera)
• 第二次渲染：
  • renderer.setRenderTarget(null)
  • renderer.render(screenScene, screenCamera)

文件：ScreenQuad.ts

片元着色器通过 texture2D(tDiffuse, vUv) 采样场景纹理，并做简单的灰度与暗角处理。

动手练习

• 把灰度混合系数从 0.55 改成 0.0 或 1.0，观察效果
• 去掉暗角（vignette）相关计算，验证每一项的作用
• 尝试做一个“颜色反相”：outColor = 1.0 - color;

小结

你已经掌握了最基本的后处理结构。下一节我们将学习 Instancing：用一次 drawcall 绘制大量物体，这是性能优化中非常重要的一环。