Mobil Geliştirmede Grafik ve Render: Nedir, Süreç Nasıl İşler ve Nasıl Çalışır

Grafik ve Render: CPU ve GPU Temelleri

Render, verilerin (köşeler, dokular, shader'lar) ekranda bir görüntüye dönüştürülmesi sürecidir. Mobil cihazlarda render, CPU (merkezi işlemci) veya GPU (grafik işlemci) üzerinde gerçekleştirilebilir. Seçim, grafik türüne ve gereken performansa bağlıdır.

CPU vs GPU Rendering

CPU Rendering — sıralı işleme. Her komut birbiri ardına yürütülür. CPU, mantık ve dallanma için optimize edilmiştir. Canvas (Android), Core Graphics (iOS) CPU'da çalışır. Avantaj: hassasiyet, karmaşık algoritma desteği. Dezavantaj: çok sayıda grafik öğesi olduğunda yavaş. GPU Rendering — paralel işleme. Binlerce GPU çekirdeği, köşeleri ve pikselleri aynı anda işler. Metal (iOS), Vulkan (Android), OpenGL ES (her iki platform) GPU kullanır. 3D, 60 FPS animasyonlar ve karmaşık efektler için GPU Rendering zorunludur. Modern UI çerçeveleri (SwiftUI, Jetpack Compose, Flutter) varsayılan olarak GPU kullanır.

Shader'lar (Vertex, Fragment)

Shader'lar GPU'da yürütülen programlardır. Ekrandaki her nesnenin nasıl görüneceğini belirlerler. Grafik hattı birkaç aşamadan oluşur, ancak iki ana shader — Vertex Shader ve Fragment Shader — vakaların %99'unda kullanılır. Shader'lar GLSL (OpenGL), MSL (Metal) veya HLSL (DirectX) ile yazılır.

Vertex Shader — bir 3B modelin köşelerini işler. Giriş: köşe konumu, normal, UV koordinatları. Çıkış: dönüştürülmüş konum (model → görünüm → projeksiyon). Vertex Shader köşe oluşturamaz veya silemez — yalnızca dönüştürebilir. Fragment Shader — rasterleştirilmiş bir üçgendeki her pikselin (parçanın) rengini hesaplar. Giriş: Vertex Shader'dan enterpole edilmiş veriler (UV, normaller). Çıkış: RGBA rengi. Fragment Shader, doku oluşturma, aydınlatma (Phong, PBR) ve son efektlerden sorumludur. Modern motorlar (Unity, Unreal) shader'ları otomatik olarak oluşturur, ancak optimizasyon için hattı anlamak gerekir.

Offscreen Rendering — ekrana değil geçici bir arabelleğe render. Kullanım: 1) efektler (blur, shadow), 2) dokuya render, 3) karelerin ön hesaplaması. Offscreen Rendering pahalıdır: bağlam değiştirme ve ek bir render geçişi. iOS, gölgeler ve cornerRadius için otomatik olarak Offscreen Rendering'i etkinleştirir. Rasterleştirme — vektör verilerini (köşeler + shader'lar) piksellere dönüştürme. Rasterleştirici, hangi parçaların bir üçgene ait olduğunu belirler ve Fragment Shader'ı çağırır. Birleştirme — katmanların son görüntüde birleştirilmesi. Core Animation, CALayer'ları birleştirir, Android, SurfaceFlinger katmanlarını birleştirir.

CPU — mantık ve Canvas için. GPU — grafik ve animasyonlar için. IT Sectr, hareketli içerik (animasyonlar, geçişler, kaydırma) için GPU rendering kullanılmasını önerir — bu, sabit 60 FPS sağlar.

Core Animation (CALayer, CAShapeLayer)

