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

François Beaufort
François Beaufort

إتاحة استخدام WebGPU على Android

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

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

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

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

يستخدم Chrome الآن إمكانيات DXC (DirectX Compiler) لتجميع برامج التظليل على أجهزة 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.

آخر أخبار الفجر

تمّت إضافة الطريقتَين 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 لشهر الفجر.

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

الميزات الجديدة في WebGPU

قائمة بكل ما تم تناوله في سلسلة الميزات الجديدة في WebGPU

الإصدار 130 من Chrome

الإصدار 129 من Chrome

Chrome 128

الإصدار 127 من Chrome

الإصدار 126 من Chrome

الإصدار 125 من Chrome

Chrome 124

Chrome 123

الإصدار 122 من Chrome

الإصدار 121 من Chrome

الإصدار 120 من Chrome

الإصدار 119 من Chrome

Chrome 118

Chrome 117

Chrome 116

Chrome 115

الإصدار 114 من Chrome

الإصدار 113 من Chrome