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

François Beaufort

รองรับ WebGPU บน Android

ทีม Chrome ยินดีที่จะประกาศว่าตอนนี้ WebGPU เปิดใช้งานโดยค่าเริ่มต้นใน Chrome 121 ในอุปกรณ์ที่ใช้ Android 12 ขึ้นไป ซึ่งขับเคลื่อนโดย Qualcomm และ ARM GPU

เราจะทยอยขยายการรองรับไปยังอุปกรณ์ Android ที่หลากหลายมากขึ้น รวมถึงอุปกรณ์ Android 11 ในอนาคตอันใกล้ การขยายการใช้งานนี้จะขึ้นอยู่กับการทดสอบและการเพิ่มประสิทธิภาพเพิ่มเติม เพื่อประสบการณ์การใช้งานที่ราบรื่นในการกำหนดค่าฮาร์ดแวร์ที่หลากหลาย ดูปัญหา chromium:1497815

วันที่

ตัวอย่าง WebGPU ที่ทำงานใน Chrome สำหรับ Android

ใช้ DXC แทน FXC สำหรับการคอมไพล์ตัวปรับแสงเงาใน Windows

ปัจจุบัน Chrome ใช้ความสามารถของ DXC (DirectX Compiler) เพื่อคอมไพล์ตัวปรับแสงเงาบนเครื่อง Windows D3D12 ที่มีฮาร์ดแวร์กราฟิก SM6+ ก่อนหน้านี้ WebGPU ใช้ FXC (FX Compiler) ในการคอมไพล์ตัวปรับแสงเงาใน Windows ในระหว่างที่ทำงานได้ แต่ FXC ยังไม่มีชุดฟีเจอร์และการเพิ่มประสิทธิภาพที่มีใน DXC

การทดสอบเริ่มต้นแสดงให้เห็นว่าความเร็วในการคอมไพล์ตัวปรับแสงเงาประมวลผลเพิ่มขึ้นโดยเฉลี่ย 20% เมื่อใช้ DXC เมื่อเทียบกับ FXC

การค้นหาการประทับเวลาในการประมวลผลและแสดงผลบัตรผ่าน

การค้นหาการประทับเวลาช่วยให้แอปพลิเคชัน WebGPU วัดได้แม่นยำ (จนถึงระดับนาโนวินาที) เวลาที่คำสั่ง GPU ใช้ในการประมวลผลการประมวลผลและแสดงผลบัตรผ่าน โดยระบบจะใช้ข้อมูลจำนวนมากเพื่อรับข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพและพฤติกรรมของภาระงาน GPU

เมื่อฟีเจอร์ "timestamp-query" พร้อมใช้งานใน GPUAdapter คุณจะทําสิ่งต่อไปนี้ได้

• ขอ GPUDevice ด้วยฟีเจอร์ "timestamp-query"
• สร้าง GPUQuerySet ประเภท "timestamp"
• ใช้ GPUComputePassDescriptor.timestampWrites และ GPURenderPassDescriptor.timestampWrites เพื่อระบุตำแหน่งที่จะเขียนค่าการประทับเวลาใน GPUQuerySet
• แก้ไขค่าการประทับเวลาเป็น GPUBuffer ด้วย resolveQuerySet()
• อ่านค่าการประทับเวลาย้อนกลับโดยคัดลอกผลลัพธ์จาก GPUBuffer ไปยัง CPU
• ถอดรหัสค่าการประทับเวลาเป็น BigInt64Array

ดูตัวอย่างและรุ่น dawn:1800 ต่อไปนี้

const adapter = await navigator.gpu.requestAdapter();
if (!adapter.features.has("timestamp-query")) {
  throw new Error("Timestamp query feature is not available");
}
// Explicitly request timestamp query feature.
const device = await adapter.requestDevice({
  requiredFeatures: ["timestamp-query"],
});
const commandEncoder = device.createCommandEncoder();

// Create a GPUQuerySet which holds 2 timestamp query results: one for the
// beginning and one for the end of compute pass execution.
const querySet = device.createQuerySet({ type: "timestamp", count: 2 });
const timestampWrites = {
  querySet,
  beginningOfPassWriteIndex: 0, // Write timestamp in index 0 when pass begins.
  endOfPassWriteIndex: 1, // Write timestamp in index 1 when pass ends.
};
const passEncoder = commandEncoder.beginComputePass({ timestampWrites });
// TODO: Set pipeline, bind group, and dispatch work to be performed.
passEncoder.end();

