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

François Beaufort
François Beaufort
GitHub

ตัดระยะทางใน WGSL

ระยะตัดช่วยให้คุณจำกัดระดับเสียงของคลิปดั้งเดิมด้วยช่องว่างครึ่งหนึ่งที่ผู้ใช้กำหนดในเอาต์พุตของขั้นตอนการประมวลผลจุดยอด การกำหนดระนาบการตัดของคุณเองจะช่วยให้ควบคุมสิ่งที่มองเห็นได้ในฉาก WebGPU ได้มากขึ้น เทคนิคนี้มีประโยชน์อย่างยิ่งสำหรับแอปพลิเคชัน เช่น ซอฟต์แวร์ CAD ซึ่งการควบคุมการแสดงภาพอย่างแม่นยำเป็นสิ่งสำคัญ

เมื่อ"clip-distances"ฟีเจอร์พร้อมใช้งานใน GPUAdapter ให้ขอ GPUDevice ที่มีฟีเจอร์นี้เพื่อรับการรองรับระยะตัดใน WGSL และเปิดใช้ส่วนขยายนี้อย่างชัดเจนในโค้ด WGSL ด้วย enable clip_distances; เมื่อเปิดใช้แล้ว คุณจะใช้clip_distancesอาร์เรย์ในตัวใน Vertex Shader ได้ อาร์เรย์นี้จะเก็บระยะทางไปยังระนาบตัดที่ผู้ใช้กำหนด

  • ระยะคลิปเป็น 0 หมายความว่าจุดยอดอยู่บนระนาบ
  • ระยะทางที่เป็นบวกหมายความว่าจุดยอดอยู่ภายในครึ่งพื้นที่ของคลิป (ด้านที่คุณต้องการเก็บไว้)
  • ระยะทางที่เป็นลบหมายความว่าจุดยอดอยู่นอกพื้นที่ครึ่งหนึ่งของการคลิป (ด้านที่คุณต้องการทิ้ง)

ดูข้อมูลโค้ดต่อไปนี้ รายการใน Chrome Status และปัญหา 358408571

const adapter = await navigator.gpu.requestAdapter();
if (!adapter.features.has("clip-distances")) {
  throw new Error("Clip distances support is not available");
}
// Explicitly request clip distances support.
const device = await adapter.requestDevice({
  requiredFeatures: ["clip-distances"],
});

const vertexShaderModule = device.createShaderModule({ code: `
  enable clip_distances;

  struct VertexOut {
    @builtin(clip_distances) my_clip_distances : array<f32, 1>,
    @builtin(position) my_position : vec4f,
  }
  @vertex fn main() -> VertexOut {
    var output : VertexOut;
    output.my_clip_distances[0] = 1;
    output.my_position = vec4f(0, 0, 0, 1);
    return output;
  }
`,
});

// Send the appropriate commands to the GPU...

GPUCanvasContext getConfiguration()

เมื่อเรียกใช้ GPUCanvasContext configure() ด้วยพจนานุกรมการกำหนดค่าแล้ว เมธอด GPUCanvasContext getConfiguration() จะช่วยให้คุณตรวจสอบการกำหนดค่าบริบท Canvas ได้ ซึ่งรวมถึงสมาชิก device, format, usage, viewFormats, colorSpace, toneMapping และ alphaMode ซึ่งมีประโยชน์สำหรับงานต่างๆ เช่น การตรวจสอบว่าเบราว์เซอร์รองรับ Canvas HDR หรือไม่ ดังที่แสดงในตัวอย่างอนุภาค (HDR) ดูข้อมูลโค้ดต่อไปนี้ รายการใน Chrome Status และปัญหา 370109829

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

const canvas = document.querySelector("canvas");
const context = canvas.getContext("webgpu");

// Configure the canvas for HDR.
context.configure({
  device,
  format: "rgba16float",
  toneMapping: { mode: "extended" },
});

const configuration = context.getConfiguration();
if (configuration.toneMapping.mode === "extended") {
  // The browser supports HDR canvas.
  // Warning! The user still needs a HDR display to enjoy HDR content.
}

Primitive ของจุดและเส้นต้องไม่มีการปรับออฟเซ็ตความลึก

ตามที่ประกาศก่อนหน้านี้ ตอนนี้ข้อกำหนด WebGPU ทำให้การตั้งค่า depthBias, depthBiasSlopeScale และ depthBiasClamp เป็นค่าที่ไม่ใช่ 0 เมื่อโทโพโลยีสำหรับไปป์ไลน์การแสดงผลเป็นประเภทเส้นหรือจุดถือเป็นข้อผิดพลาดในการตรวจสอบ ดูปัญหา 352567424

ฟังก์ชันการสแกนแบบครอบคลุมที่ติดตั้งไว้สำหรับกลุ่มย่อย

เราได้เพิ่มฟังก์ชันในตัวของกลุ่มย่อยต่อไปนี้ในปัญหา 361330160 ซึ่งเป็นส่วนหนึ่งของการทดลองกลุ่มย่อย

  • subgroupInclusiveAdd(value): แสดงผลผลรวมของการสแกนแบบรวมของการเรียกใช้ที่ใช้งานอยู่ทั้งหมด values ในกลุ่มย่อย
  • subgroupInclusiveMul(value): แสดงผลการคูณแบบสแกนรวมของการเรียกใช้ที่ใช้งานอยู่ทั้งหมด values ในกลุ่มย่อย

