WebGPU 开发者福音！在 VS Code 中实时预览你的WGSL着色器作品

为什么要做这个插件？

WebGPU 是下一代 Web 图形标准，而 WGSL（WebGPU Shading Language）是其着色器语言。但在开发 WGSL 时，由于WebGPU API的复杂性，哪怕是一个最简单的着色器效果，也需要写大量的js代码才能在浏览器中看到效果，而着色器的热更新也非常麻烦，往往得手动刷新浏览器才能看到修改后的效果，另外调试起来也很不友好，着色器错误往往不会直接报错，而是在控制台显示警告，开发体验不好。

而 WGSL Preview 就是为了解决这些问题而诞生的。

核心特性

1. 实时预览 & 热重载

在编辑器右侧直接显示渲染结果，修改代码后自动刷新，无需手动刷新浏览器。

2. 内置 Uniforms

插件内置了 6 个常用的 uniform 变量，开箱即用：

变量名	类型	说明
`time`	f32	时间
`resolution`	vec2	画布分辨率
`mouse`	vec2	鼠标位置
`frame`	f32	帧计数器
`date`	vec4	当前日期时间
`keyboard`	vec4	方向键状态

3. 纹理 & 采样器支持

轻松加载 PNG/JPEG/WebP 纹理，支持自定义采样器参数。

4. 自定义 Uniforms

支持完整的 WGSL uniform 类型：标量（i32/f32等等）、向量（vec2/vec3/vec4）、矩阵（mat2x2/mat3x3/mat4x4），自动处理 std140 布局和对齐。

5.实时错误信息显示

着色器有错误时，会直接将详细的错误信息显示在界面上。

6. 性能监控

可选的 FPS 和渲染时间显示，帮你优化 shader 性能。

技术亮点

std140 布局自动处理

WGSL 的 uniform buffer 需要遵循 std140 标准布局，手动计算偏移和对齐非常容易出错。插件自动处理：

标量对齐：f32/i32/u32 对齐到 4 字节
向量对齐：vec2 对齐到 8 字节，vec3/vec4 对齐到 16 字节
矩阵转置：自动将行优先矩阵转为列优先存储
整数类型：正确处理整数到浮点数的位模式转换

响应式设计

修改 shader 代码 → 自动重渲染
修改配置文件 → 立即生效
切换文件 → 自动切换预览

🚀 快速上手

安装

在 VS Code 扩展市场搜索 "WGSL Preview" 或使用命令：

bash 复制代码

code --install-extension taiyuuki.vscode-wgsl-renderer

基础示例

创建一个 shader.wgsl 文件：

wgsl 复制代码

struct VSOut {
    @builtin(position) pos: vec4<f32>,
    @location(0) uv: vec2<f32>,
}

@vertex
fn vs_main(@location(0) p: vec3<f32>) -> VSOut {
    var o: VSOut;
    o.pos = vec4<f32>(p, 1.0);
    o.uv = p.xy * 0.5 + vec2<f32>(0.5, 0.5);
    o.uv.y = 1.0 - o.uv.y;
    return o;
}

@fragment
fn fs_main(@location(0) uv: vec2<f32>) -> @location(0) vec4<f32> {
    // 创建一个渐变效果
    let color = vec3<f32>(uv, 0.5);
    return vec4<f32>(color, 1.0);
}

按 Ctrl+Shift+P，输入 WGSL: Preview，即可看到实时渲染效果！

使用内置 Uniforms

创建与着色器文件同名的配置文件 shader.json：

json 复制代码

{
  "uniforms": [
    { "name": "time", "type": "f32", "builtin": true },
    { "name": "resolution", "type": "vec2<f32>", "builtin": true },
    { "name": "mouse", "type": "vec2<f32>", "builtin": true }
  ],
  "bindings": [
    { "name": "uniforms", "type": "uniform", "binding": 0 }
  ]
}

Shader 代码：

wgsl 复制代码

struct Uniforms {
    time: f32,
    resolution: vec2<f32>,
    mouse: vec2<f32>,
}

@group(0) @binding(0) var<uniform> u: Uniforms;

@fragment
fn fs_main(@location(0) uv: vec2<f32>) -> @location(0) vec4<f32> {
    // 随时间变化的颜色
    let r = 0.5 + 0.5 * sin(u.time);
    let g = 0.5 + 0.5 * cos(u.time * 0.7);

    // 鼠标交互
    let dist = distance(uv * u.resolution, u.mouse);
    let glow = 1.0 - smoothstep(0.0, 100.0, dist);

    return vec4<f32>(r + glow, g + glow, 0.5, 1.0);
}

📦 完整配置示例

json 复制代码

{
  "canvas": {
    "width": 800,
    "height": 600
  },
  "showStats": true,
  "entryPoints": {
    "vertex": "vs_main",
    "fragment": "fs_main"
  },
  "uniforms": [
    { "name": "time", "type": "f32", "builtin": true },
    { "name": "resolution", "type": "vec2<f32>", "builtin": true },
    { "name": "myColor", "type": "vec3<f32>", "value": [1.0, 0.5, 0.2] },
    { "name": "myMatrix", "type": "mat4x4<f32>", "value": [1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1] }
  ],
  "textures": [
    { "name": "myTexture", "path": "./image.png" }
  ],
  "bindings": [
    { "name": "uniforms", "type": "uniform", "binding": 0 },
    { "name": "mySampler", "type": "sampler", "binding": 1 },
    { "name": "myTexture", "type": "texture", "binding": 2 }
  ]
}

功能展望

此插件的实现主要得益于我自己写的一个多通道WGSL渲染器 taiyuuki/wgsl-renderer ，但VS Code插件目前还只支持单通道渲染，如果有需求欢迎提交反馈，后续我会将对多通道的支持也覆盖上。

反馈与建议

如果你在使用过程中遇到任何问题，或有功能建议，欢迎：

在 GitHub Issues 提问
在此留言

Star ⭐ 支持一下，让更多 WGSL 开发者受益！

WebGPU 开发者福音！在 VS Code 中实时预览你的WGSL着色器作品