// Resolve timestamps in nanoseconds as a 64-bit unsigned integer into a GPUBuffer.
const size = 2 * BigInt64Array.BYTES_PER_ELEMENT;
const resolveBuffer = device.createBuffer({
  size,
  usage: GPUBufferUsage.QUERY_RESOLVE | GPUBufferUsage.COPY_SRC,
});
commandEncoder.resolveQuerySet(querySet, 0, 2, resolveBuffer, 0);

// Read GPUBuffer memory.
const resultBuffer = device.createBuffer({
  size,
  usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ,
});
commandEncoder.copyBufferToBuffer(resolveBuffer, 0, resultBuffer, 0, size);

// Submit commands to the GPU.
device.queue.submit([commandEncoder.finish()]);

// Log compute pass duration in nanoseconds.
await resultBuffer.mapAsync(GPUMapMode.READ);
const times = new BigInt64Array(resultBuffer.getMappedRange());
console.log(`Compute pass duration: ${Number(times[1] - times[0])}ns`);
resultBuffer.unmap();

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

เนื่องจาก GPU อาจรีเซ็ตตัวนับการประทับเวลาเป็นครั้งคราว ซึ่งส่งผลให้เกิดค่าที่ไม่คาดคิด เช่น เดลต้าเชิงลบระหว่างการประทับเวลา เราขอแนะนำให้คุณดูการเปลี่ยนแปลงความแตกต่างของ Git ที่เพิ่มการรองรับการค้นหาการประทับเวลาในตัวอย่าง Compute Boids ต่อไปนี้

วันที่

ตัวอย่าง Compute Boids ที่มีการค้นหาการประทับเวลา

จุดแรกเข้าเริ่มต้นสำหรับโมดูลตัวปรับเฉดสี

หากต้องการปรับปรุงประสบการณ์สําหรับนักพัฒนาซอฟต์แวร์ ตอนนี้คุณสามารถละ entryPoint ของโมดูลตัวปรับแสงเงาเมื่อสร้างไปป์ไลน์การประมวลผลหรือแสดงผลได้แล้ว หากไม่พบจุดแรกเข้าที่ไม่ซ้ำกันสำหรับขั้นตอนตัวปรับแสงเงาในโค้ดตัวปรับแสง ระบบจะทริกเกอร์ GPUValidationError ดูตัวอย่างและปัญหา dawn:2254

const code = `
    @vertex fn vertexMain(@builtin(vertex_index) i : u32) ->
      @builtin(position) vec4f {
       const pos = array(vec2f(0, 1), vec2f(-1, -1), vec2f(1, -1));
       return vec4f(pos[i], 0, 1);
    }
    @fragment fn fragmentMain() -> @location(0) vec4f {
      return vec4f(1, 0, 0, 1);
    }`;
const module = myDevice.createShaderModule({ code });
const format = navigator.gpu.getPreferredCanvasFormat();
const pipeline = await myDevice.createRenderPipelineAsync({
  layout: "auto",
  vertex: { module, entryPoint: "vertexMain" },
  fragment: { module, entryPoint: "fragmentMain", targets: [{ format }] },
  vertex: { module },
  fragment: { module, targets: [{ format }] },
});

รองรับ display-p3 เป็นพื้นที่สี GPUExternalTexture

คุณสามารถกำหนดพื้นที่สีปลายทาง "display-p3" ได้แล้วเมื่อนำเข้า GPUExternalTexture จากวิดีโอ HDR ด้วย importExternalTexture() ดูวิธีที่ WebGPU จัดการพื้นที่สี ดูตัวอย่างและปัญหา chromium:1330250 ต่อไปนี้

// Create texture from HDR video.
const video = document.querySelector("video");
const texture = myDevice.importExternalTexture({
  source: video,
  colorSpace: "display-p3",
});

ข้อมูลฮีปหน่วยความจำ

เพื่อช่วยให้คุณทราบถึงขีดจำกัดของหน่วยความจำเมื่อจัดสรรปริมาณมากในระหว่างการพัฒนาแอป ตอนนี้ requestAdapterInfo() จะแสดงข้อมูล memoryHeaps เช่น ขนาดและประเภทของฮีปหน่วยความจำที่มีอยู่ในอะแดปเตอร์ ฟีเจอร์ทดลองนี้จะเข้าถึงได้เฉพาะเมื่อ "ฟีเจอร์สำหรับนักพัฒนาซอฟต์แวร์ WebGPU" flag ที่ chrome://flags/#enable-webgpu-developer-features เปิดใช้อยู่ ดูตัวอย่างและปัญหา dawn:2249

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

for (const { size, properties } of adapterInfo.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)   { /* ... */ }
}

