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

François Beaufort
François Beaufort

תמיכה ב-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 כרגע באגי בכלי להצללה של מקטעים. בינתיים, כדאי להימנע מכך.

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

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

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

עדכונים לגבי זריחה

המבנה 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