WebGPU：疑難排解提示和修正

François Beaufort
François Beaufort
GitHub

本文說明 WebGPU 在 Chrome 瀏覽器中可能無法運作或無法正常運作的原因，並提供明確的解決問題步驟。

以下範例顯示了 navigator 中無法使用 gpu 時，可能收到的 JavaScript 錯誤：

const adapter = await navigator.gpu.requestAdapter();

cancel Uncaught TypeError: Cannot read properties of undefined (reading 'requestAdapter')

這可能是出於下列其中一個原因。請參閱以下順序：

  1. WebGPU 僅適用於搭載 ChromeOS、macOS、Windows 和 Chrome 121 以上版本的 Chrome 113 以上版本。請前往 chrome://version 檢查版本，並視需要進行更新。

  2. 目前無法透過 Service Worker 或共用工作站存取 WebGPU。如果使用 Service Worker 或共用工作站，請將 WebGPU 程式碼移至專屬工作站或全域視窗環境。

  3. 只有安全內容才能存取 WebGPU。如果您透過不安全的通訊協定 (例如 http:、file:) 提供程式碼，可以使用安全的 https: 通訊協定，或是在網頁應用程式開發期間採用下列其中一種方法處理此規則：

    • 使用下列任一指令，在 http://localhost 或 http://127.0.0.1 上提供程式碼：npx http-server 或 python3 -m http.server。

    • 將來源新增至 chrome://flags/#unsafely-treat-insecure-origin-as-secure 的「不安全的來源」清單，然後重新啟動 Chrome。

    • 安裝 Node.js 並執行 npx servez --ssl，透過 https 使用假憑證提供資料夾。但在 Chrome 中還是會顯示警告，只要依序按一下「進階」和「繼續...」，即可略過警告。

    • 使用 ngrok 將本機網路伺服器公開至網際網路。

GPU 轉接器為空值

以下是您呼叫 requestAdapter() 中取得的轉接程式為空值時，可能會收到的 JavaScript 錯誤範例：

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

cancel Uncaught TypeError: Cannot read properties of undefined (reading requestDevice)

可能的原因如下：請參閱以下順序：

  1. 如果使用者在 chrome://settings/system 中關閉「在可用時使用圖形加速功能」，WebGPU 就會停用。檢查這項設定是否已關閉，然後再重新開啟

  2. 這個平台尚未支援 WebGPU。您可以啟用 chrome://flags/#enable-unsafe-webgpu 旗標，然後重新啟動 Chrome。如果是 Linux 實驗性支援，您還必須啟用 chrome://flags/#enable-vulkan 旗標。詳情請參閱無頭 Chrome 的 WebGPU 支援。

  3. GPU 硬體已特別列入封鎖清單。如果 chrome://gpu 顯示「WebGPU 已停用透過封鎖清單或指令列停用」，您可以啟用 chrome://flags/#enable-unsafe-webgpu 旗標並重新啟動 Chrome，藉此停用 WebGPU 轉接器封鎖清單。

  4. requestAdapter() 中傳遞的選項沒有相符的 GPU 轉接器。請嘗試使用不同的選項呼叫 requestAdapter()。

  5. WebGPU 需要 GPU (軟硬體或軟體模擬)。如要確認 Chrome 是否偵測到 GPU，請前往 chrome://gpu。

WebGPU 的速度比 WebGL 慢

  1. 開啟 chrome://gpu 並確認畫面上顯示「WebGPU: Hardware accelerated」(WebGPU：硬體加速)。如果看到「WebGPU：僅限軟體，無法使用硬體加速」訊息，則可能需要更新 GPU 驅動程式。

  2. 將 WebGL 概念直接轉譯為 WebGPU 可能無法充分運用 WebGPU 的獨特最佳化功能。請參閱從 WebGL 到 WebGPU 一文，瞭解兩者的差異。

Windows 特有限制

在 Windows 裝置上使用 WebGPU 時，請注意下列限制：

  • Chrome 不支援同時使用多個 GPU 轉接器。請參閱問題 chromium:329211593。

  • Chrome 一律會使用與其他 Chrome 工作負載分配到的 GPU 配接器。受到耗電量的特點 (即省電功能)，對於筆電來說通常是整合式顯示卡。這表示在呼叫 requestAdapter() 時，powerPreference 選項不會有任何影響。