LEARN WGSL BY EXAMPLE从零到可运行入口

WGSL 语法最小示例

用一组最小代码理解 struct、变量、函数、着色器入口和 Compute Shader。

STRUCTRENDERCOMPUTEPIPELINE

WGSL 语法核心

五条规则先建立语言骨架。

使用 struct 定义输入 / 输出数据
使用 @group / @binding 绑定资源
使用 var<uniform> / var<storage> 声明资源
使用 fn 定义函数，属性标记入口
常用类型：f32、u32、vec4<f32>

最小资源声明

struct Params {
  scale: f32,
};

@group(0) @binding(0)
var<uniform> params: Params;

结构体绑定资源 uniform 变量

最小渲染着色器

@vertex 生成三个顶点，@fragment 返回插值后的颜色。

WGSL Render Shader

struct VSOut {
  @builtin(position) position: vec4<f32>,
  @location(0) color: vec4<f32>,
};

@vertex
fn vsMain(@builtin(vertex_index) i: u32) -> VSOut {
  var positions = array<vec2<f32>, 3>(
    vec2<f32>( 0.0,  0.5),
    vec2<f32>(-0.5, -0.5),
    vec2<f32>( 0.5, -0.5),
  );
  var colors = array<vec4<f32>, 3>(
    vec4<f32>(1.0, 0.0, 0.0, 1.0),
    vec4<f32>(0.0, 1.0, 0.0, 1.0),
    vec4<f32>(0.0, 0.0, 1.0, 1.0),
  );
  var out: VSOut;
  out.position = vec4<f32>(positions[i], 0.0, 1.0);
  out.color = colors[i];
  return out;
}

@fragment
fn fsMain(input: VSOut) -> @location(0) vec4<f32> {
  return input.color;
}

最小计算着色器

64 条线程组成一个 workgroup，把 storage buffer 中每个元素乘以 2。

WGSL Compute Shader

@group(0) @binding(0)
var<storage, read_write> data: array<f32>;

@compute @workgroup_size(64)
fn csMain(@builtin(global_invocation_id) id: vec3<u32>) {
  let i = id.x;
  data[i] = data[i] * 2.0;
}

@compute计算着色器入口 @workgroup_size(64)每个工作组 64 个线程 global_invocation_id当前线程的全局索引 storage buffer可读写缓冲区

输入 DATA[1, 2, 3, 4]

CSMAIN 并行执行× 2.0

输出 DATA[2, 4, 6, 8]

一眼看懂执行流程

JS / WebGPU 负责组织资源和命令，WGSL 只描述 GPU 上的程序。

JSWebGPU 侧

{ }ShaderModule

△Pipeline

▤绑定 Buffer

draw / dispatch

渲染着色器计算着色器

△ 处理顶点 / 像素▦ 处理通用并行计算

入口：@vertex + @fragment入口：@compute

常用于三角形、模型常用于粒子、预处理、数据计算

MEMORY CHECKPOINT属性标注（@...）+ 明确类型 + 显式绑定资源 = WGSL 的核心语法风格

进入可运行课程