ฮีปหน่วยความจำข้อมูลอะแดปเตอร์แสดงใน https://webgpureport.org

ข้อมูลอัปเดตรุ่งเช้า

เพิ่มเมธอด HasWGSLLanguageFeature และ EnumerateWGSLLanguageFeatures ใน wgpu::Instance เพื่อรองรับฟีเจอร์ภาษา WGSL แล้ว ดูฉบับ dawn:2260

ฟีเจอร์ wgpu::Feature::BufferMapExtendedUsages ที่ไม่ใช่แบบมาตรฐานช่วยให้คุณสร้างบัฟเฟอร์ GPU ที่มี wgpu::BufferUsage::MapRead หรือ wgpu::BufferUsage::MapWrite และ wgpu::BufferUsage อื่นๆ ได้ ดูตัวอย่างและปัญหา dawn:2204 ต่อไปนี้

wgpu::BufferDescriptor descriptor = {
  .size = 128,
  .usage = wgpu::BufferUsage::MapWrite | wgpu::BufferUsage::Uniform
};
wgpu::Buffer uniformBuffer = device.CreateBuffer(&descriptor);

uniformBuffer.MapAsync(wgpu::MapMode::Write, 0, 128,
   [](WGPUBufferMapAsyncStatus status, void* userdata)
   {
      wgpu::Buffer* buffer = static_cast<wgpu::Buffer*>(userdata);
      memcpy(buffer->GetMappedRange(), data, sizeof(data));
   },
   &uniformBuffer);

ฟีเจอร์ที่ได้รับการจัดทำเอกสาร ได้แก่ ANGLE Texture Share, D3D11 multiชุดข้อความ ที่มีการป้องกัน, การซิงค์อุปกรณ์แบบไม่เจาะจงปลายทาง, รูปแบบพื้นผิวแบบ Norm16, Timestamp Query Inside Passes, พื้นที่เก็บข้อมูลในเครื่อง Pixel, ฟีเจอร์ Shader และรูปแบบ Multi Planar

ทีม Chrome ได้สร้างที่เก็บ GitHub อย่างเป็นทางการสำหรับ Dawn แล้ว

ซึ่งกล่าวถึงไฮไลต์สำคัญเพียงบางส่วนเท่านั้น ดูรายการคอมมิตทั้งหมด

มีอะไรใหม่ใน WebGPU

รายการทั้งหมดที่กล่าวถึงในซีรีส์ What's New in WebGPU

Chrome 128

• การทดสอบกับกลุ่มย่อย
• ลดการให้น้ำหนักพิเศษในการตั้งค่าสำหรับเส้นและจุด
• ซ่อนคำเตือนข้อผิดพลาดที่ไม่ได้บันทึกไว้สำหรับ DevTools หาก preventDefault
• การสุ่มตัวอย่างแบบสอดแทรกของ WGSL ก่อนหรือแบบใดแบบหนึ่ง
• ข้อมูลอัปเดตเมื่อรุ่งเช้า

Chrome 127

• การทดสอบการรองรับ OpenGL ES บน Android
• แอตทริบิวต์ข้อมูลของ GPU
• การปรับปรุงการทำงานร่วมกันของ WebAssembly
• ข้อผิดพลาดของโปรแกรมเปลี่ยนไฟล์คำสั่งที่ปรับปรุงใหม่
• ข้อมูลอัปเดตเมื่อรุ่งเช้า

Chrome 126

• เพิ่มขีดจำกัด maxTextureArraydataLayer
• การเพิ่มประสิทธิภาพการอัปโหลดบัฟเฟอร์สำหรับแบ็กเอนด์ Vulkan
• ปรับปรุงเวลาคอมไพล์ Shader
• บัฟเฟอร์คำสั่งที่ส่งต้องไม่ซ้ำกัน
• ข้อมูลอัปเดตเมื่อรุ่งเช้า

Chrome 125

• กลุ่มย่อย (ฟีเจอร์อยู่ระหว่างการพัฒนา)
• แสดงผลเป็นชิ้นๆ ของพื้นผิว 3 มิติ
• ข้อมูลอัปเดตเมื่อรุ่งเช้า

Chrome 124

• พื้นผิวพื้นที่เก็บข้อมูลแบบอ่านอย่างเดียวและอ่านอย่างเดียว
• การสนับสนุนของ Service Worker และผู้ปฏิบัติงานที่แชร์
• แอตทริบิวต์ข้อมูลอะแดปเตอร์ใหม่
• แก้ไขข้อบกพร่อง
• ข้อมูลอัปเดตเมื่อรุ่งเช้า

