WebGPU简介

简介

WebGPU 是一个潜在的网页标准和 JavaScript API 的工作名称,用于加速图形和计算,旨在提供“现代 3D 图形和计算能力”。它由 W3C GPU for the Web Community Group 与来自苹果、Mozilla、微软、Google等公司的工程师共同开发。

与 WebGL 不同,WebGPU 并不是任何现有原生 API 的直接移植。它基于 Vulkan、Metal 和 Direct3D 12 提供的 API,旨在为移动和桌面平台提供高性能。移动平台在创建 WebGPUDevice 对象时将受到限制,需要使用现代图形 API。

诞生的背景

WebGL 在 2011 年左右首次出现后,在图形功能方面彻底改变了 web。WebGL 是 OpenGL ES 2.0 图形库的 JavaScript 端口,允许 web 页面直接将渲染计算传递给设备的 GPU,这会以非常高的速度处理,并在canvas内渲染结果。

WebGL 和用于编写 WebGL 着色器代码的 GLSL 语言十分复杂,因此创建了几个 WebGL 库,以便更轻松地编写 WebGL 应用程序:流行的示例包括 Three.js、Babylon.js 以及 PlayCanvas。开发者可以使用这些工具去构建身临其境的基于 web 3D 的游戏、音乐视频、培训和建模工具、VR 和 AR 体验等。

然而,WebGL 有一些需要解决的基本问题:

自 WebGL 发布以来,出现了新一代的原生 GPU API——最受欢迎的是微软的 Direct3D 12、苹果的 Metal 以及科纳斯组织的 Vulkan——它们提供了大量新特性。并没有任何计划对 OpenGL(以及 WebGL)进行更多更新,因此它将不会获得任意这些新的特性。然而,WebGPU 将在未来添加这些新特性。 WebGL 完全基于绘制图形并将它们渲染到画布的用例。它并不能很好地处理通用 GPU(GPGPU)的计算。GPGPU 计算对于很多不同的用例显得越来越重要,例如那些基于机器学习的模型。 无论是在同时渲染的对象方面,还是新渲染特性的使用方面,3D 图形应用程序的需求都在逐渐变高。

WebGPU 解决了这些问题,其提供了与现代 GPU API 兼容的更新的通用架构,它会让你感到更加丝滑。它支持图形渲染,同时对 GPGPU 计算也有一流的支持。在 CPU 端渲染单个对象的成本要低得多,并且它支持现代化的 GPU 渲染特性,例如,基于计算的粒子和用于后期处理的滤镜,如颜色效果、锐化和景深模拟。此外,它也可以直接在 GPU 上处理诸如剔除和骨骼动画模型等耗费大量计算资源的任务。

特点

  • 高性能:

WebGPU 专为现代图形硬件设计,充分利用了 GPU 的并行计算能力。通过显式的资源管理、多线程渲染和低开销的 API 调用,WebGPU 可以实现比 WebGL 更高的性能。

  • 低功耗:

WebGPU 支持自动功耗管理,可以根据设备的性能和功耗需求自动调整渲染质量。这使得 WebGPU 在移动设备和笔记本电脑上更加节能。

  • 易用性:

WebGPU 使用 JavaScript 和 WebIDL 作为编程接口,使得开发者可以使用熟悉的 Web 技术进行开发。此外,WebGPU 还提供了一套统一的着色语言(WGSL),简化了跨平台开发的复杂性。

  • 安全性:

WebGPU 在设计时充分考虑了安全性,通过严格的资源验证和错误处理机制,确保了在浏览器环境中的安全运行。

  • 可扩展性:

WebGPU 支持可扩展的功能集,可以根据硬件和软件的发展逐步引入新的特性,确保 API 的长期可用性。

  • 跨平台:

与opengl有众多的实现,不太统一的跨平台不同。webgpu的统一性和跨平台是非常完美的,webgpu即实现了几乎所有平台的支持,同时也吸收了vulkan、metal等现代图形api的优点,vulkan也是跨平台,但跨的不够极致。比如在苹果的平台上就需要借助一个转换将vulkan转成metal实现,而webgpu在各个平台就是直接和native的api的一个桥接转换。

应用领域

WebGPU 可以应用于各种 Web 场景,包括但不限于:

  • 3D 游戏:WebGPU 可以为 Web 游戏提供高性能的图形渲染,使得游戏在浏览器中运行得更加流畅。

  • 数据可视化:WebGPU 可以处理大量的数据点和几何体,为复杂的数据可视化应用提供强大的支持。

  • 虚拟现实和增强现实:WebGPU 可以与 WebXR API 结合使用,为 Web 上的虚拟现实和增强现实应用提供高性能的图形渲染。

  • 机器学习和计算:WebGPU 支持通用 GPU 计算,可以为 Web 上的机器学习和科学计算应用提供加速。

对比WebGL的差异

WebGPU 和 WebGL 都是为 Web 应用提供图形渲染能力的 API,但它们之间存在一些关键差异。以下是 WebGPU 和 WebGL 的主要对比:

  • 性能:

WebGPU 针对现代图形硬件进行了优化,提供了更高的性能。它采用了显式的资源管理、多线程渲染和低开销的 API 调用,以充分利用 GPU 的并行计算能力。相比之下,WebGL 基于较旧的 OpenGL ES 规范,性能相对较低。

  • 功能:

WebGPU 支持更多的现代图形功能,如多线程渲染、绑定组、存储缓冲区等。这些功能使得开发者可以更好地控制渲染过程,实现更复杂的效果。而 WebGL 的功能相对较少,可能无法满足一些高级应用的需求。

  • 计算能力:

WebGPU 支持通用 GPU 计算,可以用于加速机器学习、物理模拟等计算密集型任务。而 WebGL 主要关注图形渲染,虽然可以通过扩展实现一定程度的计算能力,但不如 WebGPU 方便和高效。

  • 着色语言:

WebGPU 使用一种名为 WGSL(WebGPU Shading Language)的新着色语言,它旨在简化跨平台开发的复杂性。而 WebGL 使用 GLSL(OpenGL Shading Language)作为着色语言,可能需要额外的工作来适应不同的平台和设备。

  • 易用性:

WebGPU 的 API 设计更加现代和友好,易于学习和使用。而 WebGL 的 API 较为复杂,可能需要更多的时间来掌握。

  • 兼容性: 目前,WebGL 在主流浏览器中得到了广泛支持,可以在多数设备上运行。而 WebGPU 尚处于开发阶段,只在部分浏览器中实验性地支持。然而,随着 WebGPU 规范的逐步成熟,预计它将在未来得到更广泛的支持。

前景

WebGPU 是一种新兴的 Web 图形 API,旨在为现代图形和计算应用提供高性能、低功耗的解决方案。在去年春季,谷歌的Chrome浏览器113版本就已经默认开启WebGPU的支持了https://www.infoq.cn/article/qwawharqawdragtcoxqv。 虽然WebGL 仍然是 Web 图形的主流选择,但随着 WebGPU 的发展,它有望成为未来 Web 应用的主要图形 API。

参考

维基百科-webgpu

mmdn-WebGPU API


微信公众号