经过多年的开发,Chrome 团队宣布,ChromeOS、macOS 和 Windows 上的 Chrome 现已默认提供第一个版本的 WebGPU。如需了解详情,请参阅 Chrome 随附的 WebGPU。
我们还开始在 MDN 上添加有关 WebGPU 的全面文档。
以及更多精彩功能。
在 importExternalTexture()
中使用 WebCodecs VideoFrame
源代码
WebGPU 公开了一个 API,用于创建从 HTMLVideoElement
到 importExternalTexture()
的不透明“外部纹理”对象。您可以使用这些对象高效地对视频帧进行采样,并且有可能直接从源 YUV 数据中以 0 复制的方式进行采样。
不过,初始 WebGPU 规范不允许通过 WebCodecs VideoFrame
对象创建 GPUExternalTexture
对象。对于已经在使用 WebCodecs 并希望将 WebGPU 集成到视频处理流水线中的高级视频处理应用,此功能非常重要。目前正在讨论 gpuweb/gpuweb#1380 问题。
启用该功能
默认情况下,Chrome 中未启用此功能,但您可以明确启用该功能,在 Chrome 113 中开展相关实验。您可以在本地激活该 GPU,方法是在 chrome://flags/#enable-webgpu-developer-features
中启用“WebGPU 开发者功能”标志。
为了向访问您应用的所有访问者启用该模式,源试用目前正在进行中,并将于 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 125
Chrome 124
Chrome 123
Chrome 122
Chrome 121
- 在 Android 上支持 WebGPU
- 在 Windows 上使用 DXC(而非 FXC)进行着色器编译
- 计算和渲染通道中的时间戳查询
- 着色器模块的默认入口点
- 支持将 display-p3 作为 GPUExternalTexture 颜色空间
- 内存堆信息
- 黎明动态
Chrome 120
Chrome 119
Chrome 118
Chrome 117
Chrome 116
- WebCodecs 集成
- GPUAdapter 返回的设备
requestDevice()
- 在调用
importExternalTexture()
时确保视频播放流畅 - 规范一致性
- 改善开发者体验
- 黎明动态