WebGPU | 相关的资源学习和社区

我在网上搜寻了很多关于WebGPU相关的资料；

#我觉得首先在B站上看到的徐博士免费教程非常好，讲解详细，并且评论回复比较快，都会有回应，徐博士B站网址[1]；

#老徐GitHub关于WebGPU案例源代码的网址[2]；

#并且我找到一个非常小众，不是很知名的webgpu开源引擎 Orillusion，这个社区会给你翻译当前webgpu规范标准以及WGSL着色器语言的文档，Orillusion社区网站[3]；

#有消息称，今天也就是2022年的5月份，Chrome（不是Canary）会支持WebGPU的支持，webgpu技术推进加快，这也是全球web技术发展的一项新领域，毫无疑问学习webgpu是非常有前景的一项决定。

[20220214]

我发现了一个非常好的图形学习资源[4]；这是一位就职于AMD的图形工程师技术博客，里面有关于现代图形API及WebGPU的相关技术教程详解。

 [20220225 集群向前着色示例] 

#关于WebGPU，我觉得一定要认识一个人Brandon Jones，并且看一下它的github库[5],他就职于Google,负责WebGPU标准的编制和开发工作，并且gl-matrix也是此人维护，下面我将介绍一个它制作的WebGPU渲染场景[6].

打开这个渲染示例，网页展示如下，默认是使用WebGPU：

 有趣的是，我查看源码的glb模型，模型做的非常精细，材质的调整也很逼真，这里我使用Blender软件打开了模型，如图下：

 

 我录制了一个视频，通过切换webgpu和webgl2，来观看两种技术展示的渲染效果，对比是非常明显[7]

FPS的数值对比：WebGPU是WebGL的10倍

卡顿对比：webgpu在复杂多面下比webgl流畅许多，较单一场景下，流畅度差不了太多；

渲染效果：webgpu的光线颜色及材质反射更鲜艳、真实，webgl相比就差很多；

 

[1] 徐博士哔哩哔哩教程网址：jjkkny的个人空间_哔哩哔哩_bilibili.

[2] 徐博士案例GitHub案例网址：https://github.com/jack1232/WebGPU-Step-By-Step.

[3] Orillusion社区网站：https://www.orillusion.com/zh/.

[4] Alain Galvan工程师博客网址：https://alain.xyz/blog/raw-webgpu.

[5] Brandon Jones GitHub网址：https://github.com/toji.

[6] 集群向前着色渲染案例：https://github.com/toji/webgpu-clustered-shading.

[7] 自己制作的webgpu和webgl效果对比录制视频：https://www.bilibili.com/video/BV1hm4y1R7hZ?t=9.8