El mapa del territorio: siete regiones del 3D en la web

El 3D en tiempo real tiene un problema pedagógico que no tienen otras disciplinas del frontend: casi ningún concepto se entiende aislado. Las normales no significan nada sin iluminación, la iluminación no significa nada sin espacios de color, los espacios de color no significan nada sin entender qué hace el fragment shader. El resultado habitual es aprender por acumulación de recetas. Este mapa existe para evitarlo: siete regiones, con las dependencias dibujadas, para que sepas siempre en cuál estás.

Las siete regiones

Región 1, las matemáticas del espacio. Vectores, matrices, cuaterniones y los espacios de coordenadas por los que pasa un vértice. No dibuja nada y es la base de todo lo demás. Es también la única región donde no hay atajo: quien no la domina no puede depurar, porque cuando un objeto aparece del revés, gigante o invisible, el error está aquí y los síntomas no lo dicen.

Región 2, el pipeline y el hardware. Cómo se convierte un triángulo en píxeles, qué etapas hay, qué se paraleliza y qué no. Determina qué es barato y qué es caro, y por tanto explica el rendimiento antes de que exista el problema de rendimiento.

Región 3, la representación de la forma. Geometrías, atributos, índices, instancias, puntos y líneas. Es la pregunta de cómo se describe un objeto con números y cuánta memoria cuesta esa descripción.

Región 4, la apariencia. Materiales, modelos de iluminación, luces, sombras, texturas, entornos. Es la región más grande y la que produce la mayor parte del resultado visual percibido. También la que más depende de las anteriores: un material físico correcto necesita normales correctas, espacios de color correctos y una idea clara de qué hace el fragment shader.

Región 5, el control directo del sombreado. Shaders escritos a mano, GLSL, TSL, nodos, post-procesado. Aquí se baja del catálogo de materiales al código que se ejecuta por vértice y por fragmento. Es donde el techo deja de existir y donde el coste de un error también deja de tener techo.

Región 6, el mundo vivo. Interacción, raycasting, física, cámaras con intención, animación de personajes, mundos grandes con niveles de detalle y streaming. Convierte una escena en una experiencia.

Región 7, producción. Rendimiento medido, carga de assets, integración con frameworks, accesibilidad, degradación en dispositivos débiles. Es la región que separa una demo de un producto, y la que más proyectos se saltan hasta que es tarde.

flowchart TB
raiz[3D en tiempo real] --> mate[Region 1 matematicas del espacio]
raiz --> pipe[Region 2 pipeline y hardware]
mate --> forma[Region 3 representacion de la forma]
pipe --> forma
forma --> apar[Region 4 apariencia]
mate --> apar
apar --> shad[Region 5 control del sombreado]
pipe --> shad
forma --> mundo[Region 6 mundo vivo]
apar --> mundo
shad --> prod[Region 7 produccion]
mundo --> prod
style raiz fill:#cba6f7,color:#11111b
style mate fill:#89b4fa,color:#11111b
style pipe fill:#fab387,color:#11111b
style forma fill:#94e2d5,color:#11111b
style apar fill:#f9e2af,color:#11111b
style shad fill:#f38ba8,color:#11111b
style mundo fill:#a6e3a1,color:#11111b
style prod fill:#a6e3a1,color:#11111b

Las flechas del diagrama son dependencias de comprensión, no de uso. Puedes usar un material físico sin saber matemáticas; no puedes arreglarlo. Y ese es exactamente el criterio con el que está ordenado este track: los cuatro primeros niveles son la región 1 y la 2 completas, porque todo lo demás se apoya en ellas.

Los tres modelos mentales que atraviesan todo

Hay tres ideas que no pertenecen a ninguna región porque están en todas, y conviene tenerlas encima de la mesa desde el principio.

La primera es que todo ocurre en un espacio de coordenadas concreto, y casi ningún error dice en cuál. Una normal en espacio de modelo comparada con una dirección de luz en espacio de mundo produce una iluminación que gira cuando el objeto gira, y el síntoma no menciona espacios por ninguna parte: solo se ve raro. La disciplina de anotar mentalmente en qué espacio vive cada vector es la costumbre que más bugs previene de todo el 3D.

La segunda es que la GPU es masivamente paralela y no le gustan las decisiones. Miles de ejecuciones simultáneas del mismo programa sobre datos distintos, agrupadas de modo que las de un mismo grupo avanzan juntas. Cuando dentro de un grupo unas toman una rama y otras la contraria, se ejecutan ambas ramas y se descarta lo que no aplica. Ese hecho explica por qué un if en un shader no cuesta lo que crees, por qué la transparencia es cara y por qué el instanciado gana tanto.

La tercera es que el render en tiempo real es una jerarquía de mentiras coherentes. Nada de lo que ves es correcto: las sombras son una textura de profundidad con artefactos, el reflejo es una imagen precocinada, la oclusión ambiental es una aproximación local, la iluminación indirecta viene de un mapa de entorno prefiltrado. Todo el oficio consiste en elegir qué aproximación falla de forma menos visible para la escena concreta. Quien busca corrección física acaba frustrado; quien busca coherencia perceptual acaba con imágenes que convencen.

Cómo se usa el mapa en la práctica

El uso real es diagnóstico. Ante cualquier comportamiento inesperado, la secuencia útil es una cadena de preguntas que te manda a una región distinta, y se recorre en orden.

Ese orden no se salta. Mirar parámetros de material antes de comprobar que el objeto está donde crees es el equivalente 3D de retocar el z-index antes de comprobar si la regla siquiera se aplica.

El recorrido de este track

Los cincuenta y tres niveles siguen las dependencias del diagrama. Empiezan por la región 2 con el pipeline gráfico completo, porque saber qué hace la GPU con un triángulo es lo que da sentido a todo lo demás. Siguen con la región 1 en tres niveles: vectores y espacios, matrices y rotaciones. Solo entonces llega el primer proyecto y el grafo de escena, que es la puerta a las regiones 3 y 4.

A partir de ahí el recorrido es acumulativo: geometría, materiales, luz, texturas, assets, shaders, TSL y WebGPU, interacción, mundo y producción. Cada bloque se apoya en el anterior y ninguno pide fe.

Una advertencia sobre el ritmo. Los cuatro niveles que vienen a continuación son los más densos del track y los que menos resultado visible producen. No hay nada que enseñar a nadie al terminarlos, y esa es su naturaleza. Lo que producen es que en el nivel treinta puedas leer un shader ajeno y entenderlo, en lugar de copiarlo.