מה חדש ב-WebGPU (Chrome 121)

François Beaufort

תמיכה ב-WebGPU ב-Android

צוות Chrome שמח להודיע ש-WebGPU מופעל עכשיו כברירת מחדל ב-Chrome 121 במכשירים עם Android מגרסה 12 ואילך עם מעבדי GPU של Qualcomm ו-ARM.

בעתיד הקרוב, התמיכה תתרחב בהדרגה למגוון רחב יותר של מכשירי Android, כולל מכשירים עם Android מגרסה 11 ואילך. ההרחבה הזו תלויה בבדיקות ובאופטימיזציה נוספות כדי להבטיח חוויית שימוש חלקה במגוון רחב יותר של הגדרות חומרה. בעיה chromium:1497815

דוגמה ל-WebGPU שפועלת ב-Chrome ל-Android.

שימוש ב-DXC במקום ב-FXC לצורך הידור של שגיאות ב-Windows

Chrome משתמש עכשיו ב-DXC (DirectX Compiler) כדי לקמפל צללים במכונות Windows D3D12 עם חומרת גרפיקה מדגם SM6 ואילך. בעבר, WebGPU הסתמך על FXC‏ (FX Compiler) כדי לבצע הידור של שגיאות ב-Windows. אמנם FXC היה פונקציונלי, אבל הוא חסר את קבוצת התכונות ואת אופטימיזציית הביצועים שקיימות ב-DXC.

בבדיקות ראשוניות נמצאה עלייה ממוצעת של 20% במהירות הידור של שגיאות ב-compute shader כשמשתמשים ב-DXC בהשוואה ל-FXC.

שאילתות של חותמות זמן בשלבי המחשוב והעיבוד

שאילתות של חותמות זמן מאפשרות לאפליקציות WebGPU למדוד במדויק (עד לנאונואדה) את משך הזמן שנדרש לפקודות ה-GPU שלהן כדי לבצע מעברים של חישוב ורינדור. הן משמשות בעיקר כדי לקבל תובנות לגבי הביצועים וההתנהגות של עומסי עבודה של GPU.

כשהתכונה "timestamp-query" זמינה ב-GPUAdapter, אפשר לבצע את הפעולות הבאות:

• מבקשים GPUDevice עם התכונה "timestamp-query".
• יוצרים GPUQuerySet מסוג "timestamp".
• משתמשים ב-GPUComputePassDescriptor.timestampWrites וב-GPURenderPassDescriptor.timestampWrites כדי להגדיר איפה לכתוב את ערכי חותמות הזמן ב-GPUQuerySet.
• פותרים את ערכי חותמות הזמן ב-GPUBuffer באמצעות resolveQuerySet().
• כדי לקרוא חזרה את ערכי חותמות הזמן, מעתיקים את התוצאות מ-GPUBuffer ל-CPU.
• פענוח ערכים של חותמות זמן כ-BigInt64Array.

אפשר לעיין בדוגמה הבאה ובבעיה dawn:1800.

const adapter = await navigator.gpu.requestAdapter();
if (!adapter.features.has("timestamp-query")) {
  throw new Error("Timestamp query feature is not available");
}
// Explicitly request timestamp query feature.
const device = await adapter.requestDevice({
  requiredFeatures: ["timestamp-query"],
});
const commandEncoder = device.createCommandEncoder();

// Create a GPUQuerySet which holds 2 timestamp query results: one for the
// beginning and one for the end of compute pass execution.
const querySet = device.createQuerySet({ type: "timestamp", count: 2 });
const timestampWrites = {
  querySet,
  beginningOfPassWriteIndex: 0, // Write timestamp in index 0 when pass begins.
  endOfPassWriteIndex: 1, // Write timestamp in index 1 when pass ends.
};
const passEncoder = commandEncoder.beginComputePass({ timestampWrites });
// TODO: Set pipeline, bind group, and dispatch work to be performed.
passEncoder.end();

// Resolve timestamps in nanoseconds as a 64-bit unsigned integer into a GPUBuffer.
const size = 2 * BigInt64Array.BYTES_PER_ELEMENT;
const resolveBuffer = device.createBuffer({
  size,
  usage: GPUBufferUsage.QUERY_RESOLVE | GPUBufferUsage.COPY_SRC,
});
commandEncoder.resolveQuerySet(querySet, 0, 2, resolveBuffer, 0);

// Read GPUBuffer memory.
const resultBuffer = device.createBuffer({
  size,
  usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ,
});
commandEncoder.copyBufferToBuffer(resolveBuffer, 0, resultBuffer, 0, size);

