مقدمة
يُقدم Three.js الكثير، وقد يُسبب بعض الالتباس في علاقته بمجالات ثلاثية الأبعاد الأخرى. كما أن نطاقه في تطور مستمر، لذا ليس من السهل تلخيصه، وهذه الملاحظات ذاتية.
مكتبة JavaScript ثلاثية الأبعاد
يهدف هذا المشروع إلى إنشاء مكتبة ثلاثية الأبعاد خفيفة الوزن وسهلة الاستخدام. توفر هذه المكتبة عروضًا تقديمية ، ، CSS3D و WebGL.
هذا هو الوصف الرسمي من مستودع جيثب. في الواقع، يُلخص الأمر بشكل جيد، لكن كل موضوع في هذه الجملة يُمثل موضوعًا واسعًا بحد ذاته، وهذا ليس كل ما يُقدمه ملف three.js.
المكتبة نفسها مكتوبة بلغة جافا سكريبت، وهي مصممة للاستخدام في بيئة جافا سكريبت. في معظم الحالات، يعني هذا أنها تعمل على جانب العميل - في متصفح ويب على جهاز ما. ولكن مع node.js والمتصفحات بدون رأس، يمكن استخدامها أيضًا على جانب الخادم. أول ما يتبادر إلى الذهن هو التصيير - ربما بعض صور المعاينة على الخادم، ولكن قد يكون مجرد حسابات ثلاثية الأبعاد، حيث تحتوي three.js على مكتبة رياضية غنية. هذا مصطلح واسع للغاية. قد يعني مصطلح "ثلاثي الأبعاد" الكثير. في معظم الحالات، نفكر في "الرسومات".
معظم مشاريع three.js التي نراها تتضمن رسومات ثلاثية الأبعاد فورية، حيث ينتج عن تفاعل المستخدم ردود فعل بصرية فورية. أما الأنواع الأخرى من الرسومات ثلاثية الأبعاد فهي إما تأثيرات متنوعة أو شخصيات اصطناعية في الأفلام، أو "صور" متنوعة قد تراها في المطبوعات أو في كتالوجات الويب (على سبيل المثال، موقع إيكيا الإلكتروني مليء بالرسومات ثلاثية الأبعاد، حيث أن جميع صور منتجاتها مُولّدة حاسوبيًا).
الرياضيات ثلاثية الأبعاد جزءٌ من كل هذا. لا يمكن إنشاء رسومات ثلاثية الأبعاد بدون الرياضيات، ولغات الحاسوب لا تفهم مفاهيمها افتراضيًا. وهنا يأتي دور المكتبة، التي تُلخّص هذه العمليات الحسابية، وربما تُحسّنها، وتُقدّم واجهةً عالية المستوى مثل Matrix4 أو .dot().
يأتي Three.js مع مكتبة رياضيات خاصة به، تتضمن فئات مخصصة للرياضيات ثلاثية الأبعاد. هناك مكتبات مستقلة تُعنى بهذه الرياضيات فقط، ولكن مع Three، تُعتبر هذه الرياضيات جزءًا من نظام أكبر بكثير.
يُعدّ العرض من مسؤوليات المكتبة الرئيسية، ولكن هنا أيضًا تتعقد الأمور قليلًا. يتميز WebGL بدقته العالية وتميزه عن غيره.
مع Canvas وSVG وCSS، تكون مسؤولية العرض ثلاثية الأبعاد بالكامل. تحتوي هذه الواجهات البرمجية على العديد من المكتبات لرسم عناصر غير ثلاثية الأبعاد، أو تقوم بذلك افتراضيًا (CSS يرسم مستطيلات ثنائية الأبعاد، Canvas يرسم أشكالًا ثنائية الأبعاد متنوعة)، لكنها تتطلب دقةً وحساباتٍ ثلاثية الأبعاد لتنفيذ العرض ثلاثي الأبعاد.
تكمن اللمسة السحرية غالبًا في تجريد الواجهة. على سبيل المثال، إدارة الحالة ثلاثية الأبعاد لعنصر ما. <div> التحويل إلى ثلاثي الأبعاد عبر CSS صعب للغاية. يتطلب الأمر الكثير من المنطق لجعل واجهة برمجة تطبيقات Canvas ترسم شيئًا يبدو ثلاثي الأبعاد. أما WebGL، فهو أكثر تعقيدًا.
يقوم Three بتلخيص كل هذه واجهات برمجة التطبيقات في شيء بسيط مثل render() ، ولكن للقيام بذلك يتطلب تمثيلًا عامًا لما هو "العالم ثلاثي الأبعاد".
مخطط المشهد
يمكن تحديد منطقة في three.js تُمثل هذا التجريد العام لـ"العالم ثلاثي الأبعاد". رسم المشهد هو بنية بيانات تُستخدم لوصف كيفية ارتباط الكائنات في مشهد (عالم) ثلاثي الأبعاد ببعضها البعض. ليس بالضرورة أن يكون ثلاثي الأبعاد، فهذه طريقة مناسبة لوصف أي تسلسل هرمي للرسومات المتجهة. وبشكل أكثر تحديدًا، هو "شجرة" متفرعة من "عقد" ذات "عقدة جذر". في three.js، الفئة الأساسية لهذه البنية هي Object3D.
هذا هو نفس شجرة DOM تقريبًا. THREE.Scene مشابه <body> سيكون، وكل شيء آخر فرع. في نموذج DOM، يمكننا وضع الأشياء في أماكنها، لكن ذلك محدود نسبيًا. عادةً ما يحدث الدوران حول محور، ونحرك الأشياء يسارًا/يمينًا أو أعلى/أسفل. في رسم مشهد ثلاثي الأبعاد، تكون درجات الحرية أكبر.
المشهد الثالث أشبه بنموذج DOM افتراضي. نُجري عملياتنا ونُعيّن الحالة على تلك الشجرة، وعندما نريد الحصول على لقطة مرئية لتلك الحالة (مثلاً في حلقة مستمرة، أو تفاعل مستخدم/تغيير في الحالة)، نُجري عملية عرض (مشهد). عند حدوث أي تغيير، لا يُنصح بتحديث شجرة DOM بأكملها، بينما مع العنصر ، يتعين علينا مسح العرض بأكمله، ثم إعادة رسم كل شيء، حتى لو تغير موضع عنصر واحد فقط.
واحد <div> في واحد <div> على غرار علاقة الوالد-الطفل THREE.Mesh('sun')->THREE.Mesh('earth'). يمكن لقاعدة CSS أن تكون مشابهة لـ THREE.Material حيث يُحدث وصف مثل color:'red' تأثيرًا سحريًا ويتحول لون شيء ما إلى اللون الأحمر. وأخيرًا، يمكن أن يكون استدعاء threeRenderer.render(scene) مشابهًا لتحميل المتصفح لصفحة HTML باستخدام بعض قواعد CSS.
الشبكة، المشهد، الكاميرا، والضوء جميعها فئات فرعية من هذه الفئة العامة. هذا ما يسمح لك بإضافة () "مربع" إلى "المشهد"، أو "ضوء" إلى "الكاميرا".
يمكن أن يكون الهيكل البسيط مسطحًا جدًا. تُعتبر العقدة الجذرية "عالمًا"، وقد يكون لها "أرض" و"منزل" و"شمس" و"كاميرا" أبناءً لها.
THREE.Scene('world')
|-THREE.Mesh('ground')
|-THREE.Mesh('house')
|-THREE.Light('sun')
|-THREE.Camera('main')هذه معلومات كافية لإدخالها في برنامج العرض للحصول على نتيجة بصرية. في بعض المشاهد، توجد شبكتان تمثلان شيئين مختلفين، الأرض والمنزل على التل. ضوء يُحدد كيفية إضاءتهما (صباحًا أم ظهرًا أم ضوء فلاش)، وجسم (الكاميرا) يُحدد وجهة نظرنا، أي نظرتنا للعالم.
قد تختلف النتائج، على سبيل المثال، يقتصر CSS على عرض خفيف للغاية، بينما يمكن لـ WebGL توفير الظلال والدقة العالية بشكل عام.
من خلال هذه البنية، يُدار العالم ثلاثي الأبعاد. إذا أردنا محاكاة تأثير ضوء النهار على منزل خلال فصول مختلفة، فإننا نغير موضع واتجاه الضوء في العالم برمجيًا. مهمة رسم المشهد هي كشف هذا "الموضع"، ولكن لتحريكه فعليًا، عليك تطبيق منطقك الخاص. إحدى الطرق البسيطة لتحريك مشهد ثلاثي الأبعاد هي استخدام three.js مع مكتبة "tweening".
ربما يكون كل هذا صحيحًا نظريًا فقط، وقد لا تتمكن من تغيير تصييرات المشهد كما يحلو لك. ولكن هذا يعود في الغالب إلى تداخل "المواد" مع رسم المشهد وارتباطها بالتصييرات. على سبيل المثال، لا توجد طريقة لتظليل <div> أو أنه لا يبدو كمعادن، وهو ما يمكن لمادة WebGL وصفه، ولكن يمكن تحويله إلى اللون الأحمر، وهو ما يمكن لجميع المواد فعله.
في الأساس، لا يزال Object3D عامًا، ويتم وصف العلاقة المكانية والتسلسلية للعقد مع بعضها البعض من خلال "رسم بياني للمشهد".
ببساطة، هذا هو متغير المشهد الذي انتهى بك الأمر إليه بعد استدعاء scene.add(my_foo) عدة مرات.
ويب جي إل
يتميز Webgl بتخصصه الشديد، ويُستخدم على الأرجح في حوالي 99% من تطبيقات three.js الحالية. إنه موضوعٌ واسع، لذا قد يكون من المفيد إلقاء نظرة سريعة على البدائل أولًا.
قماش، css، svg
هذه كلها واجهات برمجة تطبيقات. هذه واجهة يمكنك كمبرمج استخدامها لتوجيه المتصفح لرسم عناصر معينة. CSS هي الواجهة الأكثر شيوعًا على الويب، فبدونها، يبدو كل شيء كنص عادي. تاريخيًا، لم يكن لها أي علاقة بالرسومات ثلاثية الأبعاد.
يستخدم Canvas في الواقع عنصر WebGL نفسه للرسم، ولكن بسياق مختلف. يُسمى هذا السياق "ثنائي الأبعاد"، ولكن بما أن ثلاثي الأبعاد مُصطنع، ولأننا نرسم دائمًا سطحًا ثنائي الأبعاد، سواءً كان حقيقيًا أو افتراضيًا، يُمكننا أيضًا استخدام هذا السياق لرسم رسومات ثلاثية الأبعاد.
SVG هي واجهة برمجة تطبيقات غير ثلاثية الأبعاد، تُستخدم عادةً لوصف عناصر مثل الشعارات أو الأيقونات. ولكن، بما أنها تصف عناصر أساسية مثل الخطوط، فيمكن تمثيلها أيضًا في سياق ثلاثي الأبعاد (مثل تراكب على خريطة، أو عناصر واجهة مستخدم أو شاشة عرض معلوماتية مكانية).
من السمات المشتركة هنا أن أيًا من هذه العناصر غير مُصمم للاستخدام ثلاثي الأبعاد. ومن الميزات المهمة الأخرى أنها جميعًا عالية المستوى، إذ كانت مُصممة سابقًا لوظيفة أخرى. على سبيل المثال، جميعها تجيد رسم "دائرة". مع Canvas، يكون هذا شكلًا واضحًا، أما مع CSS، فقد تحتاج إلى استخدام أنصاف أقطار الحدود، ولكن النتيجة النهائية هي وصول مباشر جدًا إلى الدائرة.
تقنية WebGL بسيطة جدًا، ولا تُعرف الكثير عن مفهوم الرسومات ثلاثية الأبعاد. تتطلب هذه التقنية إجراء حسابات رياضية دقيقة، وكثيرة جدًا. تخيل شاشة عالية الدقة وعدد وحدات البكسل فيها. إذا اضطررت إلى إجراء حسابات لكل وحدة بكسل لتحديد مدى تأثير كمية معينة من الضوء على سطحها، وكررت ذلك 60 مرة في الثانية، فسيتضاعف هذا العدد.
معالج الرسوميات
تحتوي معظم أجهزة الكمبيوتر، مثل أجهزة الكمبيوتر المحمولة والمكتبية والهواتف المحمولة، وحتى الساعات، على جهاز قادر على حساب هذه العمليات ثلاثية الأبعاد بكفاءة، مما يسمح بعرض الرسومات التفاعلية. تُسمى هذه الأجهزة وحدة معالجة الرسومات.
وهو يختلف عن المعالج الرئيسي لأنه مصمم لأغراض مختلفة - عمليات رياضية محددة يتم تنفيذها بالتوازي.
تمامًا كما نستخدم JavaScript لبرمجة المتصفح، فإننا نستخدم WebGL لبرمجة بطاقة الرسوميات.
حسنًا، هذا صحيح من حيث المفهوم، لكن عمليًا، هما تقنيتان مختلفتان تمامًا. يتكون WebGL من شفرة JavaScript (التعليمات) ولغة مختلفة تمامًا تُجري الحسابات (GLSL). يمكنك استخلاص بعض أوجه التشابه بين HTML وJavaScript وكيفية عملهما معًا على الصفحة.
ثنائي الأبعاد وثلاثي الأبعاد
ليس فقط تقنية الأبعاد الثلاثية تستفيد من هذا التسريع المادي. معالجة الفيديو خيار جيد أيضًا. يمكنك برمجة بطاقة الرسومات لتغيير الألوان أو تغيير الصورة في بث فيديو مباشر.
WebGL، وهو مستوى منخفض جدًا، عام. لا يعرف شيئًا عن الأبعاد الثنائية أو الثلاثية، ولكنه يعرف شيئًا عن الذاكرة، والمخازن المؤقتة، وطوابير الأوامر، وبرامج التظليل، وما إلى ذلك.
يختلف التعامل مع البرمجة المتوازية عن البرمجة بلغة جافا سكريبت. من المشاكل الشائعة كيفية وصول خيوط مختلفة إلى متغير مشترك.
هذا النموذج المختلف يعني وجود لغة أخرى تُسمى GLSL. إنها لغة تظليل موجودة في جميع واجهات برمجة التطبيقات الرسومية منخفضة المستوى. من خلالها تكتب المنطق الفعلي لهذه الأرقام الكبيرة، والميزة الوحيدة هي عدم الحاجة إلى كتابة شيفرة آلية.
الجزء الآخر من واجهة برمجة تطبيقات WebGL هو روابط JavaScript التي تُوجِّه من خلالها وحدة معالجة الرسومات (GPU) إلى تنفيذ المهام. يقوم المُظلِّل "بإجراء العمليات الحسابية A" بينما يُنفِّذ الرابط "مليون مرة".
يعتمد الأمر على المبرمج لحساب قيمة A. قد يكون ذلك متعلقًا بتقنية ثلاثية الأبعاد، أو قد يكون نواة تُشوّش الفيديو.
عندما تبدأ في تجريد هذه الحسابات والأوامر، ينتهي بك الأمر بـ three.js.
العروض التي تعمل معًا
من الاستخدامات المفيدة جدًا استخدام مجموعة من برامج العرض لرسم عناصر جيدة بتقنية ثلاثية الأبعاد. يستطيع WebGL معالجة الكثير من الأرقام وإنشاء صور واقعية للغاية، ولكنه ضعيف في التعامل مع النصوص وحتى بعض الأسطر. يمكن معالجة طبقة إضافية من النص المُعرض عبر برامج عرض CSS وcanvas، بينما يمكن معالجة المسارات والأسطر المختلفة عبر SVG.
ثلاثة.WebGLRenderer
يتم تجريد كل هذه البيانات البسيطة من خلال فئة WebGLRenderer في three.js. هذا ما يحوّل المكعب إلى مجموعة من الأرقام في ذاكرة وحدة معالجة الرسومات.
من المفارقات أن هذا هو مُقدِّم عرض three.js الوحيد الذي لا يحتاج إلى إنشاء رسومات ثلاثية الأبعاد، ولكنه الخيار الأمثل لذلك. أما البقية، فتُزيِّف الرسومات ثلاثية الأبعاد باستخدام واجهات برمجة تطبيقات ثنائية الأبعاد، بينما يُنشئ WebGL رسومات ثلاثية الأبعاد عمدًا باستخدام واجهة برمجة تطبيقات عامة للحوسبة المتوازية. لكن هذا لا يستبعد إمكانية استخدامه حصريًا لمعالجة بث الفيديو المباشر. فهو يُجرِّد ما يكفي من WebGL ليكون مفيدًا لهذا الغرض، ولكنك على الأرجح تستخدم ثلث المكتبة. يمكنك بناء طبقة واجهة مستخدم فائقة الاستجابة باستخدام WebGL، أو لعبة منصات من نوع Super Mario حيث سيظل three.js أداة رائعة.
استخدامك لثلث المكتبة فقط يعني أن أداة أخرى قد تكون أنسب لهذا الاستخدام، أو يمكنك ببساطة بناء مجموعة فرعية من ملفات three.js. قد يحتاج كلٌّ من مثالَي معالجة الفيديو وSuper Mario فقط إلى PlaneGeometry، وربما نوع مادة.
ثلاثة رياضيات
شيفرة جافا سكريبت تُجري عمليات حسابية مُعينة بتقنية ثلاثية الأبعاد. تحتوي جافا سكريبت على دالة Math.pow() افتراضيًا، لكنها لا تحتوي على دالة Quaternion.inverse(). باستخدام هذه الفئات، يُمكننا كتابة خوارزميات لا تتطلب معالجة - على سبيل المثال، خادم ألعاب يتحقق من هو المُصوّب ومن يُصدر الكثير من الأشعة دون أن يرسم شيئًا.
ثلاثة مشاهد بيانية
مجموعة من الفئات الفرعية لـ Object3D تُشكل بنية بيانات شجرية تصف "عالمًا ثلاثي الأبعاد" وعلاقات الكائنات فيه. هي مجردة من الناحية النظرية، ولكن يمكن تمثيلها بطريقة محددة بمجرد التعمق في الكود.
ثلاثة عروض
الطبقة التي تُحوّل هذا الرسم البياني العام إلى تمثيل مرئي على الشاشة أو في منطقة تخزين مؤقتة (مثلاً، تُنشئه على جانب الخادم). وتستخدم تقنيات متنوعة لتحقيق هذا الهدف.
ثلاثة-WebGLRenderer
مُقدِّم عرض خاص يسمح بتسريع الأجهزة، ويمتلك معرفة واسعة بمفاهيم ثلاثية الأبعاد، ويمكن استخدامه أيضًا للحوسبة ثنائية الأبعاد (وحتى الحوسبة العامة). هذه هي المكونات الأساسية لـ three.js في رأيي. أميل إلى استبدال "ثلاثي الأبعاد" بـ "الرسومات"، ولكن هذا ينطبق فقط على مُقدِّم العرض WebGLR.
Three.js ليس محرك لعبة.
ليس كل من يحتاج إلى رسومات ثلاثية الأبعاد على الإنترنت يصنع ألعابًا. عادةً ما تُجري محركات الألعاب تحسينات كثيرة تتجاوز وصف وعرض العوالم ثلاثية الأبعاد. تختلف احتياجات الألعاب المختلفة، ومن المرجح أن تختلف احتياجات أنظمة الفيزياء والعرض في ألعاب الاستراتيجية في الوقت الفعلي وألعاب التصويب من منظور الشخص الأول اختلافًا كبيرًا. كل هذا يعني المزيد من الأكواد البرمجية، وبالنسبة لمن يرغب فقط في إنشاء نموذج ثلاثي الأبعاد كجزء من كتالوج المنتجات، فهذا ليس ضروريًا فحسب، بل غير مرغوب فيه أيضًا. بالطبع، يمكنك بناء محرك لعبة واستخدام ثلاثة محركات للعرض وبناء وحدات المحرك.
Three.js لا يتم تحميله كثيرًا
بالتأكيد، يحتوي النواة على عدة مُحمِّلات لبعض الأصول، ولكن جميع الصيغ الشائعة مثل gltf أو fbx مستقلة. لا يُهم Threejs كيفية الحصول على أصولك، طالما أنك تُحللها بشكل صحيح وتُنشئ كائنًا ثلاثي الأبعاد. بالنسبة لـ Threejs، لا يوجد فرق بين شبكة من ملف gltf وكرة إجرائية. تستخدم العديد من الأمثلة الإبداعية المكعبات والكرات ولا تُحمِّل أي شيء سوى Three.js نفسه. مُحمِّلات النواة عامة جدًا، حيث تُحمِّل الصور والملفات، وتحتوي على تمثيل مباشر لكائن Threejs مثل مادة أو نسيج. تُبنى مُحمِّلات خاصة بالصيغ باستخدام هذه العناصر الأساسية.
