Guía de optimización del rendimiento de renderizado

Esta guía ayuda a optimizar el SDK en dispositivos de diferentes niveles de rendimiento para obtener una experiencia de renderizado 3DGS (3D Gaussian Splatting) fluida.

1. Desactivar el anti-aliasing

El WebGLRenderer de Three.js no activa el anti-aliasing por defecto. Si tu proyecto tiene antialias: true activado, considera desactivarlo en escenarios sensibles al rendimiento:

const renderer = new THREE.WebGLRenderer({ antialias: false });

¿Por qué desactivarlo? Cada punto Gaussiano en 3DGS es una elipse semitransparente con atenuación suave. Cuando muchas elipses se superponen, los bordes son naturalmente suaves sin necesidad de anti-aliasing por muestreo múltiple (MSAA). Desactivar MSAA reduce el número de muestras por píxel procesadas por la GPU (típicamente de 4 a 1), mejorando la tasa de fotogramas.

Usuarios de Cesium: El Viewer de Cesium no activa MSAA por defecto, por lo que no se necesitan acciones adicionales.

2. Reducir la resolución de renderizado

Al reducir la relación de píxeles del dispositivo, se puede reducir proporcionalmente el número total de píxeles que la GPU necesita procesar. Esta es la medida más efectiva para cuellos de botella en la tasa de relleno de la GPU.

Three.js:

// Dispositivo de alto rendimiento: usar relación de píxeles nativa
renderer.setPixelRatio(window.devicePixelRatio);

// Dispositivo de gama media: limitar la relación de píxeles
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5));

// Dispositivo de gama baja / móvil: renderizado fijo a 1x
renderer.setPixelRatio(1.0);

Cesium:

const viewer = new Cesium.Viewer('container', {
    // Controlar la resolución de renderizado mediante resolutionScale
    resolutionScale: 1.0 // Usar 1.0 para dispositivos de gama baja; usar window.devicePixelRatio para gama alta
});

Referencia de comparación de rendimiento (basada en resolución lógica de 1080p):

Las pantallas de alta densidad de píxeles (como Retina) suelen tener un devicePixelRatio de 2 o 3. Reducirlo a 1.0 puede mejorar el rendimiento de procesamiento de fragmentos de 4 a 9 veces, a costa de una imagen más borrosa.

3. Limitar el máximo de splats renderizados — setMaxSplats

Este es el parámetro de ajuste de rendimiento más importante. Controla el límite superior de splats Gaussianos que participan en el renderizado por fotograma.

lccObj.setMaxSplats(3000000); // Máximo 3 millones de splats por fotograma

El planificador LOD del SDK recorre el índice espacial de la escena en cada fotograma, seleccionando nodos para renderizar según la distancia y el frustum de visión. Cuando el total de splats supera este límite, el planificador descarta nodos empezando por los más lejanos o de menor prioridad hasta que el total cumpla el límite.

Valores de referencia: PC: 900.000 – 10.000.000, Móvil: 500.000 – 2.600.000, según el rendimiento del dispositivo. Consulta Configuraciones recomendadas por nivel de dispositivo al final de esta página.

4. Limitar splats máximos por nodo — setMaxNodeSplats

Controla el número máximo de splats renderizados por nodo espacial. Los nodos que superen este umbral se degradan automáticamente a un nivel LOD más grueso.

lccObj.setMaxNodeSplats(1500000); // Máximo 1,5 millones de splats por nodo

¿Por qué se necesita este parámetro? En escenas grandes, las áreas densas como complejos de edificios pueden contener millones de splats Gaussianos en un solo nodo en el nivel LOD más alto. Sin este límite, al acercar la cámara, un solo nodo consumiría todo el presupuesto de renderizado sin dejar nada para otras áreas. Este parámetro hace que la distribución del presupuesto sea más equilibrada.

Valores recomendados: Típicamente 1/3 – 2/3 del valor de setMaxSplats, según la densidad de la escena y el nivel del dispositivo. Consulta Configuraciones recomendadas por nivel de dispositivo al final de esta página.

5. Limitar el LOD inicial de renderizado — setStartLod

Controla el nivel de mayor precisión. LOD 0 es el más fino; valores más altos significan menor precisión.

lccObj.setStartLod(0); // Máxima calidad (predeterminado en escritorio)
lccObj.setStartLod(1); // Omitir el nivel más fino (predeterminado en móvil)
lccObj.setStartLod(2); // Omitir los dos primeros niveles (dispositivos muy básicos)

