תכונות למפתחים ב-WebGPU

François Beaufort
François Beaufort
GitHub

תאריך פרסום: 3 ביוני 2025

ההטמעה של WebGPU API ב-Chrome כוללת תכונות שנועדו אך ורק לפיתוח ולבדיקה. התכונות האלה לא נכללות במפרט הרגיל של WebGPU, ואסור להשתמש בהן בסביבת הייצור.

במסמך הזה מוסבר איך מפעילים תכונות למפתחים של WebGPU, ומופיעה רשימה מקיפה של התכונות האלה.

דרישות מוקדמות

כדי להפעיל את התכונות למפתחים של WebGPU ב-Chrome:

  1. מפעילים את הדגל 'WebGPU Developer Features' (תכונות למפתחים של WebGPU) ב-chrome://flags/#enable-webgpu-developer-features.
  2. מפעילים מחדש את דפדפן Chrome.

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

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

עקב חששות מהתקפת תזמון, שאילתות של חותמות זמן עוברות קוונטיזציה ברזולוציה של 100 מיקרו-שניות, שמספקת פשרה טובה בין דיוק לאבטחה. הקידוד הזה מושבת באופן אוטומטי כשהדגל 'WebGPU Developer Features' מופעל.

מידע מורחב על המתאם

כדי להבין לעומק את המתאם שבו נעשה שימוש, GPUAdapterInfo חושף את המאפיינים הבאים:

  • המאפיין device (סטנדרטי) הוא מזהה מתאם ספציפי לספק.
  • המאפיין description (סטנדרטי) הוא מחרוזת שאנשים יכולים לקרוא, שמספקת פרטי מתאם.
  • המאפיין driver (לא סטנדרטי) הוא מחרוזת לתיאור הנהג, שאנשים יכולים לקרוא.
  • המאפיין backend (לא סטנדרטי) מציין את הקצה העורפי של הגרפיקה, למשל "WebGPU",‏ "D3D11",‏ "D3D12",‏ "metal",‏ "vulkan",‏ "openGL",‏ "openGLES" או "null".
  • המאפיין type (לא סטנדרטי) מזהה את סוג ה-GPU: "discrete GPU",‏ "integrated GPU",‏ "CPU" או "unknown".
  • המאפיין d3dShaderModel (לא סטנדרטי) מציין את מספר המודל המקסימלי של שפת שדרוג הקוד (shader) של D3D שנתמך. לדוגמה, הערך 62 מציין תמיכה ב-HLSL SM 6.2.
  • המאפיין vkDriverVersion (לא סטנדרטי) הוא גרסת מנהל ה-Vulkan שצוינה על ידי הספק.
  • המאפיין powerPreference (לא סטנדרטי) הוא "low-power" או "high-performance", על סמך GPUPowerPreference ב-GPURequestAdapterOptions.

כדי לצפות מראש את מגבלות הזיכרון במהלך הקצאת כמויות גדולות במהלך הפיתוח של האפליקציה, GPUAdapterInfo חושף את המאפיין memoryHeaps עם מידע לא סטנדרטי, כמו הגודל והסוג של ערמות הזיכרון הזמינות במתאם.

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

for (const { size, properties } of adapter.info.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)   { /* ... */ }
}

אפשרות הידור של מודול Shader: מתמטיקה קפדנית

המאפיין GPUShaderModuleDescriptor כולל אפשרות בוליאננית לא סטנדרטית מסוג strictMath, שמפעילה או משביתה דיוק מתמטי קפדני במהלך הידור מודול ה-shader. האפשרות הזו נתמכת ב-Metal וב-Direct3D. כשהאפשרות strictMath מופעלת, המהדר עומד בכללים מתמטיים מדויקים. לעומת זאת, השבתה שלו מאפשרת למהדר לבצע אופטימיזציה של שגיאות על ידי:

  • מתעלמים מהאפשרות של ערכים NaN ו-Infinity.
  • התייחסות ל--0 כאל +0.
  • החלפת חלוקה במכפלה מהירה יותר בחזקה ההפוכה.
  • סידור מחדש של פעולות על סמך מאפיינים אסוסיטיביים וחלופיים.
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

const code = `
  // Examines the bit pattern of the floating-point number to
  // determine if it represents a NaN according to the IEEE 754 standard.
  fn isNan(x : f32) -> bool {
    bool ones_exp = (bitcast<u32>(x) & 0x7f8) == 0x7f8;
    bool non_zero_sig = (bitcast<u32>(x) & 0x7ffff) != 0;
    return ones_exp && non_zero_sig;
  }
  // ...
`;

// Enable strict math during shader compilation.
const shaderModule = device.createShaderModule({ code, strictMath: true });

ייבוא סרטונים ללא העתקה

המאפיין הבוליאני הלא סטנדרטי GPUExternalTexture‏ isZeroCopy מאפשר לכם לדעת אם ה-GPU קיבל גישה ישירה לסרטון שיובאה באמצעות importExternalTexture(), בלי צורך בעותק ביניים.

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

const video = document.querySelector('video');
const externalTexture = device.importExternalTexture({ source: video });

if (externalTexture.isZeroCopy) {
  console.log('Video frame was accessed directly by the GPU');
}