เผยแพร่: 3 มิ.ย. 2025
การใช้งาน WebGPU API ของ Chrome มีฟีเจอร์ที่มีไว้สำหรับการพัฒนาและการทดสอบเท่านั้น ฟีเจอร์เหล่านี้อยู่นอกข้อกำหนด WebGPU มาตรฐานและไม่ควรใช้ในเวอร์ชันที่ใช้งานจริง
เอกสารนี้อธิบายวิธีเปิดใช้ฟีเจอร์สำหรับนักพัฒนาซอฟต์แวร์ WebGPU โดยละเอียดและแสดงรายการที่ครอบคลุม
วิชาบังคับก่อน
หากต้องการเปิดใช้ฟีเจอร์สำหรับนักพัฒนาซอฟต์แวร์ WebGPU ใน Chrome ให้ทำตามขั้นตอนต่อไปนี้
- เปิดใช้Flag "WebGPU Developer Features" ที่
chrome://flags/#enable-webgpu-developer-features - รีสตาร์ทเบราว์เซอร์ Chrome
ปิดใช้การแจกแจงเชิงปริมาณการค้นหาการประทับเวลา
การค้นหาการประทับเวลาช่วยให้แอปพลิเคชัน WebGPU วัดเวลาดำเนินการของคำสั่ง GPU ได้อย่างแม่นยำ (เป็นนาโนวินาที) ระหว่างการประมวลผลและการแสดงผล การค้นหาเหล่านี้จําเป็นสําหรับการวิเคราะห์ประสิทธิภาพและลักษณะการทํางานของภาระงาน GPU ดูรายละเอียดเพิ่มเติมได้ที่การค้นหาการประทับเวลาในการคำนวณและผ่านการแสดงผล
เนื่องจากการค้นหาการประทับเวลามีความละเอียด 100 ไมโครวินาทีเนื่องจากข้อกังวลเกี่ยวกับการโจมตีตามลำดับเวลา ซึ่งถือเป็นการประนีประนอมที่ดีระหว่างความแม่นยำและความปลอดภัย การแปลงค่านี้จะปิดใช้โดยอัตโนมัติเมื่อเปิดใช้ Flag "ฟีเจอร์สำหรับนักพัฒนาซอฟต์แวร์ WebGPU"
ข้อมูลอะแดปเตอร์เพิ่มเติม
GPUAdapterInfo จะแสดงแอตทริบิวต์ต่อไปนี้เพื่อให้คุณเข้าใจอะแดปเตอร์ที่ใช้อยู่ได้ดียิ่งขึ้น
- แอตทริบิวต์
device(มาตรฐาน) คือตัวระบุอะแดปเตอร์เฉพาะผู้ให้บริการ - แอตทริบิวต์
description(มาตรฐาน) คือสตริงที่มนุษย์อ่านได้ซึ่งให้รายละเอียดเกี่ยวกับอะแดปเตอร์ - แอตทริบิวต์
driver(ไม่เป็นไปตามมาตรฐาน) คือสตริงที่มนุษย์อ่านได้ซึ่งอธิบายไดรเวอร์ - แอตทริบิวต์
backend(ไม่ใช่มาตรฐาน) ระบุแบ็กเอนด์กราฟิก เช่น"WebGPU","D3D11","D3D12","metal","vulkan","openGL","openGLES"หรือ"null" - แอตทริบิวต์
type(ไม่ใช่มาตรฐาน) จะระบุประเภท GPU ซึ่งได้แก่"discrete GPU","integrated GPU","CPU"หรือ"unknown" - แอตทริบิวต์
d3dShaderModel(ไม่ใช่มาตรฐาน) จะระบุหมายเลขรุ่นของโปรแกรมเปลี่ยนรูปแบบ D3D ที่รองรับสูงสุด เช่น 62 หมายถึงรองรับ HLSL SM 6.2 - แอตทริบิวต์
vkDriverVersion(ไม่เป็นไปตามมาตรฐาน) คือเวอร์ชันของไดรเวอร์ Vulkan ที่ระบุโดยผู้ให้บริการ - แอตทริบิวต์
powerPreference(ไม่ใช่มาตรฐาน) คือ"low-power"หรือ"high-performance"โดยอิงตาม GPUPowerPreference ใน GPURequestAdapterOptions
GPUAdapterInfo จะแสดงmemoryHeapsข้อมูลที่ไม่เป็นมาตรฐาน เช่น ขนาดและประเภทของกองหน่วยความจำที่มีอยู่ในอะแดปเตอร์ เพื่อคาดการณ์ข้อจำกัดของหน่วยความจำเมื่อจัดสรรหน่วยความจำจำนวนมากระหว่างการพัฒนาแอป
const adapter = await navigator.gpu.requestAdapter();
for (const { size, properties } of adapter.info.memoryHeaps) {
console.log(size); // memory heap size in bytes
if (properties & GPUHeapProperty.DEVICE_LOCAL) { /* ... */ }
if (properties & GPUHeapProperty.HOST_VISIBLE) { /* ... */ }
if (properties & GPUHeapProperty.HOST_COHERENT) { /* ... */ }
if (properties & GPUHeapProperty.HOST_UNCACHED) { /* ... */ }
if (properties & GPUHeapProperty.HOST_CACHED) { /* ... */ }
}
ตัวเลือกการคอมไพล์โมดูล Shader ที่ใช้คณิตศาสตร์แบบเข้มงวด
GPUShaderModuleDescriptor มีตัวเลือกบูลีน strictMath ที่ไม่ได้มาตรฐาน ซึ่งจะเปิดหรือปิดใช้ความแม่นยำทางคณิตศาสตร์ที่เข้มงวดระหว่างการคอมไพล์โมดูล Shader ตัวเลือกนี้ใช้ได้ใน Metal และ Direct3D เมื่อเปิดใช้ strictMath แล้ว คอมไพเลอร์จะเป็นไปตามกฎทางคณิตศาสตร์ที่แม่นยำ ในทางกลับกัน การปิดใช้จะช่วยให้คอมไพเลอร์เพิ่มประสิทธิภาพชิลด์ได้ดังนี้
- ไม่สนใจความเป็นไปได้ที่จะมีค่า NaN และ Infinity
- ถือว่า -0 เป็น +0
- แทนที่การหารด้วยวิธีคูณด้วยตัวหารย้อนกลับที่เร็วขึ้น
- การจัดเรียงการดำเนินการใหม่ตามสมบัติการเชื่อมโยงและการแจกแจง
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const code = `
// Examines the bit pattern of the floating-point number to
// determine if it represents a NaN according to the IEEE 754 standard.
fn isNan(x : f32) -> bool {
bool ones_exp = (bitcast<u32>(x) & 0x7f8) == 0x7f8;
bool non_zero_sig = (bitcast<u32>(x) & 0x7ffff) != 0;
return ones_exp && non_zero_sig;
}
// ...
`;
// Enable strict math during shader compilation.
const shaderModule = device.createShaderModule({ code, strictMath: true });
นำเข้าวิดีโอด้วยโหมดการคัดลอกข้อมูลแบบไม่ใช้พื้นที่เก็บข้อมูล
แอตทริบิวต์บูลีนที่ไม่เป็นไปตามมาตรฐานของ GPUExternalTexture isZeroCopy ช่วยให้คุณทราบว่า GPU เข้าถึงวิดีโอที่นำเข้าด้วย importExternalTexture() โดยตรงโดยไม่ต้องใช้สำเนาสื่อกลางหรือไม่
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const video = document.querySelector('video');
const externalTexture = device.importExternalTexture({ source: video });
if (externalTexture.isZeroCopy) {
console.log('Video frame was accessed directly by the GPU');
}