การรองรับการวาดหลายรายการแบบอ้อมในเวอร์ชันทดลอง

ฟีเจอร์ GPU แบบอ้อมที่วาดหลายรายการช่วยให้คุณออกคำสั่งวาดหลายรายการได้ด้วยคำสั่ง GPU เดียว ซึ่งจะมีประโยชน์อย่างยิ่งในสถานการณ์ที่ต้องแสดงผลออบเจ็กต์จำนวนมาก เช่น ระบบอนุภาค การสร้างอินสแตนซ์ และฉากขนาดใหญ่ เมธอด drawIndirect() และ drawIndexedIndirect() GPURenderPassEncoder สามารถออกคำสั่งวาดภาพได้ครั้งละ 1 รายการจากภูมิภาคหนึ่งๆ ของบัฟเฟอร์ GPU เท่านั้น

จนกว่าฟีเจอร์ทดลองนี้จะได้มาตรฐาน ให้เปิดใช้ Flag "การรองรับ WebGPU ที่ไม่ปลอดภัย" ที่ chrome://flags/#enable-unsafe-webgpu เพื่อให้ฟีเจอร์นี้พร้อมใช้งานใน Chrome

เมื่อฟีเจอร์ GPU ที่ไม่ใช่มาตรฐาน "chromium-experimental-multi-draw-indirect" พร้อมใช้งานใน GPUAdapter ให้ขอ GPUDevice ที่มีฟีเจอร์นี้ จากนั้นสร้าง GPUBuffer ที่มีGPUBufferUsage.INDIRECT usage เพื่อจัดเก็บคำสั่งวาด คุณสามารถใช้ในภายหลังในเมธอด multiDrawIndirect() และ multiDrawIndexedIndirect() GPURenderPassEncoder ใหม่เพื่อออกคำสั่งวาดภายในการส่งผ่านการแสดงผล ดูข้อมูลโค้ดต่อไปนี้และปัญหา 356461286

const adapter = await navigator.gpu.requestAdapter();
if (!adapter.features.has("chromium-experimental-multi-draw-indirect")) {
  throw new Error("Experimental multi-draw indirect support is not available");
}
// Explicitly request experimental multi-draw indirect support.
const device = await adapter.requestDevice({
  requiredFeatures: ["chromium-experimental-multi-draw-indirect"],
});

// Draw call have vertexCount, instanceCount, firstVertex, and firstInstance parameters.
const drawData = new Uint32Array([
  3, 1, 0, 0, // First draw call
  3, 1, 3, 0, // Second draw call
]);
// Create a buffer to store the draw calls.
const drawBuffer = device.createBuffer({
  size: drawData.byteLength,
  usage: GPUBufferUsage.INDIRECT | GPUBufferUsage.COPY_DST,
});
device.queue.writeBuffer(drawBuffer, 0, drawData);

// Create a render pipeline, a vertex buffer, and a render pass encoder...

// Inside a render pass, issue the draw calls.
myPassEncoder.setPipeline(myPipeline);
myPassEncoder.setVertexBuffer(0, myVertexBuffer);
myPassEncoder.multiDrawIndirect(drawBuffer, /*offset=*/ 0, /*maxDrawCount=*/ 2);
myPassEncoder.end();

ตัวเลือกการคอมไพล์โมดูล Shader ที่เข้มงวด

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

ขณะนี้ตัวเลือกนี้รองรับ Metal และ Direct3D เมื่อปิดใช้คณิตศาสตร์แบบเข้มงวด คอมไพเลอร์อาจเพิ่มประสิทธิภาพเชเดอร์โดยทำดังนี้

  • ไม่พิจารณาค่า 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 });

นำ requestAdapterInfo() ของ GPUAdapter ออก

เมธอดแบบไม่พร้อมกัน requestAdapterInfo() ของ GPUAdapter ไม่จำเป็นอีกต่อไป เนื่องจากคุณรับ GPUAdapterInfo แบบพร้อมกันได้อยู่แล้วโดยใช้แอตทริบิวต์ info ของ GPUAdapter ดังนั้นเราจึงนำเมธอด requestAdapterInfo() ของ GPUAdapter ที่ไม่เป็นไปตามมาตรฐานออกแล้ว ดูความตั้งใจที่จะนำออก

ข้อมูลอัปเดตเกี่ยวกับ Dawn

tint_benchmarkไฟล์ที่เรียกใช้งานได้จะวัดต้นทุนของการแปล Shader จาก WGSL เป็นภาษาของแต่ละแบ็กเอนด์ ดูข้อมูลเพิ่มเติมได้ในเอกสารประกอบใหม่

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

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

รายการทุกอย่างที่ครอบคลุมในซีรีส์มีอะไรใหม่ใน WebGPU

Chrome 140

Chrome 139

Chrome 138

Chrome 137

Chrome 136

Chrome 135

Chrome 134

Chrome 133

Chrome 132

Chrome 131

Chrome 130

Chrome 129

Chrome 128

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113