מה חדש ב-WebGPU (Chrome {/7}129)

François Beaufort
François Beaufort
GitHub

תמיכה ב-HDR עם מצב מיפוי גוונים על קנבס

למפתחי אתרים יש אפשרויות מוגבלות להעברת תוכן HDR, והם מסתמכים בעיקר על הרכיבים <img> ו-<video>. עם זאת, הרכיב <canvas> נשאר מוגבל ל-SDR. כדי ליצור תוכן HDR דינמי בתוך קנבס, צריך לקודד את התוכן שלו כתמונה HDR לפני שמציגים אותו (לדוגמה, בדמו הזה).

הפרמטר החדש GPUCanvasToneMappingMode בהגדרות הלוח של WebGPU מאפשר עכשיו ל-WebGPU לצייר צבעים בהירים יותר מלבן (#FFFFFF). הוא עושה זאת באמצעות המצבים הבאים:

  • "standard": ברירת המחדל מגבילה את התוכן לטווח ה-SDR של המסך. המצב הזה מתקבל על ידי צמצום כל ערכי הצבע במרחב הצבע של המסך למרווח [0, 1].

  • "extended": פתיחת מנעול של טווח ה-HDR המלא של המסך. המצב הזה תואם ל-"standard" בטווח [0, 1] במסך. הלחיצה או ההקרנה מתבצעות לטווח הדינמי המורחב של המסך, אבל לא ל-[0, 1].

בקטע הקוד הבא מוסבר איך להגדיר קנבס לטווח דינמי רחב.

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) ובדוגמה ל-WebGPU HDR, ולקרוא את הרשומה ב-chromestatus.

מחשב נייד עם מסך HDR שבו מוצגת תמונה עזה.
הדוגמה 'חלקיקים (HDR)' מוצגת במסך HDR.

תמיכה מורחבת בתת-קבוצות

בעקבות ההכרזה על ניסויים בקבוצות משנה, הפונקציות המובנות של קבוצות המשנה זמינות עכשיו לשימוש גם ב-compute shaders וגם ב-fragment shaders. הם כבר לא מוגבלים רק ל-compute shaders. בעיה מס' 354738715

שימו לב שהערך המובנה subgroup_size פגום כרגע ב-fragment shaders. בינתיים, כדאי להימנע מכך.

בנוסף, נוספו הפונקציות המובנות הבאות של קבוצת המשנה:

  • subgroupAdd(value): הפונקציה מחזירה את הסכום של כל הקריאות הפעילות value בקבוצת המשנה.
  • subgroupExclusiveAdd(value): הפונקציה מחזירה את הסכום הכולל של כל הקריאות הפעילות value בקבוצת המשנה.
  • subgroupMul(value): הפונקציה מחזירה את המכפלה של כל הקריאות הפעילות value בקבוצת המשנה.
  • subgroupExclusiveMul(value): הפונקציה מחזירה את המכפלה הבלעדית של כל הקריאות הפעילות value בקבוצת המשנה.

  • subgroupAnd(value): הפונקציה מחזירה את הפעולה הבינארית AND של כל הקריאות הפעילות value בקבוצת המשנה.
  • subgroupOr(value): הפונקציה מחזירה את או או הבינארי של כל הקריאות הפעילות value בקבוצת המשנה.
  • subgroupXor(value): הפונקציה מחזירה את הפונקציה XOR הבינארית של כל ההפעלות הפעילות value בקבוצת המשנה.

  • subgroupMin(value): הפונקציה מחזירה את הערך המינימלי של כל הקריאות הפעילות value בקבוצת המשנה.
  • subgroupMax(value): הפונקציה מחזירה את הערך המקסימלי של כל הקריאות הפעילות value בקבוצת המשנה.

  • subgroupAll(value): הפונקציה מחזירה את הערך true אם הערך של value הוא true לכל ההפעלות הפעילות בתת-הקבוצה.
  • subgroupAny(value): הפונקציה מחזירה את הערך true אם הערך של value הוא true לכל קריאה פעילה בקבוצת המשנה.

  • subgroupElect(): הפונקציה מחזירה את הערך true אם הערך של 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 בין הקריאות ב-quad בכיוון X.
  • quadSwapY(value): החלפה של value בין הקריאות ב-quad בכיוון Y.
  • quadSwapDiagonal(value): החלפת value בין הקריאות ברביעייה באלכסון.

עדכונים של Dawn

המבנה wgpu::PrimitiveState כולל עכשיו באופן ישיר את הגדרת הבקרה של חיתוך העומק, כך שאין צורך במבנה wgpu::PrimitiveDepthClipControl נפרד. מידע נוסף זמין בקטע הקוד הבא ובבקשת ה-PR של 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 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