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

François Beaufort

تاريخ النشر: 3 يونيو 2025

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

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

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

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

فعِّل العلامة "ميزات المطوّرين في WebGPU" على chrome://flags/#enable-webgpu-developer-features.
أعِد تشغيل متصفّح 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 (غير موحّدة) الحد الأقصى لرقم نموذج D3D shader المتوافق، على سبيل المثال، يشير الرقم 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 module compilation option strict math

يتضمّن 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');
}