← 02 实验索引

三种着色器，一个三角形

这一页把 @compute、@vertex、@fragment 串在同一个三角形上： 画三角形只需顶点与片段两种着色器。本页额外加入计算着色器，先生成坐标，再交给绘制。每一步都是真实调用。

① 分工速查

@vertex@fragment@compute
在哪条管线上 渲染管线，第 1 段渲染管线，第 2 段独立计算管线，可为渲染准备数据
谁决定跑几次 draw(3) → 3 次 由光栅化等决定，覆盖数量不等于精确调用次数 本例 1 个工作组 × 每组 3 个调用
本例使用的输入 @builtin(vertex_index) fs_pos 读取 @builtin(position) 帧缓冲位置 @builtin(global_invocation_id)
返回什么 @builtin(position)：裁剪空间坐标 @location(0)：一个颜色 没有返回值
怎么输出 本例通过返回值向后续阶段输出 只能写内存（storage buffer / 纹理）
能不能写 storage 不能，绑定只允许 uniform 或 read-only-storage 能（本例未用）能，var<storage, read_write>
必须带的属性 ——@workgroup_size(...)，少了编译不过

表格总结本例用法。顶点阶段不能写 storage buffer，但可以修改局部变量；计算入口没有返回值，仍可用 return; 提前结束。

② 跑一遍：计算算顶点 → 顶点读 → 片段上色

JavaScript 将同一个 buffer 绑定给两条管线，先提交计算，再提交绘制。读回 CPU 只是为了显示数字，绘制仍直接读取 GPU 上的原数据。试把 scale 调到 0.50：顶部坐标应为 (0, 0.25)。

    先点「下一步」。第 ② 步之后可以拖 scale，看顶点被重新算出来。

    ③ 计算与渲染源码（三种着色器入口）

    真实返回值