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

François Beaufort
François Beaufort

إتاحة النطاق العالي الديناميكية مع وضع ربط درجات الألوان في لوحة العرض

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

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

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

  • ‫"extended": يتيح استخدام النطاق الكامل للشاشة العالية الديناميكية. يطابق هذا الوضع "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) ومثال WebGPU HDR، والاطّلاع على إدخال chromestatus.

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

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

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

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

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

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

  • ‫subgroupAnd(value): تعرض هذه السمة عملية AND الثنائية لجميع عمليات الاستدعاء النشطة value في المجموعة الفرعية.
  • ‫subgroupOr(value): تعرض هذه السمة عملية OR الثنائية لجميع عمليات الاستدعاء النشطة value في المجموعة الفرعية.
  • ‫subgroupXor(value): تعرض هذه السمة عملية XOR الثنائية لجميع عمليات الاستدعاء النشطة values في المجموعة الفرعية.

  • ‫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 بين عمليات الاستدعاء في المربّع قطريًا

تعديلات الفجر

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

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

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

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

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

‫Chrome 155-156

‫Chrome 153-154

‫Chrome 151-152

‫Chrome 149-150

Chrome 147-148

‫Chrome 146

‫Chrome 145

‫Chrome 144

Chrome 143

‫Chrome 142

‫Chrome 141

Chrome 140

‫Chrome 139

‫Chrome 138

‫Chrome 137

Chrome 136

Chrome 135

Chrome 134

Chrome 133

‫Chrome 132

Chrome 131

Chrome 130

Chrome 129

‫Chrome 128

Chrome 127

Chrome 126

‫Chrome 125

Chrome 124

Chrome 123

‫Chrome 122

Chrome 121

‫Chrome 120

‫Chrome 119

‫Chrome 118

Chrome 117

Chrome 116

Chrome 115

‫Chrome 114

‫Chrome 113