WebGPU 摘学

1. 丐版 HelloWebGPU 最简单的 WebGPU 程序应该是这样的： 将上面的代码保存成 index.html，双击打开就可以在控制台看到输出的对象： 如果你是什么都不会的新手，那么接下来这

1. 核心概念 这部分不会详细展开，以后写教程时会深入。以下只是核心概念，是绝大多数 WebGPU 原生程序要接触的，并不是全部。 ① 适配器和设备 适配器，也就是 GPUAdapter，指代真正的物

1. 常见问题 ① WebGL、ThreeJS 会淘汰吗？WebGL 是不是过时了？WebGPU 性能是不是比 WebGL 强？ ThreeJS、BabylonJS 两个应用级 3D 库一直在设计 W

在片元着色器中访问帧缓冲坐标 1. 技术说明 使用最新 Edge/Chrome Canary 浏览器 使用 VSCode 插件 LiveServer 的 HTTP 服务器对本机提供 5500 端口的页

原文发布于 2022年3月8日，传送门 https://surma.dev/things/webgpu 这篇东西非常长，不计代码字符也有1w字，能比较好理解 WebGPU 的计算管线中的各个概念，并使

系列完结后记 林林总总写了一些文章来对比 WebGL 与 WebGPU 的常规功能，兴许在 API 的理解上有些业余，甚至不排除有表述错误，但是写对的部分，我希望对读者与未来的图形开发者有所启迪。 过

1. 综述 其实，写到第六篇比对基本上常规的 API 就差不多比对完了（除了 GPGPU、查询方面的 API 未涉及），但是有一个细节仍然值得我开一篇比对文章进行思考、记录，那就是渲染到何处。 Web

图形编程中的纹理，是一个很大的话题，涉及到的知识面非常多，有硬件的，也有软件的，有实时渲染技术，也有标准的实现等非常多可以讨论的。

前两篇文章介绍了 WebGL 和 WebGPU 是如何准备顶点和数字型 Uniform 数据的（纹理留到下一篇），当渲染所需的原材料准备完成后，就要进入逻辑组装的过程。 WebGL 在这方面通过指定“

众所周知，在 GPU 跑可编程管线的时候，着色器是并行运行的，每个着色器入口函数都会在 GPU 中并行执行。每个着色器对一大片统一格式的数据进行冲锋，体现 GPU 多核心的优势，可以小核同时处理数据；

1. WebGL 中的 VBO 1.1. 创建 WebGLBuffer WebGL 使用 TypedArray 进行数据传递，这点 WebGPU 也是一样的。 下面的代码是 WebGL 1.0 常规的

OpenGL 体系给图形开发留下了不少的技术积累，其中就有不少的“Buffer”，耳熟能详的就有顶点缓冲对象（VertexbufferObject，VBO），帧缓冲对象（FramebufferObje

1. 什么是缓冲映射 就不给定义了，直接简单的说，映射（Mapping）后的某块显存，就能被 CPU 访问。 三大图形 API（D3D12、Vulkan、Metal）的 Buffer（指显存）映射后，

1. 获取高频操作对象 1.1 WebGL 获取上下文对象 WebGL 获取的是 WebGLRenderingContext/WebGLRenderingContext2 对象，必须依赖于有合适宽度和

来自 2022 WebGL & WebGPU Meetup 的 幻灯片，文末有资料 1 在能用的地方都用 label 属性 WebGPU 中的每个对象都有 label 属性，不管你是创建它的时候通过传

支持 WebGPU API 的环境，可不止浏览器一个。 虽说 NodeJS 没什么消息说要支持，但是 Deno 这个 js/ts 运行时老早就支持了，能脱离浏览器直接在控制台访问 GPU，感觉十分有趣

VAO 的职能则转至 GPURenderPipeline 完成，其 GPURenderPipelineDescriptor.GPUVertexState.buffers 属性是 GPUVertexB

这篇讲讲历史，不太适合直奔主题的朋友们。为什么是 WebGPU 而不是 WebGL 3.0？WebGPU 有什么好处？WebGPU 在浏览器中是怎么实现的？都在这里写的很清楚了。

目录传送门：https://juejin.cn/post/7010596192606224397 对应规范中 Canvas Rendering 一章 1 GPUCanvasContext GPUCan

目录传送门：https://juejin.cn/post/7010596192606224397 介绍原文 11 章、部分 12 章和 17 章的内容。 1 指令缓存：GPUCommandBuffer