Sublime Text 可作为高效编辑器开发 WebGPU 应用，需配置 WGSL 语法高亮、组织 HTML/JS/WGSL 项目结构、注意 WGSL 类型声明与绑定规则，并通过本地服务器+浏览器刷新实现快速验证。
Sublime Text 本身不直接支持 WebGPU 运行或 WGSL 着色器编译，但它可以作为高效、轻量的代码编辑器来编写 WebGPU 应用和 WGSL 着色器。要真正绘制 3D 图形，你需要搭配浏览器环境（如 Chrome/Edge 113+）、JavaScript 前端逻辑，以及正确的构建/调试流程。下面说清楚怎么用 Sublime 搭配 WebGPU 高效开发：
✅ 配置 Sublime 支持 WGSL 语法高亮
WGSL 是 WebGPU 的官方着色器语言，但 Sublime 默认不识别。你需要手动添加语法支持：
- 安装 Package Control（如果还没装）：按 Ctrl+Shift+P → 输入 Install Package Control → 回车
- 再按 Ctrl+Shift+P → 输入 Package Control: Install Package → 搜索并安装 WGSL（推荐使用 WGSL Syntax 或 WebGPU WGSL 插件）
- 安装后，将
.wgsl文件关联为 WGSL 语法：右下角点击当前语法名 → Open all with current extension as… → 选 WGSL
✅ 在 Sublime 中组织 WebGPU 项目结构
一个典型的 WebGPU 3D 示例（比如绘制旋转立方体）包含三类文件，Sublime 很适合分标签管理：
-
index.html：基础页面容器，含
<canvas>和脚本引入 - main.js：初始化 GPU，加载管线，提交渲染命令
-
shader.wgsl：顶点着色器（定义位置/法线） + 片元着色器（定义颜色/光照），用
@vertex/@fragment标记入口
建议把它们放在同一文件夹下，用 Sublime 的 Project → Save Project As… 保存为 .sublime-project，方便快速切换和符号跳转。
✅ 编写 & 调试 WGSL 着色器的关键点
WGSL 不是 GLSL，语法更接近 Rust。在 Sublime 里写时注意这些易错细节：
- 变量必须显式声明类型，例如：
var pos: vec4f = …，不能省略: vec4f - 矩阵乘法用
*，但向量-矩阵顺序是matrix * vector（列主序） - 采样器和纹理需成对绑定，WGSL 中用
@group(0) @binding(0)显式声明，JS 中也要严格对应 bind group layout - Sublime 不报错，但浏览器控制台会提示 WGSL 编译失败 —— 所以写完立刻刷新页面看
console.error
✅ 快速验证与热重载（无需完整构建工具）
WebGPU 开发初期不用 Webpack/Vite。用 Sublime + 浏览器可实现极简工作流：
- 用 VS Code Live Server 或 Python 快速起本地服务：
python3 -m http.server 8000 - Sublime 保存文件（Ctrl+S）→ 切换到浏览器按 F5 刷新即可看到 WGSL/JS 修改效果
- 开启 Chrome DevTools → Rendering 面板 → 勾选 WebGPU Debug Layers，可捕获管线错误、资源泄漏等底层问题
基本上就这些。Sublime 不是 IDE，但胜在快、稳、干净——写 WGSL 时少干扰，查 JS 逻辑时能配合 Console 精准定位，对学习 WebGPU 渲染管线和逐步构建 3D 场景非常友好。
