getContext('webgpu')返回null主因是canvas状态异常或浏览器未启用WebGPU；需显式设置width/height属性、确保DOM挂载、Chrome启用chrome://flags/#unsafe-webgpu，且初始化顺序须为：获adapter→requestDevice→configure。
getContext('webgpu') 返回 null，不是代码写错了，而是 canvas 或浏览器没配好——先解决这个，再谈渲染。
canvas 元素为什么拿不到 WebGPU 上下文
和 WebGL 类似，WebGPU 对 canvas 状态极其敏感，稍有异常就静默失败：
-
display: none、visibility: hidden或父容器height: 0时，getContext('webgpu')直接返回null - HTML 中没写
width和height属性（哪怕 CSS 设了尺寸），也会触发失败；必须显式声明，例如<canvas id="webgpu" width="640" height="480"></canvas> - Chrome 113+ 默认启用 WebGPU，但部分系统（如虚拟机、老旧集显）可能仍需手动开启实验性标志：
chrome://flags/#unsafe-webgpu→ 设为Enabled，然后重启浏览器 - Firefox/Safari 当前仅提供实验性支持，API 行为可能不一致，首次验证请用 Chrome
如何正确初始化 WebGPU device 和 context
顺序不能错：先拿到 GPUAdapter，再申请 GPUDevice，最后绑定到 canvas.getContext('webgpu')。漏掉任一环节或异步时机不对，都会卡在 undefined 或报错。
- 必须用
await navigator.gpu.requestAdapter()，不能跳过适配器直接调requestDevice()—— 否则抛TypeError: Cannot read properties of null -
context.configure()必须在device创建之后调用，且format要用navigator.gpu.getPreferredCanvasFormat()获取，硬写"bgra8unorm"在 Safari 上会失败 - 别在
DOMContentLoaded外提前执行，确保canvas已挂载 DOM；可用document.getElementById('webgpu')检查是否取到真实元素
最小可行初始化片段：
const canvas = document.getElementById('webgpu');
const context = canvas.getContext('webgpu');
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
// 注意：这行必须在 device 创建后、且 canvas 存在时调
context.configure({
device,
format: navigator.gpu.getPreferredCanvasFormat(),
});
着色器编译失败却看不到错误信息
WGSL 是强类型语言，语法错、类型不匹配、入口函数名拼错，createShaderModule() 都不会抛 JS 异常，只会让后续 createRenderPipeline() 报 Operation not supported 这类模糊错误。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
-
@vertex和@fragment函数的entryPoint名必须和 WGSL 里完全一致（区分大小写），常见错：写成"VSMain"但 WGSL 里是vsMain - WGSL 中结构体字段顺序、
@location绑定索引必须和vertex.buffers配置严格对齐；比如@location(0)对应第一个attributes[0] - 顶点着色器必须输出
@builtin(position)，漏写或类型不对（如写成vec3f）会导致 pipeline 创建失败 - 调试时可临时把 WGSL 写进
<script type="wgsl"></script>标签，用textContent读取，避免 JS 字符串换行缩进污染语法
draw 之前最容易被忽略的三件事
WebGPU 不像 Three.js 那样“自动兜底”，命令流提交前任何一步出错，画面就黑屏，且无明确提示。
-
GPUCommandEncoder必须调beginRenderPass()，且传入的colorAttachments中view要来自当前context.getCurrentTexture().createView()—— 旧 texture view 会报Invalid texture view - 顶点缓冲区要通过
setVertexBuffer()显式绑定，索引缓冲区（如有）用setIndexBuffer()；只创建 buffer 不绑定，GPU 根本看不到数据 -
setPipeline()必须在draw*前调用，否则报Command encoder is invalid；且 pipeline 必须已成功创建（检查控制台是否有 compile error）
真正跑通第一帧的关键是：每次 render pass 都要生成新 texture view，不能复用。
