تطبيقات WebGL

ببساطة، لتنفيذ WebGL، عليك القيام بما يلي:

• يجب إنشاء نافذة وسياق للعرض.
• يجب توفير البيانات الضرورية (مثل رؤوس الأشكال).
• يجب إنشاء برنامج صغير لـ GPU.

في ما يلي، يتم تدريس كل خطوة من الخطوات البسيطة لتطبيق WebGL.

HTML: أنشئ نافذة جديدة

يُستخدم عنصر Canvas في HTML لإنشاء نافذة جديدة. توضح الصورة أدناه الرموز المتعلقة بإنشاء نافذة جديدة باستخدام عنصر Canvas.

في رمز الصورة أعلاه، يتم أيضًا تعيين معرف (ID) لعنصر Canvas هذا بحيث يمكن الرجوع إليه لاحقًا.

JavaScript: إنشاء context

في هذه المرحلة، يجب عليك الانتقال إلى JavaScript وإنشاء سياق. في صورة الكود أدناه، توجد وظيفة تهيئة تأخذ عنصر Canvas الذي تم إنشاؤه في الخطوة السابقة باستخدام المعرف الخاص به وتخبر اللوحة القماشية بأنها تنوي استخدام WebGL هناك.

إنشاء برنامج وإرساله إلى وحدة معالجة الرسومات GPU

في هذه المرحلة، يجب إنشاء برنامج لوحدة معالجة الرسومات. يجب أن يتضمن هذا البرنامج وظيفتين:

• Vertex shader
• Fragment shader

هذه الوظائف عبارة عن برامج صغيرة تحدد السطوع أو التعتيم وموقع العنصر. بالإضافة إلى هاتين الوظيفتين، هناك تظليل آخر يسمى Geometry Shader، والذي لن يتم تغطيته في هذه المهمة البسيطة. تتم كتابة التظليل باستخدام لغة تظليل OpenGL المسماة GLSL. GLSL تعني لغة تظليل OpenGL.

يتم وصف كل تظليل مستخدم في برنامج GPU لتنفيذ WebGL أدناه.

ما هو vertex shader؟

يحدد Vertex Shader بطريقة ما موضع وموقع رؤوس ما يجب رسمه. يُستخدم Vertex Shader في WebGL لإنشاء أشكال بدائية او primitive. الأشكال الأساسية هي أساس الأشكال الأكثر تعقيدًا. تتضمن بعض الأشكال المبكرة ما يلي:

• Point او نقطة
• Line او خط
• LINE_LOOP
• LINE_STRIP
• TRIANGLE_FAN

في الصورة أدناه، توجد رموز متعلقة بوظيفة Vertex Shader بلغة GLSL. GLSL لها سمة تسمى vec2 تشبه المعلمة في JavaScript. تتطلب هذه السمة من النوع vec2 معلمتين من معلمات الإدخال من النوع العشري العائم. بعد ذلك، يتم وضع السمة التي تم إنشاؤها من vec2 والتي تسمى vertPosition في وظيفة Vector Shader تسمى vec4. أيضًا، يمكنك كتابة Vertex Shader في JavaScript.

في ما يلي، يتم مناقشة تعريف ووصف Fragment Shader.

ما هو Fragment Shader؟

يحدد Fragment Shader الألوان لكل بكسل. هيكل Fragment Shader يشبه إلى حد بعيد Vertex Shader. في القسم التالي، يتم عرض عملية إنشاء الصور في WebGL ووصفها بصريًا.

تمثيل مرئي لعملية تنفيذ webgl

في الصورة أعلاه، يتم عرض ما يحدث في عملية تنفيذ وإنشاء الرسومات في WebGL بوضوح. تتم هذه العملية على النحو التالي:

• إنشاء Vertex Shader
• تجميع الشكل
• تحويل الشكل إلى صورة نقطية (تنقيط).
• تلوين الصورة بواسطة Fragment Shader
• حصول على الصورة النهائية

