树后树前

文章目录1. 技术说明2. 三角形例子HTMLJavaScript3. 着色器解析帧缓冲坐标图示1. 技术说明使用最新 Edge/Chrome Canary 浏览器使用 VSCode 插件 LiveServer 的 HTTP 服务器对本机提供 5500 端口的页面服务，即 http://localhost:5500/index.html使用 es-module 风格的 JavaScript 实现2. 三角形例子先上效果，后面再解析片元着色器：HTMLhtml 部分就简单一些<

文章目录① WGSL 插件② WGSL Literal 插件③ WGSL Preprocessor为什么没有 #define 宏？WGSL 还在积极讨论中，虽然各位大佬不是很满意这个新生儿。不过，社区已经有了基础的实验性工具（VSCode 插件），并支持了较新的语法。① WGSL 插件这个插件支持对文件扩展名为 .wgsl 的源代码文件进行高亮显示。② WGSL Literal 插件这个插件允许你在 JavaScript / TypeScript 的模板字符串中进行 wgsl 代码高亮，需要

文章目录1. WebGL2. WebGPU2.1. 适配器（Adapter）和设备（Device）2.2. 着色器（Shaders）2.3. 管线（Pipeline）2.4. 并行（Parallelism）2.5. 工作组（Workgroup）2.6. 指令（Command）3. 数据交换3.1. 绑定组的布局（GPUBindGroupLayout）3.2. 暂存缓冲区（Staging Buffer）3.3. 过度调度3.4. 麻烦的结构体（内存地址对齐问题）3.5. 输入输出4. 性能5. 稳定性与可用性

文章目录系列完结后记之后要做什么系列完结后记林林总总写了一些文章来对比 WebGL 与 WebGPU 的常规功能，兴许在 API 的理解上有些业余，甚至不排除有表述错误，但是写对的部分，我希望对读者与未来的图形开发者有所启迪。过去，WebGL 给 Web 图形开发者打开了一扇新的大门：原来浏览器可以不借助插件搞酷炫的三维效果！这离不开各大厂商的努力，虽然他们肯定有一部分原因是想更好卖产品，但不否认这的的确确是技术的迈进。诚然，图形有门槛，WebGL 给这十年来的开发者留下一个蚀刻进骨子里的

文章目录1. 综述2. WebGL 中的绘图区3. WebGPU 中配置 canvas 的连接关于改变 canvas 大小后的行为1. 综述其实，写到第六篇比对基本上常规的 API 就差不多比对完了（除了 GPGPU、查询方面的 API 未涉及），但是有一个细节仍然值得我开一篇比对文章进行思考、记录，那就是渲染到何处。WebGL 的上下文对象是与 canvas 元素强关联的，没有 canvas 创建不了上下文，也就是说，WebGL 在设计之初就是拿来绘图的（的确如此），没考虑 GPU 的其它功能，后

文章目录1. WebGL 中的纹理1.1. 创建二维纹理与设置采样参数1.2. 纹理数据写入与拷贝1.3. 着色器中的纹理1.4. 纹理对象 vs 渲染缓冲对象1.5. 立方体六面纹理1.6. WebGL 2.0 的变化1.7. Mipmapping 技术2. WebGPU 中的纹理2.1. GPUTexture 的创建2.2. 纹理数据写入与拷贝2.3. 纹理视图2.4. 着色器中的纹理与采样器2.5. WebGPU 中的 Mipmapping3. 纹理压缩编码算法4. 总结参考资料图形编程中的纹理，

文章目录1. WebGL1.1. 使用 WebGLProgram 表示一个计算过程1.2. WebGL 没有通道 API2. WebGPU2.1. 使用 Pipeline 组装管线中各个阶段2.2. 使用 PassEncoder 调度管线内的行为2.3. 使用 CommandEncoder 编码多个通道2.4. PassEncoder 和 Pipeline 的关系3. 总结前两篇文章介绍了 WebGL 和 WebGPU 是如何准备顶点和数字型 Uniform 数据的（纹理留到下一篇），当渲染所需的原材料

文章目录1. WebGL 1.0 Uniform1.1. 用 WebGLUniformLocation 寻址1.2. 矩阵赋值用 uniformMatrix[234]fv1.3. 标量与向量用 uniform\[1234]\[fi]\[v]1.4. 传递纹理2. WebGL 2.0 Uniform2.1. 标量/向量/矩阵传值方法扩充2.1. 什么是 UniformBlock 与 UniformBuffer 的创建2.2. 状态绑定2.3. 着色器中的 Uniform2.4. 传递纹理3. WebGPU U

