阶段 3 · 3D基础18 分钟

离屏渲染：把上一遍结果当作下一遍输入

多 Pass、Render Texture 与后处理

第一遍渲染到普通纹理，第二遍采样该纹理并施加颜色变换后显示到 Canvas。

LEARNING GOALS

先明确本课目标

创建离屏颜色纹理

在一个提交中记录多个 render pass

实现简单后处理

MENTAL MODEL · 再建立心智模型

渲染目标不一定是屏幕；只要纹理具有 RENDER_ATTACHMENT 与 TEXTURE_BINDING usage，就能在 pass 之间传递图像。

MINIMAL EXAMPLE

为什么先画到纹理，再画到 Canvas？

Render to Texture 把第一遍结果写入普通 GPUTexture，后续 Pass 可把它当作采样输入，实现后处理、阴影、反射或多阶段合成。

最小例子javascript

const offscreen = device.createTexture({
  size: [width, height],
  format,
  usage: GPUTextureUsage.RENDER_ATTACHMENT |
         GPUTextureUsage.TEXTURE_BINDING,
});

// Pass 1: scene -> offscreen
// Pass 2: sample(offscreen) -> canvas

双重 usage 第一遍需要 RENDER_ATTACHMENT，第二遍需要 TEXTURE_BINDING。
Pass 间数据流 第一个 Pass 结束后，纹理才能作为后续 Pass 的输入。
避免同 Pass 反馈 通常不能在同一 Pass 中既写入又采样同一个纹理子资源。

场景颜色先保存在离屏纹理，第二遍可进行灰度、模糊、色调映射等屏幕空间处理。

本课概念

Render-to-Texture Multi-pass Rendering Post-processing Attachment +1 个

●OPTIONAL · 按需查阅完整术语表与概念边界

遇到陌生术语时再展开，不打断主线实验。

展开⌄

命令Render Pass一次渲染阶段，声明颜色/深度附件及其加载保存行为，并记录绘制命令。纹理GPUTextureUsage纹理创建时声明的用途，如 TEXTURE_BINDING、STORAGE_BINDING、RENDER_ATTACHMENT、COPY_SRC/DST。渲染目标Render AttachmentRender Pass 写入的颜色、深度或模板视图。多 PassRender to Texture把渲染结果写入普通纹理，供后续 pass 采样，用于后处理、阴影、反射等。多 PassPost-processing在场景渲染后对中间图像执行颜色校正、模糊、Bloom、扭曲等屏幕空间处理。多 PassMulti-pass Rendering把一帧拆成多个有依赖的 Render/Compute Pass，前一 Pass 的输出成为后一 Pass 输入。资源Resource Usage创建 Buffer/Texture 时声明允许的用途位；资源只有具备相应用途才能参与绑定、复制或附件操作。

LIVE EXPERIMENT · 先获得反馈

边改边运行

浏览器加载后会激活代码编辑器、独立运行环境与实时输出。

本课挑战

实现 ping-pong 高斯模糊。

DEEP DIVE · 实验之后

回到原理，解释刚才发生了什么

先用结果建立反馈，再按运行流程、核心原理和知识关系逐层深入。

CORE IDEA

核心讲解

多 Pass 构成渲染图

阴影、反射、延迟渲染、Bloom 都是“先生成中间资源，再消费中间资源”的图。WebGPU 会验证同一时刻的资源用法。

尺寸与格式是设计决策

中间纹理可与屏幕同尺寸，也可降低分辨率换性能；格式影响精度、带宽和可过滤性。

●OPTIONAL · 迁移时查阅WebGPU 与 WebGL2 对照

主线实验完成后，再用完整映射处理跨平台或跨 API 迁移。

展开⌄

API COMPARISON

两遍渲染的数据流一致：先写中间纹理，再把它作为下一遍输入。

WebGL

Framebuffer 挂载 Texture，第一遍绑定 FBO，第二遍绑定默认 framebuffer 并采样。

WebGPU

中间 GPUTexture 同时声明 RENDER_ATTACHMENT/TEXTURE_BINDING，在两个 pass 间复用 View。

WebGPU 没有长期保存附件集合的 FBO 对象；RenderPass 每次显式描述本次使用的 View。