Cómo construimos el Cartoon Shader de Arborea

Uno de los pilares técnicos más importantes de Arborea es su motor de renderizado. Ese estilo visual cartoon que ves —los colores planos, los bordes negros, la luz que no se comporta como en la realidad— no ocurre por casualidad. Hay toda una arquitectura detrás, y nos estamos preparando para exponerla en detalle ante el profesor en nuestra próxima presentación.

La presentación se llama «Arquitectura del Cartoon Shader» y es un análisis teórico y práctico de cómo hemos construido el renderizado NPR (Non-Photorealistic Rendering) de Arborea desde cero.

---

Qué es NPR y por qué lo elegimos

El renderizado fotorrealista, conocido como PBR, trata de simular la física de la luz con la máxima fidelidad posible. El renderizado NPR hace exactamente lo contrario: prioriza el estilo artístico sobre la fidelidad óptica. Sustituye la simulación lumínica por la intención visual del ilustrador.

La técnica más representativa del NPR es el cel shading, que divide la luz en bandas sólidas y recrea el lenguaje visual del dibujo tradicional. Tres grandes referentes definen su historia: Jet Set Radio en el año 2000, que popularizó la técnica en consolas de sexta generación; The Legend of Zelda: Wind Waker en 2002, con sus paletas brillantes e iluminación discreta atemporales; y Into the Spiderverse en 2018, que llevó la fusión de 3D con sombreado plano y achurado tipo cómic a otro nivel.

Arborea bebe directamente de esta tradición.

---

Los fundamentos matemáticos: el producto escalar N·L

El núcleo de todo el sistema es la manipulación del producto escalar en la GPU. La luz en un shader convencional se calcula de forma continua, dando degradados suaves. En el cartoon shader, ese valor se cuantiza: se divide en bandas discretas mediante una función de cuantización, produciendo saltos bruscos de color que imitan el dibujo a mano.

Esta operación, aplicada sistemáticamente al cálculo difuso y especular de la luz, es lo que da a Arborea su aspecto característico.

---

Contornos: rim light y casco invertido

El contorno negro cartoon se consigue mediante dos técnicas combinadas. La primera es el rim light Fresnel: el borde de un objeto se detecta donde la normal de superficie es casi perpendicular al vector de vista, creando un anillo de brillo artístico en los límites del objeto.

La segunda es la silueta por casco invertido: se hace una segunda pasada sobre la malla desplazando los vértices a lo largo de su normal, y con el face culling invertido solo se renderiza el interior expandido, produciendo un contorno visible y controlable mediante un escalar de grosor.

Además, la presentación analiza otras arquitecturas de contorno como los filtros Sobel y el Stencil Masking, comparando sus ventajas y limitaciones.

---

Arborea como caso de estudio

El capítulo final de la presentación usa Arborea directamente como caso de estudio real. El motor de Arborea implementa un pipeline de cinco shaders GLSL especializados: Phong para referencia PBR, Toon para el cel shading principal, Unlit para elementos sin iluminación, Outline para los contornos, y Blob para las sombras proyectadas en el suelo.

Todo esto se ha desarrollado en sintaxis GLSL ES 3.00 (WebGL2), con compatibilidad hacia WebGL1, y se expone con pseudocódigo real para que cualquier desarrollador pueda entender y reproducir las técnicas.

---

Nos lo estamos preparando con ganas

Nos quedan los últimos retoques de la presentación y estamos con muchas ganas de exponerla. Es la primera vez que explicamos en profundidad cómo funciona el motor de Arborea por dentro, y creemos que va a ser una charla muy interesante.

Pronto os contamos cómo fue.