الرسومات والعرض في تطوير الجوال: ما هي، كيف تعمل العملية وكيف تعمل
الرسومات والعرض هما جانبان أساسيان لأداء تطبيقات الجوال. وفقًا لدليل Apple OpenGL ES، أكثر من 90% من التشوهات البصرية ناتجة عن عرض غير صحيح. فهم خط أنابيب الرسومات ضروري لكل مطور يعمل مع الرسوم المتحركة وواجهات المستخدم المعقدة.
النقاط الرئيسية
- CPU Rendering — الرسم على المعالج المركزي. بطيء ولكنه مرن. Canvas, Core Graphics (Quartz 2D). GPU Rendering — معالجة متوازية على معالج الرسومات. Metal, OpenGL ES, Vulkan.
- Shader — برنامج على GPU. يعالج Vertex Shader الرؤوس، ويعالج Fragment Shader البكسلات. تستخدم الرسومات الحديثة الشيادر.
- Overdraw — إعادة رسم البكسل عدة مرات. العدو الرئيسي للأداء. الأدوات: Debug GPU Overdraw, Color Blended Layers.
- CALayer (iOS) — العنصر الأساسي لـ Core Animation. CAShapeLayer — رسومات متجهة مسرعة بـ GPU. Vector Drawable — تنسيق Android.
- Offscreen Rendering — العرض في مخزن مؤقت قبل العرض. ضروري للظلال والزوايا المستديرة والأقنعة. يقلل الأداء — تجنبه.
الرسومات والعرض: أساسيات CPU و GPU
العرض هو عملية تحويل البيانات (الرؤوس والأنسجة والشيادر) إلى صورة على الشاشة. في الأجهزة المحمولة، يمكن إجراء العرض على CPU (المعالج المركزي) أو GPU (معالج الرسومات). يعتمد الاختيار على نوع الرسومات والأداء المطلوب.
CPU vs GPU Rendering
CPU Rendering — معالجة تسلسلية. يتم تنفيذ كل تعليمة واحدة تلو الأخرى. CPU محسّن للمنطق والتفرع. يعمل Canvas (Android) و Core Graphics (iOS) على CPU. الميزة: الدقة ودعم الخوارزميات المعقدة. العيب: بطيء مع عدد كبير من العناصر الرسومية. GPU Rendering — معالجة متوازية. تعالج آلاف نوى GPU الرؤوس والبكسلات في وقت واحد. تستخدم Metal (iOS) و Vulkan (Android) و OpenGL ES (كلا المنصتين) GPU. GPU Rendering إلزامي للرسومات ثلاثية الأبعاد والرسوم المتحركة 60 إطارًا في الثانية والتأثيرات المعقدة. تستخدم أطر UI الحديثة (SwiftUI, Jetpack Compose, Flutter) GPU افتراضيًا.
الشيادر (Vertex, Fragment)
الشيادر هي برامج تُنفذ على GPU. تحدد كيف يبدو كل كائن على الشاشة. يتكون خط أنابيب الرسومات من عدة مراحل، لكن شيادرين رئيسيين — Vertex Shader و Fragment Shader — يُستخدمان في 99% من الحالات. تُكتب الشيادر بلغة GLSL (OpenGL) أو MSL (Metal) أو HLSL (DirectX).
Vertex Shader — يعالج رؤوس النموذج ثلاثي الأبعاد. الإدخال: موضع الرأس، العمودي، إحداثيات UV. الإخراج: موضع محول (نموذج → عرض → إسقاط). لا يمكن لـ Vertex Shader إنشاء أو حذف الرؤوس — فقط تحويلها. Fragment Shader — يحسب لون كل بكسل (جزء) في مثلث منقّط. الإدخال: بيانات مستوفاة من Vertex Shader (UV, العموديات). الإخراج: لون RGBA. Fragment Shader مسؤول عن التركيب والإضاءة (Phong, PBR) والتأثيرات اللاحقة. تولّد المحركات الحديثة (Unity, Unreal) الشيادر تلقائيًا، لكن فهم خط الأنابيب ضروري للتحسين.
Offscreen Rendering — العرض ليس على الشاشة بل في مخزن مؤقت. يُستخدم من أجل: 1) التأثيرات (blur, shadow), 2) العرض في نسيج, 3) الحساب المسبق للإطارات. Offscreen Rendering مكلف: تبديل السياق وتمرير عرض إضافي. يقوم iOS تلقائيًا بتمكين Offscreen Rendering للظلال و cornerRadius. التنقيط — تحويل البيانات المتجهة (الرؤوس + الشيادر) إلى بكسلات. يحدد المنقّط الأجزاء التي تنتمي إلى مثلث ويستدعي Fragment Shader. التركيب — تجميع الطبقات في الصورة النهائية. يقوم Core Animation بتركيب CALayers، ويقوم Android بتركيب طبقات SurfaceFlinger.
| المعامل | CPU Rendering | GPU Rendering |
|---|---|---|
| البنية | تسلسلية (عدد قليل من النوى) | متوازية (مئات-آلاف النوى) |
| السرعة | بطيء للرسومات | سريع للعمليات الجماعية |
| الأدوات | Canvas, Core Graphics (Quartz 2D) | Metal, OpenGL ES, Vulkan |
| التطبيق | رسومات ثنائية الأبعاد بسيطة، نص، UI | ثلاثي الأبعاد، رسوم متحركة، ألعاب، تأثيرات معقدة |
| الاستهلاك | طاقة أقل | طاقة أكثر، لكن أسرع |
| Overdraw | تكلفة عالية | تكلفة أقل (لكنه لا يزال ضارًا) |
CPU — للمنطق و Canvas. GPU — للرسومات والرسوم المتحركة. توصي IT Sectr باستخدام GPU rendering لأي محتوى متحرك (رسوم متحركة، انتقالات، تمرير) — وهذا يضمن 60 إطارًا في الثانية مستقرة.
Core Animation (CALayer, CAShapeLayer)
Core Animation — إطار عمل Apple للعرض المتحرك المسرّع بـ GPU. العنصر الأساسي هو CALayer: منطقة مستطيلة بمحتوى (صورة، لون، نص). يدير CALayer: الموضع، الحجم، لون الخلفية، الحدود، الظل، cornerRadius والتحويلات (ثنائي وثلاثي الأبعاد). يقوم Core Animation تلقائيًا بتركيب الطبقات على GPU — لا يحتاج المطور لكتابة كود رسومي.
CALayer
CALayer — كائن خفيف (ليس عرضًا) يحتوي على bitmap للمحتوى. UIButton, UILabel, UIImageView — جميعها تستخدم CALayer داخليًا. الخصائص: frame, bounds, position, anchorPoint, transform, opacity, masksToBounds. تحدث رسوم متحركة لخصائص CALayer على GPU — هذه هي الميزة الرئيسية لـ Core Animation. CALayer.shouldRasterize — يفعّل تنقيط الطبقة لتخزين الرسومات المعقدة مؤقتًا. CAShapeLayer — فئة فرعية للرسومات المتجهة: يرسم مسارًا على GPU. يُستخدم لأشرطة التقدم والرسوم البيانية والأقنعة ورسوم الأشكال المتحركة. CAShapeLayer.path — خاصية قابلة للتحريك (رسوم تحول الأشكال).
التركيب في Core Animation — عملية تجميع CALayers في الإطار النهائي. كل CALayer هو نسيج منفصل على GPU. يحدث التركيب في Render Server (عملية منفصلة). الخصائص التي تتطلب تركيبًا: opacity, shadow, cornerRadius + masksToBounds, shouldRasterize. كلما قل عدد الطبقات — كان التركيب أسرع.
التحسين (Overdraw, Offscreen Rendering)
Overdraw — حالة يُرسم فيها نفس البكسل عدة مرات في إطار واحد. مثال: خلفية حمراء → مستطيل أزرق → نص. يُرسم البكسل المركزي 3 مرات. Overdraw هو السبب الرئيسي لبطء UI، خاصة على الأجهزة القديمة. iOS: Debug Color Blended Layers (Xcode) — المناطق الحمراء = مدمج (overdraw). Android: Debug GPU Overdraw (خيارات المطور) — ألوان من الأزرق (1x) إلى الأحمر (3x+).
Overdraw
كيفية تقليل Overdraw: 1) استخدم opaque = true للعروض غير الشفافة (iOS). 2) Android — استخدم android:windowBackground مرة واحدة فقط. 3) أزل الطبقات غير المرئية. 4) استخدم بنية طبقية: الخلفية (تمرير واحد) → المحتوى (تمريرين). 5) تجنب clipChildren و clipToPadding بدون داع. Offscreen Rendering — العرض في مخزن مؤقت قبل الشاشة. المشغلات: shadow (CALayer.shadow*), cornerRadius + masksToBounds, group opacity, shouldRasterize. Xcode: Debug Offscreen Renderer — المناطق الصفراء = offscreen. على Android: profile GPU rendering — تحقق من طول الأشرطة.
الرسومات المتجهة (SVG, Vector Drawable)
الرسومات المتجهة — صور موصوفة بصيغ رياضية (مسارات، منحنيات، تعبئات). لا تفقد المتجهات الجودة عند تغيير الحجم — مثالية للأيقونات والرسوم التوضيحية في تطبيقات الجوال.
SVG (Scalable Vector Graphics) — معيار W3C. غير مدعومة مباشرة في أنظمة تشغيل الجوال. تُحوّل: على iOS — إلى PDF vector assets (Xcode 12+)، على Android — إلى Vector Drawable XML. Vector Drawable — تنسيق Android. يُعرّف في XML: <vector> مع <path> و <group>. يدعم الرسوم المتحركة عبر AnimatedVectorDrawable. PDF Vector Assets (iOS) — PDFs متجهة في Assets.xcassets. يقوم Xcode بتجميعها في أنسجة محسّنة لـ GPU. لا تدعم SVG و Vector Drawable التأثيرات المعقدة (blur, gradient mesh). للصور والتدرجات اللونية، استخدم PNG/WebP النقطية.
الأسئلة الشائعة
ما الفرق بين العرض باستخدام CPU و GPU؟
CPU rendering — رسم تسلسلي على المعالج المركزي. مناسب للرسومات ثنائية الأبعاد البسيطة و Canvas. يستخدم GPU rendering البنية المتوازية لمعالج الرسومات للمعالجة الجماعية للرؤوس والبكسلات.
ما هو Overdraw وكيف تتجنبه؟
Overdraw — رسم بكسل عدة مرات لكل إطار. الأدوات: Debug GPU Overdraw (Android), Color Blended Layers (iOS). الطبيعي: أزرق (1x) وأخضر (2x). أحمر (3x+) — مشكلة.
ما هما CALayer و CAShapeLayer في iOS؟
CALayer — الفئة الأساسية لـ Core Animation. CAShapeLayer — فئة فرعية للرسومات المتجهة على GPU. كلاهما يُدار بواسطة Core Animation ويُركّبان في Render Server.
ما هما Vertex Shader و Fragment Shader؟
Vertex Shader — برنامج على GPU لمعالجة الرؤوس. Fragment Shader — برنامج على GPU لحساب ألوان البكسلات. معًا ينفذان خط أنابيب الرسومات.
متى تستخدم SVG ومتى تستخدم Vector Drawable؟
SVG — معيار W3C، غير مدعوم مباشرة. على iOS — PDF vector assets. على Android — Vector Drawable XML. توصي IT Sectr باستخدام PDF لنظام iOS و Vector Drawable XML لنظام Android.
ملخص
- CPU vs GPU: CPU — تسلسلي، للمنطق. GPU — متوازي، للرسومات. استخدم GPU للرسوم المتحركة.
- Shader: Vertex — تحويل الرؤوس، Fragment — لون البكسلات. أساسيات خط أنابيب الرسومات.
- Overdraw — العدو الرئيسي لـ FPS. تحقق عبر Debug GPU Overdraw / Color Blended Layers.
- CALayer (iOS) — عرض مسرّع بـ GPU. CAShapeLayer — للأشكال المتجهة.
- Offscreen Rendering — مكلف. تجنب الظلال غير الضرورية، cornerRadius + masksToBounds.
- Vector Drawable (Android) و PDF (iOS) — أفضل تنسيق للأيقونات. PNG/WebP نقطية — للصور.
- التركيب — تجميع الطبقات. طبقات أقل = تركيب أسرع = FPS أعلى.
سنقوم بتطوير تطبيق جوال جاهز
تقدم IT Sectr تطبيقات iOS وAndroid للشركات الناشئة والشركات منذ عام 2017. سوف نقدم لك النصح ونقترح أفضل حل.