Skia: الجوهر والهندسة والدور في محرك Flutter الرسومي

ما هي Skia؟

Skia هي مكتبة رسومية ثنائية الأبعاد متعددة المنصات طورتها Google ومتاحة تحت ترخيص BSD. توفر واجهة برمجة تطبيقات موحدة لرسم الأشكال الهندسية والنصوص والصور والظلال، مع تجريد الخلفية الرسومية الأساسية. Skia مكتوبة بلغة C++ ومحسّنة للعمل على مجموعة واسعة من الأجهزة — من الهواتف المحمولة إلى الخوادم.

بدأ تاريخ Skia في عام 2005 كمكتبة مملوكة لشركة Skia Inc. في عام 2007 استحوذت عليها Google وفتحت مصدرها وبدأت في استخدامها في منتجاتها. اليوم، Skia هي محرك الرسوم الرئيسي لـ Google Chrome (بما في ذلك Chrome OS) وAndroid (بدءاً من الإصدار 4.0) وبالطبع Flutter. تتم صيانة المكتبة من قبل فريق Google ويتم تحسينها باستمرار: إضافة خلفيات جديدة وتحسينات أداء ودعم لواجهات برمجة تطبيقات رسومية حديثة.

الميزة الرئيسية لـ Skia هي أنها ليست مجرد مجموعة وظائف لرسم البدائيات. إنها خط أنابيب رسومي كامل يتضمن تنقيط المنحنيات (المسارات) ومكافحة التعرج وتراكب الأقنعة ومعالجة الشفافية وتصحيح الألوان. تدعم Skia تنسيقات الصور PNG وJPEG وWebP وGIF، ويمكنها عرض النصوص عبر محرك HarfBuzz لتشكيل الحروف الرسومية.

Skia مقابل مكتبات الرسوم الأخرى

على عكس Cairo (المستخدمة في GTK) أو Quartz 2D (المستخدمة في macOS)، صُممت Skia أصلاً للعمل على منصات متعددة بواجهات برمجة رسومية مختلفة. يمنحها هذا ميزة في الأطر متعددة المنصات مثل Flutter. Cairo موجه نحو العرض البرمجي، بينما دعمت Skia تسريع GPU منذ البداية، وهو أمر بالغ الأهمية لرسوم متحركة للواجهة.

هندسة Skia

تم بناء هندسة Skia كخط أنابيب متعدد الطبقات، حيث تكون كل طبقة مسؤولة عن مرحلة محددة لتحويل أوامر الرسوم إلى بكسلات. يسمح هذا الهيكل بإعادة استخدام الطبقات العليا بغض النظر عن واجهة برمجة الرسوم الأساسية.

الطبقة العليا — Canvas API — توفر للمطور تجريداً للرسم. تستقبل الطرق drawRect وdrawCircle وdrawPath وdrawText معايير هندسية وأنماطاً (لون، شفافية، تحويلات). يقوم Canvas بتحويل هذه الأوامر إلى سلسلة من العمليات التي تُمرر إلى Skia Pipeline — رسم بياني داخلي للأوامر يُحسَّن قبل التنفيذ.

الطبقة الوسطى — Surface وDevice — تدير المخزن المؤقت الهدف الذي يحدث فيه العرض. يتم إنشاء Surface بالحجم وفضاء الألوان ونوع الخلفية المحددين. ينفذ Device خلفية عرض محددة: منقيط CPU (Raster) أو OpenGL (GL) أو Vulkan (Vk) أو Metal (Mt). يحتوي Device على تطبيقات محسّنة لكل عملية رسم لخلفية محددة.

الطبقة السفلية — Ganesha (خلفية GPU) — تنفذ العرض المسرّع عتادياً. تستخدم Ganesha GPU لتنقيط المسارات وتعبئة التدرجات وتراكب التأثيرات. تجمع الأوامر في دفعات وتقلل من تبديل حالة GPU. كل واجهة برمجة رسومية لها تطبيق Ganesha الخاص بها: Skia GL لـ OpenGL وSkia Vulkan لـ Vulkan وSkia Metal لـ Metal.

التمثيل الوسيط — SkSL

تستخدم Skia لغة التظليل الخاصة بها SkSL (Skia Shading Language) لوصف التأثيرات. يتم تجميع كود SkSL إلى SPIR-V (تمثيل وسيط)، ثم يُترجم إلى تنسيق تظليل خاص بالخلفية (GLSL, HLSL, MSL). يوفر هذا طريقة موحدة لوصف التأثيرات الرسومية بغض النظر عن المنصة.

كيف تعمل Skia في Flutter

يستخدم Flutter Skia كمحرك العرض الأساسي على جميع المنصات: Android وiOS والويب وWindows وmacOS وLinux. عندما يعرض تطبيق Flutter إطاراً، تُحول الأدوات إلى شجرة RenderObject، والتي تُمرر بعد ذلك إلى طبقة Engine (بلغة C++)، ويستخدم Engine Skia للعرض النهائي.

تتضمن عملية عرض الإطار عدة مراحل. أولاً، ينشئ Flutter Engine قائمة عمليات (Display List) — سلسلة من استدعاءات Canvas API تصف ما وكيفية الرسم. ثم تُمرر هذه القائمة إلى Skia، التي تقسم العمليات إلى أقسام (مناطق شاشة)، وتفرزها حسب العمق وتمررها إلى خلفية العرض المناسبة. يتم تفعيل تسريع GPU تلقائياً إذا اكتشفت Skia واجهة برمجة رسومية متاحة.

