Illuminazione Pre-baked in Colori di Vertice con Wonderland Engine

Per il loro gioco di mini-golf “Above Paradowski”, Colin Freeman, Ayushman Johri e James Kane hanno utilizzato una tecnica straordinaria per pre-bakare l’illuminazione nella loro scena. Hanno risparmiato i lookup delle lightmap texture nello shader di frammento, ottenendo allo stesso tempo un aspetto altamente rifinito per la loro esperienza.

In questo articolo, metteremo in evidenza perché questa tecnica è intelligente e come puoi utilizzarla in Wonderland Engine.

Screenshot di un’isola fluttuante in Blender: illuminazione piatta (sinistra), colori di vertice baked (destra).

Motivazione 

Calcolare l’illuminazione richiede molto tempo. Per ottenere un risultato realistico, è necessario tracciare percorsi di luce e rimbalzi, ciascun rimbalzo risultante in più percorsi di luce e rimbalzi da calcolare. La quantità di lavoro esplode!

Questo è il modo in cui i film d’animazione vengono renderizzati, ma nella realtà virtuale in tempo reale, invece di minuti per frame, abbiamo circa 11 millisecondi per due frame (occhio sinistro e destro) a 90 Hz per dispositivi VR Standalone. Invece delle render farm GPU, abbiamo una GPU mobile.

Poiché mantenere 60-90 Hz è importante per il comfort e l’immersione nella VR, dobbiamo affrontare il problema in modo diverso. Wonderland Engine implementa già molti ottimi metodi e ottimizzazioni per il rendering veloce, anche con ombre in tempo reale, ma per scene estremamente grandi, abbiamo bisogno di ogni punto percentuale di prestazioni che possiamo ottenere.

Light Baking 

Invece di calcolare l’illuminazione a runtime, possiamo calcolarla a priori e memorizzare il risultato nel nostro asset, ad esempio disegnando o calcolando le ombre sulle nostre texture. Questo processo si chiama “baking”.

Possiamo anche utilizzare gli stessi metodi impiegati nelle animazioni 3D ottenendo così risultati molto realistici.

Le texture funzionano bene, poiché permettono di memorizzare un’alta quantità di dettagli con ombre e effetti di illuminazione fini. Soprattutto con lo streaming delle texture di Wonderland Engine, puoi utilizzare texture ad altissima risoluzione e ottenere scene dall’aspetto incredibile.

Tuttavia, le texture richiedono molti dati da memorizzare, anche quando compresse bene. Invece, possiamo scambiare un po’ di dettaglio per la dimensione del download e memorizzare un attributo di colore aggiuntivo nella tua mesh per vertice.

Lightmap Textures vs Colori di Vertice 

Quando si pre-baka l’illuminazione nelle texture, il nostro calcolo dell’illuminazione sulla GPU viene per lo più ridotto a una lettura della texture: per ogni pixel che renderizziamo sullo schermo, cerchiamo il pixel corretto nella lightmap. Ogni pixel renderizzato può recuperare un colore diverso dalla lightmap, consentendo dettagli ad alta frequenza.

I colori di vertice, d’altra parte, vengono passati allo shader di vertice e interpolati fra i vertici. La frequenza di dettaglio dipenderà dalla risoluzione della tua mesh ed è generalmente molto bassa. Questo riduce ulteriormente il calcolo del colore del pixel al solo passaggio del colore interpolato dallo shader di vertice al framebuffer di output.

Prestazioni 

Qual è più performante? La risposta per qualsiasi domanda sulle prestazioni è sempre: dipende. Specialmente dai tuoi colli di bottiglia.

Molte applicazioni WebXR oggi sono vincolate dalle chiamate di disegno: la CPU non può fare più lavoro, quindi ottimizzare il carico di lavoro della GPU non ha effetto. Possibilmente sulla durata della batteria, ma non sul tuo frame rate.

Wonderland Engine risolve questo problema interamente con le sue ottimizzazioni, renderizzando decine di migliaia di oggetti dinamici in meno di dieci chiamate di disegno nella maggior parte dei casi. Che alcune altre app siano vincolate dall’ombreggiatura dei vertici attraverso il rigging di molti personaggi animati è risolto con un metodo di rigging molto performante ottimizzato per la realtà virtuale che può elaborare centinaia di mesh riggate in modo efficiente.

