What's WebGPU 新功能 (Chrome 113 版)

François Beaufort
François Beaufort
GitHub

經過多年的開發，Chrome 團隊宣布，WebGPU 第一版現在已預設在 ChromeOS、macOS 和 Windows 的 Chrome 中提供。詳情請參閱「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 中進行實驗。您可以在本機啟用 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 131

Chrome 130

Chrome 129

Chrome 128

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