Unione di geometria / mesh senza perdere vantaggi

In three.js possiamo semplicemente unire la geometria per limitare la quantità di chiamate di disegno e quindi aumentare le prestazioni. In un semplice test con un materiale, ho potuto disegnare 50.000 cubi + ombre a 60 fps sulla mia GPU GTX660. Senza la fusione della geometria, 5.000 cubi hanno già causato un problema.

Mi chiedo come preservare i vantaggi del rendering di ogni mesh di cubo da sola. Ad esempio, come scegliere una mesh cubica quando tutto viene unito in una geometria? Per impostazione predefinita, questo non è ovviamente possibile.

Esiste una tecnica comune per questo problema? Dopo tutto, ho tutti gli oggetti mesh non uniti anche dopo la fusione. Quindi ci deve essere un modo per utilizzarli per la raccolta?

Cosa voglio fare in breve

• SimCity come gioco a scopo di apprendimento
• Ogni casa è una maglia cubica
• Vuoi rendere 50.000 case ed essere in grado di aggiungere e rimuovere case
• La selezione della casa tramite il cursore del mouse (selezione) deve essere possibile

Ok ho capito. Dopo aver unito l'intera geometria insieme, ho ancora le singole mesh in un array. Quindi posso semplicemente usare queste maglie per il raycasting, anche se non sono nemmeno renderizzate. Mi ci è voluto un po 'per rendermene conto.

Per il prelievo utilizzo questa implementazione octree: http://threejs.org/examples/#webgl_octree_raycasting

Ciò riduce i test di intersezione per aggiornamento da 50.000 a ~ 500. Senza l'ottavo i fps diminuiranno fortemente.

Lo scafo di raccolta arancione che vedi è in realtà la mesh ora renderizzata (+1 call draw) con un materiale modificato e dimensioni modificate.

Quindi immagino che il prossimo passo sia implementare una sorta di partizionamento delle mappe. Cioè, suddividere la geometria unita in più pezzi. La ragione di ciò è che la geometria unita ha una grande quantità di vertici. Ciò significa che se sposto la mappa al 99% fuori dallo schermo, la scheda grafica deve ancora elaborare tutti i vertici perché la geometria è ancora in vista, almeno l'1% di essa. Quindi, se è rotto, devono essere resi solo i pezzi in vista.

Per il prelievo potresti anche renderizzare gli ID per ciascun cubo su un altro target di rendering e controllare quale sia il valore ID sul cursore. Il vantaggio è che il picking è pixel perfetto e funziona in modo efficiente anche per geometrie più complesse.

Se tutti gli oggetti hanno la stessa geometria, è possibile utilizzare il rendering con istanza. Un flusso definisce la geometria, mentre un altro definisce le proprietà per istanza (ad es. Trasformazione). Per l'abbattimento dei frustum è necessario creare il flusso di istanza di ciascun frame in base al test di visibilità. Se si dispone di una grande quantità di oggetti, è possibile che si desideri posizionare tali oggetti in un ottetto libero o qualcosa per accelerare l'abbattimento.

Non sono sicuro dei particolari di three.js, ma in generale OpenGL mi vengono in mente due possibili maiali delle prestazioni:

1. Hai preso in considerazione l'istanza? Avrai solo bisogno di un call call e di usare meno VRAM.
2. Hai dato un'occhiata seria all'algoritmo di raccolta? Se i tuoi cubi hanno volumi di delimitazione in un elenco anziché in un albero, ad esempio, ciò spiegherebbe una differenza di tale entità.

Un altro approccio che puoi adottare è costruire un attributo vertice nella tua geometria e inserire la logica di evidenziazione nel tuo shader di frammenti. Ciò è estremamente utile quando non si desidera avere due copie di dati in memoria e si avrà un maggiore controllo sull'implementazione dell'evidenziazione.