WebGPU技术现状

技术要点

WebGPU封装三大图形API(Dx12、Vulkan、Metal),提供多线程接口,高质量渲染图形,调用GPU并行计算

比WebGL的提升,三维渲染还在其次,因为速度瓶颈在显卡;而提供GPU通用计算,让JavaScript能力有了飞跃,首次有机会比肩C++。 对行业应用的影响,将随着开发的深入逐步显现。

通过WGSL(WebGPU Shading Language),开发者可以把海量应用数据和纹理交给GPU做并发计算,很多情况下比CPU快很多, 如果运用得当,就弥补了JavaScript性能低的问题。耗时的计算都在GPU,JavaScript主要做界面协调工作。

一些参考资料:

官方文档 https://www.w3.org/TR/webgpu/

官方示例 https://austin-eng.com/webgpu-samples/

WGSL文档:https://gpuweb.github.io/gpuweb/wgsl/

浏览器支持

Chrome、Firefox、Safari、Edge都在开发支持WebGPU的版本,Chrome进度最快

Chrome从2021年9月开始,已经在测试版中提供WebGPU接口,支持Windows、Mac OS、Linux,没有支持安卓。到目前已经进行了一年多的测试, 发布时间也推迟不少。根据最新消息,预计在113版发布,大约在2023年5月左右。

有两种版本可以选择:Chrome金丝雀(Chrome Canary),代码最新,不太稳定;Chrome开发者(Chrome Dev), 比canary落后一个版本号,相对稳定,建议使用开发者版本。 官网下载链接

运行开发版Chrome,在浏览器地址栏输入:chrome://flags/#enable-unsafe-webgpu

选择设置为Eanbled,重新运行浏览器即可

BabylonJs

BabylonJs从2020年底4.2版开始,到2022年6月5.0版正式官宣支持WebGPU,平台最终能够以透明的方式同时支持WebGL和WebGPU。 除了极少专门针对WebGPU的特殊情况,原有开发接口都保持不变,老的应用代码可以原封不动的运行。

BabylonJs渲染有兼容模式和快速模式两种。兼容模式最大程度的保持了原有功能,性能大体与WebGL持平;快速模式会限定某些功能, 通过RenderBundle批量渲染,大大降低图形绘制命令的CPU负载。

如何做到保持开发接口与功能,同时兼容WebGL与WebGPU?重要原因有两点:

1. TypeScript类架构:BabylonJs有很好的层次结构,所有底层渲染代码都封装在XXXEngine的相关类中。以ThinEngine为祖先类, 派生出支持WebGL的Engine,支持空渲染的NullEngine,使用本地代码渲染的NativeEngine等。对于WebGPU,则是派生出WebGPUEngine,再封装一些相关类。

2. 自动编译GLSL:材质Shader依然统一使用GLSL,当运行WebGPU时,通过内部调用TintWASM等工具代码,实时编译转换为WGSL再执行。

BabylonJs官方WebGPU技术专题

ThreeJs

ThreeJs采用了不同的策略,原来的WebGL核心代码保持独立不变,重新实现了WebGPURender以及相关类,但是只支持NodeMaterial,也是采用动态生成WGSL的方式。 老的材质都不能使用,也不能自动移植GLSL代码,因为没有采用BabylonJs那些复杂的工具类。

由于ThreeJs在平台层面,没有透明兼容WebGL和WebGPU,应用开发者要么选择其中之一,要么就得自己在应用中根据renderer的不同做较多的区别控制; 老的应用有较多移植修改工作,像纯数据的Mesh这些没关系,但是跟材质和渲染有关的,需要修改代码。

ThreeJs单独展示了WebGPU相关的演示,代码跟原来的核心也是完全分开的。当然,简洁和速度依然是ThreeJs的优点

ThreeJs官方WebGPU演示

Cesium

在bing上搜索"cesium webgpu"了解情况,相关结果只有几条

1. 2022年3月Cesium CEO主持的访谈,邀请了现任W3C WebGPU专家(Cesium前员工)讨论技术话题。 通篇谈话,表扬了ThreeJs和BabylonJs,没有提及Cesium的任何想法和计划。

Cesium官网访谈:WebGPU and Graphics on the Web


2. GitHub上出现  GitHub - tragamota/cesium-webgpu: An open-source...

但是仔细去看那些代码,实际上跟Cesium官方代码一样,没有任何WebGPU相关的技术痕迹。

Github冠名webgpu的Cesium项目


3. Cesium论坛在2021年10月,Chrome刚发布WebGPU测试版之后不久的一个帖子,截图如下

Cesium论坛:Will Cesium support WebGPU?


Cesium官方表示,“开发路线图上没有该计划,但保持密切关注”,然后关闭了该问题。


疑问:Cesium代码庞大,用JavaScript开发,结构的灵活性比BabylonJs差了很多。如果是像ThreeJs一样,开发WebGPU的分支版本还好办。 但是作为WebGIS平台,跟一个小巧的渲染引擎不同,已经开发的应用如何升级移植?开发商未来怎样二选一?

如果想兼容WebGL和WebGPU,BabylonJs全力以赴参与W3C工作,用了一年半时间,中间没发任何正式版本,最终才解决问题。Cesium准备花多大代价?