WebGPU 的新变化 (Chrome 113)

François Beaufort
François Beaufort

经过多年的开发,Chrome 团队宣布,ChromeOS、macOS 和 Windows 上的 Chrome 现在默认提供第一个 WebGPU 版本。如需了解详情,请参阅 Chrome 搭载 WebGPU

我们还开始在 MDN 上添加有关 WebGPU 的全面文档

还有更多其他功能。

importExternalTexture() 中使用 WebCodecs VideoFrame 源代码

WebGPU 公开了一个用于创建不透明“外部纹理”的 API从 HTMLVideoElementimportExternalTexture() 的对象。您可以使用这些对象高效地对视频帧进行采样,可能以 0 复制的方式直接从源 YUV 数据中进行采样。

不过,初始 WebGPU 规范不允许基于 WebCodecs VideoFrame 对象创建 GPUExternalTexture 对象。对于已使用 WebCodecs 并希望在视频处理流水线中集成 WebGPU 的高级视频处理应用,此功能非常重要。gpuweb/gpuweb#1380 问题目前正在讨论中。

启用该功能

默认情况下,此功能在 Chrome 中处于停用状态,但您可以在 Chrome 113 中通过明确启用该功能来体验该功能。您可以在本地通过启用“WebGPU 开发者功能”将其激活flag(位于 chrome://flags/#enable-webgpu-developer-features 处)。

为了让您的应用的所有访问者都能使用此功能,目前正在进行源试用,并将在 Chrome 118(2023 年 12 月 8 日)中结束试用。若要参与试用,请注册一个元元素,并在 HTML 或 HTTP 标头中添加带有源试用令牌的元元素。如需了解详情,请参阅源试用使用入门博文。

示例代码

// Access the GPU device.
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

// Create VideoFrame from HTMLVideoElement.
const video = document.querySelector("video");
const videoFrame = new VideoFrame(video);

const texture = device.importExternalTexture({ source: videoFrame });
// TODO: Use texture in bind group creation.

请查看使用 WebCodecs 上传视频实验性示例。

WebGPU 的新变化

WebGPU 新变化系列涵盖的所有内容的列表。

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113