WebGL

WebGL (Web Graphics Library) هي واجهة JavaScript تُمكّن المتصفّحات من عرض رسومات تفاعلية ثنائية وثلاثية الأبعاد باستخدام وحدة GPU في الجهاز، دون الحاجة إلى أي إضافات أو امتدادات. مبنيّة فوق OpenGL ES 2.0، توفّر WebGL وصولاً منخفض المستوى إلى العرض المُسرَّع بالعتاد مباشرةً داخل عنصر canvas في المتصفّح. تدعم جميع المتصفّحات الرئيسية — Chrome وFirefox وSafari وEdge — تقنية WebGL على منصّات سطح المكتب والهواتف المحمولة. تتولّى الواجهة تجميع المُظلِّلات وتعيين المواد وحسابات الإضاءة وتحويلات الهندسة، مما يمنح المطوّرين تحكّماً دقيقاً في المرئيات المدعومة بـ GPU على الويب.

في النشر الرقمي، تُعدّ WebGL التقنية التي تجعل التأثيرات البصرية ثلاثية الأبعاد الواقعية ممكنة داخل نافذة المتصفّح. بدونها، فإن تأثيرات تقليب الصفحات المتحرّكة، والانتقالات السلسة في التكبير، وعرض الظلال في الزمن الحقيقي، وغيرها من التفاعلات المُسرَّعة بـ GPU، ستتطلّب تطبيقات أصلية لسطح المكتب أو الهاتف، أو إضافات متصفّح قديمة مثل Flash. تتيح WebGL للناشرين تقديم تجارب قراءة تفاعلية غنية بصرياً عبر رابط URL بسيط — دون تنزيلات أو عمليات تثبيت أو احتكاك مع متجر التطبيقات. يحصل القرّاء على تجربة متميّزة على أي جهاز، ويتجنّب الناشرون تكلفة وتعقيد صيانة تطبيقات خاصّة بكل منصّة.

يستخدم FlipLink مكتبة Three.js، وهي مكتبة ثلاثية الأبعاد شائعة مبنيّة فوق WebGL، لتشغيل [حركات تقليب الصفحات](/glossary/page-flip-animation). عندما يقلّب القارئ صفحة، تعرض WebGL انحناء الصفحة وتشوّه الورق وإسقاط الظلال وتأثيرات الإضاءة في الزمن الحقيقي على وحدة GPU. وينتج عن ذلك [محاكاة كتاب واقعي](/glossary/realistic-book-simulation) يعمل بسلاسة بمعدّل ٦٠ إطاراً في الثانية على معظم الأجهزة. كما يتضمّن FlipLink عرضاً احتياطياً تلقائياً للأجهزة الأقدم التي لا تتوفّر فيها WebGL أو تعاني من ذاكرة GPU محدودة، لضمان وصول كل قارئ إلى المحتوى. تتيح [إعدادات تجربة الصفحة](/features/page-experience-and-layout) للناشرين الاختيار بين تأثير التقليب الكامل ثلاثي الأبعاد والانتقالات الأبسط المبنية على CSS وفقاً لجمهورهم وحالة الاستخدام.

تعمل WebGL عبر خط أنابيب عرض يُشغَّل على وحدة GPU. يكتب المطوّرون مُظلِّلات الرؤوس ومُظلِّلات الأجزاء بلغة GLSL (OpenGL Shading Language)، التي يُجمّعها المتصفّح ويُنفّذها على عتاد الرسومات. يحدّد مُظلِّل الرؤوس مواقع الهندسة في الفضاء ثلاثي الأبعاد، بينما يحدّد مُظلِّل الأجزاء لون كل بكسل بناءً على المواد والإضاءة وخصائص الخامات. تشمل المفاهيم التقنية الرئيسية ما يلي: - **حلقة العرض**: دورة رسوم متحرّكة متواصلة (عادةً باستخدام `requestAnimationFrame`) تُعيد رسم المشهد في كل إطار - **برامج المُظلِّلات**: برامج GPU صغيرة تتحكّم في كيفية تموضع الرؤوس وكيفية تلوين البكسلات - **تعيين المواد**: تطبيق صور ثنائية الأبعاد (مثل عروض صفحات PDF) على أسطح ثلاثية الأبعاد - **مخزن العمق**: تحديد أي الكائنات تظهر أمام غيرها في الفضاء ثلاثي الأبعاد - **مكافحة التسنّن**: تنعيم الحوافّ المتعرّجة في الهندسة المعروضة للحصول على مرئيات أنظف تُضيف WebGL 2.0، المبنيّة على OpenGL ES 3.0، ميزات مثل المواد ثلاثية الأبعاد والتغذية الراجعة للتحويلات وأهداف العرض المتعدّدة. تدعم معظم المتصفّحات الحديثة الآن WebGL 2.0، وتُجرّد مكتبات مثل Three.js الكثير من التعقيد منخفض المستوى، مما يتيح للمطوّرين التركيز على تركيب المشهد بدلاً من كتابة أكواد المُظلِّلات.

تعرض كلتا التقنيتين، WebGL وواجهة HTML5 Canvas 2D، الرسومات في المتصفّح، لكنّهما تخدمان أغراضاً مختلفة: | الجانب | WebGL | Canvas 2D | |---|---|---| | **العرض** | ثلاثي وثنائي الأبعاد مُسرَّع بـ GPU | ثنائي الأبعاد فقط مُعتمد على CPU | | **الأداء** | يتعامل مع مشاهد معقّدة تضمّ آلاف العناصر بمعدّل ٦٠ إطاراً في الثانية | يتباطأ مع كثرة استدعاءات الرسم أو الأسطح الكبيرة | | **دعم ثلاثي الأبعاد** | ثلاثي أبعاد كامل مع مُظلِّلات وإضاءة ومنظور | لا يوجد ثلاثي أبعاد أصلي — كل شيء مسطّح | | **منحنى التعلّم** | حادّ — يتطلّب فهم المُظلِّلات وخط أنابيب GPU | لطيف — أوامر رسم بسيطة | | **حالة الاستخدام** | كتب تفاعلية ثلاثية الأبعاد، ألعاب، تصوّر بيانات، محاكاة | مخطّطات، رسوم متحرّكة بسيطة، تحرير صور | في نشر الكتب التفاعلية، يمكن لـ Canvas 2D التعامل مع انتقالات الانزلاق الأساسية للصفحات، لكنّه لا يستطيع إنتاج تأثيرات انحناء الصفحات والظلال الواقعية التي يربطها القرّاء بالكتب المادّية. تجعل WebGL هذا المستوى من الدقّة البصرية ممكناً داخل صفحة ويب قياسية.

WebGL هي تقنية المتصفّح التي تُحوّل صفحات PDF المسطّحة إلى تجربة قراءة تفاعلية ثلاثية الأبعاد — دون إضافات، ودون تنزيلات، ودون أي تنازل عن الجودة البصرية.