Hintergrundeffekt
Dieses Tutorial zeigt verschiedene Wege, um einen Hintergrund in Wonderland Engine darzustellen:
3D Hintergrund
Himmel
Das Rendern von Himmeln gibt es schon seit den frühen Spielen. Es vermittelt ein Gefühl von Tiefe und vergrößert die virtuelle Welt in den Augen des Spielers.
Es gibt viele Techniken, um Himmel zu rendern:
- Atmosphären-Rendering
- Cubemap-Bild (auch “Skybox” genannt)
- Equirektangular-Bild
Derzeit unterstützt Wonderland Engine nur das letztgenannte.
Equirektangular-Bild
Ein equirektangulares Bild wird durch Projektion eines 360-Grad-Bildes auf eine flache Fläche erhalten. Es hat ein Seitenverhältnis von 2:1, sodass die Breite doppelt so groß ist wie die Höhe.
Hier ist ein Beispiel, wie ein equirektangulares Bild aussieht:
Lassen Sie uns sehen, wie wir einen Himmel in Wonderland Engine erstellen können!
Importieren
Zuerst musst du dein equirektangulares Bild importieren: Ziehe die Datei aus einem Ordner per Drag & Drop in den Asset-Browser des Editors, und ziehe dann das Bild von dort in die Szenen-Ansicht, um eine Textur dafür zu erstellen.
Wenn du kein equirektangulares Bild hast, findest du einige kostenlose Optionen in der Ressourcenliste unten.
Material
Erstelle ein Material, um die Himmel-Textur zu rendern:
- Gehe zu
Ansichten > Ressourcen - Wähle den Reiter
Materialien - Klicke oben rechts auf
Erstellen - Doppelklicke auf den
Namen, um ihn umzubenennen (optional) - Wähle im Dropdown-Feld in der
Pipeline-SpalteSkyaus
Das resultierende Ressourcenverzeichnis wird folgendermaßen aussehen:
Rendereinstellungen
Jetzt können wir das Himmelsmaterial mit dem Himmelrenderer verknüpfen:
- Gehe zu
Ansichten > Projekteinstellungen - Scrolle zu
Renderingund öffne den Abschnitt - Scrolle zu
Himmelund klicke aufAktiviert - Weise das Himmelsmaterial dem
Material-Dropdown zu - Setze die
Textur-Eigenschaft auf die Himmeltextur
Verlauf
Neben der Verwendung einer Textur kannst du auch zwei und vier Farbstop-Verläufe nutzen.
Aktualisiere die Sky-Pipeline und aktiviere die GRADIENT- oder GRADIENT_4_STOPS-Funktionen.
Sobald die Pipeline aktualisiert ist, bearbeite die colorStop-Eigenschaften des Himmelsmaterials:
2D Hintergrund
Wonderland Engine unterstützt auch zweidimensionale Hintergrundbilder und Verläufe.
Um diese zu nutzen, ändere die Shader-Eigenschaft der Sky-Pipeline zu Background, um in 2D zu rendern.
In 2D werden die Texturen/Verläufe unabhängig davon, wohin die Kamera schaut, identisch dargestellt:
Ressourcen
Hier ist eine nicht erschöpfende Liste von Websites mit kostenlosen equirektangularen Bildern:
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.