ادناه، يتم تقديم الصورة المتعلقة برموز HTML للتنفيذ ثنائي الأبعاد للمثلث الأصفر، والذي تم وصف خطوات إنتاجه أعلاه:

في أكواد JavaScript التالية، يتم إنشاء سياق أولاً باستخدام WebGL و Canvas. بعد ذلك، يتم إنشاء البيانات وتخزينها في مخزن مؤقت. ببساطة، المخزن المؤقت هو قائمة طويلة من البيانات المنقولة. بعد ذلك، يتم إنشاء تظليل Vertex و Fragment. أخيرًا، تم دمج المظلات التي تم إنشاؤها في تطبيق خاص بوحدة معالجة الرسومات.

كما هو موضح في الصورة أعلاه، تم إنشاء ما مجموعه 69 سطرًا من تعليمات JavaScript البرمجية للحصول أخيرًا على المخرجات التالية:

قد يبدو هذا المقدار الكبير من التعليمات البرمجية لإنشاء مثلث ثنائي الأبعاد مفاجئًا، وقد يبدو التعامل مع WebGL صعبًا للغاية. ولكن، على سبيل المثال، لإنشاء ألف مثلثات من هذا القبيل، من الممكن إعادة استخدام الكثير من الكود الذي تم إنشاؤه لوحدة معالجة الرسومات (GPU) بمجرد إدخال البيانات الضرورية. لذلك، يمكن إعادة استخدام كمية كبيرة من التعليمات البرمجية في WebGL.

والآن بعد أن أصبحت آلية WebGL واضحة، فإن البرنامج التعليمي حول الإجراء المبسط لتطبيق WebGL، ووصف بعض المفاهيم الأساسية لرسومات الكمبيوتر و استمر في تقديم تقنيتين شائعتين لتطوير WebGL. تقدم المقالة “ما هو WebGL” بعض أطر عمل WebGL الشائعة والشائعة.

مكتبات وأطر عمل WebGL

يوفر هذا القسم من هذا المقال قائمة بأطر عمل WebGL والمكتبات. يتم توفير هذه القوائم للأغراض التعليمية والمعلوماتية فقط، حيث إن بعض هذه المكتبات قديمة ولم تعد مدعومة. في ما يلي، يتم سرد بعض مكتبات WebGL ومحركات المعالجة.

مكتبات WebGL ومحركات المعالجة

يتم سرد مكتبات WebGL ومحركات المعالجة ادناه:

• Three.js: مكتبة جافا ثلاثية الأبعاد
• stack.gl: إطار عمل برنامج مفتوح المصدر لـ WebGL يعتمد على Browserify و npm.
• PixiJS: محرك عرض HTML5 ثنائي الأبعاد فائق السرعة يستخدم WebGL مع قماش محجوز.
• Pex: محرك / مكتبة جافا سكريبت ثلاثية الأبعاد تتيح تطويرًا سلسًا عبر المستعرضات بين Flask و WebGL.
• Babylon.js: إطار عمل JavaScript كامل لإنشاء ألعاب ثلاثية الأبعاد باستخدام HTML5 و WebGL
• Filament: محرك عرض في الوقت الفعلي قائم على الفيزياء لأنظمة Android و iOS و Windows و Linux و Mac OS و WASM / WebGL.
• ClayGL: مكتبة رسومات WebGL تساعد في إنشاء تطبيقات Web3D.
• AwayJS: مكتبة رسومات لجافا سكريبت مكتوبة بلغة TypeScript.
• SceneJS: محرك ويب قابل للتوسيع قائم على WebGL لتقديم عرض ثلاثي الأبعاد مفصل للغاية
• Blend4Web: أداة للتصور التفاعلي ثلاثي الأبعاد على الإنترنت
• PlayCanvas: محرك ألعاب جافا سكريبت يعتمد على WebGL و WebVR
• Turbulenz: إطار عمل معياري للألعاب ثنائية وثلاثية الأبعاد لبناء ألعاب HTML5 للمتصفحات وأجهزة الكمبيوتر المكتبية والأجهزة المحمولة
• Hilo3d: محرك عرض WebGL
• litescene: مكتبة محرك WebGL 3D مع تصنيف على أساس المقطع؛ تستخدم في WebGLStudio
• Two.js: واجهة برمجة تطبيقات للرسم ثنائي الأبعاد بدون عرض للويب
• webgl-working: إطار عمل WebGL المستند إلى TypeScript
• Rhodonite: مكتبة Web3D في TypeScript
• Shree: خفيفة الوزن Three.js
• Ashes: محرك ثلاثي الأبعاد WebGL2.0 و ECS و RayTracing
• Zogra: عارض WebGL2 بسيط

