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

François Beaufort
François Beaufort
GitHub

รองรับ HDR ด้วยโหมดการทำแผนที่โทนสีของ Canvas

นักพัฒนาเว็บมีตัวเลือกที่จำกัดในการส่งเนื้อหา HDR โดยส่วนใหญ่จะใช้แท็ก <img> และ <video> แต่จะยังคงจำกัดองค์ประกอบ <canvas> ไว้ที่ SDR การสร้างเนื้อหา HDR แบบไดนามิกภายใน Canvas ต้องมีการเข้ารหัสเนื้อหาเป็นรูปภาพ HDR ก่อนแสดง (ดูตัวอย่างได้ในเดโมนี้)

พารามิเตอร์ GPUCanvasToneMappingMode ใหม่ในการกำหนดค่า Canvas ของ WebGPU ช่วยให้ WebGPU วาดสีที่สว่างกว่าสีขาว (#FFFFFF) ได้แล้ว โดยทำได้ผ่านโหมดต่อไปนี้

  • "standard": ลักษณะการทำงานเริ่มต้นจะจำกัดเนื้อหาไว้ที่ช่วง SDR ของหน้าจอ โหมดนี้จะทำงานโดยการยึดค่าสีทั้งหมดในพื้นที่สีของหน้าจอไว้ที่[0, 1]

  • "extended": ปลดล็อกช่วง HDR เต็มรูปแบบของหน้าจอ โหมดนี้จะจับคู่ "standard" ในช่วง [0, 1] ของหน้าจอ การหนีบหรือการฉายจะทำกับช่วงไดนามิกแบบขยายของหน้าจอ แต่ไม่ใช่ [0, 1]

ข้อมูลโค้ดต่อไปนี้แสดงวิธีตั้งค่า Canvas สำหรับช่วงไดนามิกสูง

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

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

context.configure({
  device,
  format: "rgba16float",
  toneMapping: { mode: "extended" },
});

สำรวจ HDR ด้วย WebGPU โดยดูตัวอย่างอนุภาค (HDR) และตัวอย่าง HDR ของ WebGPU รวมถึงดูรายการใน Chrome Status

แล็ปท็อปที่มีหน้าจอ HDR แสดงภาพที่สดใส
ตัวอย่างอนุภาค (HDR) ที่แสดงบนหน้าจอ HDR

รองรับกลุ่มย่อยที่ขยายแล้ว

หลังจากประกาศการทดลองใช้กลุ่มย่อย ตอนนี้ฟังก์ชันในตัวของกลุ่มย่อยพร้อมให้ใช้งานทั้งใน Compute Shader และ Fragment Shader แล้ว โดยไม่จำกัดเฉพาะเชดเดอร์การคำนวณอีกต่อไป ดูปัญหา 354738715

โปรดทราบว่าขณะนี้subgroup_sizeค่าในตัวใน Fragment Shader ยังมีข้อบกพร่อง โปรดหลีกเลี่ยงการใช้ฟีเจอร์นี้ไปก่อน

นอกจากนี้ เรายังได้เพิ่มฟังก์ชันในตัวของกลุ่มย่อยต่อไปนี้

  • subgroupAdd(value): แสดงผลผลรวมของการเรียกใช้ที่ใช้งานอยู่ทั้งหมด values ในกลุ่มย่อย
  • subgroupExclusiveAdd(value): แสดงผลผลรวมการสแกนเฉพาะของการเรียกใช้ที่ใช้งานอยู่ทั้งหมด values ในกลุ่มย่อย
  • subgroupMul(value): แสดงผลการคูณของการเรียกใช้ที่ใช้งานอยู่ทั้งหมด values ในกลุ่มย่อย
  • subgroupExclusiveMul(value): แสดงผลการคูณการสแกนเฉพาะของการเรียกใช้ที่ใช้งานอยู่ทั้งหมด values ในกลุ่มย่อย

  • subgroupAnd(value): แสดงผล AND แบบไบนารีของการเรียกใช้ที่ใช้งานอยู่ทั้งหมด values ในกลุ่มย่อย
  • subgroupOr(value): แสดงผล OR แบบไบนารีของการเรียกใช้ที่ใช้งานอยู่ทั้งหมด values ในกลุ่มย่อย
  • subgroupXor(value): แสดงผล XOR แบบไบนารีของการเรียกใช้ที่ใช้งานอยู่ทั้งหมด values ในกลุ่มย่อย

  • subgroupMin(value): แสดงผลค่าต่ำสุดของการเรียกใช้ที่ใช้งานอยู่ทั้งหมด values ในกลุ่มย่อย
  • subgroupMax(value): แสดงผลค่าสูงสุดของการเรียกใช้ที่ใช้งานอยู่ทั้งหมด values ในกลุ่มย่อย

  • subgroupAll(value): แสดงค่าเป็นจริงหาก value เป็นจริงสำหรับการเรียกใช้ที่ใช้งานอยู่ทั้งหมดในกลุ่มย่อย
  • subgroupAny(value): แสดงค่าเป็นจริงหาก value เป็นจริงสำหรับการเรียกใช้ที่ใช้งานอยู่ในกลุ่มย่อย

  • subgroupElect(): แสดงค่าเป็นจริงหากการเรียกใช้นี้มี subgroup_invocation_id ต่ำที่สุดในบรรดาการเรียกใช้ที่ใช้งานอยู่ในกลุ่มย่อย
  • subgroupBroadcastFirst(value): ออกอากาศ value จากการเรียกใช้ที่ใช้งานอยู่ซึ่งมี subgroup_invocation_id ต่ำที่สุดในกลุ่มย่อยไปยังการเรียกใช้ที่ใช้งานอยู่อื่นๆ ทั้งหมด

  • subgroupShuffle(value, id): แสดงผล value จากการเรียกใช้ที่ใช้งานอยู่ซึ่งมี subgroup_invocation_id ตรงกับ id
  • subgroupShuffleXor(value, mask): แสดงผล value จากการเรียกใช้ที่ใช้งานอยู่ซึ่งมี subgroup_invocation_id ตรงกับ subgroup_invocation_id ^ mask mask ต้องเป็นแบบไดนามิก
  • subgroupShuffleUp(value, delta): แสดงผล value จากการเรียกใช้ที่ใช้งานอยู่ซึ่งมี subgroup_invocation_id ตรงกับ subgroup_invocation_id - delta
  • subgroupShuffleDown(value, delta): แสดงผล value จากการเรียกใช้ที่ใช้งานอยู่ซึ่งมี subgroup_invocation_id ตรงกับ subgroup_invocation_id + delta

  • quadBroadcast(value, id): การออกอากาศ value จากการเรียกใช้ Quad ที่มีรหัสเท่ากับ id id ต้องเป็นนิพจน์ค่าคงที่
  • quadSwapX(value): สลับ value ระหว่างการเรียกใช้ในกลุ่ม 4 ในทิศทาง X
  • quadSwapY(value): สลับ value ระหว่างการเรียกใช้ในควอดในทิศทาง Y
  • quadSwapDiagonal(value): สลับ value ระหว่างการเรียกใช้ในรูปสี่เหลี่ยมจัตุรัสในแนวทแยง

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

ตอนนี้ wgpu::PrimitiveState struct มีการตั้งค่าการควบคุมการคลิปความลึกโดยตรงแล้ว จึงไม่จำเป็นต้องมี wgpu::PrimitiveDepthClipControl struct แยกต่างหาก ดูข้อมูลเพิ่มเติมได้ที่ข้อมูลโค้ดต่อไปนี้และคำขอส่งการเปลี่ยนแปลง webgpu-headers

// Before
wgpu::PrimitiveState primitive = {};
wgpu::PrimitiveDepthClipControl depthClipControl;
depthClipControl.unclippedDepth = true;
primitive.nextInChain = &depthClipControl;

// Now
wgpu::PrimitiveState primitive = {};
primitive.unclippedDepth = true;

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

มีอะไรใหม่ใน 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