查看原文
其他

Chrome 发布 WebGPU

CUGGZ 前端充电宝 2023-06-15

经过多年的开发,Chrome 团队发布了 WebGPU,它允许在 Web 上进行高性能 3D 图形和数据并行计算。WebGPU 现在默认在 Chrome 113 中可用,其目前处于 Beta 通道,并预计将于 4 月 26 日发布正式版。

WebGPU 是一种新的 Web 图形 API,它具有显着的优势,例如大大减少相同图形的 JavaScript 工作量,以及机器学习模型推断的三倍以上的改进。WebGPU 的初始版本可以在 ChromeOS、macOS 和 Windows 上使用。对其他平台的支持将于今年晚些时候推出。

Web 网络图形的新曙光

WebGPU 是一种新的 Web API,它公开了现代硬件功能,并允许在 GPU 上进行渲染和计算操作,类似于 Direct3D 12、Metal 和 Vulkan。与 WebGL 系列 API 不同,WebGPU 提供了对更高级 GPU 功能的访问,并为 GPU 上的通用计算提供一流的支持。该 API 的设计考虑了 Web 平台,具有常用的 JavaScript API、与 Promise 的集成、对导入视频的支持以及带有大量错误消息的完善的开发人员体验。

WebGPU 的这个初始版本是未来更新和增强的构建块。API 将提供更高级的图形功能,并鼓励开发人员发送对其他功能的请求[1]。Chrome 团队还计划提供对着色器核心的更深入访问,以便在 WebGPU 着色语言 WGSL 中进行更多的机器学习优化和额外的人体工程学。

WebGPU 是 W3C 的“Web GPU”社区组织[2]协作努力的结果,其中包括来自 Mozilla、Apple、Intel 和 Microsoft 等主要公司的贡献。经过六年的发展(90 位贡献者,2000 次 commits,3000 个 issues[3]),从 2017 年的初始设计开始,第一个实现现在可以在 Chrome 中使用,并正在支持 Firefox 和 Safari。

WebGPU 是 W3C 的“Web GPU”社区组协作努力的结果,其中包括来自 Mozilla、Apple、Intel 和 Microsoft 等主要公司的贡献。经过六年的发展(90 位贡献者,2000 次提交,3000 个问题),从 2017 年的初始设计开始,第一个实现现在可以在 Chrome 中使用,并正在支持 Firefox 和 Safari。

Chromium 的 Dawn[4] 库和 Firefox 的 wgpu[5] 库都可以作为独立包使用,它们提供了出色的可移植性和人体工程学层,可以抽象操作系统 GPU API。在原生应用中使用这些库还可以更轻松地通过 Emscripten[6]Rust web-sys[7] 移植到 WASM[8]

浏览器支持

WebGPU 的初始版本可在支持 Vulkan 的 ChromeOS 设备、支持 Direct3D 12 的 Windows 设备和 macOS 的 Chrome 113 中使用。Linux、Android 和对现有平台的扩展支持即将推出。

除了在 Chrome 中的初步实现之外,目前在 Firefox 和 Safari 中正在开发 WebGPU。

库支持

许多广泛使用的 WebGL 库已经在实施 WebGPU 支持的过程中或已经这样做了。这意味着使用 WebGPU 可能只需要进行一行更改:

  • Babylon.js[9] 已经完全支持 WebGPU,请参见演示[10]
  • PlayCanvas[11] 宣布了最初的 WebGPU 支持。
  • TensorFlow.js[12] 支持大多数运算符的 WebGPU 优化版本。
  • Three.js[13] WebGPU 支持正在进行中,请参阅示例[14]

相关资源

WebGPU 是一项重要的技术,推荐以下资源以了解更多信息:

  • 查看 WebGPU[15]WGSL[16] 的 W3C 规范。
  • 使用示例[17]进行实验并浏览 WGSL[18]
  • 查看 MDN 文档[19]
  • 阅读官方解释[20]最佳实践[21]
  • 了解 GPU 计算[22]等。

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

相关资料

[1]

发送对其他功能的请求: https://github.com/gpuweb/gpuweb/issues

[2]

W3C 的“Web GPU”社区组织: https://www.w3.org/community/gpu/

[3]

90 位贡献者,2000 次 commits,3000 个 issues: https://github.com/gpuweb/gpuweb/graphs/contributors

[4]

Dawn: https://dawn.googlesource.com/dawn

[5]

wgpu: https://github.com/gfx-rs/wgpu

[6]

Emscripten: https://emscripten.org/

[7]

Rust web-sys: https://rustwasm.github.io/wasm-bindgen/web-sys/index.html

[8]

WASM: https://webassembly.org/

[9]

Babylon.js: https://babylonjs.com/

[10]

演示: https://playground.babylonjs.com/#YX6IB8#73

[11]

PlayCanvas: https://blog.playcanvas.com/initial-webgpu-support-lands-in-playcanvas-engine-1-62/

[12]

TensorFlow.js: https://www.npmjs.com/package/@tensorflow/tfjs-backend-webgpu

[13]

Three.js: https://threejs.org/

[14]

示例: https://threejs.org/examples/?q=webgpu#webgpu_particles

[15]

WebGPU: https://gpuweb.github.io/gpuweb/

[16]

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

[17]

示例: https://webgpu.github.io/webgpu-samples/

[18]

浏览 WGSL: https://google.github.io/tour-of-wgsl/

[19]

MDN 文档: https://developer.mozilla.org/docs/Web/API/WebGPU_API

[20]

解释: https://gpuweb.github.io/gpuweb/explainer/

[21]

最佳实践: https://toji.dev/webgpu-best-practices/

[22]

GPU 计算: https://developer.chrome.com/articles/gpu-compute/

往期推荐

Electron 24.0.0 正式发布,跨平台桌面应用开发工具

最新,Vue 改进了响应式 API 中 getter 的用法!

【万字长文】深入理解 TypeScript 高级用法

React 团队最近在忙啥?

React 正式推出全新官方文档!

TypeScript 5.0 正式发布!

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存