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

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

François Beaufort

إتاحة WebGPU على Android

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

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

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

استخدام DXC بدلاً من FXC لتجميع البرامج النصية لتأثيرات الإضاءة على نظام التشغيل Windows

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

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

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

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

عندما تكون ميزة "timestamp-query" متاحة في GPUAdapter، يمكنك الآن تنفيذ الإجراءات التالية:

اطلب GPUDevice تتضمّن ميزة "timestamp-query".
أنشئ GPUQuerySet من النوع "timestamp".
استخدِم GPUComputePassDescriptor.timestampWrites وGPURenderPassDescriptor.timestampWrites لتحديد مكان كتابة قيم الطابع الزمني في GPUQuerySet.
حلّ قيم الطوابع الزمنية في GPUBuffer باستخدام resolveQuerySet().
اقرأ قيم الطابع الزمني من خلال نسخ النتائج من GPUBuffer إلى وحدة المعالجة المركزية.
فك ترميز قيم الطابع الزمني على أنّها 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 كسمة color space في 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 تعرض مجموعات الذاكرة في معلومات المُحوِّل — تظهر مجموعات الذاكرة المتعلّقة بمعلومات المُحوِّل على https://webgpureport.org.

آخر الأخبار من Dawn

تمّت إضافة الطريقتَين 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 وD3D11 المتعدد المواضيع المحمي ومزامنة الأجهزة الضمنية وتنسيقات النسيج Norm16 وطلب الطابع الزمني داخل المراحل والتخزين المحلي للبكسل وميزات Shader وتنسيقات Multi Planar.

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

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