Open vieyahn2017 opened 10 months ago
vieyahn2017
commented
10 months ago 参考文档
WebGPU官方文档：https://gpuweb.github.io/gpuweb/wgsl
WebGPU中文文档：https://www.orillusion.com/zh/webgpu.html
WebGL官方文档：https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API
three.js中文文档：http://www.webgl3d.cn/
babylon.JS官方文档：https://doc.babylonjs.com/
playCanvas官方文档：https://developer.playcanvas.com/zh/user-manual/
cesium官方文档：https://cesium.com/platform/cesiumjs/
vieyahn2017
commented
10 months ago https://github.com/google/dawn
Dawn, a WebGPU implementation Dawn is an open-source and cross-platform implementation of the WebGPU standard. More precisely it implements webgpu.h that is a one-to-one mapping with the WebGPU IDL. Dawn is meant to be integrated as part of a larger system and is the underlying implementation of WebGPU in Chromium.
Dawn provides several WebGPU building blocks:
WebGPU C/C++ headers that applications and other building blocks use. The webgpu.h version that Dawn implements. A C++ wrapper for the webgpu.h. A "native" implementation of WebGPU using platforms' GPU APIs: D3D12, Metal, Vulkan and OpenGL. See per API support for more details. A client-server implementation of WebGPU for applications that are in a sandbox without access to native drivers Tint is a compiler for the WebGPU Shader Language (WGSL) that can be used in standalone to convert shaders from and to WGSL.
3.2 WebGPU
3.2.1 WebGPU的出现
WebGPU出现，是因为：
·Web应用对可编程3D图形，图像处理和GPU访问需求持续增强；
·WebGL和WebGL2满足需求，但与现代本机图形API的功能或性能不匹配，导致CPU和GPU出现性能问题，在现代GPU API基础上实现WebGL变得非常困难；
·在Web中引入GPU加速提升科学计算性能。
因此，WebGL贡献者将精力集中在WebGPU上。此外，WebGPU不是WebGL的延续，也不对标OpenGL，只需要用名称进行区分。
1
WebGL和WebGPU的对比
3.2.2 什么是WebGPU
目前，WebGPU虽然还未正式发布，但已经比较成熟了，也有相关的Demo可供学习。
3.2.3 WebGPU优势
·WebGPU更好地支持多线程，更低的驱动开销，更可预测的性能；
·WebGPU支持compute shader，从而让程序员能利用GPU实现很多优化；
·WebGPU与WebGL 2的区别很大，两者不容易兼容。如果要从WebGL1升级，最好直接升级到WebGPU，一劳永逸
4、WebGPU是标准，各大浏览器都会支持。
3.2.4 WebGPU完善程度
自从2017年提出WebGPU后，已经经过两年的发展。
目前Chrome和Safari支持得比较好，基本功能都支持（例如绘制pbr材质的模型、支持compute shader），且可以在MacOS中运行。babylon.js图形库已经支持了WebGPU。
WebGPU对于shader使用哪种方案还没有确定：
在Chrome中，使用4.5版本的glsl(WebGL)，需要通过官方提供的第三方库将其转成二进制码（SPIR-V）；
在Safari中，直接使用新的语言WSL，不需要转换。
3.2.5 WebGPU浏览器支持程度及开启方式（Can I Use）
默认情况下，浏览器WebGPU能力默认关闭，如下图：
1
PC端和移动端浏览器开启方式
开启方式
PC端
Chrome浏览器需要在【chrome://flags/】中enable-unsafe-webgpu flag开启
Edge浏览器需要在【edge://flags/】中enable-unsafe-webgpu flag开启
Safari浏览器开启方法：Safari → Preferences → Advanced → Develop menu→ Experimental Features → WebGPU
Firefox浏览器在【about:config】dom.webgpu.enabled设置为true
Opera浏览器需要在【edge://flags/】中enable-unsafe-webgpu flag开启
移动端
Andriod的Firefox支持WebGPU
3.2.6 WebGPU的实现
目前，WebGPU的实现共3种，如下：
·Dawn(Chrome C++)，使用C++让Chrome从v94开始，对WebGPU进行适配，仅支持桌面端。
·wgpu-rs(Firefox Rust)，很多WebGPU的例子是用Rust写的，而自己也恰好可以从这里面汲取很多东西。
·Orillusion(TypeScript)，Orillusion团队，2021年7月成立，集合图形学，引擎开发，没有完全开源，相对WebGL的引擎渲染性能将大大提高。
3.2.7 WebGPU工作原理
以Chrome为例，Chrome对WebGPU的适配工作，是有Dawn模块负责的。
当开发者在JavaScript 中使用WebGPU API 时，Chrome要在Dawn进程中调用本地的Dawn模块，然后通过Dawn 调用操作系统底层的GPU API，比如Windows的D3D12，IOS和Mac 的Metal，Linux和Android的Vulkan。
WebGPU的API大部分是支持异步的，类似于js对于本地硬件的IO操作。
高性能的GPU在绘图的时候，是有上万个渲染管道并行的，其每一帧的渲染结果若是都返回给js ，会很耗内存，所以它是直接将其渲染到画布上，而不做存储。
图片1
3.2.8 WebGPU工作流程
1.初始化WebGPU
·获取GPU实例
·配置WebGPU的上下文对象
2.创建GPU 渲染管线
·编写shader程序，然后放入渲染管线中
·对渲染管线进行初始配置
3.编写绘图指令，并提交给GPU
·建立指令编码器
·通过指令编码器建立渲染通道
·将渲染管线放入渲染通道
3.2.9 搭建WebGPU项目
以Orillusion(TypeScript)为例，Orillusion提供并部署了Chrome WebGPU Token，运行后，在Chrome 100+ 上即可支持WebGPU内容（支持最新wgsl版本），搭建步骤如下：
Clone the repo
git clone https://github.com/Orillusion/orillusion-webgpu-samples.git
Go inside the folder
cd orillusion-webgpu-samples
Start installing dependencies
npm install #or yarn add
Run project at localhost:3000
npm run dev #or yarn run dev
注意事项：Orillusion模板打包工具是Vite，Vite需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。
文件结构如下:
1
其他WebGPU开发模板链接，https://github.com/buglas/webgpu-lesson.git
自定义的着色器语言WGSL
WGSL(WebGPU Shading Language)是全新的一门语言，WebGPU设计这门语言时大量参考了Vulkan SPIR-V。
因为版权、利益分配等问题，最终决定新造一门语言，一门混合Rust、TypeScript、Metal的编程语言。
用WebGL着色器是用GLSL编写的，只要有工具转为Vulkan SPIR-V 二进制程序即可。
目前WGSL还没有定最终版本，学习成本也比GLSL(webGL)要高一些。
4、结论
从业务需求开发的角度，WebGPU的WGSL还没有定最终版本，学习成本也比GLSL(webGL)要高一些。WebGL原生api的学习需要学习数学和图形学技术，入门门槛也不低，开发周期长。图形库基于WebGL的原生api进行封装，降低了入门门槛，建议选择图形库直接进行项目开发。
从信息安全角度看，优选库支持three.js和cesium，但cesium侧重于GIS项目的开发，公司目前所知项目多为其他业务开发，建议选择three.js开发。以智能网联行业化为例，智能网联行业化电子沙盘初期需求是3D效果，但出于其他角度考虑，仅实现了2D效果。为了提升视觉效果和用户体验，可以使用three.js图形库，结合UI设计，实现3D效果。利用其他时间，使用three.js图形库和vue2，实现智能网联行业化电子沙盘道路及建筑的3D可视化（附源码）。
从可视化课程开发的角度，建议WebGPU，因为WebGPU是趋势，也是新技术。
参考文档