Core Animation — Apple'ın GPU hızlandırmalı animasyonlu render çerçevesi. Temel öğe CALayer'dır: içerik (resim, renk, metin) içeren dikdörtgen bir alan. CALayer şunları yönetir: konum, boyut, arka plan rengi, kenarlık, gölge, cornerRadius ve dönüşümler (2B ve 3B). Core Animation, katmanları otomatik olarak GPU'da birleştirir — geliştiricinin grafik kodu yazması gerekmez.

CALayer

CALayer — içerik bitmap'i içeren hafif bir nesne (görünüm değil). UIButton, UILabel, UIImageView — hepsi dahili olarak CALayer kullanır. Özellikler: frame, bounds, position, anchorPoint, transform, opacity, masksToBounds. CALayer özelliklerinin animasyonu GPU'da gerçekleşir — bu Core Animation'ın ana avantajıdır. CALayer.shouldRasterize — karmaşık grafikleri önbelleğe almak için katmanın rasterleştirmesini etkinleştirir. CAShapeLayer — vektör grafikleri için bir alt sınıf: GPU'da bir yol çizer. İlerleme çubukları, grafikler, maskeler ve şekil animasyonu için kullanılır. CAShapeLayer.path — animasyonlu bir özellik (şekil dönüşüm animasyonu).

Birleştirme Core Animation'da — CALayer'ların son karede birleştirilmesi süreci. Her CALayer, GPU'da ayrı bir dokudur. Birleştirme, Render Server'da (ayrı bir işlem) gerçekleşir. Birleştirme gerektiren özellikler: opacity, shadow, cornerRadius + masksToBounds, shouldRasterize. Ne kadar az katman — o kadar hızlı birleştirme.

Optimizasyon (Overdraw, Offscreen Rendering)

Overdraw — aynı pikselin bir karede birden çok kez boyanması durumu. Örnek: kırmızı arka plan → mavi dikdörtgen → metin. Merkez piksel 3 kez çizilir. Overdraw, özellikle eski cihazlarda UI gecikmesinin ana nedenidir. iOS: Debug Color Blended Layers (Xcode) — kırmızı alanlar = karıştırılmış (overdraw). Android: Debug GPU Overdraw (Geliştirici Seçenekleri) — maviden (1x) kırmızıya (3x+) renkler.

Overdraw

Overdraw nasıl azaltılır: 1) saydam olmayan görünümler için opaque = true kullanın (iOS). 2) Android — android:windowBackground yalnızca bir kez kullanın. 3) Görünmeyen katmanları kaldırın. 4) Katmanlı mimari kullanın: arka plan (1 geçiş) → içerik (2 geçiş). 5) Gereksiz yere clipChildren ve clipToPadding'den kaçının. Offscreen Rendering — ekrandan önce bir arabelleğe render. Tetikleyiciler: shadow (CALayer.shadow*), cornerRadius + masksToBounds, group opacity, shouldRasterize. Xcode: Debug Offscreen Renderer — sarı alanlar = offscreen. Android'de: profile GPU rendering — çubuk uzunluğunu kontrol edin.

Vektör Grafik (SVG, Vector Drawable)

Vektör Grafik — matematiksel formüllerle (yollar, eğriler, dolgular) tanımlanan görüntüler. Vektörler ölçeklendirildiğinde kalite kaybetmez — mobil uygulamalarda simgeler ve illüstrasyonlar için idealdir.

SVG (Scalable Vector Graphics) — W3C standardı. Mobil işletim sistemlerinde doğrudan desteklenmez. Dönüştürülür: iOS'ta — PDF vektör varlıklarına (Xcode 12+), Android'de — Vector Drawable XML'e. Vector Drawable — Android biçimi. XML'de tanımlanır: <vector> ile <path> ve <group>. AnimatedVectorDrawable aracılığıyla animasyonu destekler. PDF Vector Assets (iOS) — Assets.xcassets içinde vektör PDF'ler. Xcode bunları GPU optimize dokulara derler. SVG ve Vector Drawable karmaşık efektleri (blur, gradient mesh) desteklemez. Fotoğraflar ve gradyanlar için raster PNG/WebP kullanın.