文章目录1. WebGL 中的 VBO1.1. 创建 WebGLBuffer1.2. 顶点着色器2. WebGPU2.1. 创建 GPUBuffer 与传递数据2.2. 将顶点缓冲的格式信息传递给顶点着色器2.3. 在渲染通道中设置顶点缓冲2.4. 顶点着色器2.5. 关于缓冲数据在内存与显存中的申请、传递与销毁3. 比对4. VertexArrayObject1. WebGL 中的 VBO1.1. 创建 WebGLBufferWebGL 使用 TypedArray 进行数据传递，这点 WebGPU

文章目录1 WebGL 中的 FBO 与 RBO1.1 帧缓冲对象（FramebufferObject）1.2 颜色附件与深度模板附件的真正载体1.3 FBO/RBO/WebGLTexture 相关方法收集2 WebGPU 中的对等概念2.1 渲染通道编码器（GPURenderPassEncoder）承担 FBO 的职能2.2 多目标渲染2.3 深度附件与模板附件2.4 非 canvas 的纹理对象作为两种附件的注意点3 读取数据3.1 从 FBO 中读像素值3.2 WebGPU 读 GPUTexture

文章目录1. 什么是缓冲映射创建时映射2 缓冲数据的流向2.1 CPU 至 GPU2.2 GPU 至 CPU1. 什么是缓冲映射就不给定义了，直接简单的说，映射（Mapping）后的某块显存，就能被 CPU 访问。三大图形 API（D3D12、Vulkan、Metal）的 Buffer（指显存）映射后，CPU 就能访问它了，此时注意，GPU 仍然可以访问这块显存。这就会导致一个问题：IO冲突，这就需要程序考量这个问题了。WebGPU 禁止了这个行为，改用传递“所有权”来表示映射后的状态，颇具 Rus

文章目录1 为什么是 WebGPU 而不是 WebGL 3.0显卡驱动图形 API 的简单年表WebGL 能运行在各个浏览器的原因WebGPU 的名称由来2 与 WebGL 比较编码风格OpenGL 的编码风格CPU 负载问题WebGPU 的装配式编码风格厨子戏法3 多线程与强大的通用计算（GPGPU）能力WebWorker 多线程通用计算（GPGPU）4 浏览器的实现5 未来参考资料这篇讲讲历史，不太适合直奔主题的朋友们。1 为什么是 WebGPU 而不是 WebGL 3.0你若往 Web 图形技术

文章目录1 VAO 是 OpenGL 技术中提出来的2 WebGPU 天生就能先保存状态2.1 WebGL 与 WebGPU 相关 API 对比2.2 谁替代了 VAO？2.3 代码举例1 VAO 是 OpenGL 技术中提出来的参考：https://www.khronos.org/opengl/wiki/Tutorial2:_VAOs,VBOs,Vertex_and_Fragment_Shaders(C/_SDL)其中有一段文字记录了 VAO 是什么：A Vertex Array Object

文章目录1 在能用的地方都用 label 属性2 使用调试组3 从 Blob 中载入纹理图像更推荐使用压缩格式的纹理资源4 使用 glTF 处理库 gltf-transform5 缓冲数据上载6 推荐异步创建 pipeline7 慎用隐式管线布局7 共享资源绑定组与绑定组布局对象原作附带信息来自 2022 WebGL & WebGPU Meetup 的 幻灯片1 在能用的地方都用 label 属性WebGPU 中的每个对象都有 label 属性，不管你是创建它的时候通过传递 descripto