Chrome 123

• รองรับฟังก์ชัน DP4a ในตัวของ WGSL
• พารามิเตอร์ตัวชี้แบบไม่จำกัดใน WGSL
• น้ำตาลทางไวยากรณ์สำหรับลดการอ้างอิงองค์ประกอบใน WGSL
• แยกสถานะอ่านอย่างเดียวสำหรับลายฉลุและความลึก
• ข้อมูลอัปเดตเมื่อรุ่งเช้า

Chrome 122

• ขยายการเข้าถึงด้วยโหมดความเข้ากันได้ (ฟีเจอร์ที่กำลังพัฒนา)
• เพิ่มขีดจำกัด maxVertexAttributes
• ข้อมูลอัปเดตเมื่อรุ่งเช้า

Chrome 121

• รองรับ WebGPU บน Android
• ใช้ DXC แทน FXC สำหรับการคอมไพล์ตัวปรับแสงเงาใน Windows
• การค้นหาการประทับเวลาในการประมวลผลและแสดงผลบัตรผ่าน
• จุดแรกเข้าเริ่มต้นสำหรับโมดูลตัวปรับเฉดสี
• รองรับ display-p3 เป็นพื้นที่สี GPUExternalTexture
• ข้อมูลฮีปหน่วยความจำ
• ข้อมูลอัปเดตเมื่อรุ่งเช้า

Chrome 120

• การรองรับค่าทศนิยม 16 บิตใน WGSL
• ก้าวข้ามขีดจำกัด
• การเปลี่ยนแปลงสถานะความลึกของลายฉลุ
• การอัปเดตข้อมูลอะแดปเตอร์
• การวัดปริมาณการค้นหาการประทับเวลา
• ฟีเจอร์ทำความสะอาดในฤดูใบไม้ผลิ

Chrome 119

• พื้นผิวแบบลอย 32 บิตที่กรองได้
• รูปแบบเวอร์เท็กซ์ unorm10-10-10-2
• รูปแบบพื้นผิวของrgb10a2uint
• ข้อมูลอัปเดตเมื่อรุ่งเช้า

Chrome 118

• การรองรับ HTMLImageElement และ ImageData ใน copyExternalImageToTexture()
• เวอร์ชันทดลองสำหรับพื้นผิวพื้นที่เก็บข้อมูลแบบอ่านอย่างเดียวและอ่านอย่างเดียว
• ข้อมูลอัปเดตเมื่อรุ่งเช้า

Chrome 117

• ยกเลิกการตั้งค่าบัฟเฟอร์ Vertex
• ยกเลิกการตั้งค่ากลุ่มการเชื่อมโยง
• ปิดข้อผิดพลาดจากการสร้างไปป์ไลน์แบบไม่พร้อมกันเมื่ออุปกรณ์สูญหาย
• การอัปเดตการสร้างโมดูลตัวปรับแสงเงา SPIR-V
• การปรับปรุงประสบการณ์ของนักพัฒนาแอป
• ไปป์ไลน์การแคชที่มีเลย์เอาต์ที่สร้างขึ้นโดยอัตโนมัติ
• ข้อมูลอัปเดตเมื่อรุ่งเช้า

Chrome 116

• การผสานรวม WebCodecs
• อุปกรณ์ที่สูญหายส่งคืนโดย GPUAdapter requestDevice()
• เล่นวิดีโอได้อย่างราบรื่นหากมีการเรียกใช้ importExternalTexture()
• ความสอดคล้องตามข้อกำหนด
• การปรับปรุงประสบการณ์ของนักพัฒนาแอป
• ข้อมูลอัปเดตเมื่อรุ่งเช้า

Chrome 115

• ส่วนขยายภาษา WGSL ที่รองรับ
• การสนับสนุนรุ่นทดลองสำหรับ Direct3D 11
• รับ GPU แบบแยกกันโดยค่าเริ่มต้นเมื่อใช้พลังงานจากไฟฟ้า AC
• การปรับปรุงประสบการณ์ของนักพัฒนาแอป
• ข้อมูลอัปเดตเมื่อรุ่งเช้า

Chrome 114

• เพิ่มประสิทธิภาพ JavaScript
• getCurrentTexture() ในผืนผ้าใบที่ไม่ได้กำหนดค่าไว้แสดงข้อผิดพลาดที่ไม่ถูกต้อง
• ข้อมูลอัปเดตเกี่ยวกับ WGSL
• ข้อมูลอัปเดตเมื่อรุ่งเช้า

Chrome 113

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