تعرَّف على كيفية استفادة وحدة معالجة الرسومات WebGPU من قدرات وحدة معالجة الرسومات من أجل تعزيز أداء تعلُّم الآلة وعرض الرسومات بشكل أفضل.
توفّر واجهة برمجة التطبيقات الجديدة WebGPU API تحسينات كبيرة في الأداء في الرسومات وأعباء عمل تعلُّم الآلة. تتناول هذه المقالة كيفية تحسين WebGPU مقارنةً بالحلّ الحالي WebGL، مع لمحة سريعة عن التطورات المستقبلية. أولاً، لنوضّح سبب تطوير WebGPU.
السياق في WebGPU
تم طرح WebGL في Chrome في عام 2011. من خلال السماح لتطبيقات الويب بالاستفادة من وحدات معالجة الرسومات، يتيح WebGL الحصول على تجارب مذهلة على الويب، بدءًا من Google Earth وحتى مقاطع الفيديو الموسيقية التفاعلية والجولات الإرشادية ثلاثية الأبعاد للعقارات وغيرها. استند WebGL إلى مجموعة OpenGL من واجهات برمجة التطبيقات التي تم تطويرها لأول مرة في عام 1992. لقد مرّ وقت طويل على ذلك. ويمكنك أن تتخيّل أنّ أجهزة وحدة معالجة الرسومات قد تطوّرت بشكل كبير منذ ذلك الوقت.
لمواكبة هذا التطور، تم تطوير مجموعة جديدة من واجهات برمجة التطبيقات للتفاعل بفعالية أكبر مع أجهزة وحدة معالجة الرسومات الحديثة. واجهات برمجة التطبيقات، مثل Direct3D 12 وMetal وVulkan وقد وفّرت واجهات برمجة التطبيقات الجديدة هذه حالات استخدام جديدة ومتطلبة لبرمجة وحدة معالجة الرسومات، مثل الطفرة في تعلُّم الآلة والتطوّرات في خوارزميات العرض. WebGPU هي البديل لواجهة برمجة التطبيقات WebGL، وهي توفّر ميزات واجهة برمجة التطبيقات الحديثة هذه على الويب.
تتيح WebGPU الكثير من إمكانيات برمجة وحدة معالجة الرسومات الجديدة في المتصفّح. ويعكس ذلك بشكل أفضل آلية عمل أجهزة وحدات معالجة الرسومات الحديثة، كما يرسي الأساس لتوفير إمكانات أكثر تقدمًا لوحدات معالجة الرسومات في المستقبل. تم تطوير واجهة برمجة التطبيقات في مجموعة "وحدة معالجة الرسومات للويب" في W3C منذ عام 2017، وهي نتاج تعاون بين العديد من الشركات، مثل Apple وGoogle وMozilla وMicrosoft وIntel. والآن بعد 6 سنوات من العمل، يسرّنا الإعلان عن توفّر إحدى أهم الإضافات إلى منصة الويب.
يتوفّر WebGPU اليوم في الإصدار 113 من Chrome على ChromeOS وmacOS وWindows، وسيتم طرحه على الأنظمة الأساسية الأخرى قريبًا. نشكر جميع المساهمين الآخرين في Chromium وشركة Intel على وجه الخصوص الذين ساعدوا في تحقيق ذلك.
لنلقِ نظرة الآن على بعض حالات الاستخدام المثيرة التي تتيحها WebGPU.
إتاحة أعباء عمل جديدة لوحدة معالجة الرسومات لعرض الرسومات
تتيح ميزات WebGPU، مثل برامج تظليل الحوسبة، نقل فئات جديدة من الخوارزميات إلى وحدة معالجة الرسومات. على سبيل المثال، الخوارزميات التي يمكنها إضافة المزيد من التفاصيل الديناميكية إلى المشاهد ومحاكاة الظواهر الفيزيائية وغير ذلك. هناك أيضًا أعباء عمل كان لا يمكن إجراؤها في السابق إلا باستخدام JavaScript، ويمكن الآن نقلها إلى وحدة معالجة الرسومات.
يعرض الفيديو التالي خوارزمية مكعبات الخطوات المستخدَمة لتقسيم سطح هذه الكرات النانوية إلى مثلثات. في أول 20 ثانية من الفيديو، تواجه الخوارزمية، عندما يتم تشغيلها بلغة JavaScript، صعوبة في مواكبة الصفحة التي يتم تشغيلها بسرعة 8 لقطات في الثانية فقط، ما يؤدي إلى ظهور صور متحركة سيئة. للحفاظ على أداء الأداة في JavaScript، سنحتاج إلى تقليل مستوى التفاصيل كثيرًا.
هناك فرق كبير بين استخدام الخوارزمية نفسها في برنامج تظليل حسابي، والذي يظهر في الفيديو بعد 20 ثانية. تحسّن الأداء بشكل كبير، حيث تعمل الصفحة الآن بسلاسة بمعدّل 60 لقطة في الثانية، ولا يزال هناك مجال كبير لتحسين الأداء مع التأثيرات الأخرى. بالإضافة إلى ذلك، يتمّ تحرير حلقة JavaScript الرئيسية للصفحة بالكامل لتنفيذ مهام أخرى، ما يضمن استمرار استجابة التفاعلات مع الصفحة.
تتيح WebGPU أيضًا تأثيرات مرئية معقّدة لم تكن عملية من قبل. في المثال التالي، التي تم إنشاؤها في مكتبة Babylon.js الشهيرة، تتم محاكاة سطح المحيط بالكامل على وحدة معالجة الرسومات. يتم إنشاء التأثيرات الديناميكية الواقعية من خلال إضافة العديد من الموجات المستقلة إلى بعضها. ولكن محاكاة كل موجة مباشرةً سيكون مكلفًا للغاية.
لهذا السبب، يستخدم العرض الترويجي خوارزمية متقدّمة تُعرف باسم تحويل فورييه السريع. بدلاً من تمثيل جميع الموجات كبيانات موضعية معقّدة، يستخدم هذا الأسلوب البيانات الطيفية التي تُعدّ أكثر فعالية لإجراء العمليات الحسابية. بعد ذلك، يستخدم كل إطار تحويل فورييه للتحويل من البيانات الطيفية إلى البيانات الموضعية التي تمثّل ارتفاع الموجات.
الاستنتاج الأسرع لتكنولوجيات تعلُّم الآلة
وتُعدّ WebGPU مفيدة أيضًا لتسريع تعلُّم الآلة، الذي أصبح أحد الاستخدامات الرئيسية لوحدات معالجة الرسومات في السنوات الأخيرة.
منذ فترة طويلة، يعيد المطوّرون المبدعون استخدام واجهة برمجة التطبيقات لعرض WebGL لتنفيذ عمليات غير متعلقة بالعرض، مثل عمليات حساب تعلُّم الآلة. ومع ذلك، يتطلب ذلك رسم وحدات البكسل للمثلثات كطريقة لبدء العمليات الحسابية، وتعبئة بيانات مصفوفة السلاسل المتسلسلة وفك تشفيرها بعناية في النسيج بدلاً من الوصول إلى الذاكرة لأغراض عامة أكثر.
ويتطلّب استخدام WebGL بهذه الطريقة من المطوّرين أن يتوافقوا بشكلٍ غير ملائم مع توقعات واجهة برمجة تطبيقات مصمّمة للرسم فقط. بالإضافة إلى عدم توفّر ميزات أساسية، مثل الوصول إلى الذاكرة المشتركة بين العمليات الحسابية، يؤدي ذلك إلى تكرار العمل وتحقيق أداء دون المستوى المطلوب.
تشكّل shaders الحسابية الميزة الجديدة الأساسية في WebGPU وتزيل هذه المشاكل. توفّر وحدات تظليل الحوسبة نموذج برمجة أكثر مرونة يستفيد من الطبيعة الموازية بشكل كبير لوحدة معالجة الرسومات بدون أن يكون مقيّدًا بالبنية الصارمة لعمليات التقديم.
توفّر وحدات تظليل الحوسبة المزيد من الفرص لمشاركة البيانات ونتائج الحوسبة ضمن مجموعات من أعمال تظليل الألوان لتحسين الكفاءة. وقد يؤدي ذلك إلى تحقيق مكاسب كبيرة مقارنةً بالمحاولات السابقة لاستخدام WebGL من أجل الغرض نفسه.
على سبيل المثال، في عملية نقل أولية لنموذج انتشار الصور في TensorFlow.js، يُظهر الأداء تحسُّنًا بمقدار 3 مرات على مجموعة متنوعة من الأجهزة عند نقله من WebGL إلى WebGPU. في بعض الأجهزة التي تم اختبارها، تم عرض الصورة في أقل من 10 ثوانٍ. ولأنّ هذا كان منفذًا مبكرًا، نعتقد أنّ هناك المزيد من التحسينات الممكنة في كل من WebGPU وTensorFlow.js. يمكنك الاطّلاع على مقالة ما هي الميزات الجديدة في تعلُّم الآلة على الويب في 2023؟ جلسة Google I/O
لا تقتصر واجهة برمجة التطبيقات WebGPU على توفير ميزات وحدة معالجة الرسومات على الويب.
مصمّمة لتعمل مع JavaScript أولاً
كانت الميزات التي تتيح حالات الاستخدام هذه متاحة لمطوّري التطبيقات المخصّصة للأجهزة المكتبية والأجهزة الجوّالة على المنصة لبعض الوقت، وكان لدينا تحدّي يتمثل في عرضها بطريقة تبدو وكأنها جزء طبيعي من منصة الويب.
تم تطوير WebGPU بالاستفادة من خبرة أكثر من عقد من المطوّرين الذين حققوا إنجازات رائعة باستخدام WebGL. لقد تمكّنا من معالجة المشاكل التي واجهوها، والعقبات التي واجهوها، والمشاكل التي طرحوها، وتوجيه كل هذه الملاحظات إلى واجهة برمجة التطبيقات الجديدة هذه.
رأينا أن نموذج الحالة العالمي لـ WebGL قد جعل إنشاء مكتبات وتطبيقات قوية قابلة للإنشاء أمرًا صعبًا وقابلاً للكسر. وبالتالي، تقلّل WebGPU بشكل كبير من مقدار الحالة التي يحتاج المطوّرون إلى تتبُّعها أثناء إرسال أوامر وحدة معالجة الرسومات.
لقد علمنا أنّ تصحيح أخطاء تطبيقات WebGL كان أمرًا شاقًا، لذا تتضمّن WebGPU آليات معالجة الأخطاء أكثر مرونة لا تؤثّر سلبًا في أدائك. لقد بذلنا قصارى جهدنا لضمان أن تكون كل رسالة تتلقّاها من واجهة برمجة التطبيقات سهلة الفهم وقابلة للتنفيذ.
لاحظنا أيضًا أنّ تكلفة إجراء عدد كبير جدًا من طلبات JavaScript كانت في كثير من الأحيان عائقًا أمام تطبيقات WebGL المعقدة. ونتيجةً لذلك، تكون WebGPU API أقل تطلبًا، ما يتيح لك إنجاز المزيد من المهام باستخدام عدد أقل من طلبات الدالة. نحن نركّز على إجراء عمليات التحقّق من العمليات المُهمّة في البداية، مع الحفاظ على حلقة الرسم المُهمّة قدر الإمكان. ونوفّر واجهات برمجة تطبيقات جديدة، مثل Render Bundles، التي تتيح لك تسجيل أعداد كبيرة من أوامر الرسم مسبقًا وإعادة تشغيلها من خلال طلب واحد.
لتوضيح الفرق الكبير الذي يمكن أن تحدثه ميزة مثل حِزم المعالجة، إليك عرضًا توضيحيًا آخر من Babylon.js. يمكن لبرنامج عرض WebGL 2 تنفيذ جميع طلبات JavaScript لعرض مشهد معرض الفنون هذا 500 مرة في الثانية تقريبًا. وهذا أمر جيد جدًا.
ومع ذلك، يُفعِّل أداة عرض WebGPU ميزة يُطلقون عليها اسم "عرض اللقطات". تستند هذه الميزة إلى حِزم عرض WebGPU، وتسمح بإرسال المشهد نفسه بسرعة أكبر بأكثر من 10 مرات. ويسمح هذا الانخفاض الكبير في الوقت المستغرَق لخدمة WebGPU بعرض مشاهد أكثر تعقيدًا، كما يسمح للتطبيقات بتنفيذ المزيد من الإجراءات باستخدام JavaScript بشكل متزامن.
تتميز واجهات برمجة التطبيقات للرسومات الحديثة بشعبية كبيرة نظرًا للتعقيدات، وبساطة الاستخدام للحصول على فرص تحسين عظيمة. من ناحية أخرى، تركّز WebGPU على التوافق مع جميع المنصات، وتعالج تلقائيًا في معظم الحالات مواضيع صعبة بشكلٍ تقليدي، مثل مزامنة الموارد.
وهذا له تأثير جانبي سعيد وهو أن WebGPU سهلة التعلم والاستخدام. ويعتمد على الميزات الحالية للنظام الأساسي للويب لأشياء مثل تحميل الصور والفيديوهات، كما يستند إلى أنماط JavaScript المعروفة مثل وعود للعمليات غير المتزامنة. ويساعد ذلك في الحدّ الأدنى من كمية الرموز النموذجية المطلوبة. يمكنك عرض مثلثك الأول على الشاشة باستخدام أقل من 50 سطرًا من التعليمات البرمجية.
<canvas id="canvas" width="512" height="512"></canvas>
<script type="module">
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const context = canvas.getContext("webgpu");
const format = navigator.gpu.getPreferredCanvasFormat();
context.configure({ device, format });
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 shaderModule = device.createShaderModule({ code });
const pipeline = device.createRenderPipeline({
layout: "auto",
vertex: {
module: shaderModule,
entryPoint: "vertexMain",
},
fragment: {
module: shaderModule,
entryPoint: "fragmentMain",
targets: [{ format }],
},
});
const commandEncoder = device.createCommandEncoder();
const colorAttachments = [
{
view: context.getCurrentTexture().createView(),
loadOp: "clear",
storeOp: "store",
},
];
const passEncoder = commandEncoder.beginRenderPass({ colorAttachments });
passEncoder.setPipeline(pipeline);
passEncoder.draw(3);
passEncoder.end();
device.queue.submit([commandEncoder.finish()]);
</script>
الخاتمة
يسرّنا أن نرى كل الإمكانات الجديدة التي يوفّرها WebGPU لمنصّة الويب، ونتطلّع إلى الاطّلاع على جميع حالات الاستخدام الجديدة الرائعة التي ستعثر عليها لاستخدام WebGPU.
تم إنشاء منظومة متكاملة نابضة بالحياة من المكتبات والأُطر حول WebGL، وتتطلّع هذه المنظومة المتكاملة نفسها إلى استخدام WebGPU. لا يزال التوافق مع WebGPU غير مكتمل أو مكتمل بالفعل في العديد من مكتبات Javascript WebGL الشهيرة، وفي بعض الحالات قد تكون الاستفادة من مزايا WebGPU بسيطة مثل تغيير علامة واحدة!
وهذا الإصدار الأول في Chrome 113 ليس سوى بداية. على الرغم من أنّ الإصدار الأول مخصّص لنظام التشغيل Windows وChromeOS وMacOS، نخطّط لتوفير WebGPU على الأنظمة الأساسية المتبقية، مثل Android وLinux، في المستقبل القريب.
ولم يكن فريق Chrome وحده يعمل على إطلاق WebGPU. يجري أيضًا تنفيذ هذه الميزة في Firefox وWebKit.
بالإضافة إلى ذلك، يتم بالفعل تصميم ميزات جديدة في W3C والتي يمكن الكشف عنها عند توفرها في الأجهزة. على سبيل المثال: في Chrome، نخطّط قريبًا لتفعيل التوافق مع الأعداد العشرية ذات النقطة العائمة 16 بت في أدوات تحسين الصورة وفئة التعليمات DP4a لتحسين أداء تعلُّم الآلة بشكل أكبر.
WebGPU هي واجهة برمجة تطبيقات شاملة تحقّق أداءً مذهلاً إذا تم الاستفادة منها بشكل جيد. لم نتمكّن اليوم من تغطية فوائدها إلا على مستوى عالٍ، ولكن إذا أردت البدء باستخدام WebGPU، يمكنك الاطّلاع على الدرس التعريفي حول الترميز إطلاق تطبيقك الأول باستخدام WebGPU. في هذا الدرس، ستُنشئ إصدارًا مزوّدًا بوحدة معالجة الرسومات من لعبة Conway's Game of Life الكلاسيكية. يرشدك هذا الدرس التطبيقي حول الترميز إلى كيفية إجراء هذه العملية خطوة بخطوة، حتى تتمكّن من تجربتها حتى لو كانت هذه هي المرة الأولى التي تُجري فيها تطويرًا باستخدام وحدة معالجة الرسومات.
يمكنك أيضًا الاطّلاع على عيّنات WebGPU للتعرّف على واجهة برمجة التطبيقات. وتتراوح هذه الأشكال بين "مثلث مرحبًا" التقليدي وعمليات التقديم والحساب الأكثر اكتمالاً، ما يعرض مجموعة متنوعة من الأساليب. أخيرًا، يمكنك الاطّلاع على المراجع الأخرى.