Guida all'ottimizzazione delle prestazioni di rendering

Questa guida aiuta a ottimizzare l'SDK su dispositivi di diversi livelli di prestazioni per un'esperienza di rendering 3DGS (3D Gaussian Splatting) fluida.

1. Disattivare l'anti-aliasing

Il WebGLRenderer di Three.js non attiva l'anti-aliasing per impostazione predefinita. Se il progetto ha antialias: true attivato, considera di disattivarlo in scenari critici per le prestazioni:

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

Perché disattivarlo? Ogni punto gaussiano in 3DGS è un'ellisse semitrasparente con attenuazione graduale. Quando molte ellissi si sovrappongono, i bordi sono naturalmente lisci senza necessità di anti-aliasing multisample (MSAA). Disattivare l'MSAA riduce il numero di campionamenti per pixel elaborati dalla GPU (tipicamente da 4 a 1), migliorando il frame rate.

Utenti Cesium: Il Viewer di Cesium non attiva l'MSAA per impostazione predefinita, quindi non sono necessarie azioni aggiuntive.

2. Ridurre la risoluzione di rendering

Riducendo il rapporto pixel del dispositivo, è possibile ridurre proporzionalmente il numero totale di pixel che la GPU deve elaborare. Questa è la misura più efficace per i colli di bottiglia nel fill rate della GPU.

Three.js:

// Dispositivo ad alte prestazioni: usa il rapporto pixel nativo
renderer.setPixelRatio(window.devicePixelRatio);

// Dispositivo di fascia media: limita il rapporto pixel
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5));

// Dispositivo di fascia bassa / mobile: rendering fisso a 1x
renderer.setPixelRatio(1.0);

Cesium:

const viewer = new Cesium.Viewer('container', {
    // Controlla la risoluzione di rendering tramite resolutionScale
    resolutionScale: 1.0 // Usa 1.0 per dispositivi di fascia bassa; usa window.devicePixelRatio per fascia alta
});

Confronto prestazioni (basato su risoluzione logica 1080p):

Gli schermi ad alta densità di pixel (come Retina) hanno tipicamente un devicePixelRatio di 2 o 3. Ridurlo a 1.0 può migliorare le prestazioni di elaborazione dei frammenti da 4 a 9 volte, a scapito di un rendering più sfocato.

3. Limitare il numero massimo di splat renderizzati — setMaxSplats

Questo è il parametro di ottimizzazione delle prestazioni più importante. Controlla il limite superiore di splat gaussiani che partecipano al rendering per frame.

lccObj.setMaxSplats(3000000); // Massimo 3 milioni di splat per frame

Lo scheduler LOD dell'SDK attraversa l'indice spaziale della scena ad ogni frame, selezionando i nodi per il rendering in base alla distanza e al frustum di visione. Quando il numero totale di splat supera questo limite, lo scheduler scarta i nodi a partire da quelli più lontani o a bassa priorità fino a soddisfare il limite.

Valori di riferimento: PC: 900.000 – 10.000.000, Mobile: 500.000 – 2.600.000, in base alle prestazioni del dispositivo. Vedi Configurazioni consigliate per livello di dispositivo in fondo a questa pagina.

4. Limitare gli splat massimi per nodo — setMaxNodeSplats

Controlla il numero massimo di splat renderizzati per nodo spaziale. I nodi che superano questa soglia vengono automaticamente degradati a un livello LOD più grossolano.

lccObj.setMaxNodeSplats(1500000); // Massimo 1,5 milioni di splat per nodo

Perché è necessario questo parametro? Nelle scene di grandi dimensioni, le aree dense come i complessi edilizi possono contenere milioni di splat gaussiani in un singolo nodo al livello LOD più alto. Senza questo limite, avvicinando la fotocamera, un singolo nodo consumerebbe l'intero budget di rendering senza lasciare nulla per le altre aree. Questo parametro rende la distribuzione del budget più equilibrata.

Valori consigliati: Tipicamente 1/3 – 2/3 del valore di setMaxSplats, in base alla densità della scena e al livello del dispositivo. Vedi Configurazioni consigliate per livello di dispositivo in fondo a questa pagina.

5. Limitare il LOD iniziale di rendering — setStartLod

Controlla il livello di massima precisione. LOD 0 è il più dettagliato; valori più alti significano minore precisione.

lccObj.setStartLod(0); // Massima qualità (predefinito per desktop)
lccObj.setStartLod(1); // Salta il livello più dettagliato (predefinito per mobile)
lccObj.setStartLod(2); // Salta i primi due livelli (dispositivi molto deboli)

