تعرَّف على الطريقة التي تعزّز بها WebGPU إمكانات وحدة معالجة الرسومات من أجل تحقيق أداء أسرع لتعلُّم الآلة وعرض الرسومات بشكل أفضل.
تحقق واجهة برمجة التطبيقات WebGPU الجديدة مكاسب هائلة في الأداء في مجال الرسومات وأعباء عمل تعلُّم الآلة. تستكشف هذه المقالة مدى تطور WebGPU مقارنةً بالحل الحالي لـ WebGL، مع نظرة سريعة على التطورات المستقبلية. لكن أولاً، دعنا نقدم بعض السياق لسبب تطوير WebGPU.
السياق على WebGPU
تم تضمين WebGL في Chrome في عام 2011. من خلال السماح لتطبيقات الويب بالاستفادة من وحدات معالجة الرسومات، تتيح تقنية WebGL تجارب مذهلة على الويب، بدءًا من Google Earth ووصولاً إلى الفيديوهات الموسيقية التفاعلية ووصولاً إلى الجولات التفصيلية الثلاثية الأبعاد للعقارات والمزيد. استندت WebGL إلى مجموعة OpenGL من واجهات برمجة التطبيقات التي تم تطويرها لأول مرة في 1992. لقد مرّ وقت طويل على ذلك. ويمكنك أن تتخيل أن أجهزة وحدة معالجة الرسومات تطورت بشكل كبير منذ ذلك الوقت.
لمواكبة هذا التطور، تم تطوير نوع جديد من واجهات برمجة التطبيقات للتفاعل بشكل أكثر كفاءة مع أجهزة وحدة معالجة الرسومات الحديثة. واجهات برمجة التطبيقات، مثل Direct3D 12 وMetal وVulkan وقد دعمت واجهات برمجة التطبيقات الجديدة هذه حالات استخدام جديدة وتتطلّب استخدام برمجة وحدة معالجة الرسومات مثل التطوّر السريع في تعلُّم الآلة والتطورات في خوارزميات العرض. WebGPU هي منصة WebGL توفّر التطورات في هذه الفئة الجديدة من واجهات برمجة التطبيقات الحديثة على الويب.
تتيح WebGPU العديد من الإمكانات الجديدة لبرمجة وحدة معالجة الرسومات في المتصفّح. فهو يعكس بشكل أفضل كيفية عمل الأجهزة الحديثة لوحدة معالجة الرسومات، ويضع أساسًا أيضًا لإمكانيات وحدة معالجة الرسومات الأكثر تقدمًا في المستقبل. بدأ إنشاء واجهة برمجة التطبيقات في مجموعة "وحدة معالجة الرسومات (GPU) للويب" التابعة لـ 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 أقل تداولاً، لذا يمكنك إنجاز المزيد من المهام بأقل عدد من استدعاءات الوظائف. ونركّز في البداية على إجراء عمليات التحقّق من المشاكل والاعتماد بشكل كبير على المدى الطويل في ما يتعلّق بالرسم، وذلك في أسرع وقت ممكن. بالإضافة إلى ذلك، نوفّر واجهات برمجة تطبيقات جديدة، مثل Render bundle (حِزم العرض)، والتي تتيح لك تسجيل أعداد كبيرة من أوامر الرسم مسبقًا وإعادة تشغيلها باستدعاء واحد.
لتوضيح الفرق الكبير الذي يمكن أن تُحدثه ميزة مثل حِزم العرض، إليك عرض توضيحي آخر من تطبيق 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 قيد التقدم أو اكتمل بالفعل في العديد من مكتبات WebGL الشائعة من JavaScript، وفي بعض الحالات، قد تكون الاستفادة من مزايا WebGPU أمرًا بسيطًا مثل تغيير علامة واحدة!
وهذا الإصدار الأول في Chrome 113 ما هو إلا مجرد بداية. على الرغم من أنّ الإصدار الأولي منّا متوافق مع أنظمة التشغيل Windows وChromeOS وMacOS، نخطّط لإتاحة واجهة برمجة التطبيقات WebGPU على الأنظمة الأساسية المتبقية، مثل Android وLinux في المستقبل القريب.
وليس فريق Chrome فقط الذي كان يعمل على إطلاق WebGPU. وهناك عمليات قيد التقدم أيضًا في Firefox وWebKit.
بالإضافة إلى ذلك، هناك ميزات جديدة في W3C يمكن عرضها عند توفرها في الأجهزة. على سبيل المثال: نخطط في Chrome لتفعيل إتاحة أرقام النقاط العائمة 16 بت في أدوات التظليل وفئة تعليمات DP4a قريبًا لإجراء المزيد من التحسينات في أداء تعلُّم الآلة.
WebGPU هي واجهة برمجة تطبيقات شاملة تحقق أداءً رائعًا إذا استثمرت في استخدامها. لا يمكننا اليوم سوى تناول مزايا هذه الميزة على مستوى عالٍ فقط، ولكن إذا أردت البدء باستخدام WebGPU، يمكنك الاطّلاع على درس تطبيقي تمهيدي حول الترميز، تطبيق WebGPU الأول لك. وفي هذا الدرس التطبيقي حول الترميز، ستُنشئ إصدار وحدة معالجة رسومات من لعبة Conway الكلاسيكية. يرشدك هذا الدرس التطبيقي حول الترميز خلال العملية خطوة بخطوة، ما يتيح لك تجربته حتى ولو كانت هذه المرة الأولى التي تنفّذ فيها تطوير وحدة معالجة الرسومات.
تعتبر نماذج WebGPU أيضًا مكانًا جيدًا للتعرف على واجهة برمجة التطبيقات. وتتنوّع هذه الأنواع من "مثلّث مرحبا" التقليدي إلى أساليب العرض والحساب الأكثر اكتمالاً، ما يوضّح مجموعة متنوّعة من الأساليب. أخيرًا، يمكنك الاطّلاع على المراجع الأخرى.