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