تعرَّف على كيفية استفادة وحدة معالجة الرسومات WebGPU من قدرات وحدة معالجة الرسومات من أجل تعزيز أداء تعلُّم الآلة وعرض الرسومات بشكل أفضل.
توفِّر WebGPU API الجديدة تحسّنًا كبيرًا في الأداء في ما يتعلّق بالرسومات وأعباء عمل تعلُّم الآلة. تستكشف هذه المقالة كيف يمكن الاستفادة من WebGPU لتحسين الحل الحالي لـ WebGL، مع نظرة سريعة على التطورات المستقبلية. لكن أولاً، دعونا نعرض بعض السياق حول سبب تطوير WebGPU.
السياق على WebGPU
تم استخدام WebGL في Chrome في عام 2011. من خلال السماح لتطبيقات الويب بالاستفادة من وحدات معالجة الرسومات، يتيح WebGL الحصول على تجارب مذهلة على الويب، بدءًا من Google Earth وحتى مقاطع الفيديو الموسيقية التفاعلية والجولات الإرشادية ثلاثية الأبعاد للعقارات وغيرها. استند WebGL إلى مجموعة OpenGL من واجهات برمجة التطبيقات التي تم تطويرها لأول مرة في عام 1992. لقد مرّ وقت طويل! ويمكنك أن تتخيّل أنّ أجهزة وحدة معالجة الرسومات قد تطوّرت بشكل كبير منذ ذلك الوقت.
ولمواكبة هذا التطور، تم تطوير مجموعة جديدة من واجهات برمجة التطبيقات للتفاعل بكفاءة أكبر مع الأجهزة الحديثة لوحدات معالجة الرسومات. واجهات برمجة التطبيقات، مثل Direct3D 12 وMetal وVulkan لقد دعمت واجهات برمجة التطبيقات الجديدة هذه حالات استخدام جديدة ومطلوبة لبرمجة وحدة معالجة الرسومات مثل الانفجار في تعلّم الآلة والتطوّرات في خوارزميات العرض. وتُعد WebGPU المنتج الأحدث لـ WebGL، حيث تُقدم على الويب تطورات هذه الفئة الجديدة من واجهات برمجة التطبيقات الحديثة.
تتيح وحدة معالجة الرسومات WebGPU الكثير من إمكانات برمجة وحدة معالجة الرسومات الجديدة في المتصفّح. فهو يعكس بشكل أفضل طريقة عمل أجهزة وحدة معالجة الرسومات الحديثة، ويضع أيضًا أساسًا لإمكانيات وحدة معالجة الرسومات الأكثر تقدّمًا في المستقبل. بدأت واجهة برمجة التطبيقات تخبز في مجموعة GPUs للويب التابعة لـ W3C منذ عام 2017، وهي عبارة عن تعاون بين العديد من الشركات، مثل Apple وGoogle وMozilla وMicrosoft وIntel. والآن بعد 6 سنوات من العمل، يسرّنا الإعلان عن توفُّر إحدى أكبر الإضافات إلى منصة الويب.
تتوفّر أداة WebGPU اليوم في Chrome 113 على أنظمة التشغيل ChromeOS وmacOS وWindows، وستكون متوفّرة على أنظمة أساسية أخرى قريبًا. نتوجّه بالشكر إلى المساهمين الآخرين في Chromium وشركة Intel على وجه الخصوص الذين ساعدوا في تحقيق ذلك.
لنلقِ الآن نظرة على بعض حالات الاستخدام الرائعة التي تتيحها WebGPU.
إتاحة مهام عمل جديدة على وحدة معالجة الرسومات من أجل عرض المحتوى
تمكّن ميزات WebGPU، مثل أدوات تظليل الحوسبة، نقل فئات جديدة من الخوارزميات إلى وحدة معالجة الرسومات. على سبيل المثال، الخوارزميات التي يمكنها إضافة المزيد من التفاصيل الديناميكية إلى المشاهد ومحاكاة الظواهر المادية وغير ذلك. وهناك أيضًا أعباء عمل لم يكن بالإمكان تنفيذها في السابق إلا باستخدام JavaScript ويمكن نقلها الآن إلى وحدة معالجة الرسومات.
يعرض الفيديو التالي خوارزمية المكعّبات المتحركة المستخدمة في مثلث سطح هذه الكرات الوصفية. في أول 20 ثانية من الفيديو، تواجه الخوارزمية، عندما يتم تشغيلها بلغة JavaScript، صعوبة في مواكبة الصفحة التي يتم تشغيلها بسرعة 8 لقطات في الثانية فقط، ما يؤدي إلى ظهور صور متحركة سيئة. للحفاظ على أداء الأداة في JavaScript، سنحتاج إلى تقليل مستوى التفاصيل كثيرًا.
ويحدث ذلك الاختلاف بين الليل والنهار عندما ننقل الخوارزمية نفسها إلى أداة تظليل الحاسوب، والتي تظهر في الفيديو بعد 20 ثانية. يتحسّن الأداء بشكل كبير مع عرض الصفحة الآن بمعدّل 60 لقطة في الثانية بسلاسة، ما زال هناك مجال كبير لتحسين الأداء لتأثيرات أخرى. بالإضافة إلى ذلك، يتم تفريغ حلقة JavaScript الرئيسية للصفحة بالكامل لتنفيذ مهام أخرى، ما يضمن استمرار الاستجابة للتفاعلات مع الصفحة.
تتيح واجهة برمجة التطبيقات WebGPU أيضًا استخدام التأثيرات المرئية المعقّدة التي لم تكن مفيدة من قبل. في المثال التالي، التي تم إنشاؤها في مكتبة Babylon.js الشهيرة، تتم محاكاة سطح المحيط بالكامل على وحدة معالجة الرسومات. يتم إنشاء الديناميكيات الواقعية من عدة موجات مستقلة تتم إضافتها إلى بعضها البعض. ولكن محاكاة كل موجة مباشرةً سيكون مكلفًا للغاية.
ولهذا السبب، يستخدم العرض التوضيحي خوارزمية متقدّمة تُعرف باسم تحويل فورييه السريع. فبدلاً من تمثيل كل الموجات كبيانات موضعية معقدة، يستخدم ذلك البيانات الطيفية التي تعد أكثر فعالية لإجراء العمليات الحسابية. ثم يستخدم كل إطار تحويل فورييه للتحويل من البيانات الطيفية إلى البيانات الموضعية التي تمثل ارتفاع الموجات.
استنتاج أسرع لتعلُّم الآلة
تفيد أداة WebGPU أيضًا في تسريع وتيرة تعلُّم الآلة، والتي أصبحت من الاستخدامات الرئيسية لوحدات معالجة الرسومات في السنوات الأخيرة.
منذ فترة طويلة، يعيد مطوّرو المواد الإبداعية استخدام واجهة برمجة تطبيقات العرض في WebGL لإجراء عمليات غير العرض، مثل عمليات احتساب تعلّم الآلة. ومع ذلك، يتطلب هذا رسم وحدات بكسل المثلثات كطريقة لبدء العمليات الحسابية، فضلاً عن تعبئة بيانات التوتر وفك ضغطها بعناية في الهيئة بدلاً من عمليات الوصول إلى الذاكرة ذات الأغراض العامة.
يتطلب استخدام WebGL بهذه الطريقة أن يطابق المطورون بشكل غير محرج رمزهم مع توقعات واجهة برمجة التطبيقات المصممة فقط للرسم. ويؤدي ذلك إلى جانب عدم توفُّر ميزات أساسية، مثل إمكانية الوصول المشترَك إلى الذاكرة بين عمليات الكمبيوتر، ما يؤدي إلى تكرار العمل وأداء دون المستوى الأمثل.
أدوات تظليل الحوسبة هي الميزة الأساسية الجديدة في 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 إلى سوى الكثير من المحادثة، ما يتيح لك إنجاز المزيد من المهام من خلال عدد أقلّ من طلبات الدوال. ونركّز على إجراء عمليات التحقّق من صحة البيانات الكبيرة في البداية، مع الحفاظ على حلقة الرسم المهمة قدر الإمكان. ونوفّر لك واجهات برمجة تطبيقات جديدة، مثل حِزم العرض، تتيح لك تسجيل عدد كبير من أوامر الرسم مسبقًا وإعادة تشغيلها من خلال استدعاء واحد.
لتوضيح الاختلاف الكبير الذي يمكن أن تحدثه ميزة مثل حِزم العرض، إليك عرضًا توضيحيًا آخر من 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 أيضًا مكانًا جيدًا للتعرّف على واجهة برمجة التطبيقات. وتتراوح من "مثلث مرحبًا" التقليدي للحصول على بيانات أكثر اكتمالاً وعرضها، ما يوضّح مجموعة متنوّعة من الأساليب. وأخيرًا، يمكنك الاطّلاع على المراجع الأخرى.