Compositing: چیست، لایهها و اصل کار
Compositing — فرآیند ترکیب چندین لایه بصری در یک تصویر نهایی است. بر اساس Apple Core Animation Documentation, 2025، در توسعه موبایل از compositing برای لایهبندی UI، ترکیب رندر سهبعدی با رابط کاربری و ایجاد انیمیشن استفاده میشود. Compositing ترتیب رندر، شفافیت و ترکیب رنگها بین لایهها را مدیریت میکند.
مهمترین نکات
- Compositing — ترکیب لایههای بصری جداگانه در تصویر نهایی.
- Alpha blending — الگوریتم اصلی ترکیب با در نظر گرفتن شفافیت لایهها.
- GPU compositing — روی GPU از طریق عملیات blending در بلوکهای ROP اجرا میشود.
- Core Animation (iOS) و HWUI (Android) — سیستمهای کامپوزیتینگ در سیستمعاملهای موبایل.
- بهینهسازی compositing برای روانی UI و انیمیشنها در 60 FPS حیاتی است.
Compositing چیست؟
Compositing — مرحله نهایی خط لوله گرافیک است که در آن همه لایههای رندر شده جداگانه (صحنههای سهبعدی، عناصر UI، ویدئو، رابط سیستم) در یک تصویر برای نمایش روی صفحه ترکیب میشوند. هر لایه میتواند رنگ، شفافیت (alpha)، موقعیت و ترتیب لایهبندی خود را داشته باشد.
در زمینه توسعه موبایل، compositing برای رابط کاربری مهم است: پنجرهها، دکمهها، متن، آیکونها — همه این عناصر در یک صحنه کامپوزیت میشوند. سیستم compositing ترتیب رندر (z-order)، لایهبندی صحیح عناصر نیمه شفاف و انیمیشن انتقال بین حالتهای UI را مدیریت میکند.
Compositing در خط لوله گرافیک
در خط لوله گرافیک، compositing پس از اتمام همه مراحل shader و rasterization رخ میدهد. GPU لایههای آماده را از framebufferها میگیرد، عملیات blending را اعمال میکند و نتیجه را در بافر فریم اصلی (front buffer) برای ارسال به نمایشگر مینویسد.
Compositing چگونه کار میکند؟
Compositing از ترکیب پیکسل به پیکسل (blending) رنگها از لایههای مختلف استفاده میکند. هر پیکسل از تصویر خروجی بر اساس رنگهای پیکسلهای لایههای لایهبندی شده با در نظر گرفتن شفافیت (کانال alpha) و حالت ترکیب انتخاب شده محاسبه میشود.
کانال alpha و شفافیت
هر لایه شامل کانال alpha (چهارمین مؤلفه رنگ RGBA) است که opacity آن را تعیین میکند. Alpha = 1.0 — کاملاً opaque، alpha = 0.0 — کاملاً شفاف. Alpha blending رنگ پیکسل را به صورت مجموع وزنی رنگهای لایه جلو (source) و عقب (destination) محاسبه میکند: result = source * alpha + dest * (1 - alpha).
ترتیب رندر (الگوریتم نقاش)
Compositing به ترتیب از دورترین لایه به نزدیکترین (back-to-front) اجرا میشود. ابتدا لایه پس زمینه رندر میشود، سپس هر لایه بعدی با در نظر گرفتن شفافیت آن روی لایه قبلی قرار میگیرد. Z-order تعیین میکند کدام لایه بالاتر است و لایههای پایینتر را میپوشاند.
الگوریتمهای compositing
Compositing از حالتهای مختلف ترکیب (blend modes) پشتیبانی میکند که نحوه ترکیب رنگهای لایهها را تعیین میکنند. هر حالت جلوه بصری متفاوتی میدهد و هزینه محاسباتی خاص خود را دارد.
| حالت | فرمول | کاربرد |
|---|---|---|
| Normal (Alpha) | src * a + dst * (1 - a) | لایهبندی استاندارد با شفافیت |
| Additive | src + dst | جلوههای درخشش، ذرات |
| Multiply | src * dst | تیره کردن، سایهها |
| Screen | 1 - (1 - src) * (1 - dst) | روشن کردن، بازتابها |
| Premultiplied Alpha | (src.rgb * a) + dst * (1 - a) | کارآمد (بدون ضرب در لحظه) |
Premultiplied Alpha
در حالت premultiplied alpha، کانالهای رنگی از قبل در کانال alpha ضرب شده ذخیره میشوند (RGB × A). این کار نیاز به ضرب در هر عملیات blending را از بین میبرد و compositing را加速 میبخشد. Premultiplied alpha — فرمت استاندارد برای GPU-compositing در iOS Core Animation و Android HWUI است.
Compositing در سیستمعاملهای موبایل
هر سیستمعامل موبایل سیستم compositing مخصوص خود را دارد که برای پلتفرم سختافزاری خود بهینه شده است. Compositing در سیستمعاملهای موبایل مسئول رندر کل رابط کاربری است.
iOS: Core Animation + Metal
در iOS، compositing توسط Core Animation مدیریت میشود — یک سیستم سطح بالا که روی Metal یا OpenGL ES کار میکند. Core Animation یک layer tree (درخت لایهها) ایجاد میکند که سپس در تصویر نهایی کامپوزیت میشود. Core Animation به طور خودکار تشخیص میدهد کدام لایهها تغییر کردهاند و فقط آنها را دوباره رندر میکند (incremental compositing)، که بار GPU را به حداقل میرساند.
Android: SurfaceFlinger + HWUI
در Android، compositing توسط SurfaceFlinger انجام میشود — سرویس سیستمی که سطوح (surfaces) را از برنامههای مختلف و رابط سیستم ترکیب میکند. SurfaceFlinger از HWC (Hardware Composer) برای انتقال بخشی از کار compositing به سختافزار اختصاصی کنترلکننده نمایشگر استفاده میکند.
عملکرد compositing
عملکرد compositing — یک bottleneck مکرر در برنامههای موبایل، به ویژه در انیمیشنهای پیچیده و لایهبندی چندین لایه نیمه شفاف است. هر لایه اضافی نیاز به خواندن، ترکیب و نوشتن پیکسلها در حافظه دارد.
عوامل مؤثر بر عملکرد
- تعداد لایهها — هر لایه نیاز به یک پاس جداگانه blending دارد. کاهش تعداد لایهها compositing را به صورت خطی加速 میکند.
- رزولوشن لایهها — لایههای با رزولوشن بالا تعداد پیکسلهای پردازش شده را افزایش میدهند. از حداقل اندازه ممکن برای بافرهای offscreen استفاده کنید.
- شفافیت و overdraw — لایههای نیمه شفاف نیاز به خواندن پیکسلهای زیرین دارند که پهنای باند را افزایش میدهد.
- CPU compositing — اگر compositing روی CPU انجام شود (software rendering)، عملکرد به شدت کاهش مییابد. GPU-compositing همیشه ترجیح داده میشود.
GPU Compositing در مقابل CPU Compositing
دستگاههای موبایل مدرن compositing را روی GPU از طریق بلوکهای تخصصی blending انجام میدهند. GPU-compositing از بلوکهای ROP موازی و فیلترهای بافت برای ترکیب سریع پیکسلها استفاده میکند. CPU-compositing فقط در موارد نادر (دستگاههای قدیمی، تست) استفاده میشود.
بهینهسازی compositing
بهینهسازی compositing — یکی از وظایف کلیدی در توسعه رابطهای موبایل است. روانی UI (60 FPS) مستقیماً به کارایی ترکیب لایهها بستگی دارد.
روشهای اصلی بهینهسازی
- کاهش لایهها — ترکیب لایههای استاتیک در یک لایه (layer flattening) از طریق رندر قبلی.
- Opaque layers — لایههای opaque نیازی به alpha blending ندارند که compositing را به طور قابل توجهی加速 میکند.
- Incremental compositing — رندر مجدد فقط لایههای تغییر یافته، نه کل صحنه (استفاده شده توسط Core Animation).
- Hardware Composer — استفاده از HWC برای compositing سختافزاری بدون مشارکت GPU.
ابزارهای پروفایلینگ
برای تحلیل عملکرد compositing استفاده کنید: Core Animation Profiler (Xcode Instruments) — تعداد لایهها و فرکانس compositing را نشان میدهد; GPU Debugger (Android Studio) — بار GPU و overdraw را نمایش میدهد; Overdraw Visualisation — ابزار debug که مناطق رندر مجدد چندگانه پیکسلها را نشان میدهد.
سوالات متداول
Compositing به زبان ساده چیست؟
Compositing مانند چسباندن چند فیلم شفاف با نقاشی در یک تصویر است. هر فیلم یک لایه است (دکمه، پسزمینه، متن) و شفافیت تعیین میکند که لایهها چگونه از یکدیگر نمایان میشوند.
تفاوت بین رندرینگ و compositing چیست؟
رندرینگ — ایجاد محتوای هر لایه (رسم دکمه، بافتدهی مدل سهبعدی). Compositing — ترکیب لایههای آماده در تصویر نهایی با در نظر گرفتن شفافیت و ترتیب لایهبندی.
Compositing چگونه بر عملکرد iOS تأثیر میگذارد؟
Core Animation لایهها را از طریق Metal روی GPU کامپوزیت میکند. مشکلات با تعداد زیادی لایه نیمه شفاف (overdraw) یا CPU-compositing (off-screen rendering) شروع میشود. برای تشخیص از Core Animation Profiler استفاده کنید.
Hardware Composer در Android چیست؟
Hardware Composer (HWC) — ماژول سختافزاری کنترلکننده نمایشگر که compositing را بدون بارگیری GPU انجام میدهد. HWC میتواند تا 4-8 لایه را به صورت سختافزاری ترکیب کند که مصرف انرژی را کاهش میدهد و GPU را برای کارهای دیگر آزاد میکند.
چگونه بار compositing را کاهش دهیم؟
لایههای استاتیک را ترکیب کنید (layer flattening)، تا حد امکان از رنگهای opaque استفاده کنید، اندازه بافرهای offscreen را کاهش دهید و از انیمیشنهای غیرضروری که باعث کامپوزیت مجدد کل صحنه میشوند خودداری کنید.
خلاصه
- Compositing — مرحله نهایی ترکیب همه لایههای بصری در تصویر نهایی صفحه.
- Alpha blending — الگوریتم اصلی ترکیب رنگ با در نظر گرفتن شفافیت (RGBA).
- Premultiplied alpha — فرمت استاندارد GPU-compositing که ضربهای اضافی را حذف میکند.
- Core Animation (iOS) و SurfaceFlinger (Android) — سیستمهای compositing سیستمعاملهای موبایل.
- تعداد لایههای نیمه شفاف — عامل اصلی مؤثر بر عملکرد compositing.
- Hardware Composer — بلوک سختافزاری Android برای compositing بدون GPU.
- بهینهسازی شامل layer flattening، استفاده از لایههای opaque و compositing افزایشی است.
ما یک اپلیکیشن موبایل به صورت کلید در دست توسعه خواهیم داد
IT Sectr از سال 2017 برنامههای iOS و Android را برای استارتاپها و کسبوکارها ایجاد میکند. ما به شما مشاوره میدهیم و بهترین راهحل را پیشنهاد خواهیم کرد.
همچنین بخوانید