مربعات أدوات WebGL والأطر المصغرة

في هذا القسم من المقال، توجد قائمة بمربعات أدوات WebGL والأطر المصغرة:

• regl: webGL وظيفي سريع
• lightgl.js: مكتبة WebGL خفيفة الوزن
• TWGL: مكتبة مساعد WebGL صغيرة
• p5.js: منظور جديد وتفسير جديد في المعالجة؛ ليس مضاهاة أو منفذ.
• Four: واجهة برمجة تطبيقات رسومات عالية المستوى تستند إلى WebGL 1.0
• TDL: مكتبة منخفضة المستوى لتطبيقات WebGL (انظر TWGL)
• KickJS: محرك ألعاب WebGL لمتصفحات الويب الحالية
• nanogl: إطار مصغر لـ WebGL
• Alfrid: مجموعة أدوات WebGL
• Medium: مربع أدوات WebGL متقدم للفن
• PicoGL.js: مكتبة WebGL 2 للعرض فقط
• O-GL: إطار عمل WebGL صغير
• mini-webgl: مكتبة أدوات WebGL المصغرة
• Phenomenon-px: أسرع طريقة لإنشاء Pixel Shader
• zen-3d: مكتبة جافا سكريبت ثلاثية الأبعاد
• GLOW: حزمة WebGL تركز على إنشاء أدوات تظليل واستخدامها بسهولة.
• Helix: محرك جافا سكريبت ثلاثي الأبعاد
• GrimoireJS: إطار عمل WebGL لتطوير الويب
• litegl.js: مكتبة WebGL JavaScript خفيفة الوزن للتعامل مع السياق والشبكات والقوام والتظليل
• CraZyPG: مكتبة WebGL 2 منخفضة المستوى
• GLBoost: مكتبة WebGL مفيدة وعملية للتحول الصغير
• RedCube.js: مكتبة عرض WebGL 2
• RedGL2: مكتبة جافا سكريبت ثلاثية الأبعاد
• gi-voxels: تتبع مخروط فوكسل باستخدام WebGL
• artgl: إطار عمل مكتوب ثلاثي الأبعاد؛ البنية التحتية لتطبيق الويب ثلاثي الأبعاد
• Squareroot.js: محرك ثنائي الأبعاد / ثلاثي الأبعاد لعرض وتحريك WebGL و Canvas
• gl3: مكتبة مساعد WebGL
• wwg: برنامج تضمين WebGL بسيط
• dan-shari-gl: إطار عمل WebGL موجز تم تطويره باستخدام TypeScript

على هذا النحو، تم تقديم وإدراج العديد من مكتبات وأطر WebGL.

على الرغم من أنه كما ذكرنا، فإن بعضها لم يعد يستخدم كثيرًا. في الواقع، يمكن القول أن WebGL هي تقنية قديمة نسبيًا. في هذه الأيام، هناك حديث عن تقنية أحدث تسمى WebGPU. في المقالات التالية من منصة كرسي، تتم مناقشة WebGPU وأسباب الوفاة الوشيك لـ WebGL.