Effetto Sfondo
Questo tutorial mostra diversi modi per visualizzare uno sfondo in Wonderland Engine:
Sfondo 3D
Cielo
La renderizzazione del cielo è presente fin dai primi giochi. Dona una percezione di profondità e, virtualmente, aumenta le dimensioni del mondo agli occhi del giocatore.
Esistono diverse tecniche per renderizzare il cielo:
- Rendering dell’atmosfera
- Immagine Cubemap (chiamata anche “Skybox”)
- Immagine equirettangolare
Attualmente, Wonderland Engine supporta solo quest’ultima opzione.
Immagine equirettangolare
Un’immagine equirettangolare si ottiene proiettando un’immagine a 360 gradi su una superficie piana. Ha un rapporto di aspetto di 2:1, quindi la larghezza è il doppio dell’altezza.
Di seguito un esempio di come appare un’immagine equirettangolare:
Vediamo come possiamo creare un cielo in Wonderland Engine!
Importazione
Per prima cosa, importa la tua immagine equirettangolare: trascina il file da una cartella nel Browser degli Asset del tuo editor, quindi trascina l’immagine da lì nella vista Scena per creare una texture da essa.
Se non hai un’immagine equirettangolare, puoi trovare alcune opzioni gratuite nella lista di risorse qui sotto.
Materiale
Crea un materiale per renderizzare la texture del cielo:
- Vai su
Viste > Risorse - Seleziona la scheda
Materiali - In alto a destra, clicca su
Crea - Fai doppio clic sul
nomeper rinominarlo (opzionale) - Seleziona
Skynel menu a tendina nella colonnapipeline
Alla fine otterrai una lista di risorse che appare così:
Impostazioni di Rendering
Ora possiamo collegare il materiale del cielo al renderer del cielo:
- Vai su
Viste > Impostazioni Progetto - Scorri fino a
Renderinge apri la sezione - Scorri fino a
Cieloe clicca suabilitato - Assegna il materiale del cielo al menu a tendina
material - Imposta la proprietà
texturesulla texture del cielo
Gradiente
Oltre a utilizzare una texture, puoi anche utilizzare gradienti con due e quattro punti colore.
Aggiorna il pipeline Sky e attiva le funzioni GRADIENT o GRADIENT_4_STOPS.
Una volta aggiornato il pipeline, modifica le proprietà colorStop del materiale del cielo:
Sfondo 2D
Wonderland Engine supporta anche immagini di sfondo e gradienti bidimensionali.
Per utilizzarlo, cambia la proprietà shader del pipeline Sky su Sfondo per renderizzare in 2D.
In 2D, le texture / gradienti verranno visualizzati in modo identico indipendentemente dalla direzione verso cui la telecamera è orientata:
Risorse
Ecco un elenco non esaustivo di siti web con immagini equirettangolari gratuite:
Overview
Wonderland Engine is a web-based 3D engine for 3D, VR, and AR.
Get Started
Quick start guides for Wonderland Engine.
Editor Overview
The visual editor allows import of 3D assets and configuration of custom JavaScript components.
API Reference
Wonderland Engine JavaScript API reference.
Tutorials
Byte-sized knowledge.