webgpu 从入门到精通 第一章

很多人都在问什么是webgpu,其实我也很好奇,这玩意,是什么,这玩意其实教程很少,然后经过一系列的学习,大概总结出一些东西,我们先看一下历史:

WebGPU是一套基于浏览器的图形API，浏览器封装了现代图形API（Dx12、Vulkan、Metal），提供给Web 3D程序员，为 Web释放了更多的GPU 硬件的功能。

有人给出了一句专业的一句这样的语言,但是好像听着有点迷糊

是gpu一般指图形处理器。 图形处理器（英语：graphics processing unit，缩写：GPU），又称显示核心、视觉处理器、显示芯片，是一种专门在个人电脑、工作站、游戏机和一些移动设备（如平板电脑、智能手机等）上做图像和图形相关运算工作的微处理器。

web（World Wide Web）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。

这样知道啥叫webgpu了趴,那么什么叫基于浏览器的图形API?

注释:API之主要目的是提供应用程序与开发人员以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。提供API所定义的功能的软件称作此API的实现。

这样看着就可以理解了

3D渲染技术的发展过程

总体来说，3D渲染迭代路线分成了两种技术方案：Native和Web。

Native：是我们的电脑、手机等硬件设备，通过安装本地的应用程序APP，直接通过图形API和相关驱动调用显卡的计算和渲染能力，完成真实物体的3D渲染数字化的过程。

Web：是通过浏览器，在网页页面中，实现现实世界的数字化渲染的过程。
 

Native 3D渲染的发展

1992年，Khronos制定了第一代的渲染引擎的图形学的框架叫做OpenGL 1.0，包括现在很多电脑用的基本上3D应用都是基于OpenGL。OpenGL也在不停的发展，目前最新版是2017年发布的OpenGL 4.6版本。同时，也出现了专门为移动端设计的OpenGL ES版本。由于OpenGL是开源和跨平台的，不方便为Windows做优化，1996年，微软作为第一大操作系统的提供商，发布了自己的图形API Direct3D。DX5/DX6/DX9有很多游戏的代表作，《古墓丽影》《极品飞车》都是当时的作品。

发展到了2009年，微软提出了DX11版本，有一个比较大的特性，计算着色器。简单说就是在图形的渲染能力上，可以更加充分的调用显卡的并行计算能力。

2014年，微软发布了下一代图形渲染API DX12，同年6月份，苹果在WWDC大会上发布了自己的图形学API Metal。2015年，Khronos发布了Vulkan。最早是发布的 OpenGL，随着显卡能力的提升，OpenGL的全局状态机设计离线，已经无法调用和优化先进现代显卡的能力。可以说Khronos不在会全力以赴的长期升级和维护OpenGL，反而选择发布了全新架构的现代图形API，即Vulkan。

2014年这个节点，就形成了三种现代图形学API并驾齐驱的情况。目前所有电脑上的游戏，或者一些3D应用，包括CG渲染动画，为了达到最好的渲染效果，几乎都会采用这三种现代图形API。
 

Web 3D渲染的发展

总体来说，在Web上渲染3D内容的相关技术发展还是比较缓慢的。最早的时候在浏览器是无法实现3D内容的，需要安装Flash插件。在校内网时代，那些农场类的游戏应用，以及在浏览器里看视频音频，几乎都需要安装Flash插件。2020年的时候，因为有一些安全的问题和其他种种原因，Adobe宣布停止维护Flash这项技术。

在Flash的发展过程中，出现了HTML5的标准，简称H5。2008年的时候，H5雏形出现。人们不需要在浏览器里面装Flash的插件，能够直接播放视频音频，包括通过Web原生的Canvas组件实现一些动画效果。

真正的Web 3D的技术标准的出现，是WebGL。由于浏览器天然具备的易分享等优势，在Web中展示和渲染3D内容一直都具有大量的需求。Khronos在2009年启动WebGL标准的讨论和制定工作。WebGL思路很简单，就是依靠浏览器的内核，对OpenGL ES版本做打包和封装，然后就可以让浏览器里的这些JS前端开发者直接用Web环境去调用底层的图形学能力，最终展示3D内容。当然也就意味着WebGL能力被限制到了OpenGL的时代。

Web的技术在持续快速的发展。尤其2014年，Native侧已经出了三大现代图形API了: DX12, Vulkan, Metal。在2017年的时候，W3C就提出在Web侧发展下一代图形学的技术标准,即WebGPU。跟WebGL一样，WebGPU的思路就是对三个现代图形API直接打包，然后在实现跨平台的同时，让浏览器里面直接可以调用这三个现代图形API能力，实现高质量的渲染效果，调用GPU的强大计算能力。

所以WebGPU不是WebGL的延续，也不对标OpenGL，而是下一代全新的基于Web的图形API。

关于WebGPU的未来

其实不应该只是和WebGL去对比。因为WebGPU必然将取代WebGL，这是W3C已经明显释放出来的信号。就比如我们日常使用3G，4G，5G甚至未来的6G，或者说是我们的iphoneX, iphone11, iphone12,iphone13一样。考虑到设备兼容和时间问题，WebGL也会长期存在。但是，说到根本，这些都是技术迭代升级带来的“自然选择”问题。WebGPU带来的异步特性，Compute Shader，非全局状态机，更灵活的resouce binding，甚至是未来的光线追踪等等，都是现代图形API的特性，也是WebGL无法实现的。

我们提到WebGPU的未来，更应该考虑是Web生态和Native生态的问题。尤其是面向未来，面向元宇宙时代。我们到底应该怎么选择我们3D场景，是通过浏览器Web来实现？还是选择桌面端Native来实现呢？详细的分析，我们已经放到了下面两篇文章当中，仅供大家参考。

为什么要学习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，学习成本低；
后者的好处是新语言功能更强大，性能更好。

准备开发环境

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