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

François Beaufort
François Beaufort
GitHub

รองรับ HDR ด้วยโหมดการปรับโทนสีแคนวาส

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

ตอนนี้พารามิเตอร์ GPUCanvasToneMappingMode ใหม่ในการกําหนดค่าแคนวาส 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): แสดงผลการดำเนินการ value ที่ใช้งานอยู่ทั้งหมดแบบไบนารี AND ในกลุ่มย่อย
  • 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 จากการเรียกใช้ Quad ที่มีรหัสเท่ากับ 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