Ma anche le applicazioni di Wonderland Engine possono finire per essere limitate dall’ombreggiatura dei frammenti. Più istruzioni e operazioni più costose nel tuo shader di frammento richiedono più potenza computazionale dalla GPU per pixel sullo schermo. Il nostro shader “Physical” (PBR) ha più istruzioni rispetto a “Phong”, che ne ha di più rispetto a “Flat”.

Sebbene le GPU moderne siano molto veloci nella lettura delle texture, leggere semplicemente i colori dai dati della mesh durante il fetch dei vertici sarà più efficiente dal punto di vista della cache ed è difficile da battere, specialmente se questo significa anche che puoi omettere del tutto normali e coordinate texture dalla tua mesh. Per questa tecnica, possiamo utilizzare uno shader Flat non texturizzato che richiede solo posizioni e colori.

Questo lascia una quantità inferiore di memoria da leggere per vertice e quasi nessun lavoro da fare per frammento. Questo ci lascerebbe limitati solo dall’ombreggiatura dei vertici o dal fetch dei vertici, ma solo con conteggi di vertici molto impressionanti nella nostra scena come mostrato nel Riassunto.

Tutorial 

Iniziamo col pre-bakare l’illuminazione nei colori di vertice in Blender e poi importiamo il modello in Wonderland Engine.

Bake in Colori di Vertice in Blender 

Scegli una scena e imposta le luci. Blender ha già il pieno supporto per il baking nei colori di vertice, quindi non sono necessari plugin, l’impostazione è semplice:

1. Apri una finestra di scripting in Blender e utilizza il seguente script Python per aggiungere un layer di colore di vertice a tutti gli oggetti selezionati, eseguendo questo script:

1import bpy
2
3for o in bpy.context.selected_objects:
4    if o.type != 'MESH':
5        continue
6    if len(o.data.vertex_colors) != 0:
7        continue
8
9    o.data.vertex_colors.new()

2. Nelle Proprietà di Render, imposta il motore di rendering su Cycles
3. Trova la sezione Bake più in basso e cambia Output > Target su Vertex Colors
4. Imposta il Tipo di Bake su Diffuse
5. Premi il pulsante Bake in alto a questa sezione

Per visualizzare il risultato, puoi impostare le impostazioni della viewport per visualizzare il risultato:

1. Nella viewport 3D trova la freccia accanto ai tipi di rendering (solitamente il pulsante più a destra nel menu superiore)
2. Per Lighting seleziona Flat
3. Per Color seleziona Vertex

Infine, esporta il modello come GLB selezionando File > Export > glTF 2.0 (.glb/.gltf).

Importare in Wonderland Engine 

Crea il seguente VertexColor.frag in una sottocartella shaders nel tuo progetto:

 1#include "lib/Compatibility.frag"
 2
 3#define USE_COLOR
 4
 5#define USE_MATERIAL_ID
 6#include "lib/Inputs.frag"
 7
 8void main() {
 9    outColor = fragColor;
10}

Successivamente, importiamo il modello in Wonderland Engine e utilizziamo questo shader per renderizzarlo:

1. Trascina e rilascia il file .glb nella finestra del browser delle risorse
2. Da lì, trascinalo nella vista scena
3. Vai su Views > Resources > Pipelines e seleziona Phong Opaque o Phong Opaque Textured, a seconda se i tuoi oggetti inizialmente utilizzavano texture.
4. Cambia lo shader con il nuovo shader VertexColor.

Cambiando la pipeline esistente Phong, possiamo cambiare automaticamente tutti i materiali. Un setup più pulito sarebbe assegnare la pipeline “VertexColor” creata automaticamente e assegnarla a tutti i materiali che vogliamo cambiare.

Ora dovresti vedere i colori di vertice applicati correttamente alla tua scena.

Riassunto 

Pre-bakare l’illuminazione nei colori di vertice è un modo molto efficiente per ottenere visuali dall’aspetto meraviglioso. Il seguente video dimostra 3,6 milioni di vertici renderizzati con questo metodo a 60-72 fps su Meta Quest 2 nel Browser di Meta Quest.

La demo utilizza le ottimizzazioni out-of-the-box di Wonderland Engine, la foveation fissa (a 1.0) e il metodo descritto in questo post sul blog. La scena è renderizzata in 2 chiamate di disegno (a partire dalla versione 0.9.4, il supporto imminente per il rendering multiview ridurrà questo del 50%). Ogni oggetto potrebbe ancora essere spostato indipendentemente tramite script o animazione senza influire negativamente sulle prestazioni.