モバイル開発におけるグラフィックスとレンダリング: 概要、プロセスの仕組み、動作方法

グラフィックスとレンダリング: 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を使用します。3D、60 FPSのアニメーション、複雑なエフェクトにはGPU Renderingが必須です。最新のUIフレームワーク（SwiftUI、Jetpack Compose、Flutter）はデフォルトでGPUを使用します。

シェーダー（Vertex、Fragment）

シェーダーはGPU上で実行されるプログラムです。画面上の各オブジェクトの見え方を決定します。グラフィックスパイプラインは複数の段階で構成されますが、2つの主要なシェーダー（Vertex ShaderとFragment Shader）が99%のケースで使用されます。シェーダーはGLSL（OpenGL）、MSL（Metal）、またはHLSL（DirectX）で記述されます。

Vertex Shader — 3Dモデルの頂点を処理します。入力: 頂点位置、法線、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は影とcornerRadiusに対して自動的にOffscreen Renderingを有効にします。ラスタライゼーション — ベクターデータ（頂点+シェーダー）をピクセルに変換します。ラスタライザーはどのフラグメントが三角形に属するかを判断し、Fragment Shaderを呼び出します。コンポジット — 最終画像へのレイヤーの合成。Core AnimationはCALayerをコンポジットし、AndroidはSurfaceFlingerレイヤーをコンポジットします。

CPU — ロジックとCanvas向け。GPU — グラフィックスとアニメーション向け。IT Sectrは、動きのあるコンテンツ（アニメーション、トランジション、スクロール）にはGPUレンダリングの使用を推奨します。これにより安定した60 FPSが確保されます。

Core Animation（CALayer、CAShapeLayer）

Core Animation — AppleのGPU高速化アニメーションレンダリングフレームワーク。基本要素はCALayer: コンテンツ（画像、色、テキスト）を持つ矩形領域。CALayerは位置、サイズ、背景色、境界線、影、cornerRadius、変換（2Dおよび3D）を管理します。Core Animationは自動的にGPU上でレイヤーをコンポジットします — 開発者がグラフィックスコードを書く必要はありません。

CALayer

CALayer — コンテンツのビットマップを含む軽量オブジェクト（ビューではありません）。UIButton、UILabel、UIImageView — すべて内部でCALayerを使用しています。プロパティ: frame、bounds、position、anchorPoint、transform、opacity、masksToBounds。CALayerプロパティのアニメーションはGPU上で行われます — これがCore Animationの主な利点です。CALayer.shouldRasterize — 複雑なグラフィックスをキャッシュするためのレイヤーのラスタライゼーションを有効にします。CAShapeLayer — ベクターグラフィックス用のサブクラス: GPU上でパスを描画します。プログレスバー、グラフ、マスク、シェイプアニメーションに使用されます。CAShapeLayer.path — アニメーション可能なプロパティ（シェイプモーフィングアニメーション）。

コンポジットはCore Animationにおいて — 最終フレームにCALayerを合成するプロセスです。各CALayerはGPU上の個別のテクスチャです。コンポジットはRender Server（別プロセス）で行われます。コンポジットが必要なプロパティ: opacity、shadow、cornerRadius + masksToBounds、shouldRasterize。レイヤーが少ないほどコンポジットが高速になります。

最適化（Overdraw、Offscreen Rendering）

Overdraw — 1つのフレームで同じピクセルが複数回塗られる状況。例: 赤い背景→青い長方形→テキスト。中央のピクセルは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は1回のみ使用。3）非表示レイヤーを削除。4）階層アーキテクチャの使用: 背景（1パス）→コンテンツ（2パス）。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標準。モバイルOSでは直接サポートされていません。変換: iOSではPDF vector assets（Xcode 12+）、AndroidではVector Drawable XMLに変換。Vector Drawable — Android形式。XMLで定義: <vector>と<path>および<group>。AnimatedVectorDrawableによるアニメーションをサポート。PDF Vector Assets（iOS） — Assets.xcassets内のベクターPDF。XcodeがGPU最適化テクスチャにコンパイル。SVGとVector Drawableは複雑なエフェクト（blur、gradient mesh）をサポートしていません。写真やグラデーションにはラスターPNG/WebPを使用してください。