WebGPU学习（一）: 开篇

介绍

大家好，本系列从0开始学习WebGPU API，并给出相关的demo。

上一篇博文
WebGPU学习系列目录
下一篇博文
WebGPU学习（二）: 学习“绘制一个三角形”示例

WebGPU介绍

参考WebGPU 开发状态与计划：

WebGL是老的Web 3D图形API，它的版本演进如下图所示：

WebGPU是最新的Web 3D图形API，与WebGL的对比为：

浏览器封装了现代图形API（Dx12、Vulkan、Metal），提供给Web 3D程序员WebGPU API。

WebGPU概要：

为什么要学习WebGPU

• WebGPU更好地支持多线程

• WebGPU支持compute shader，从而让程序员能利用GPU实现很多优化

• WebGPU与WebGL2的区别很大，两者不容易兼容。如果要从WebGL1升级，最好直接升级到WebGPU，一劳永逸

• WebGPU是标准，各大浏览器都会支持。不像WebGL2，苹果直接不支持。

• 目前WebGPU虽然还未正式发布，但已经比较成熟了，也有相关的Demo可供学习

WebGPU完善程度

自从2017年提出WebGPU后，已经经过两年的发展。
目前Chrome和Safari支持得比较好，基本功能都有了（比如能够绘制pbr材质的模型，支持compute shader等），而且已经可以在MacOS中运行。

Babylonjs已经支持了WebGPU，详见WebGPU 文档。

不过WebGPU对于shader使用哪种方案还没有确定：
在Chrome中，使用4.5版本的glsl ，需要通过官方提供的第三方库将其转成二进制码（SPIR-V）；
在Safari中，直接使用新的语言WSL，不需要转换。

前者的好处是我们熟悉glsl，学习成本低；
后者的好处是新语言功能更强大，性能更好。

• 参考资料

WebGPU 开发状态与计划-2018.11.17
Implementation Status
WebGPU and WSL in Safari
WebGPU and WSL in Web Inspector
Babylonjs->WebGPU 文档
webgpu-samples for Chrome (uses GLSL via SPIR-V)
WebKit/Safari Demos (uses WSL)
gpuweb->issues

准备开发环境

MacOS只有高版本支持WebGPU（我之前是MacOS 10.10版本，运行不了WebGPU！升级为MacOS Catalina就可以运行了！！！）。

对于Chrome：
下载最新的Chrome Canary，并且打开 chrome://flags/#enable-unsafe-webgpu

大家可以使用我下载的Chrome Canary。

对于Safari：
下载最新的Safari Technology Preview，选中 Safari → Preferences → Advanced → Develop menu→ Experimental Features → WebGPU

WebGPU学习资料

目前学习资料非常少，属于早期探索阶段～

WebGPU学习中文资料
WebGPU: An Explicit Graphics API for the Web
Get started with GPU Compute on the Web
WebGPU API规范

本系列技术选型

• 开发环境

  • Chrome Canary
    因为Chrome市场占用率更高，而且shader使用glsl更简单，所以我使用Chrome Canary。

• 技术栈

  • Javascript语言

  • 使用原生WebGPU API

能给你带来什么收益？

• 从0学习WebGPU，熟悉原生API
• 缩小与PC端最新的3D技术的差距（学了WebGPU，就只与目前最新的DX12 RTX差半代了！而WebGL2只相当于DX10）
• 更新思维模式，学习最新的设计理念（WebGPU相比WebGL相当灵活和模块化，如果要被封装成引擎的话需要一些新的设计思路）

内容规划

本系列分成三个部分：

第一部分（已经完成）

一个一个地学习官方的sample（我fork到本地了），掌握基础的API调用，讲解相关的概念

第二部分（开始写了）

学习光线追踪，并实现对应的sample

第三部分（没有开始写）

综合运用所学内容，实现一些demo（如gpu driven render pipeline）