Web GPU能够显著降低相同图形规模下JavaScript的工作负载量。不仅如此,它还将机器学习模型的效率提升了3倍以上。相较于前几年发布的WebGL版本,新的WebGPU具有灵活GPU编程和高级功能访问能力。

作者 | 王瑞平

审校 | 云昭

好消息,页游要重新崛起了!Web上有望产生3A游戏大作了!


经过6年持续不断的开发,Chrome团队于当地时间4月6日发布Web GPU。它是一种新型的API,可以让Web应用程序更多地访问你的显卡功能,能够被用来在网络上进行高性能3D图形和数据并行计算。


当日,Chrome团队还激动地宣布:“Web GPU可以在Chrome 113中默认可用,目前仍处于Beta测试阶段。”


具体来讲,Web GPU能够显著降低相同图形规模下JavaScript的工作负载量。不仅如此,它还将机器学习模型的效率提升了3倍以上。相较于前几年发布的WebGL版本,新的WebGPU具有灵活GPU编程和高级功能访问能力。


顺便说一句,WebGPU的初始版本能够在ChromeOS、macOS和Windows上使用,对其它平台的支持功能将在今年晚些时候推出。

1、迈入大浏览器时代


众所周知,所有显卡在使用之前都要安装对应的驱动程序,只有显卡驱动程序与应用程序以图形API的形式互联,才能让显卡完成图形渲染与并行计算等工作。


WebGPU的初始版本可在Chrome 113、支持Vulkan的ChromeOS设备、支持Direct3D 12的Windows设备和macOS上使用。而且,Linux、Android以及对现有平台的扩展支持将很快推出。除了Chrome的初始实现外,Web GPU目前还可以在Firefox和Safari中运行。这标志着正式迈入大浏览器时代。


从专业的角度来讲,Chromium能够通过Dawn模块实现Web GPU的API。Dawn中的DawnNative模块与3大图形API沟通,向上为DawnWire模块传递信息。DawnWire模块与JavaScript API沟通,通过C++语言实现最终的API。


FireFox则用Rust语言以及与Dawn类似模块实现Web GPU的API。Safari是通过更新WebKit实现的API。

2、功能高级在哪里?


WebGPU是一种新的Web API,它公开了现代硬件功能并允许在GPU上进行渲染和计算操作,类似于Direct3D 12、Metal和Vulkan。与API的WebGL系列不同,WebGPU提供对更高级GPU功能的访问,并为GPU上的一般计算提供一流的支持。


与Direct3D12、Metal和Vulkan相似的是,Web GPU允许在GPU上进行渲染和计算操作。具体来讲,Web GPU作为前些年Web GL的升级版,不仅使用户能够访问更高级GPU,还为GPU上的一般计算提供高级支持。


不仅如此,该API在设计时充分考虑Web平台的特点,开发出符合用户习惯的JavaScript API与Promises 集成、支持导入视频和完备错误提示信息的完善开发者体验。


未来,Web GPU的初始版本将被用作更新和增强功能的构建模块。同时,该API也将提供更高级的图形功能,并鼓励开发人员申请其它功能。


此外,Chrome团队还计划在“Web GPU着色语言”中进行更多的机器学习优化和额外的人体工程学调整,从而能够对着色器核心进行深入访问。

3、性能秒杀WebGL


那么,旧版本的WebGL与WebGPU在性能与参数方面究竟有何差异?在渲染性能上,WebGL比WebGPU快3倍以上。在计算性能上,WebGPU比WebGL快50倍以上。


在参数方面,WebGL的请求参数简单,主要包括性能参数和功能参数。而WebGPU分成两个阶段,请求适配器时可以对性能作要求,请求设备对象时可以对GPU各个方面的参数作校验,确定是否满足程序要求。


此外,WebGL的CPU开销比WebGPU更高,因此使用WebGPU实现相同的渲染工作负载可能会更节能,即使GPU本质上是在做同样的工作。


总之,WebGPU是一个精确的图形API,完全释放出显卡的能力,减轻了浏览器开发者的负担,有别于WebGL这样的上层API。

4、Web GPU的多线程与通用计算能力


Web GPU可以更好地在线程中执行多种与现代图形API相关的渲染任务,包括:在线程中更新资源(如更新buffer)、并行地编译shader、并行地创建pipeline state、在线程中创建command buffer等。


目前,有两种方法实现多线程:第一种方法是通过OffscreenCanvas API,实现主线程与渲染线程分离;第二种方法是创建worker,在worker中执行WebGPU相关的渲染任务。


