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

François Beaufort
François Beaufort
GitHub

ระยะทางของคลิปใน WGSL

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

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

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

ดูข้อมูลโค้ดต่อไปนี้ รายการ chromestatus และปัญหา 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 ซึ่งมีประโยชน์สำหรับงานต่างๆ เช่น ตรวจสอบว่าเบราว์เซอร์รองรับ HDR Canvas หรือไม่ ดังที่แสดงในตัวอย่างอนุภาค (HDR) ดูข้อมูลโค้ดต่อไปนี้ รายการ chromestatus และปัญหา 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.
}

องค์ประกอบพื้นฐานของจุดและเส้นต้องไม่มีอคติด้านความลึก

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

ฟังก์ชันการสแกนแบบรวมในตัวสำหรับกลุ่มย่อย

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

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

การรองรับแบบทดลองสําหรับการวาดหลายครั้งโดยอ้อม

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

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

เมื่อใช้ฟีเจอร์ GPU ที่ไม่เป็นไปตามมาตรฐาน "chromium-experimental-multi-draw-indirect" ที่มีอยู่ใน GPUAdapter ให้ขอ GPUDevice ที่มีฟีเจอร์นี้ จากนั้นสร้าง GPUBuffer โดยใช้การใช้งาน GPUBufferUsage.INDIRECT เพื่อจัดเก็บการเรียกเสมอ คุณจะใช้ข้อมูลนี้ในภายหลังได้ในเมธอด 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 เพื่อให้คุณเปิดหรือปิดใช้คณิตศาสตร์ที่เข้มงวดระหว่างการคอมไพล์โมดูลตัวปรับเฉดสี ฟีเจอร์นี้จะอยู่หลัง Flag "WebGPU Developer Features" ที่ 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 });

นำ GPUAdapter requestAdapterInfo() ออก

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

การอัปเดต Dawn

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

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

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

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

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