تمت ترجمة هذه الصفحة بواسطة 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) لتجميع برامج التظليل على نظام التشغيل Windows. على الرغم من أنّ FXC كان وظيفيًا، إلا أنّه لم يكن يتضمّن مجموعة الميزات وتحسينات الأداء المتوفّرة في 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 كسمة 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، والبطاقات الداخلية لطلب البحث باستخدام الطابع الزمني، ومساحة التخزين المحلية على Pixel، وميزات Shader، وأشكال متعدّدة المستويات.

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

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