WebGPU:疑難排解提示和修正

François Beaufort
François Beaufort

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

以下範例顯示當 navigator 不提供 gpu 時,您可能會收到的 JavaScript 錯誤:

const adapter = await navigator.gpu.requestAdapter();
cancel Uncaught TypeError: Cannot read properties of undefined (reading 'requestAdapter')

這可能是出於下列其中一個原因。請依照以下順序查看:

  1. WebGPU 需要 Chrome 113 以上版本的作業系統,且搭載 ChromeOS、macOS、Windows,以及 Android 裝置上的 Chrome 121 以上版本。前往 chrome://version 檢查版本,並視需要更新。

  2. 只有安全環境才能存取 WebGPU。如果您在不安全的通訊協定 (例如 http:file:) 上提供程式碼,請使用安全的 https: 通訊協定,或在開發網頁應用程式期間以下列其中一種方式解決這個問題:

    • 使用下列任一指令,在 http://localhosthttp://127.0.0.1 本機提供程式碼:npx http-serverpython3 -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. 使用者關閉「在可用時使用圖形加速」時,系統會停用 WebGPU在「chrome://settings/system」中。請檢查這項設定是否已關閉,然後重新開啟

  2. 這個平台尚未支援 WebGPU。您可以啟用 chrome://flags/#enable-unsafe-webgpu 旗標,然後重新啟動 Chrome。如需 Linux 實驗性支援,您也必須啟用 chrome://flags/#enable-vulkan 標記。詳情請參閱「Headless Chrome 的 WebGPU 支援」一文。

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

  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 轉接器相同。一般來說,這種顯示卡是整合式圖形卡。這表示 powerPreference 選項在呼叫 requestAdapter() 時沒有任何影響。