نعمل على مستوى معالج الرسوميات نفسه
تقنية WebGL، وخليفتها WebGPU، هما الواجهتان اللتان يخاطب بهما المتصفح بطاقة الرسوميات. والعمل على هذا المستوى يعني أن تكتب برامج التظليل، وتدير المخازن المؤقتة للبيانات، وتصمم مسار العرض بنفسك. ونعتمد عليهما في تطبيقات ثلاثية الأبعاد تعمل داخل المتصفح، وفي المحاكاة، وفي تمثيلات مرئية تضم أعداداً هائلة من النقاط، وفي تأثيرات بصرية لا تنتجها أي مادة جاهزة، على أجهزة الكمبيوتر والهواتف ونظارات الواقع الافتراضي.
اختر هذه الخدمة حين يكون أداء العرض أو أسلوب بصري خاص هو جوهر المشروع، ولا تكفي مكتبة مشاهد وحدها للوصول إليه. ومن الحالات المعتادة: بيانات أضخم من أن تحتملها الرسوم البيانية التقليدية، أو محاكاة يجب أن تعمل على معالج الرسوميات، أو تأثير يقوم كله على برنامج تظليل واحد يملأ الشاشة. وحيث تناسب Three.js أو Babylon.js المشروع، نستخدمهما ونضيف إليهما ما ينقص.
تطوير برامج التظليل
برامج تظليل للرؤوس والبكسلات بلغة GLSL أو WGSL، لمواد مخصصة، وأنماط تُولَّد برمجياً، وتأثيرات التشويه والسوائل والإضاءة. نكتبها بوضوح، ويمكن ضبطها من خلال معاملات متاحة للتعديل.
مسارات عرض مخصصة
العرض على عدة مراحل، وأسطح العرض الوسيطة، وأسلوب العرض المؤجَّل أو المباشر، وسلاسل مخصصة للمعالجة اللاحقة، تُصمَّم كلها لاحتياجات تطبيق واحد، لا وفق الإعدادات الافتراضية لمحرك متعدد الأغراض.
تمثيل مرئي للبيانات الضخمة
سحب النقاط، ومخططات الشبكات، والخرائط الحرارية، والطبقات الجغرافية، تُرسم نسخها المتكررة دفعة واحدة، ويُحدَّد ما ينقر عليه المستخدم عبر معالج الرسوميات. فتبقى البيانات الضخمة جداً تفاعلية حيث تتعثر الرسوم البيانية المبنية على SVG أو على لوحة الرسم في المتصفح.
المحاكاة على معالج الرسوميات
أنظمة الجسيمات، والأقمشة، والسوائل، وأنواع أخرى من المحاكاة، تُحسب على بطاقة الرسوميات بتقنية الرسم إلى الخامات أو ببرامج التظليل الحسابية في WebGPU، لأدوات التدريب والأغراض العلمية والمؤثرات البصرية.
تطبيقات ثلاثية الأبعاد في المتصفح
محررات، وأدوات عرض، وأدوات تخطيط، وألعاب، تعمل كما تعمل برامج سطح المكتب: إدارة المشهد، والتراجع عن التعديلات، والحفظ، وتحميل النماذج والخامات تدريجياً، والتكامل مع واجهات مبنية بـReact أو Vue.
قياس الأداء وتحسينه
التقاط الإطارات وتحليل أداء معالج الرسوميات لكشف الرسم المكرر للبكسلات، وكلفة برامج التظليل، والضغط على الذاكرة، ثم تجميع أوامر الرسم، واستبعاد ما لا يظهر، وتدرّج مستوى التفاصيل، وضغط الخامات، حتى يلتزم التطبيق بالميزانية الزمنية للإطار.
ما تتسلمه منا
- شيفرة WebGL أو WebGPU جاهزة للتشغيل الفعلي
- مكتبة موثّقة لبرامج التظليل بشيفرتها المصدرية
- توثيق مسار العرض المخصص
- أدوات تحكم بالمعاملات لضبط المظهر
- جدول بالأجهزة المدعومة، وبدائل لما لا يدعمه بعضها
- تقرير بقياس أداء الإطارات واستهلاك الذاكرة
- اختبارات آلية تكشف أي تغيّر غير مقصود في المظهر
- مستودعات الشيفرة المصدرية كاملة، مع صلاحيات الوصول إليها
طريقة عملنا
- 01
الاستكشاف التقني
نحدد النتيجة البصرية المطلوبة أو حجم البيانات المستهدف، والأجهزة والمتصفحات التي يجب دعمها، والميزانية الزمنية لكل إطار. ثم نختار المستوى الذي نعمل عليه، من WebGL مباشرة إلى مكتبة جاهزة مع برامج تظليل مخصصة.
- 02
إثبات الأسلوب
نبني أصعب مشكلة عرض أولاً في نموذج أولي مستقل، ببيانات أو نماذج حقيقية. فإن عجز الأسلوب عن بلوغ الميزانية على الأجهزة المستهدفة، عرفنا ذلك في هذه المرحلة وغيّرنا الاتجاه.
- 03
بناء التطبيق
نطوّر محرك العرض وبرامج التظليل وطبقة التفاعل جنباً إلى جنب مع الواجهة المحيطة بها، ونتيح أدوات ضبط يغيّر بها المصممون والمعنيون بالمشروع المظهر في المتصفح أثناء جلسات المراجعة.
- 04
التحصين
نختبر على تعريفات رسوميات ومتصفحات وفئات أجهزة مختلفة، ونعالج فقدان سياق الرسم والميزات غير المدعومة، ونلتقط الإطارات لنزيل كل هدر، ثم نوثّق مسار العرض للمهندسين الذين سيتولّونه.
التقنيات التي نستخدمها
| المجال | التقنيات |
|---|---|
| واجهات الرسوميات | WebGL 2، WebGPU، GLSL، WGSL |
| المكتبات | Three.js، Babylon.js، PixiJS، regl، deck.gl |
| أدوات التطوير | Spector.js، Chrome DevTools، lil-gui، Vite، TypeScript |
| الأصول ثلاثية الأبعاد | glTF، KTX2، Basis Universal، meshoptimizer، Blender |
مكتبات 3D المعتادة لا تكفي لما تريد بناءه
جرّبت مكتبة للرسوم البيانية أو إعداداً ثلاثي الأبعاد جاهزاً، ثم وصلت إلى طريق مسدود: البيانات أضخم مما تحتمله، أو التأثير الذي تريده غير متاح كمادة جاهزة، أو معدل الإطارات ينهار. ما تحتاج إليه مهندسون يعملون على مستوى برامج التظليل ومسار العرض.
- أدوات عرض سحب النقاط الضخمة
- التمثيل المرئي للشبكات والعلاقات
- المحاكاة العلمية ومحاكاة التدريب
- محررات ثلاثية الأبعاد تعمل في المتصفح
- تأثيرات بصرية تقوم على برامج التظليل
- ألعاب الويب ونسخ تجريبية يمكن لعبها
أسئلة شائعة
هل أصبحت WebGPU جاهزة للتشغيل الفعلي، أم نبقى على WebGL؟
يتوقف ذلك على جمهورك وعلى ما تحتاجه من معالج الرسوميات. تعمل WebGL 2 على كل الأجهزة تقريباً، وتبقى الخيار الآمن افتراضياً. أما WebGPU فتقدّم برامج تظليل حسابية ومسار عرض أحدث، لكن دعم المتصفحات والأجهزة لها ما زال متفاوتاً. لذلك نبني معظم المشاريع على WebGL 2، أو نستهدف WebGPU مع بديل يعمل بـWebGL حين تبرر الحسابات أو تقنيات العرض المتقدمة الجهد الإضافي.
ما الفرق بين هذه الخدمة وخدمة تطوير Three.js لديكم؟
في خدمة Three.js نبني المشاهد من النماذج والمواد والإضاءة، بمكتبة تتولى العرض عنك. أما هذه الخدمة فللأعمال التي يكون العرض نفسه هو التحدي فيها، مثل مسارات العرض المخصصة، والتأثيرات التي تعتمد كثيراً على برامج التظليل، والمحاكاة على معالج الرسوميات، والتمثيلات المرئية التي تتجاوز ما يحسنه هيكل المشهد. والخدمتان متداخلتان، فكثيراً ما نكتب شيفرة WebGL مخصصة داخل مشروع Three.js، وتحديد النطاق يبيّن لنا أيهما تحتاج.
هل تستطيع WebGL عرض بياناتنا حين تكون مكتبات الرسوم البيانية بطيئة جداً؟
في الغالب نعم. تتباطأ الرسوم البيانية المبنية على SVG أو على لوحة الرسم في المتصفح لأن كل عنصر فيها يستهلك وقتاً من المعالج. أما مع WebGL فتُرفع البيانات إلى بطاقة الرسوميات وتُرسم على دفعات، فتبقى مجموعات بيانات أكبر بكثير قابلة للتفاعل. ونتولى كذلك ما يجعلها صالحة للاستخدام، مثل تحديد العناصر بالنقر، والتصفية، وتدرّج مستوى التفاصيل، والتسميات، والتحديثات المتدفقة. ونختبر ذلك مبكراً على بياناتك الحقيقية لنتأكد منه.
ما المتصفحات والأجهزة التي يدعمها تطبيق WebGL؟
نتفق عند تحديد النطاق على جدول للدعم يغطي المتصفحات وأنظمة التشغيل وفئات الأجهزة، ثم نختبر وفقه على أجهزة حقيقية. ولأن تعريفات الرسوميات تختلف من جهاز إلى آخر، نتجنب الامتدادات غير المستقرة، ونفحص قدرات الجهاز عند التشغيل، ونقلّص الميزات بهدوء بدل أن يتعطل التطبيق. كما يستعيد التطبيق عمله إذا فقد سياق الرسم، وهو ما تفعله متصفحات الهواتف حين تضيق الذاكرة. أما الأجهزة خارج الجدول فتظهر لها رسالة واضحة أو نسخة مبسطة.
كيف تختبرون شيفرة رسوميات يصعب إخضاعها لاختبارات الوحدات؟
نفصل ما يمكن اختباره بالطرق المعتادة عمّا لا يمكن. فالحسابات الرياضية وتحويلات البيانات ومنطق الحالة تخضع لاختبارات وحدات عادية. أما العرض فتغطيه اختبارات لمقارنة الصور، ترسم مشاهد مرجعية وتنبّه إلى أي اختلاف في البكسلات، إلى جانب فحوص آلية لزمن الإطار على مشاهد ثابتة تكشف أي تراجع في الأداء. ونُبقي برامج التظليل صغيرة وقابلة للضبط بالمعاملات، ونراجع كل تغيير بصري على أجهزة حقيقية.