阶段 4 · 计算基础18 分钟
Storage Texture：计算着色器直接写图像
textureStore、格式限制与全屏显示
计算着色器逐像素写入 rgba8unorm 存储纹理，再由渲染管线采样显示。
LEARNING GOALS
先明确本课目标
1
创建 STORAGE_BINDING 纹理
2
使用 textureStore
3
在计算与渲染之间共享纹理
MENTAL MODEL · 再建立心智模型
Storage Texture 像二维/三维结构化输出数组，适合图像处理、体积数据和程序化纹理。
MINIMAL EXAMPLE
计算着色器怎样直接写一张图？
Storage Texture 是可由着色器按整数像素坐标写入的纹理视图。格式与访问模式写在 WGSL 类型中，并必须与创建纹理和 BindGroup 的配置一致。
wgsl@group(0) @binding(0)
var outputImage: texture_storage_2d<rgba8unorm, write>;
@compute @workgroup_size(8, 8)
fn main(@builtin(global_invocation_id) id: vec3u) {
let size = textureDimensions(outputImage);
if (any(id.xy >= size)) { return; }
textureStore(outputImage, id.xy, vec4f(1.0, 0.2, 0.5, 1.0));
}- 整数坐标 textureStore 使用像素坐标，不使用归一化 UV，也不需要 Sampler。
- 边界判断 dispatch 通常向上取整，超出纹理尺寸的 invocation 必须返回。
- usage 匹配 GPUTexture 创建时必须包含 STORAGE_BINDING。
Compute Pass 可以生成程序纹理，随后由 Render Pass 采样显示。
OPTIONAL · 按需查阅完整术语表与概念边界遇到陌生术语时再展开，不打断主线实验。
展开⌄
GPU 计算Storage Texture可被计算着色器通过 textureStore 写入的纹理视图，格式和访问模式必须显式声明。GPU 数据流Compute-to-RenderCompute Pass 写入 Buffer 或 Texture，后续 Render Pass 直接读取该结果而不经过 CPU 读回。GPU 计算textureStore按整数 texel 坐标把一个值写入 Storage Texture，不使用 Sampler 或归一化 UV。GPU 计算Image Processing对图像像素执行卷积、颜色变换、生成或分析等并行操作，常把二维 global ID 映射到像素。纹理TexelTexture Element（纹理元素）是纹理网格中的一个存储单元；它可能保存颜色、深度或其他格式化数据，不必与屏幕像素一一对应。GPU 计算Storage Texture AccessStorage Texture 绑定声明的访问权限，例如 write-only、read-only 或 read-write；权限必须与着色器实际操作和设备能力相符。
LIVE EXPERIMENT · 先获得反馈
边改边运行
浏览器加载后会激活代码编辑器、独立运行环境与实时输出。
本课挑战
实现一个两遍的 Game of Life。
回到原理，解释刚才发生了什么
先用结果建立反馈，再按运行流程、核心原理和知识关系逐层深入。
CORE IDEA
核心讲解
可写格式受限制
WGSL 必须在类型中写明格式与访问模式，例如 texture_storage_2d<rgba8unorm, write>；布局也要匹配。
像素调度
常用二维工作组覆盖纹理尺寸，边界 invocation 必须检查 textureDimensions。
OPTIONAL · 迁移时查阅WebGPU 与 WebGL2 对照主线实验完成后，再用完整映射处理跨平台或跨 API 迁移。
展开⌄
WebGL 通过 Fragment 输出写附件；WebGPU Compute 可按坐标直接 textureStore。
WebGL
把目标纹理附加到 FBO，运行覆盖目标区域的绘制，让片元 shader 输出颜色。
WebGPU
Storage Texture 以显式格式和访问模式绑定，Compute invocation 直接写 texel。
图像计算不再需要全屏三角形；dispatch 尺寸应直接覆盖纹理，并自行处理边界。