Construir un mundo abierto en el navegador, parte 5: Presupuestar los elementos visuales

Por Oleg Sidorkin, CTO y cofundador de Cinevva

¿Acabas de llegar? Consulta la guía de la serie. Explica qué es un spike y enlaza todas las partes.

Este fue el capítulo en el que la ambición visual se encontró con la aritmética.

Dividimos el coste de renderizado en spikes independientes porque los resultados combinados son difíciles de diagnosticar. Si activas todo a la vez, solo descubres que el fotograma tarda demasiado. No descubres qué función se ha comido el presupuesto.

El spike 7 se centró en la densidad de la vegetación y el coste de la animación. El enfoque consistía en dispersarla en tiempo de ejecución a partir de mapas de densidad de 32x32 por fragmento de terreno, que alimentaban grandes conjuntos de InstancedMesh. Cada brizna de hierba y grupo de arbustos recibía viento en el sombreador de vértices, controlado mediante una textura de ruido en desplazamiento. La cifra clave que vigilábamos no era el número de triángulos, sino la sobrecarga de las llamadas de dibujado y el rendimiento de vértices en GPU de gama media. Descubrimos que agrupar las instancias en menos mallas importaba más que reducir el número de polígonos de cada brizna.

Abrir el spike 7 en una pestaña nueva ↗ · Ver el código fuente

El spike 8 llevó más lejos la complejidad de los materiales del terreno. Mezcla multicapa ponderada según el ángulo de la pendiente y la altitud, proyección triplanar opcional para las paredes de los acantilados y mapas de normales por capa. El sombreador realizaba splatting en función de la pendiente con cuatro capas de texturas, cada una de las cuales requería una muestra difusa y otra de normales. Eso supone $4\times 2=8$ lecturas de textura por fragmento antes de añadir cualquier iluminación, y la cifra aumenta linealmente con el número de capas, por lo que una quinta capa implica 10 lecturas por píxel. Hicimos perfiles específicamente en GPU integradas de Intel para determinar el mínimo. La conclusión fue que la proyección triplanar en superficies verticales justificaba su coste, pero añadir una quinta capa de splat no.

Abrir el spike 8 en una pestaña nueva ↗ · Ver el código fuente

El spike 9 se centró en el coste de los mapas de sombras en cascada con una carga realista de terreno y objetos. La referencia inicial era CSM con tres cascadas. Hicimos pruebas específicamente con el sol en posiciones de ángulo bajo, porque es ahí donde la presión sobre las cascadas alcanza su punto máximo. La cascada lejana cubre una enorme sección del frustum, y el detalle de las sombras viene determinado por la densidad de téxeles, $\rho \approx \frac{R^2}{A}$ (un mapa de sombras de resolución $R$ extendido sobre un área de terreno $A$). Un único mapa para toda la distancia de visión hace que $A$ sea enorme y que $\rho$ se desplome. Las cascadas solucionan esto dividiendo el frustum para que cada sección tenga su propio mapa de $R\times R$ sobre un $A$ pequeño, lo que mantiene $\rho$ aproximadamente constante desde las zonas cercanas hasta las lejanas. Medimos la diferencia de tiempo de GPU entre dos y cuatro cascadas, y después entre resoluciones de mapa de sombras de 1024 y 2048. El resultado fue que tres cascadas a 1024 nos proporcionaban sombras de contacto aceptables cerca de la cámara sin superar los 2 ms de tiempo de GPU en nuestro hardware objetivo.

Abrir el spike 9 en una pestaña nueva ↗ · Ver el código fuente

Lo difícil de esta fase fue mantener la disciplina de producto. Algunos efectos se veían excelentes y, aun así, tuvimos que limitarlos porque consumían una parte excesiva del presupuesto por fotograma en relación con su impacto visual.

Nuestra regla pasó a ser sencilla. Una función solo sigue adelante si puede justificar su coste con datos medidos de tiempo por fotograma.

Parece obvio. No es habitual en ciclos de prototipado rápido, donde todo el mundo está entusiasmado con la siguiente mejora visual. Aplicar esta regla desde el principio simplificó mucho las decisiones arquitectónicas posteriores sobre clipmaps y zonas volumétricas, porque ya conocíamos el coste individual de cada función que competía por los mismos 16 ms.

En la parte 6 llegamos al primer gran cambio de rumbo en la arquitectura del terreno con los clipmaps de geometría.

Tecnología mencionada en este capítulo

InstancedMesh y vegetación en la GPU. InstancedMesh de Three.js renderiza N copias de la misma geometría con una sola llamada de dibujado. Para la vegetación, un mapa de densidad (32x32 por fragmento) controla la dispersión en tiempo de ejecución de briznas de hierba y grupos de arbustos en búferes de instancias. La animación del viento se ejecuta en el sombreador de vértices mediante una textura de ruido en desplazamiento. A gran escala, ComputeInstanceCulling de WebGPU elimina las instancias que están fuera de pantalla o demasiado lejos antes de la rasterización, e IndirectBatchedMesh empaqueta varios tipos de vegetación en un único búfer que se dibuja mediante multi-draw indirecto. Consulta nuestra guía de paisajes sobre el culling de vegetación en la GPU.

Mapeado triplanar. Las texturas con mapeado UV estándar se estiran en pendientes pronunciadas porque las coordenadas UV se comprimen. El mapeado triplanar proyecta las texturas a lo largo de los tres ejes (X, Y, Z) y las mezcla según la normal de la superficie. Las paredes de los acantilados reciben la proyección X o Z (sin estiramiento) y el terreno llano recibe la proyección Y. La mezcla es suave y automática, sin necesidad de desplegar las UV. Para terrenos PBR, se aplican los mismos pesos de mezcla a los canales de albedo, normales, rugosidad y oclusión ambiental. Consulta los detalles del mapeado triplanar.

Splatting de materiales basado en la pendiente y la altitud. En lugar de usar mapas de splat pintados a mano, los materiales se asignan mediante procedimientos en el sombreador de fragmentos según las propiedades del terreno. El terreno llano a baja altitud recibe hierba; las pendientes pronunciadas, roca; las zonas de gran altitud, nieve (solo en superficies lo bastante planas como para que se acumule); y las zonas cercanas al nivel del mar, arena. Las transiciones usan smoothstep para lograr una mezcla suave. En nuestra implementación, cada fragmento de terreno evalúa cuatro capas de texturas con muestras difusas y de normales por capa, lo que da como resultado ocho lecturas de textura por fragmento antes de la iluminación. Consulta la asignación de materiales según la pendiente y la altitud.

Mapas de sombras en cascada (CSM). CSM divide el frustum de visión de la cámara en 3-4 intervalos de distancia (cascadas). Cada cascada renderiza un mapa de sombras desde la perspectiva del sol con una resolución adaptada a su distancia. Las cascadas cercanas reciben sombras de alta resolución (sombras de contacto detalladas bajo árboles y edificios), mientras que las lejanas reciben una resolución menor (amplias sombras de montañas). El sombreador del terreno toma muestras de todas las cascadas y selecciona la adecuada para cada fragmento. Coste de rendimiento: 3-4 cascadas a 1024x1024 añaden unos 0,5-1 ms para renderizar los mapas de sombras, más unos 0,2-0,3 ms para el muestreo. Consulta sombras para terrenos.

---

Parte 5 de 12.
Anterior: Parte 4 - Streaming antes que terrenos sofisticados
Siguiente: Parte 6 - Los clipmaps cambiaron el rumbo
Guía de la serie: /es/blog/2026-02-25-open-world-browser-series-guide