มีอะไรใหม่ใน 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 รวมถึงดูรายการ chromestatus

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

การรองรับกลุ่มย่อยที่ขยายการให้บริการ

หลังจากประกาศการทดสอบกลุ่มย่อย ตอนนี้ฟังก์ชันในตัวของกลุ่มย่อยพร้อมให้ใช้งานทั้งในคอมพิวตเชดและแฟรกเมนต์เชดเดอร์แล้ว จึงไม่จํากัดอยู่แค่คอมพิวตเชดเดอร์อีกต่อไป ดูปัญหา 354738715

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

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

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

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

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

  • 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 จากการเรียกใช้ควอดที่มีรหัสเท่ากับ id id ต้องเป็นนิพจน์คงที่
  • quadSwapX(value): สลับ value ระหว่างการเรียกใช้ในรูปสี่เหลี่ยมจัตุรัสในทิศทาง X
  • quadSwapY(value): สลับ value ระหว่างการเรียกใช้ในรูปสี่เหลี่ยมจัตุรัสในแนว Y
  • quadSwapDiagonal(value): สลับ value ระหว่างการเรียกใช้ในรูปสี่เหลี่ยมจัตุรัสในแนวทแยง

การอัปเดต Dawn

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

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

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

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

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

รายการทุกอย่างที่ครอบคลุมในชุดมีอะไรใหม่ใน 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