ميزات WebGPU للمطوّرين

François Beaufort
François Beaufort
GitHub

تاريخ النشر: 3 حزيران (يونيو) 2025

يتضمّن تنفيذ واجهة برمجة التطبيقات WebGPU في Chrome ميزات مخصّصة للتطوير والاختبار فقط. لا تندرج هذه الميزات ضمن مواصفات WebGPU العادية ويجب عدم استخدامها في مرحلة الإنتاج.

يوضّح هذا المستند بالتفصيل كيفية تفعيل ميزات WebGPU للمطوّرين ويقدّم قائمة شاملة.

المتطلبات الأساسية

لتفعيل ميزات WebGPU للمطوّرين في Chrome، اتّبِع الخطوات التالية:

  1. فعِّل علامة "ميزات WebGPU للمطوّرين" في chrome://flags/#enable-webgpu-developer-features.
  2. أعِد تشغيل متصفّح Chrome.

إيقاف تجميع طلبات البحث عن الطوابع الزمنية

تتيح طلبات البحث عن الطوابع الزمنية لتطبيقات WebGPU قياس وقت تنفيذ أوامر وحدة معالجة الرسومات بدقة (بالنانوثانية) أثناء عمليات الحوسبة والعرض. هذه طلبات البحث ضرورية لتحليل أداء وحدة معالجة الرسومات وسلوكها في ما يتعلّق بحمولة العمل. لمزيد من التفاصيل، يُرجى الاطّلاع على طلبات البحث عن الطوابع الزمنية في عمليات الحساب والعرض.

بسبب المخاوف المتعلقة بالهجوم على التوقيت، يتم تقسيم طلبات البحث عن الطوابع الزمنية بدقة تبلغ 100 ميكرو ثانية، ما يوفر حلًا وسطًا جيدًا بين الدقة والأمان. يتم إيقاف هذه العملية تلقائيًا عند تفعيل علامة "ميزات مطوّري WebGPU".

معلومات المحوِّل الموسَّعة

للحصول على فهم أعمق للمحوِّل المستخدَم، تعرض GPUAdapterInfo السمات التالية:

  • سمة device (مُعَدَّلة) هي معرّف محوِّل خاص بالمورّد.
  • سمة description (موحّدة) هي سلسلة يمكن لشخص عادي قراءتها وتقدّم تفاصيل المحوِّل.
  • سمة driver (غير موحّدة) هي سلسلة تصف برنامج التشغيل ويمكن لشخص عادي قراءتها.
  • تشير سمة backend (غير مُعَدّلة) إلى الخلفية الرسومية، مثل "WebGPU" أو "D3D11" أو "D3D12" أو "metal" أو "vulkan" أو "openGL" أو "openGLES" أو "null".
  • تحدِّد السمة type (غير المُعَدَّلة) نوع وحدة معالجة الرسومات: "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 غير موحّد، ما يؤدي إلى تفعيل الدقة الحسابية الصارمة أو إيقافها أثناء تجميع وحدة تظليل. يتوفّر هذا الخيار على 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 معرفة ما إذا كانت وحدة معالجة الرسومات قد وصلت مباشرةً إلى الفيديو الذي تم استيراده باستخدام 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');
}