介绍
大家好，本系列从0开始学习WebGPU API，并给出相关的demo。
WebGPU介绍
WebGPU相当于DX12/Vulkan，能让程序员更灵活地操作GPU，从而大幅提升性能。
为什么要学习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，学习成本低；
后者的好处是新语言功能更强大，性能更好。
- 参考资料
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
对于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。
- Chrome Canary
-
技术栈
Javascript语言
使用原生WebGPU API
能给你带来什么收益？
- 从0学习WebGPU，熟悉原生API
- 缩小与PC端最新的3D技术的差距（学了WebGPU，就只与目前最新的DX12 RTX差半代了！而WebGL2只相当于DX10）
- 更新思维模式，学习最新的设计理念（WebGPU相比WebGL相当灵活和模块化，如果要被封装成引擎的话需要一些新的设计思路）
内容规划
本系列分成三个部分：
第一部分
一个一个地学习官方的sample，掌握基础的API调用，讲解相关的概念
第二部分
学习进阶内容（如多线程），并实现对应的demo
第三部分
综合运用所学内容，使用compute shader实现简单的光线追踪demo