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

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.

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.

Pregunta	Si la respuesta es no	Región donde está la causa
¿El objeto está donde crees que está?	Transformación, jerarquía o espacio equivocado	1
¿Está dentro del volumen visible de la cámara?	Planos de recorte, escala o posición de cámara	1
¿La geometría tiene los atributos que el material necesita?	Faltan normales, faltan coordenadas de textura o el índice está mal	3
¿La iluminación reacciona al mover el objeto?	Normales sin transformar o en el espacio equivocado	1 y 4
¿Los colores suman como esperas?	Espacio de color de entrada o de salida	4
¿El coste sube con el número de objetos?	Órdenes de dibujo, no la GPU	2 y 7
¿El coste sube con el tamaño de la ventana?	Coste por píxel, no la CPU	2 y 7

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.