มีอะไรใหม่ใน WebGPU (Chrome 113)

François Beaufort

หลังจากพัฒนามาหลายปี ทีม Chrome ประกาศว่า WebGPU เวอร์ชันแรกพร้อมใช้งานโดยค่าเริ่มต้นใน Chrome บน ChromeOS, macOS และ Windows แล้ว ดูข้อมูลเพิ่มเติมได้ที่ Chrome ships WebGPU

นอกจากนี้ เรายังเริ่มเพิ่มเอกสารประกอบที่ครอบคลุมสำหรับ WebGPU ใน MDN แล้ว

และยังมีอีก

ใช้แหล่งที่มา `VideoFrame` ของ WebCodecs ใน `importExternalTexture()`

WebGPU แสดง API เพื่อสร้างออบเจ็กต์ "พื้นผิวภายนอก" แบบทึบแสงจาก HTMLVideoElement ผ่าน importExternalTexture(). คุณสามารถใช้ออบเจ็กต์เหล่านี้เพื่อสุ่มตัวอย่างเฟรมวิดีโอได้อย่างมีประสิทธิภาพ ซึ่งอาจทำได้โดยไม่ต้องคัดลอกข้อมูลโดยตรงจากข้อมูล YUV ต้นทาง

อย่างไรก็ตาม ข้อกำหนดเบื้องต้นของ WebGPU ไม่อนุญาตให้สร้างออบเจ็กต์ GPUExternalTexture จากออบเจ็กต์ WebCodecs VideoFrame ความสามารถนี้มีความสำคัญสำหรับแอปประมวลผลวิดีโอขั้นสูงที่ใช้ WebCodecs อยู่แล้วและต้องการผสานรวม WebGPU ในไปป์ไลน์การประมวลผลวิดีโอ ขณะนี้มีการพูดคุยกันในปัญหา gpuweb/gpuweb#1380

เปิดใช้ฟีเจอร์

โดยค่าเริ่มต้น ฟีเจอร์นี้จะไม่ได้เปิดใช้ใน Chrome แต่คุณสามารถทดลองใช้ใน Chrome 113 ได้โดยเปิดใช้ฟังก์ชันการทำงานอย่างชัดแจ้ง คุณเปิดใช้งานฟีเจอร์นี้ในเครื่องได้โดยเปิดใช้ แฟล็ก "ฟีเจอร์สำหรับนักพัฒนาแอป WebGPU" ที่ chrome://flags/#enable-webgpu-developer-features

หากต้องการเปิดใช้ฟีเจอร์นี้สำหรับผู้เข้าชมแอปทุกคน ขณะนี้เรากำลังดำเนินการช่วงทดลองใช้จากต้นทางซึ่งจะสิ้นสุดใน Chrome 118 (8 ธันวาคม 2023) หากต้องการเข้าร่วมช่วงทดลองใช้ ให้ลงชื่อสมัครใช้และใส่องค์ประกอบเมตาที่มีโทเค็นช่วงทดลองใช้จากต้นทางในส่วนหัว 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 เวอร์ชันทดลอง