WebGPU学习（一）: 开篇

webgpu

介绍

大家好，本系列从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等），而且已经可以在Mac OS中运行。

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。

• 技术栈

  • Javascript语言

  • 使用原生WebGPU API

能给你带来什么收益？

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

内容规划

本系列分成三个部分：

第一部分

一个一个地学习官方的sample，掌握基础的API调用，讲解相关的概念

第二部分

学习进阶内容（如多线程），并实现对应的demo

第三部分

综合运用所学内容，使用compute shader实现简单的光线追踪demo