WebGPU: เคล็ดลับและการแก้ปัญหา

François Beaufort
François Beaufort

เอกสารนี้จะอธิบายถึงสาเหตุที่ WebGPU อาจใช้งานไม่ได้หรือไม่ทำงานตามที่คาดไว้ในเบราว์เซอร์ Chrome พร้อมระบุขั้นตอนที่ชัดเจนในการแก้ไขปัญหาที่เป็นไปได้

ตัวอย่างต่อไปนี้แสดงข้อผิดพลาดของ JavaScript ที่คุณอาจได้รับเมื่อ gpu ไม่พร้อมใช้งานใน navigator

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

โดยอาจเกิดจากสาเหตุข้อใดข้อหนึ่งต่อไปนี้ โปรดดูลิงก์เหล่านั้นตามลำดับต่อไปนี้

  1. WebGPU ต้องใช้ Chrome 113 ขึ้นไปใน ChromeOS, macOS, Windows และ Chrome 121 ขึ้นไปใน Android ตรวจสอบเวอร์ชันของคุณที่ chrome://version และอัปเดตหากจำเป็น

  2. ขณะนี้ Service Worker หรือโปรแกรมทำงานที่ใช้ร่วมกันยังเข้าถึง WebGPU ไม่ได้ หากใช้โปรแกรมทำงานของบริการหรือผู้ปฏิบัติงานที่แชร์ ให้ย้ายโค้ด 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 เป็นค่าว่าง

ต่อไปนี้คือตัวอย่างของข้อผิดพลาด JavaScript ที่คุณอาจได้รับเมื่ออะแดปเตอร์ที่คุณได้รับจากการเรียกใช้ requestAdapter() เป็นค่าว่าง

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 ด้วย ดูข้อมูลเพิ่มเติมได้ที่การรองรับ WebGPU ใน Chrome แบบ Headless

  3. ฮาร์ดแวร์ GPU อยู่ในรายการที่บล็อกโดยเฉพาะ หากคุณเห็นข้อความ "WebGPU ถูกปิดใช้งานผ่านรายการที่บล็อกหรือบรรทัดคำสั่ง" ใน chrome://gpu คุณสามารถปิดรายการที่บล็อกของอะแดปเตอร์ WebGPU ได้โดยเปิดใช้งานการตั้งค่าสถานะ chrome://flags/#enable-unsafe-webgpu และรีสตาร์ท Chrome

  4. ไม่มีอะแดปเตอร์ GPU ที่ตรงกันสำหรับตัวเลือกที่ส่งใน requestAdapter() ลองโทรหา requestAdapter() ด้วยตัวเลือกอื่นๆ

  5. WebGPU ต้องใช้ GPU (จำลองฮาร์ดแวร์หรือซอฟต์แวร์) คุณตรวจสอบว่า Chrome ตรวจพบ GPU หรือไม่ได้โดยไปที่ chrome://gpu

WebGPU ช้ากว่า WebGL

  1. เปิด chrome://gpu และอ่าน "WebGPU: ฮาร์ดแวร์เร่งการแสดงผล" หากอ่าน "WebGPU: ซอฟต์แวร์เท่านั้น การเร่งฮาร์ดแวร์ไม่พร้อมใช้งาน" คุณอาจต้องอัปเดตไดรเวอร์ GPU

  2. การแปลแนวคิดของ WebGL เป็น WebGPU โดยตรงอาจไม่ได้ใช้ประโยชน์จากการเพิ่มประสิทธิภาพที่เป็นเอกลักษณ์ของ WebGPU อย่างเต็มที่ โปรดอ่านจาก WebGL ไปจนถึง WebGPU เพื่อเรียนรู้ความแตกต่างบางอย่าง

ข้อจำกัดเฉพาะสำหรับ Windows

โปรดระวังข้อจำกัดต่อไปนี้เมื่อใช้ WebGPU ในอุปกรณ์ Windows

  • Chrome ไม่สนับสนุนการใช้อะแดปเตอร์ GPU หลายตัวพร้อมกัน ดูปัญหา chromium:329211593

  • Chrome จะใช้อะแดปเตอร์ GPU เดียวกันกับที่มีการจัดสรรสำหรับภาระงานอื่นๆ ของ Chrome เสมอ ซึ่งโดยทั่วไปจะเป็นการ์ดแสดงผลในตัวสำหรับแล็ปท็อป เนื่องด้วยลักษณะการใช้พลังงาน (เช่น การประหยัดพลังงาน) หมายความว่าตัวเลือก powerPreference จะไม่มีผลใดๆ เมื่อเรียกใช้ requestAdapter()