// Submit commands to the GPU.
device.queue.submit([commandEncoder.finish()]);

// Log compute pass duration in nanoseconds.
await resultBuffer.mapAsync(GPUMapMode.READ);
const times = new BigInt64Array(resultBuffer.getMappedRange());
console.log(`Compute pass duration: ${Number(times[1] - times[0])}ns`);
resultBuffer.unmap();

עקב חששות מהתקפת תזמון, שאילתות של חותמות זמן עוברות קוונטיזציה ברזולוציה של 100 מיקרו-שניות, שמספקת פשרה טובה בין דיוק לאבטחה. בדפדפן Chrome, אפשר להשבית את התקציבים של חותמות הזמן על ידי הפעלת הדגל 'WebGPU Developer Features' בקובץ chrome://flags/#enable-webgpu-developer-features במהלך הפיתוח של האפליקציה. מידע נוסף זמין במאמר התקציבים של שאילתות עם חותמות זמן.

לפעמים, מעבדי GPU מאפסים את מונה חותמות הזמן, מה שעלול לגרום לערכים לא צפויים כמו דלתא שלילית בין חותמות זמן. לכן, מומלץ לבדוק את השינויים ב-git diff שמוסיפים תמיכה בשאילתות של חותמות זמן לדוגמה הבאה של Compute Boids.

דוגמה ל-Compute Boids עם שאילתה של חותמת זמן.

נקודות כניסה שמוגדרות כברירת מחדל למודולים של שגיאות

כדי לשפר את חוויית המפתחים, עכשיו אפשר להשמיט את entryPoint של מודול ה-shader כשיוצרים צינור עיבוד נתונים לעיבוד או לעיבוד גרפי. אם לא נמצאת נקודת כניסה ייחודית לשלב ה-shader בקוד ה-shader, תופעל הודעת השגיאה GPUValidationError. דוגמה לכך מופיעה בהמשך, וגם בבעיה dawn:2254.

const code = `
    @vertex fn vertexMain(@builtin(vertex_index) i : u32) ->
      @builtin(position) vec4f {
       const pos = array(vec2f(0, 1), vec2f(-1, -1), vec2f(1, -1));
       return vec4f(pos[i], 0, 1);
    }
    @fragment fn fragmentMain() -> @location(0) vec4f {
      return vec4f(1, 0, 0, 1);
    }`;
const module = myDevice.createShaderModule({ code });
const format = navigator.gpu.getPreferredCanvasFormat();
const pipeline = await myDevice.createRenderPipelineAsync({
  layout: "auto",
  vertex: { module, entryPoint: "vertexMain" },
  fragment: { module, entryPoint: "fragmentMain", targets: [{ format }] },
  vertex: { module },
  fragment: { module, targets: [{ format }] },
});

תמיכה ב-display-p3 כמרחב צבעים של GPUExternalTexture

עכשיו אפשר להגדיר את מרחב הצבעים של היעד "display-p3" כשמייבאים GPUExternalTexture מסרטוני HDR באמצעות importExternalTexture(). כדאי לקרוא איך WebGPU מטפל במרחבי צבע. דוגמה לכך מופיעה בבעיה chromium:1330250.

// Create texture from HDR video.
const video = document.querySelector("video");
const texture = myDevice.importExternalTexture({
  source: video,
  colorSpace: "display-p3",
});

מידע על ערמות זיכרון

כדי לעזור לכם לצפות מראש את מגבלות הזיכרון כשאתם מקצים כמויות גדולות במהלך הפיתוח של האפליקציה, requestAdapterInfo() חושף עכשיו מידע על memoryHeaps, כמו הגודל והסוג של ערמות הזיכרון הזמינות במתאם. אפשר לגשת לתכונה הניסיונית הזו רק כשהדגל 'WebGPU Developer Features' מופעל ב-chrome://flags/#enable-webgpu-developer-features. ראו את הדוגמה הבאה ואת הבעיה dawn:2249.

const adapter = await navigator.gpu.requestAdapter();
const adapterInfo = await adapter.requestAdapterInfo();

for (const { size, properties } of adapterInfo.memoryHeaps) {
  console.log(size); // memory heap size in bytes
  if (properties & GPUHeapProperty.DEVICE_LOCAL)  { /* ... */ }
  if (properties & GPUHeapProperty.HOST_VISIBLE)  { /* ... */ }
  if (properties & GPUHeapProperty.HOST_COHERENT) { /* ... */ }
  if (properties & GPUHeapProperty.HOST_UNCACHED) { /* ... */ }
  if (properties & GPUHeapProperty.HOST_CACHED)   { /* ... */ }
}