文章目录确保 Deno 版本命令行交互式获取 GPUDevice代码文件获取 GPUDeviceTop-level Await 不生效支持 WebGPU API 的环境，可不止浏览器一个。虽说 NodeJS 没什么消息说要支持，但是 Deno 这个 js/ts 运行时老早就支持了，能脱离浏览器直接在控制台访问 GPU，感觉十分有趣。确保 Deno 版本至少要高于 1.8，最好装最新> deno --versiondeno 1.18.0 (release, x86_64-pc-window

文章目录1 为什么是 WebGPU 而不是 WebGL 3.0显卡驱动图形 API 的简单年表WebGL 能运行在各个浏览器的原因WebGPU 的名称由来2 与 WebGL 比较编码风格OpenGL 的编码风格CPU 负载问题WebGPU 的装配式编码风格厨子戏法3 多线程与强大的通用计算（GPGPU）能力WebWorker 多线程通用计算（GPGPU）4 浏览器的实现5 未来参考资料这篇讲讲历史，不太适合直奔主题的朋友们。1 为什么是 WebGPU 而不是 WebGL 3.0你若往 Web 图形技术

1. 获取高频操作对象1.1 WebGL 获取上下文对象WebGL 获取的是 WebGLRenderingContext/WebGLRenderingContext2 对象，必须依赖于有合适宽度和高度的 HTMLCanvasElement，通常命名为 gl，gl 变量有非常多方法，允许修改 WebGL 的全局状态const gl = document.getElementById("id")?.getContext("webgl")// ...1.2 WebGPU 获取设备对象而 WebGP

系列博客总目录：https://blog.youkuaiyun.com/cRGBc/article/details/120412614文章目录VertexBuffer 的创建WGSL 端接受输入VertexBuffer 的数据传入VertexBuffer 的创建VertexBuffer 的本体就是一个 GPUBuffer，主要就是指定其 usage，以及在创建 ShaderModule 时配置好 VertexAttribute。顶点属性，所谓的 VertexAttribute，在 VertexBuffer 中

系列博客总目录：https://blog.youkuaiyun.com/cRGBc/article/details/120412614文章目录1 GPUCanvasContext2 GPUCanvasConfiguration 类型举例GPUCanvasCompositingAlphaMode 枚举类型3 Canvas 尺寸变更问题对应规范中 Canvas Rendering 一章1 GPUCanvasContextGPUCanvasContext 类型，其对象被称作 WebGPU 上下文。它的作用就是让

系列博客总目录：https://blog.youkuaiyun.com/cRGBc/article/details/120412614文章目录1 指令缓存：GPUCommandBuffer如何创建2 指令编码器：GPUCommandEncoder2.1 如何创建2.2 用途：启动/创建一个可编程通道2.2 用途：缓存复制举例2.3 用途：图像/纹理复制方法定义GPUImageCopyBuffer 类型GPUImageCopyTexture 类型GPUExtent3D 类型3 指令队列：GPUQueue3.1 writ

系列博客总目录：https://blog.youkuaiyun.com/cRGBc/article/details/120412614文章目录可编程通道编码器：GPUProgrammablePassEncoder创建通道编码器设置绑定组 setBindGroup1 渲染通道编码器1.1 创建1.1.1 颜色附件GPULoadOp：初始化行为GPUStoreOp：存储行为1.1.2 深度模板附件1.1.3 译者注1.2 触发绘制功能相关的方法setPipeline 方法setVertexBuffer 方法setBind

系列博客总目录：https://blog.youkuaiyun.com/cRGBc/article/details/120412614文章目录管线1 基础管线1.1 基础管线的 getBindGroupLayout 方法1.2 默认管线布局1.3 可编程阶段：GPUProgrammableStage1.4 补充资料：管线和着色阶段1.5 如何验证可编程阶段对象的合规性1.6 如何验证某个着色器中被绑定的变量的合规性2 渲染管线2.1 管线的创建2.1.1 异步创建管线2.1.2 如何验证 GPURenderPipel

系列博客总目录：https://blog.youkuaiyun.com/cRGBc/article/details/120412614文章目录GPUShaderModule 接口创建获取编译信息举例：对应文档中的 https://www.w3.org/TR/webgpu/#shader-modules关于着色器模块的创建，与 WebGL 中的 Shader 有改进，提供了编译信息。GPUShaderModule 接口这个接口是可以序列化的，意味着可以传递其引用进行多线程编程。它是不可变对象（只读），所以不

系列博客总目录：https://blog.youkuaiyun.com/cRGBc/article/details/120412614文章目录1 关系简易图解2 资源绑定组 GPUBindGroup如何创建GPUBindGroupEntry 类型GPUBindingResourceGPUBufferBinding译者注举例① 采样器资源② 纹理（视图）资源③ GPUBuffer 资源创建要遵守的规则3 资源绑定组的布局 GPUBindGroupLayout如何创建GPUBindGroupLayoutEntry 类型描

系列博客总目录：https://blog.youkuaiyun.com/cRGBc/article/details/120412614文章目录GPUSampler：采样器采样器的创建GPUAddressModeGPUFilterModeGPUCompareFunction采样器创建条件代码举例参考资料译者注GPUSampler：采样器GPUSampler 采样器对象，对着色器中的纹理资源进行过滤或者编码。[Exposed=(Window, DedicatedWorker), SecureContext]in

系列博客总目录：https://blog.youkuaiyun.com/cRGBc/article/details/120412614文章目录1 纹理的创建举例创建时参数不合法的情况2 纹理视图 GPUTextureView创建时参数不合法的情况*简述创建过程3 纹理格式 GPUTextureFormat4 为纹理输入图片/视频数据使用 GPUQueue.copyExternalImageToTexture 方法使用 GPUQueue.writeTexture 方法使用 GPUDevice.importExterna

系列博客总目录：https://blog.youkuaiyun.com/cRGBc/article/details/120412614文章目录WebGPU 中的缓存对象：GPUBuffer1 创建GPUBuffer 的用途2 缓存映射异步映射：mapAsync 方法获取映射的缓存：getMappedRange 方法解除映射：unmap 方法常见用例① 创建 UBO② 创建映射读/映射写型的 GPUBuffer③ 复制目标/复制源类型的 GPUBuffer④ 创建 VBO⑤ 创建存储型缓存对象`queue.writeB

WebGPU 基本概念节选翻译，选自 WebGPU Spec 3 Fundamentals，本文列举一部分简单的内容，其余内容以后单独拉出去和其他资料一起谈。1 公共约定节选自 WebGPU Spec 3.1 Conventions① WebGPU 接口WebGPU 接口是内部对象的公开访问形式，和大多数语言的接口语法提供的功能差不多。这里只需注意，继承了 GPUObjectBase 的接口都是 WebGPU 接口。interface mixin GPUObjectBase { attrib

参考自 https://www.w3.org/TR/webgpu/#initialization1 navigator.gpuGPU 对象能在浏览器环境（Window环境）获取，也可以在非共享全局 Worker 中获取，其接口定义如下：interface mixin NavigatorGPU { [SameObject, SecureContext] readonly attribute GPU gpu;};Navigator includes NavigatorGPU;WorkerNavi

文章目录说明enumnamespaceinterfacedictionarytypedef说明WebGPU 的规范是通过 WebIDL 语言来描述的，本篇主要介绍类型定义。函数定义、继承描述较为简单，故略去。用于定义类型的语法有以下五种。enum枚举类型，通常其枚举值就是 JavaScript 字符串，取值时符合里面的任意一个即可。enum GPUTextureDimension { "1d", "2d", "3d",};于是，你可以在创建纹理对象时这样用这个枚举：cons

思前想后，还是要讲一下“WebGPU Spec API”和“图形学”、“即时渲染技术”等概念的差异。我所发布的这一系列博文，均为“WebGPU Spec API”的解读，而且是部分解读，还不一定在概念、细节上完全准确。只是，我喜欢吃这螃蟹，虽然的确有点扎嘴。本篇不算教程，只能算是 WebGPU 发布黎明前夕对标准的学习与自我归纳，希望对你有帮助，有概念上的错漏在所难免。WebGPU 的接口、对象类型、如何组合，以及其调用 GPU 的逻辑，深得 D3D12、Metal、Vulkan 这些现代图形开发

参考自WebGPU 8. Resource Binding（资源绑定）WGSL 5.1. Module Scope Variables（全局对象）WGSL 9.3.2. Resource interface（资源接口）文章目录WebGPU 中的 Uniform1 如何创建 Uniform 资源① 普通常量数字/类型数组② 纹理对象 `GPUTexture`③ 采样器 `GPUSampler`2 绑定组的作用和创建绑定组的资源入口：entries 数组3 绑定组的布局对象布局对象的两种用途绑定组与其布

文章出处 https://web.dev/gpu/文章发布时间文章最后更新时间翻译时间翻译人2021年8月26日2021年9月6日2021年9月10日四季留歌版权归原作者所有。转载翻译稿请带连接与翻译者。文章目录什么是 WebGPU？当前状态怎么使用 WebGPU① 在 `://flags` 中启用② 在试用阶段尝尝鲜检测 WebGPU 的支持情况起步浏览器支持情况平台支持示例代码WebGPU 支持 Web 端高性能 3D 图形显示和并行计算。什么是 WebGPU

文章出处：https://web.dev/gpu-compute/文章发布时间文章最后更新翻译时间翻译人2019年8月28日2021年9月6日2021年9月12日四季留歌版权原作者所有。转载翻译稿请带连接与翻译者。文章目录1 背景2 访问 GPU3 写入缓存4 读取缓存5 着色器编程6 GPUBuffer 对象的创建7 绑定组及其布局对象8 计算着色器代码译者注9 创建、配置管线10 指令的提交译者插入语：为什么要除以811 读取结果矩阵12 收尾13 性能对比译者建