What's 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() 建立不透明的「外部紋理」物件。這些物件可讓您有效率地針對影片影格進行採樣,且可能直接從來源 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 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113