מקבצים גדולים של זיכרון של מידע על מתאם מוצגים בכתובת https://webgpureport.org.

עדכונים של Dawn

השיטות HasWGSLLanguageFeature ו-EnumerateWGSLLanguageFeatures ב-wgpu::Instance נוספו כדי לטפל בתכונות השפה של WGSL. ראו את הבעיה dawn:2260.

התכונה הלא סטנדרטית wgpu::Feature::BufferMapExtendedUsages מאפשרת ליצור מאגר GPU עם wgpu::BufferUsage::MapRead או wgpu::BufferUsage::MapWrite וכל wgpu::BufferUsage אחר. דוגמה לכך מופיעה בבעיה dawn:2204.

wgpu::BufferDescriptor descriptor = {
  .size = 128,
  .usage = wgpu::BufferUsage::MapWrite | wgpu::BufferUsage::Uniform
};
wgpu::Buffer uniformBuffer = device.CreateBuffer(&descriptor);

uniformBuffer.MapAsync(wgpu::MapMode::Write, 0, 128,
   [](WGPUBufferMapAsyncStatus status, void* userdata)
   {
      wgpu::Buffer* buffer = static_cast<wgpu::Buffer*>(userdata);
      memcpy(buffer->GetMappedRange(), data, sizeof(data));
   },
   &uniformBuffer);

התכונות הבאות תועדו: חלוקת טקסטורות ב-ANGLE, D3D11 multithread protected, Implicit Device Synchronization, Norm16 texture formats, Timestamp Query Inside Passes, Pixel Local Storage, Shader Features ו-Multi Planar Formats.

צוות Chrome יצר מאגר רשמי ב-GitHub עבור Dawn.

כאן מפורטות רק כמה מהנקודות העיקריות. רשימת ההצהרות המלאה

מה חדש ב-WebGPU

רשימה של כל מה שנדון בסדרה מה חדש ב-WebGPU.

Chrome 133

• פורמטים נוספים של קודקודים מסוג unorm8x4-bgra וקודקודים עם רכיב אחד
• איך מאפשרים לבקש מגבלות לא ידועות עם ערך לא מוגדר
• שינויים בכללי היישור של WGS84
• שיפור בביצועים של WGSL באמצעות ביטול
• שימוש ב-displaySize של VideoFrame לצורך טקסטורות חיצוניות
• טיפול בתמונות עם כיוונים שאינם ברירת המחדל באמצעות copyExternalImageToTexture
• שיפור חוויית המפתחים
• הפעלת מצב תאימות באמצעות featureLevel
• ניקוי של תכונות ניסיוניות של קבוצות משנה
• הוצאה משימוש של המגבלה maxInterStageShaderComponents
• עדכונים של Dawn

Chrome 132

• שימוש בתצוגת טקסטורה
• מיזוג של מרקמים מסוג float ב-32 ביט
• המאפיין adapterInfo של GPUDevice
• הגדרת הקשר של לוח הציור בפורמט לא חוקי גורמת לשגיאת JavaScript
• הגבלות על סינון של טקסטורות
• ניסוי עם תת-קבוצות מורחבות
• שיפור חוויית המפתחים
• תמיכה ניסיונית בפורמטים של טקסטורות מנורמלות ב-16 ביט
• עדכונים של Dawn

Chrome 131

• חיתוך מרחקים ב-WGSL
• GPUCanvasContext getConfiguration()
• אסור שתהיה הטיה לעומק בפרימיטיבים של קווים ונקודות
• פונקציות מובנות של סריקה כוללת לקבוצות משנה
• תמיכה ניסיונית בקריאה עקיפה עם כמה משיכות
• Shader module compilation option strict math
• הסרת השיטה requestAdapterInfo()‎ של GPUAdapter
• עדכונים של Dawn

Chrome 130

• שילוב של שני מקורות
• שיפורי זמן הידור של שפות Shader ב-Metal
• הוצאה משימוש של requestAdapterInfo()‎ של GPUAdapter
• עדכונים של Dawn

Chrome 129

• תמיכה ב-HDR עם מצב מיפוי גוונים על קנבס
• תמיכה רחבה יותר בקבוצות משנה
• עדכונים של Dawn

Chrome 128

• ניסוי עם קבוצות משנה
• הוצאה משימוש של הגדרת הטיה של עומק לקווים ולנקודות
• הסתרת אזהרת DevTools על שגיאה שלא תועדה אם preventDefault
• WGSL מבצעת אינטרפולציה של הדגימה קודם ואז
• עדכונים של Dawn