具体来讲,WebGPU用Pipeline Object设置渲染管线中的相关信息分为两个阶段:“记录命令”和“提交命令”。“记录命令”是一个纯CPU进程,可以分别记录在多个Worker(多线程)中,然后提交到同一个队列中。“提交命令”就是让GPU根据队列中的命令顺序执行任务。


通过多线程,Web GPU上下文可以由多个工作人员共享。这些worker只要在时间线上没有互斥操作都可以正常运行。这无疑带来了良好的开发体验。


此外,Web GPU还体现出强大的通用计算能力,通过计算着色器,使用GPU中 CU(Compute Unit,计算单元)旁边的共享内存,速度比普通的显存速度快得多。


总的来讲,Web GPU可以减少CPU开销,提供对多线程的良好支持,使用计算着色器将通用计算的强大功能引入Web,未来,还将支持“实时光线追踪”技术。

5、新体验:Web3D终于迎来曙光


那么,从用户层面来讲,Chrome支持Web GPU会带来哪些全新的体验变化呢?


由于WebGPU的显卡被开放,便于浏览器直接运用GPU完成各种操作命令,成功实现3D图形渲染能力质的飞跃。此外,它还便于开发者为浏览器编写“更酷炫”的游戏,大幅度提升页游画面表现。


图片


WebGPU落地的最大意义还是在于人工智能方面。根据谷歌的说法,WebGPU改变了“机器学习模型”。例如,有了WebGPU,浏览器直接就能借助NVIDIA显卡调用AI绘画所需要的算力和功能。Stable Diffusion的本地化部署可能就真的只用动动鼠标就行。


未来,WebGPU一定能在Web端释放现代图形处理器(GPU)的强大能力,无论是页游,亦或是通用并行计算带来的机器学习与AI能力。

6、WebGL与WebGPU实现兼容


值得一提的是,Web GPU是W3C“Web GPU”社区小组共同努力的结果。不乏来自Mozilla、苹果、英特尔和微软等大公司的贡献。从2017年开始设计以来,经过6年的开发(90位贡献者、2000次提交、3000个问题),团队终于实现Web GPU在Chrome中可用,也可支持Firefox和Safari。


无论是Chrome的Dawn库,还是Firefox的WGPU库均可作为独立包使用。它们还具有可移植性和人体工程学层,抽象出GPU API操作系统。在本机应用程序中使用这些库时,开发者还可以更容易地通过Emscripten和Rust web-sys移植到WASM。


幸运的是,许多广泛使用的WebGL库已经与WebGPU实现兼容。如果要切换WebGPU可能只需要进行一行配置。具体来讲,Babylon.Js已经完全支持WebGPU、PlayCanvas可初步支持WebGPU、TensorFlow.Js支持大多数操作符的WebGPU优化版本、Js WebGPU支持正在实现。

7、内部人士爆料:未来可期


一位自称参与WebGPU开发的谷歌内部人士称:这是一个巨大的里程碑。早在他开发高级2D渲染器vello时,就意识到WebGPU会成为游戏规则的改变者。有了它之后,我们可以在任何地方都运行起相当现代的基础架构:Web、Windows、Mac、Linux、ChromeOS、iOS和Andriod。


此外,他还指出,通过WebGPU,运行机器学习负载的性能在1.0版本中有所不足,但想要赶上本地运行只是一个工程问题,完全可以实现的。


同时,他还爆料WebGPU团队正在开发本地扩展,以期实现人人想要的Bindless,有助于推动Web标准化。

8、网友吐槽:迟到的里程碑


Reddit上不少网友对于现在才推出WebGPU感到有些遗憾。“移动网络上GPU加速更常见的用例是2D游戏。即使在低端设备上,使用Pixi类似的东西,就已经足够快了。”


也有人认为有了WebGPU之后,PC或者桌面可能回到90年代的流行度。


图片


还有一位前端网友认为,WebGPU没有囊括“现代图形API设计”的重要发展方向:无绑定(Bindless)、网格着色器、光线追踪、灵活的管道状态等等,这些WebGPU目前都没有出现。因此他感叹:WebGPU是不是来得有点晚了!

9、写在最后


正如上文所说,WebGPU的发布,将会给PC带来翻盘的可能。但目前WebGPU表示基准是桌面+移动设备都支持,但未来的扩展应该支持仅限桌面的用例。


也许,PC作为AI技术最为前沿和先进的载体,WebGPU的出现,再加上WASM和Rust的后端支持,超越“小程序时代”的“大浏览器时代”即将来临!


参考资料:

https://www.theverge.com/2023/4/6/23673462/google-webgpu-chrome-113-api-machine-learning

https://blog.csdn.net/qq_43479892/article/details/122505601

https://developer.chrome.com/blog/webgpu-release/