El SDK construye datos LOD multinivel para el contenido de la escena. LOD 0 contiene datos de precisión completa, LOD 1 tiene aproximadamente la mitad de splats que LOD 0, y así sucesivamente. setStartLod limita el nivel LOD más fino que el planificador puede seleccionar: configurarlo en 1 significa que los datos LOD 0 no se cargarán aunque la cámara esté cerca de un objeto.

Impacto en el rendimiento:

6. Limitar la distancia máxima de renderizado — setMaxDistance

Controla la distancia máxima de renderizado desde la cámara, en metros. El contenido más allá de esta distancia no se descargará, descomprimirá ni renderizará.

lccObj.setMaxDistance(200); // Predeterminado en escritorio
lccObj.setMaxDistance(100); // Predeterminado en móvil

Reducir la distancia máxima disminuye el número de nodos visibles, reduciendo el coste de toda la cadena: descargas de red, ordenamiento en CPU y renderizado en GPU. Adecuado para escenarios de interior o visualización cercana.

Nota: El SDK tiene un mecanismo adaptativo de altitud integrado — cuando la cámara sube por encima de 20 metros, el límite de distancia se relaja automáticamente para permitir una vista más amplia desde perspectivas aéreas.

Valores de referencia:

Consulta Configuraciones recomendadas por nivel de dispositivo al final de esta página.

7. Optimización automática de LOD — setLodAutoLevelUp

Cuando está activado, el SDK mejora automáticamente la precisión de ciertos nodos cuando el presupuesto de renderizado tiene capacidad sobrante.

lccObj.setLodAutoLevelUp(true); // Activar (recomendado para dispositivos de gama media-alta)
lccObj.setLodAutoLevelUp(false); // Desactivar (recomendado para dispositivos de gama baja o tasa de fotogramas estable)

Cuando el recuento real de splats renderizados está por debajo del límite de setMaxSplats (por ejemplo, la cámara mira hacia un área abierta), el mecanismo de optimización asigna el presupuesto restante a nodos cercanos, cargando automáticamente datos LOD de mayor precisión para mejorar el detalle.

Compromiso: Activarlo mejora la calidad visual, pero puede provocar descargas y descompresiones adicionales de datos, causando fluctuaciones ocasionales en la tasa de fotogramas en dispositivos de gama baja.

8. Iluminación con armónicos esféricos — useShcoef

La iluminación con armónicos esféricos (SH) permite que los colores de los splats Gaussianos cambien según el ángulo de visión, produciendo reflejos y efectos de brillo más realistas. El SDK lo tiene desactivado por defecto.

// Verificar si los datos contienen coeficientes SH antes de activar
if (lccObj.hasShcoef()) {
    lccObj.useShcoef(true, (percent) => {
        console.log('SH loading: ' + (percent * 100).toFixed(1) + '%');
    });
}

// Desactivar
lccObj.useShcoef(false, () => {});

Efecto al activar:

• Los reflejos y el brillo de las superficies cambian naturalmente con el ángulo de visión
• Mejora significativa en la calidad del renderizado, especialmente en materiales como metal, vidrio y superficies lacadas

Coste de rendimiento:

• Mayor uso de memoria GPU para almacenar coeficientes SH RGB adicionales
• Mayor carga computacional del vertex shader de la GPU para evaluar 15 funciones base SH adicionales
• Para el formato LCC, se necesita descargar archivos de datos SH adicionales

Recomendación: Activar solo en dispositivos de escritorio de gama alta. No recomendado para móviles.

9. Otras opciones de optimización

Caché local (IndexedDB)

Activa la caché de datos local mediante useIndexDB: true (activado por defecto). En visitas posteriores a la misma escena, los datos se cargan directamente del almacenamiento local, reduciendo significativamente los tiempos de carga.

Transición suave de LOD

LCC2 soporta transiciones suaves de LOD (activado por defecto), reduciendo el efecto visual de "popping" al cambiar de LOD:

lccObj.setSmooth(true); // Activar (predeterminado)
lccObj.setSmooth(false); // Desactivar

Esta función restringe las diferencias de LOD entre nodos espaciales adyacentes, eliminando discontinuidades de precisión. La carga en CPU es mínima y se recomienda mantenerlo activado.

Configuraciones recomendadas por nivel de dispositivo

PC

Móvil