L'SDK costruisce dati LOD multilivello per il contenuto della scena. LOD 0 contiene i dati a piena precisione, LOD 1 ha circa la metà degli splat di LOD 0, e così via. setStartLod limita il livello LOD più dettagliato selezionabile dallo scheduler: impostarlo a 1 significa che i dati LOD 0 non verranno caricati anche con la fotocamera vicina all'oggetto.

Impatto sulle prestazioni:

6. Limitare la distanza massima di rendering — setMaxDistance

Controlla la distanza massima di rendering dalla fotocamera, in metri. Il contenuto oltre questa distanza non verrà scaricato, decompresso o renderizzato.

lccObj.setMaxDistance(200); // Predefinito per desktop
lccObj.setMaxDistance(100); // Predefinito per mobile

Ridurre la distanza massima diminuisce il numero di nodi visibili, riducendo il costo dell'intera pipeline: download di rete, ordinamento CPU e rendering GPU. Adatto per scenari interni o di visualizzazione ravvicinata.

Nota: L'SDK dispone di un meccanismo adattivo all'altitudine integrato — quando la fotocamera sale oltre i 20 metri, il limite di distanza viene automaticamente allentato per consentire una visione più ampia dalle prospettive aeree.

Valori di riferimento:

Vedi Configurazioni consigliate per livello di dispositivo in fondo a questa pagina.

7. Ottimizzazione automatica LOD — setLodAutoLevelUp

Quando attivato, l'SDK migliora automaticamente la precisione di alcuni nodi quando il budget di rendering ha capacità residua.

lccObj.setLodAutoLevelUp(true); // Attiva (consigliato per dispositivi di fascia medio-alta)
lccObj.setLodAutoLevelUp(false); // Disattiva (consigliato per dispositivi di fascia bassa o frame rate stabile)

Quando il conteggio effettivo degli splat renderizzati è inferiore al limite di setMaxSplats (ad esempio, la fotocamera è rivolta verso un'area aperta), il meccanismo di ottimizzazione assegna il budget rimanente ai nodi vicini, caricando automaticamente dati LOD a maggiore precisione per migliorare i dettagli.

Compromesso: L'attivazione migliora la qualità visiva, ma può innescare download e decompressioni aggiuntive, causando occasionali fluttuazioni del frame rate sui dispositivi di fascia bassa.

8. Illuminazione con armoniche sferiche — useShcoef

L'illuminazione con armoniche sferiche (SH) consente ai colori degli splat gaussiani di cambiare in base all'angolo di visione, producendo riflessi e effetti di lucentezza più realistici. Nell'SDK è disattivata per impostazione predefinita.

// Verifica se i dati contengono coefficienti SH prima di attivare
if (lccObj.hasShcoef()) {
    lccObj.useShcoef(true, (percent) => {
        console.log('SH loading: ' + (percent * 100).toFixed(1) + '%');
    });
}

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

Effetti quando attivato:

• I riflessi e la lucentezza sulle superfici degli oggetti cambiano naturalmente con l'angolo di visione
• Miglioramento significativo della qualità del rendering, specialmente per materiali come metallo, vetro e superfici laccate

Costo prestazionale:

• Aumento dell'uso della memoria GPU per memorizzare coefficienti SH RGB aggiuntivi
• Aumento del carico computazionale del vertex shader GPU per valutare 15 funzioni base SH aggiuntive
• Per il formato LCC, è necessario scaricare file dati SH aggiuntivi

Consiglio: Attivare solo su dispositivi desktop di fascia alta. Non consigliato per dispositivi mobili.

9. Altre opzioni di ottimizzazione

Cache locale (IndexedDB)

Attiva la cache dati locale tramite useIndexDB: true (attivata per impostazione predefinita). Nelle visite successive alla stessa scena, i dati vengono caricati direttamente dall'archivio locale, riducendo significativamente i tempi di caricamento.

Transizione fluida LOD

LCC2 supporta transizioni LOD fluide (attivate per impostazione predefinita), riducendo l'effetto visivo di "popping" durante i cambi di LOD:

lccObj.setSmooth(true); // Attiva (predefinito)
lccObj.setSmooth(false); // Disattiva

Questa funzione vincola le differenze di LOD tra nodi spaziali adiacenti, eliminando le discontinuità di precisione. Il sovraccarico CPU è minimo e si consiglia di mantenerlo attivato.

Configurazioni consigliate per livello di dispositivo

PC

Mobile