Three.js تفتح باباً لواجهات HTML حية داخل المشاهد ثلاثية الأبعاد
سلّط أول مؤتمر لـ Three.js في باريس الضوء على HTML in Canvas، وهي تجربة في Chrome تتيح وضع عناصر HTML حقيقية وتفاعلية على أسطح ثلاثية الأبعاد داخل Canvas. كما أبرز المؤتمر اعتماد WebGPU افتراضياً في Three.js وإضافات r186 مثل دعم Gaussian splats وSunLight، ما يوسّع خيارات المصممين والمطورين لبناء تجارب ثلاثية الأبعاد أكثر تفاعلاً.
أبرز النقاط
- HTML in Canvas تتيح عرض عناصر HTML حقيقية وتفاعلية على أسطح ثلاثية الأبعاد داخل Canvas في Chrome.
- العناصر المعروضة بهذه الطريقة تحتفظ بخصائص مثل تحديد النص والنسخ والترجمة والتكبير والملء التلقائي ودعم قارئات الشاشة.
- التقنية ما تزال تجربة Origin Trial في Chrome، وقد تتغير API الخاصة بها، بينما دعم Safari غير محسوم.
- أصبحت WebGPU المسار الافتراضي في Three.js مع رجوع تلقائي إلى WebGL عند الحاجة.
- الإصدار r186 يضيف دعماً مدمجاً لـ Gaussian splats وSunLight، فيما تسهّل TSL كتابة مؤثرات الرسوميات عبر JavaScript.
شهدت باريس يومي 10 و11 سبتمبر أول مؤتمر مخصص لمكتبة Three.js، وهي مكتبة JavaScript مفتوحة المصدر تستخدم لإنشاء الرسومات والمشاهد ثلاثية الأبعاد داخل المتصفح. لكن أبرز ما ظهر على المسرح لم يكن نموذجاً ثلاثي الأبعاد معقداً، بل زر HTML عادي يعمل فعلياً فوق سطح ثلاثي الأبعاد.
الفكرة تسمى HTML in Canvas، وهي تجربة متاحة حالياً في Chrome. لفهم أهميتها، يكفي التمييز بين عالمين في صفحات الويب:
- عناصر الصفحة التقليدية، أو DOM، حيث يبقى النص قابلاً للتحديد والترجمة والبحث، وتعمل الأزرار وحقول النماذج مع لوحة المفاتيح وقارئات الشاشة.
- مساحة Canvas، التي تُستخدم عادة للرسومات ثلاثية الأبعاد والمؤثرات البصرية، لكن محتواها يُعامل غالباً كصورة: جميل بصرياً، لكنه لا يحمل خصائص الواجهة الحية نفسها.
HTML حقيقي داخل المشهد
تسمح HTML in Canvas للمتصفح برسم عناصر HTML حية داخل Canvas، ثم وضعها على سطح ثلاثي الأبعاد أو تمريرها عبر مؤثر بصري. أي أن شاشة حاسوب محمول في واجهة موقع ما يمكن أن تعرض نموذج تسجيل حقيقياً، لا صورة ثابتة أو فيديو لمحاكاة النموذج.
وتبقى العناصر، وفق ما عرضته فرق Chrome، قابلة للتفاعل: يمكن تحديد النص ونسخه، واستخدام البحث داخل الصفحة والترجمة والتكبير، والاستفادة من الملء التلقائي والوضع الداكن وقارئات الشاشة وأدوات المطورين.
عملياً، قد يغيّر ذلك طريقة تصميم واجهات المنتجات في صفحات التسويق. بدلاً من إدراج لقطة شاشة لتطبيق داخل مجسم هاتف أو حاسوب، يمكن إظهار واجهة المنتج ذاتها داخل المجسم. وهذا يقلل أيضاً خطر اختلاف نسخة العرض التسويقي عن التطبيق الفعلي عند تحديث النصوص أو حالات الواجهة.
كما يفتح الباب أمام مؤثرات مثل الانعكاس أو التشويه الزجاجي أو انتقالات الصفحات على نصوص وعناصر تظل حقيقية في بنية الصفحة، بدلاً من تحويل العنوان إلى صورة وفقدان قابلية البحث وإمكانية الوصول.
لكن التقنية ليست معياراً مستقراً بعد. فهي تعمل كتجربة Origin Trial في Chrome، ما يعني أن المواقع يمكنها اختبارها مع مستخدمي Chrome بينما ما تزال الواجهة البرمجية قيد التطوير. وأُشير إلى احتمال تغييرات غير متوافقة في API خلال التجربة. موقف Mozilla المسجل هو عدم الاعتراض، فيما يبقى دعم Safari غير واضح.
WebGPU يصبح المسار الافتراضي
أبرز المؤتمر أيضاً انتقال Three.js نحو WebGPU بوصفه المسار الافتراضي للرسم، مع الرجوع تلقائياً إلى WebGL عند الحاجة. WebGPU هو واجهة أحدث تتيح للمتصفح التواصل بكفاءة أكبر مع معالج الرسومات، ما يرفع سقف ما يمكن عرضه في المتصفح.
من الأمثلة المعروضة: مشهد ماء تفاعلي يتكون من نحو مليون جسيم في الزمن الفعلي، وتجربة WebGPU تشمل غابة بحجم يقارب 6 ميغابايت. لا يعني ذلك أن كل مشروع يحتاج إلى هذا الحجم من الرسوميات، لكنه يمنح الفرق مساحة أكبر لإعادة تقييم أفكار كانت تُستبعد سابقاً خوفاً من الأداء، خصوصاً على الهواتف.
TSL: المؤثرات الرسومية أقرب إلى JavaScript
تستخدم الرسوميات ثلاثية الأبعاد عادة ما يعرف بـ shaders، وهي برامج صغيرة تحدد كيفية رسم البكسلات والألوان والانعكاسات والمؤثرات. وكانت كتابتها تتطلب غالباً لغات رسومية متخصصة ومنفصلة عن كود JavaScript المعتاد.
هنا يأتي دور TSL أو Three.js Shading Language. تتيح هذه الطبقة بناء المؤثرات كعناصر قابلة للتركيب باستخدام JavaScript، بدلاً من كتابة shader كنص بلغة منفصلة. الفكرة مهمة للفرق التي تريد إعادة استخدام خامات مثل الزجاج المموه أو الرقائق اللامعة كجزء من نظام التصميم، وضبط خصائصها عبر قيم واضحة بدلاً من البدء من الصفر في كل مشروع.
تصوير ثلاثي الأبعاد بدل نمذجة كاملة
أصدر Three.js الإصدار r186 قبل المؤتمر، وأضاف فيه دعماً مدمجاً لتحميل وعرض Gaussian splats. يمكن تبسيطها كطريقة لالتقاط جسم أو مساحة بكاميرا الهاتف وتحويلها إلى سحابة من نقاط ملونة ناعمة تبدو كتصوير ثلاثي الأبعاد عند الحركة حولها.
هذا لا يلغي النماذج ثلاثية الأبعاد التقليدية، لكنه يقدم طريقاً مختلفاً لعرض أشياء واقعية مثل قطع الأثاث أو الملابس أو الغرف، من دون أن يبدأ الفريق بالضرورة بنمذجة يدوية كاملة. كما تضمن الإصدار نفسه SunLight، وهو ضوء مخصص للمشاهد الخارجية يحسن التعامل مع تدرج نعومة الظلال بحسب المسافة.
ليست دعوة لإغراق الصفحة بالمؤثرات
رغم أن المؤتمر احتفى بأمثلة تفاعلية لافتة، فإن إحدى الرسائل العملية كانت التحفظ في استخدامها. في نقاش حول ملفات الأعمال، وُجه النقد إلى المحاكاة الثقيلة، والتحميل البطيء، وكثرة المؤثرات، وكتل النص الطويلة. التقنية لا تجعل تجربة المستخدم جيدة تلقائياً؛ فائدتها تظهر عندما تخدم المحتوى أو تشرح المنتج أو تجعل التفاعل أوضح.
الخلاصة أن الحدود بين صفحة الويب التقليدية والمشهد ثلاثي الأبعاد بدأت تضيق. WebGPU يرفع القدرة الرسومية، وTSL يجعل بناء المؤثرات أكثر قرباً من بيئة JavaScript، أما HTML in Canvas فيعالج المشكلة الأصعب: كيف يمكن أن يكون العنصر ثلاثي الأبعاد جميلاً وقابلاً للاستخدام في الوقت نفسه. والاختبار الحقيقي سيكون في نضج هذه الإمكانية عبر المتصفحات، ولا سيما Safari.
لماذا يهم؟
لطالما كان على فرق الويب الاختيار بين واجهات حية يمكن الوصول إليها وفهرستها، أو مشاهد Canvas جذابة لكنها أشبه بصورة. HTML in Canvas قد تقلص هذه الفجوة، لكن استخدامها العملي يتطلب حالياً مراعاة دعم المتصفحات وتوفير بدائل مناسبة خارج Chrome.