تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

الميزات الجديدة في WebGPU (الإصدار 121 من Chrome)

François Beaufort

إتاحة WebGPU على Android

يسعدنا أن يعلن فريق Chrome أنّ WebGPU مفعَّل تلقائيًا الآن في Chrome 121 على الأجهزة التي تعمل بنظام التشغيل Android 12 والإصدارات الأحدث والتي تعمل من خلال وحدات معالجة الرسومات Qualcomm وARM.

وسيتم توسيع نطاق هذه الميزة تدريجيًا ليشمل مجموعة أكبر من أجهزة Android، بما في ذلك الأجهزة التي تعمل بالإصدار 11 من نظام التشغيل Android في المستقبل القريب. وسيعتمد هذا التوسّع على إجراء المزيد من الاختبارات والتحسين لضمان تجربة سلسة عبر مجموعة أكبر من إعدادات الأجهزة. راجِع المشكلة chromium:1497815.

لقطة شاشة لنموذج WebGPU يعمل على Chrome لنظام Android. — نموذج WebGPU يعمل على Chrome لأجهزة Android

استخدام DXC بدلاً من FXC لتجميع أدوات التظليل على Windows

يستخدم Chrome الآن برنامج DXC (برنامج التحويل الرقمي DirectX) لتجميع أدوات التظليل على أجهزة Windows D3D12 المزودة بأجهزة رسومات SM6+. في السابق، اعتمدت WebGPU على أداة FXC (FX Compiler) لتجميع أدوات التظليل في نظام التشغيل Windows. وعلى الرغم من أنّها فعالة، إلا أنّها كانت تفتقر إلى مجموعة الميزات وتحسينات الأداء المتوفّرة في DXC.

أظهرت الاختبارات الأولية زيادةً في المتوسط بنسبة 20% في سرعة تجميع أداة تظليل الخوارزمية عند استخدام DXC مقارنةً بآلية FXC.

طلبات الطوابع الزمنية في عمليات الحوسبة والعرض

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

عند توفُّر ميزة ""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" على chrome://flags/#enable-webgpu-developer-features أثناء تطوير تطبيقك. لمزيد من المعلومات، يمكنك الاطّلاع على تحديد كم طلبات الطابع الزمني.

بما أنّ وحدات معالجة الرسومات قد تعيد ضبط عدّاد الطابع الزمني من حين لآخر، ما قد يؤدي إلى ظهور قيم غير متوقعة، مثل قيم دلتا السالبة بين الطوابع الزمنية، ننصحك بالاطّلاع على تغييرات git diff التي تضيف إمكانية استخدام طلبات البحث للطابع الزمني إلى عيّنة Compute Boids التالية.

لقطة شاشة لعيّنة في Compute Boids يظهر فيها طلب بحث للطابع الزمني — نموذج "Compute Boids" (المكوّن الإضافي) يضم طلب بحث بالطابع الزمني

نقاط الدخول التلقائية إلى وحدات أداة التظليل

لتحسين تجربة المطوّرين، يمكنك الآن حذف entryPoint من وحدة أداة التظليل عند إنشاء مسار للحوسبة أو العرض. إذا لم يتم العثور على نقطة دخول فريدة لمرحلة أداة التظليل في رمز أداة التظليل، سيتم تشغيل 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 من فيديوهات بنطاق عالي الديناميكية باستخدام 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" على 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 تعرض معلومات حول المهايئات في الذاكرة. — مساحات الذاكرة التي تتضمّن معلومات المحوّل معروضة على https://webgpureport.org.

الإشعارات عند الفجر

تمت إضافة الطريقتَين HasWGSLLanguageFeature وEnumerateWGSLLanguageFeatures على wgpu::Instance للتعامل مع ميزات اللغة WGSL. راجِع المشكلة dawn:2260.

تتيح لك ميزة "wgpu::Feature::BufferMapExtendedUsages" غير العادية إنشاء وحدة تخزين مؤقتة لوحدة معالجة الرسومات باستخدام "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 Texture Share (مشاركة الهيئة في ANGLE) وD3D11 حماية ذات سلاسل محادثات متعددة ومزامنة الجهاز الضمنية وتنسيقات Norm16 وTimestamp Query Inside Campaigns ووحدة التخزين المحلية في Pixel وميزات Shader" وتنسيقات متعددة المستويات.

أنشأ فريق Chrome مستودع GitHub رسميًا لتطبيق Dawn.

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