Gráficos y Renderizado en el Desarrollo Móvil: Qué es, Cómo Funciona el Proceso y Cómo Opera

Gráficos y Renderizado: Fundamentos de CPU y GPU

Renderizado es el proceso de convertir datos (vértices, texturas, shaders) en una imagen en la pantalla. En dispositivos móviles, el renderizado puede realizarse en la CPU (procesador central) o en la GPU (procesador gráfico). La elección depende del tipo de gráficos y el rendimiento requerido.

CPU vs GPU Rendering

CPU Rendering — procesamiento secuencial. Cada instrucción se ejecuta una tras otra. La CPU está optimizada para lógica y branching. Canvas (Android), Core Graphics (iOS) funcionan en la CPU. Ventaja: precisión, soporte para algoritmos complejos. Desventaja: lento con una gran cantidad de elementos gráficos. GPU Rendering — procesamiento paralelo. Miles de núcleos de GPU procesan vértices y píxeles simultáneamente. Metal (iOS), Vulkan (Android), OpenGL ES (ambas plataformas) usan la GPU. GPU Rendering es obligatorio para 3D, animaciones a 60 FPS y efectos complejos. Los frameworks UI modernos (SwiftUI, Jetpack Compose, Flutter) usan GPU por defecto.

Shaders (Vertex, Fragment)

Shaders son programas ejecutados en la GPU. Determinan cómo se ve cada objeto en la pantalla. El pipeline gráfico consta de varias etapas, pero dos shaders principales — Vertex Shader y Fragment Shader — se usan en el 99% de los casos. Los shaders se escriben en GLSL (OpenGL), MSL (Metal) o HLSL (DirectX).

Vertex Shader — procesa vértices de un modelo 3D. Entrada: posición del vértice, normal, coordenadas UV. Salida: posición transformada (modelo → vista → proyección). Vertex Shader no puede crear ni eliminar vértices — solo transformarlos. Fragment Shader — calcula el color de cada píxel (fragmento) en un triángulo rasterizado. Entrada: datos interpolados del Vertex Shader (UV, normales). Salida: color RGBA. Fragment Shader es responsable de texturizado, iluminación (Phong, PBR) y post-efectos. Los motores modernos (Unity, Unreal) generan shaders automáticamente, pero entender el pipeline es necesario para la optimización.

Offscreen Rendering — renderizado no en la pantalla sino en un búfer temporal. Usado para: 1) efectos (blur, shadow), 2) render to texture, 3) pre-cálculo de fotogramas. Offscreen Rendering es costoso: cambio de contexto y un pase de renderizado adicional. iOS activa automáticamente Offscreen Rendering para sombras y cornerRadius. Rasterización — conversión de datos vectoriales (vértices + shaders) en píxeles. El Rasterizador determina qué fragmentos pertenecen a un triángulo e invoca el Fragment Shader. Compositing — ensamblaje de capas en la imagen final. Core Animation compone CALayers, Android compone capas de SurfaceFlinger.

CPU — para lógica y Canvas. GPU — para gráficos y animaciones. IT Sectr recomienda usar GPU rendering para cualquier contenido en movimiento (animaciones, transiciones, scroll) — esto asegura 60 FPS estables.

Core Animation (CALayer, CAShapeLayer)

Core Animation — el framework de Apple para renderizado animado acelerado por GPU. El elemento básico es CALayer: un área rectangular con contenido (imagen, color, texto). CALayer gestiona: posición, tamaño, color de fondo, borde, sombra, cornerRadius y transformaciones (2D y 3D). Core Animation compone automáticamente las capas en la GPU — el desarrollador no necesita escribir código gráfico.

CALayer

CALayer — un objeto ligero (no una vista) que contiene un bitmap de contenido. UIButton, UILabel, UIImageView — todos usan CALayer internamente. Propiedades: frame, bounds, position, anchorPoint, transform, opacity, masksToBounds. La animación de propiedades de CALayer ocurre en la GPU — esta es la principal ventaja de Core Animation. CALayer.shouldRasterize — activa la rasterización de la capa para almacenar en caché gráficos complejos. CAShapeLayer — una subclase para gráficos vectoriales: dibuja un path en la GPU. Usado para barras de progreso, gráficos, máscaras y animación de formas. CAShapeLayer.path — una propiedad animable (animación de morphing de formas).

Compositing en Core Animation — el proceso de ensamblaje de CALayers en el fotograma final. Cada CALayer es una textura separada en la GPU. El compositing ocurre en el Render Server (un proceso separado). Propiedades que requieren compositing: opacity, shadow, cornerRadius + masksToBounds, shouldRasterize. Cuantas menos capas — más rápido el compositing.

Optimización (Overdraw, Offscreen Rendering)

Overdraw — una situación donde el mismo píxel se pinta varias veces en un fotograma. Ejemplo: fondo rojo → rectángulo azul → texto. El píxel central se dibuja 3 veces. Overdraw es la principal causa de lag en la UI, especialmente en dispositivos antiguos. iOS: Debug Color Blended Layers (Xcode) — áreas rojas = blended (overdraw). Android: Debug GPU Overdraw (Opciones de Desarrollador) — colores de azul (1x) a rojo (3x+).

Overdraw

Cómo reducir Overdraw: 1) use opaque = true para vistas no transparentes (iOS). 2) Android — use android:windowBackground solo una vez. 3) Elimine capas invisibles. 4) Use una arquitectura en capas: fondo (1 pase) → contenido (2 pases). 5) Evite clipChildren y clipToPadding innecesariamente. Offscreen Rendering — renderizado en un búfer antes de la pantalla. Disparadores: shadow (CALayer.shadow*), cornerRadius + masksToBounds, group opacity, shouldRasterize. Xcode: Debug Offscreen Renderer — áreas amarillas = offscreen. En Android: profile GPU rendering — verifique la longitud de las barras.

Gráficos Vectoriales (SVG, Vector Drawable)

Gráficos Vectoriales — imágenes descritas por fórmulas matemáticas (trazos, curvas, rellenos). Los vectores no pierden calidad al escalarse — ideal para iconos e ilustraciones en aplicaciones móviles.

SVG (Scalable Vector Graphics) — estándar W3C. No es compatible directamente en SO móviles. Se convierte: en iOS — a PDF vector assets (Xcode 12+), en Android — a Vector Drawable XML. Vector Drawable — formato de Android. Definido en XML: <vector> con <path> y <group>. Soporta animación mediante AnimatedVectorDrawable. PDF Vector Assets (iOS) — PDFs vectoriales en Assets.xcassets. Xcode los compila en texturas optimizadas para GPU. SVG y Vector Drawable no soportan efectos complejos (blur, gradient mesh). Para fotos y gradientes, use PNG/WebP rasterizados.