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

目录 1. WebGL 1.1. 使用 WebGLProgram 表示一个计算过程 1.2. WebGL 没有通道 API 2. WebGPU 2.1. 使用 Pipeline 组装管线中各个阶段 2.2. 使用 PassEncoder 调度管线内的行为 2.3. 使用 CommandEncoder 编码多个通道 2.4. PassEncoder 和 Pipeline 的关系 3. 总结 前两篇文章介绍了 WebGL 和 WebGPU 是如何准备顶点和数字型 Uniform 数据的(纹理留到下一…

目录 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 中的 Mipmapping 3. 纹理压缩编码算法…

目录 1. WebGL 1.0 Uniform 1.1. 用 WebGLUniformLocation 寻址 1.2. 矩阵赋值用 uniformMatrix[234]fv 1.3. 标量与向量用 uniform[1234][fi][v] 1.4. 传递纹理 2. WebGL 2.0 Uniform 2.1. 标量/向量/矩阵传值方法扩充 2.1. 什么是 UniformBlock 与 UniformBuffer 的创建 2.2. 状态绑定 2.3. 着色器中的 Uniform 2.4. 传递纹…

大家好,本文对WebGPU进行性能测试和分析,目的是为了对比WebGL和WebGPU在"渲染"和"计算"两个维度的性能差异,具体表现为CPU性能和FPS性能两个方面的性能数据差异. 我们会分别在苹果笔记本和配备RTX显卡的台式机上,对WebGL和WebGPU分别进行性能测试. 本文对于WebGPU使用了"reuse render command buffer"和"dynamic uniform buffer offset"两种…

首先看下WebGPU的目标: 同时支持实时屏幕渲染和离屏渲染. 使通用计算能够在 GPU 上高效执行. 支持针对各种原生 GPU API 的实现:Microsoft 的 D3D12.Apple 的 Metal 和 Khronos 的 Vulkan. 提供一种人类可创作的语言来指定在 GPU 上运行的计算. 可在浏览器的多进程架构中实现,维护Web的安全性. 尽可能让应用程序在不同的用户系统和浏览器之间可移植地工作. 以有用但范围仔细的方式与 Web 平台的其余部分交互(基本上以一种或另一种方式共…

1 VAO 是 OpenGL 技术中提出来的 参考: 外链 其中有一段文字记录了 VAO 是什么: A Vertex Array Object (VAO) is an object which contains one or more Vertex Buffer Objects and is designed to store the information for a complete rendered object. In our example this is a diamond cons…

目录 1 WebGL 中的 FBO 与 RBO 1.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 WebG…

目录 1. WebGL 2. WebGPU 2.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. 输…

介绍 大家好,本系列从0开始学习WebGPU API,并给出相关的demo. WebGPU介绍 WebGPU相当于DX12/Vulkan,能让程序员更灵活地操作GPU,从而大幅提升性能. 为什么要学习WebGPU WebGPU更好地支持多线程 WebGPU支持compute shader,从而让程序员能利用GPU实现很多优化 WebGPU与WebGL2的区别很大,两者不容易兼容.如果要从WebGL1升级,最好直接升级到WebGPU,一劳永逸 WebGPU是标准,各大浏览器都会支持.不像WebGL…