واحدة من المزايا الرئيسية لـ Skia في Flutter هي Flutter Impeller Preview — إمكانية معاينة التظليلات مسبقاً. تجمّع Skia التظليلات في لحظة الاستخدام الأول، مما قد يسبب تأخيرات (shader jank). لحل هذه المشكلة، ينتقل Flutter إلى Impeller — محرك عرض جديد، لكن Skia تظل الخيار الرئيسي للإصدارات المستقرة من Flutter.

Layer Tree وPaint

يستخدم Flutter مفهوم Layer Tree — شجرة من الطبقات، تمثل كل منها جزءاً من واجهة المستخدم. تتلقى Skia أوامر الرسم لكل طبقة وتحدد ما إذا كان يمكن دمج طبقات متعددة في مسار عرض واحد. يعد تجميع الطبقات مهمة معقدة، حيث يجب لكل بكسل مراعاة الشفافية وأوضاع المزج (blend modes)، التي تنفذها Skia عبر تظليلات GPU.

عرض النصوص عبر Skia

تعرض Skia النصوص من خلال التكامل مع مكتبتي HarfBuzz (التشكيل) وICU (يونيكود). في Flutter، ينشئ كل عنصر واجهة نصي كائن Paragraph الذي يحول النص إلى سلسلة من أوامر Skia لرسم الحروف الرسومية. تدعم Skia التنعيم دون البكسل (subpixel anti-aliasing) وتلميح الخطوط والعمل مع الرموز التعبيرية عبر مكتبة SkUnicode.

أداء Skia

أداء Skia هو نتيجة سنوات من التحسين والجمع بين عدة تقنيات: تجميع الأوامر، وتخزين القوام مؤقتاً، وتقليل تبديل سياق GPU. هذا أمر بالغ الأهمية لـ Flutter، حيث يجب عرض كل إطار في 16 مللي ثانية (60 إطاراً في الثانية) أو 8 مللي ثانية (120 إطاراً في الثانية).

وفقاً لمعايير فريق Flutter، فإن استخدام Skia مع تسريع GPU على الأجهزة متوسطة الفئة (Qualcomm Snapdragon 700 series) يوفر 60 إطاراً في الثانية مستقرة عند عرض واجهات معقدة تحتوي على أكثر من 30 أداة على الشاشة. مع العرض البرمجي (CPU)، ينخفض الأداء بنسبة 40–60%، لكنه يظل مقبولاً للشاشات البسيطة.

Shader Jank — المشكلة الرئيسية لـ Skia

المشكلة الرئيسية في أداء Skia ضمن Flutter هي shader jank (تأخير التظليلات). عندما يظهر على الشاشة عنصر مرئي جديد بمزيج غير معروف سابقاً من التأثيرات، تقوم Skia بتجميع تظليل جديد أثناء التشغيل. قد يستغرق التجميع 50–200 مللي ثانية، يتخللها تخطي الإطارات. هذا ملحوظ بشكل خاص عند التمرير في قوائم طويلة ذات زخارف مخصصة. تحل Google هذه المشكلة في Impeller، محرك العرض الجديد الذي يجمّع التظليلات مسبقاً.

Skia عبر المنصات

تدعم Skia مجموعة واسعة من المنصات، تستخدم كل منها خلفية العرض الخاصة بها. يتم تحديد اختيار الخلفية أثناء بناء Flutter Engine بناءً على المنصة المستهدفة وواجهات برمجة الرسوم المتاحة.

Android

على Android، تعمل Skia عبر OpenGL ES (على جميع الأجهزة) وVulkan (على أجهزة Android 7.0+ التي تدعم Vulkan). يتم اختيار الخلفية تلقائياً: يُفضل Vulkan لأنه يوفر زمن انتقال أقل للسائق. يستخدم Android أيضاً Skia لعرض واجهة النظام عبر HWUI (Hardware Accelerated UI)، مما يجعل Skia جزءاً من نظام التشغيل، وليس فقط Flutter.

iOS

على iOS، تستخدم Skia Metal — واجهة برمجة الرسوم الخاصة بـ Apple. يوفر Metal وصولاً منخفض المستوى إلى GPU بأقل تكلفة إضافية. قبل ظهور Metal (2014)، استخدمت Skia على iOS OpenGL ES، لكن في الإصدارات الحالية من Flutter، Metal هي خلفية GPU الوحيدة لنظام iOS، مما يوفر تحسناً في الأداء يصل إلى 30% مقارنة بـ OpenGL.

سطح المكتب (Windows, macOS, Linux)

على سطح المكتب، تستخدم Skia OpenGL (macOS, Linux) وDirect3D 12 (Windows). تمت إضافة دعم Direct3D 12 في Flutter 3.13 لنظام Windows ويتيح تحسناً كبيراً في الأداء مقارنة بـ OpenGL على Windows. تدعم Skia أيضاً العرض البرمجي عبر ANGLE (OpenGL فوق Direct3D) على Windows للتوافق مع الإصدارات السابقة من برامج تشغيل الرسوم القديمة.

الويب

في Flutter for Web، تُجمّع Skia إلى WebAssembly (عبر Emscripten) وتَعرض عبر WebGL. في هذا الوضع، تعمل Skia بالكامل في المتصفح دون استخدام كود أصلي. أداء إصدار WebGL من Skia أقل من الخلفيات الأصلية، لكن لمعظم تطبيقات الويب، يتم تحقيق 60 إطاراً في الثانية على المتصفحات الحديثة مع تسريع WebGL العتادي.