WebGPU是什么？WebGPU和WebGL的区别

WebGPU是一门神奇的技术，在浏览器支持率0%，标准还没有定稿的情况下，就已经被Three.js和Babylon.js等主流3D和游戏框架支持了。而且被Tensorflow.js用来加速手机端的深度学习，比起WebGL能带来20～30倍的显著提升。

在主流框架中 WebGPU 的例子

1、在Three.js中使用WebGPU

使用Three.js的封装，我们可以直接生成WebGPU的调用。

我们照猫画虎引入WebGPU相关的库：

 

剩下就跟普通的WebGL代码写起来差不多：

 

只不过渲染器使用WebGPURenderer：

 

如果封装的不能满足需求了，我们可以使用WGSL语言进行扩展：

WGSL是WebGPU进行GPU指令编程的语言。类似于OpenGL的GLSL, Direct3D的HLSL。

我们来看一个完整的例子，显示一个跳舞的小人，也不过100多行代码:

2、在Babylon.js中使用WebGPU

Babylon.js的封装与Three.js大同小异，我们来看个PlayGround的效果：

3、用WebGPU进行深度学习加速

除了3D界面和游戏，深度学习的推理器也是GPU的重度用户。所以Tensorflow.js也在还落不了地的时候就支持了WebGPU。实在是计算着色器太重要了。

写出来的加速代码就像下面一样，很多算子的实现最终是由WGSL代码来实现的，最终会转换成GPU的指令。

参考：https://developer.aliyun.com/article/932061

>>WebGL和WebGPU：https://www.zhihu.com/question/315103318