Chrome 127

• תמיכה ניסיונית ב-OpenGL ES ב-Android
• מאפיין המידע של GPUAdapter
• שיפורים בתאימות הדדית של WebAssembly
• שיפור שגיאות של מקודד הפקודות
• עדכונים של Dawn

Chrome 126

• הגדלת המגבלה של maxTextureArrayLayers
• אופטימיזציה של העלאה למאגר לצד העורפי של Vulkan
• שיפורים בזמן הידור של שגיאות (shaders)
• מאגרי הפקודות שנשלחים חייבים להיות ייחודיים
• עדכונים של Dawn

Chrome 125

• תת-קבוצות (תכונה בפיתוח)
• רינדור לפרוסה של טקסטורה תלת-ממדית
• עדכונים של Dawn

Chrome 124

• טקסטורות אחסון לקריאה בלבד ולקריאה וכתיבה
• תמיכה ב-Service Workers וב-Shared Workers
• מאפיינים חדשים של פרטי מתאם
• תיקוני באגים
• עדכונים של Dawn

Chrome 123

• תמיכה בפונקציות מובנות של DP4a ב-WGSL
• פרמטרים של מצביע ללא הגבלה ב-WGSL
• תחביר פשוט יותר לביטול ההפניה למשתנים מורכבים ב-WGSL
• מצב נפרד לקריאה בלבד של אספקטים של תבנית ועומק
• עדכונים של Dawn

Chrome 122

• הרחבת פוטנציאל החשיפה באמצעות מצב תאימות (תכונה בפיתוח)
• הגדלת המגבלה של maxVertexAttributes
• עדכונים של Dawn

Chrome 121

• תמיכה ב-WebGPU ב-Android
• שימוש ב-DXC במקום ב-FXC לצורך הידור של שגיאות ב-Windows
• שאילתות של חותמות זמן בשלבי המחשוב והעיבוד
• נקודות כניסה שמוגדרות כברירת מחדל למודולי Shader
• תמיכה ב-display-p3 כמרחב צבע של GPUExternalTexture
• מידע על ערמות זיכרון
• עדכונים של Dawn

Chrome 120

• תמיכה בערכים של נקודה צפה (floating-point) באורך 16 ביט ב-WGSL
• מעבר למגבלות
• שינויים במצב של עומק-המרקע
• עדכונים של פרטי המתאם
• קידוד נתונים של שאילתות עם חותמות זמן
• תכונות לניקוי האביב

Chrome 119

• טקסטורות של מספרים ממשיים (float) ב-32 ביט שניתן לסנן
• פורמט קודקוד unorm10-10-10-2
• פורמט טקסטורה של rgb10a2uint
• עדכונים של Dawn

Chrome 118

• תמיכה ב-HTMLImageElement וב-ImageData ב-copyExternalImageToTexture()
• תמיכה ניסיונית ברקמות אחסון לקריאה וכתיבה ולקריאה בלבד
• עדכונים של Dawn

Chrome 117

• ביטול ההגדרה של מאגר הנקודות
• ביטול ההגדרה של קבוצת הקישור
• השתקת שגיאות שנובעות מיצירת צינור עיבוד נתונים אסינכררוני כשהמכשיר אבד
• עדכונים לגבי יצירת מודולים של שַדְררים ב-SPIR-V
• שיפור חוויית המפתחים
• אחסון צינורות עיבוד נתונים במטמון עם פריסה שנוצרה באופן אוטומטי
• עדכונים של Dawn

Chrome 116

• שילוב WebCodecs
• מכשיר שאבד שהוחזר על ידי GPUAdapter requestDevice()
• שמירה על הפעלה חלקה של סרטונים אם מתבצעת קריאה ל-importExternalTexture()
• תאימות למפרט
• שיפור חוויית המפתחים
• עדכונים של Dawn

Chrome 115

• תוספים נתמכים לשפת WGSL
• תמיכה ניסיונית ב-Direct3D 11
• קבלת GPU נפרד כברירת מחדל בחשמל AC
• שיפור חוויית המפתחים
• עדכונים של Dawn

Chrome 114

• אופטימיזציה של JavaScript
• הקריאה getCurrentTexture()‎ ב-Canvas לא מוגדר מפעילה את השגיאה InvalidStateError
• עדכונים מ-WGSL
• עדכונים של Dawn

Chrome 113

• שימוש במקור VideoFrame של WebCodecs ב-importExternalTexture()