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

François Beaufort
François Beaufort

توافق مع النطاق العالي الديناميكية (HDR) مع وضع "تعيين درجة اللون"

تتوفّر لمطوّري الويب خيارات محدودة لعرض محتوى HDR، ويعتمدون في الأساس على عنصرَي <img> و<video>. يبقى عنصر <canvas> مخصّصًا لتنسيق SDR. لإنشاء محتوى ديناميكي بتقنية النطاق العالي الديناميكية (HDR) في لوحة، يجب ترميز محتوياته كصورة بتقنية HDR قبل عرضها (يمكنك الاطّلاع على هذا العرض التجريبي للحصول على مثال).

تسمح المَعلمة الجديدة GPUCanvasToneMappingMode في إعدادات لوحة WebGPU الآن لواجهة WebGPU برسم ألوان أكثر سطوعًا من الأبيض (#FFFFFF). ويتم ذلك من خلال الأوضاع التالية:

  • "standard": يحصر السلوك التلقائي المحتوى في نطاق SDR للشاشة. يتم تحقيق هذا الوضع من خلال تثبيت جميع قيم الألوان في مساحة الألوان للشاشة على فاصل [0, 1].

  • "extended": لفتح نطاق HDR الكامل للشاشة يطابق هذا الوضع "standard" في نطاق [0, 1] من الشاشة. يتمّ التقييد أو العرض على النطاق الديناميكي الموسّع للشاشة وليس [0, 1].

يوضّح لك مقتطف الرمز التالي كيفية ضبط لوحة لميزة النطاق الديناميكي العالي.

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

const canvas = document.querySelector("canvas");
const context = canvas.getContext("webgpu");

context.configure({
  device,
  format: "rgba16float",
  toneMapping: { mode: "extended" },
});

استكشِف تقنية HDR باستخدام WebGPU من خلال الاطّلاع على نموذج الجسيمات (بتقنية HDR) ومثال على تقنية HDR باستخدام WebGPU، والاطّلاع على إدخال chromestatus.

كمبيوتر محمول مزوّد بشاشة HDR يعرض صورة نابضة بالحياة
عيّنة "الحبيبات" (النطاق العالي الديناميكية) معروضة على شاشة ذات نطاق عالي الديناميكية

إتاحة المجموعات الفرعية الموسّعة

بعد الإعلان عن تجربة المجموعات الفرعية، أصبحت الدوالّ المضمّنة للمجموعات الفرعية متاحة الآن للاستخدام في كلّ من برامج تظليل الحساب وبرامج تظليل الأجزاء. لم تعُد هذه الوحدات مقتصرة على وحدات تظليل الحوسبة فقط. راجِع المشكلة 354738715.

يُرجى العِلم أنّ القيمة المضمّنة subgroup_size معدّلة حاليًا في برامج تظليل الشرائح. تجنَّب استخدامها في الوقت الحالي.

بالإضافة إلى ذلك، تمت إضافة الدوالّ المضمّنة التالية للمجموعة الفرعية:

  • subgroupAdd(value): عرض مجموع جميع عمليات الاستدعاء النشطة value على مستوى المجموعة الفرعية
  • subgroupExclusiveAdd(value): عرض مجموع عمليات البحث الحصرية لجميع عمليات الاستدعاء النشطة value في المجموعة الفرعية
  • subgroupMul(value): تعرِض هذه السمة حاصل ضرب جميع عمليات الاستدعاء النشطة value في المجموعة الفرعية.
  • subgroupExclusiveMul(value): تعرِض هذه السمة عملية الضرب الحصرية للبحث عن جميع عمليات الاستدعاء النشطة value في المجموعة الفرعية.

  • subgroupAnd(value): تعرِض العملية "و" الثنائية لجميع عمليات الاستدعاء النشطة value في المجموعة الفرعية.
  • subgroupOr(value): تعرِض هذه الدالة أوّل رقم ثنائي لجميع عمليات الاستدعاء النشطة value في المجموعة الفرعية.
  • subgroupXor(value): تعرِض دالة XOR الثنائية جميع عمليات الاستدعاء النشطة value في المجموعة الفرعية.

  • subgroupMin(value): تعرِض هذه الدالة الحدّ الأدنى لجميع عمليات الاستدعاء النشطة value في المجموعة الفرعية.
  • subgroupMax(value): تعرض الحد الأقصى لجميع عمليات الاستدعاء النشطة value في المجموعة الفرعية.

  • subgroupAll(value): تعرض قيمة صحيحة إذا كانت value صحيحة لجميع عمليات الاستدعاء النشطة في المجموعة الفرعية.
  • subgroupAny(value): تعرض قيمة صحيحة إذا كانت value صحيحة لأيّ استدعاء نشط في المجموعة الفرعية.

  • subgroupElect(): تُعرِض القيمة "صحيح" إذا كان هذا الطلب يحتوي على أدنى قيمة subgroup_invocation_id بين الطلبات النشطة في المجموعة الفرعية.
  • subgroupBroadcastFirst(value): تبثّ value من الطلب النشط الذي يملك أقل قيمة subgroup_invocation_id في المجموعة الفرعية إلى جميع الطلبات النشطة الأخرى.

  • subgroupShuffle(value, id): عرض value من الطلب النشط الذي يتطابق subgroup_invocation_id مع id
  • subgroupShuffleXor(value, mask): عرض value من الطلب النشط الذي يتطابق subgroup_invocation_id مع subgroup_invocation_id ^ mask يجب أن تكون mask متسقة ديناميكيًا.
  • subgroupShuffleUp(value, delta): عرض value من الطلب النشط الذي يتطابق subgroup_invocation_id مع subgroup_invocation_id - delta
  • subgroupShuffleDown(value, delta): عرض value من الطلب النشط الذي يتطابق subgroup_invocation_id مع subgroup_invocation_id + delta

  • quadBroadcast(value, id): تُرسِل value من طلب الرباعي الذي يحمل المعرّف id. يجب أن يكون id تعبيرًا ثابتًا.
  • quadSwapX(value): تبديل value بين عمليات الاستدعاء في الرباعي في اتجاه X
  • quadSwapY(value): تبديل value بين عمليات الاستدعاء في الرباعي في اتجاه Y
  • quadSwapDiagonal(value): تبديل value بين عمليات الاستدعاء في الشبكة الرباعية بشكل قطري

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

تتضمّن بنية wgpu::PrimitiveState الآن إعداد التحكّم في المقطع المعني بالاستناد إلى العمق مباشرةً، ما يغني عن استخدام بنية wgpu::PrimitiveDepthClipControl منفصلة. لمزيد من المعلومات، يمكنك الاطّلاع على مقتطف الرمز البرمجي التالي وطلب المراجعة الخاص بـ webgpu-headers.

// Before
wgpu::PrimitiveState primitive = {};
wgpu::PrimitiveDepthClipControl depthClipControl;
depthClipControl.unclippedDepth = true;
primitive.nextInChain = &depthClipControl;
// Now
wgpu::PrimitiveState primitive = {};
primitive.unclippedDepth = true;

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

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

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

Chrome 131

Chrome 130

الإصدار 129 من Chrome

Chrome 128

Chrome 127

الإصدار 126 من Chrome

الإصدار 125 من Chrome

Chrome 124

Chrome 123

Chrome 122

الإصدار 121 من Chrome

الإصدار 120 من Chrome

الإصدار 119 من Chrome

Chrome 118

Chrome 117

Chrome 116

Chrome 115

الإصدار 114 من Chrome

Chrome 113