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:

Beispiel eines equirektangularen Bildes

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-Spalte Sky aus

Das resultierende Ressourcenverzeichnis wird folgendermaßen aussehen:

Zeigt, wie man ein Himmelsmaterial erstellt

Rendereinstellungen 

Jetzt können wir das Himmelsmaterial mit dem Himmelrenderer verknüpfen:

  • Gehe zu Ansichten > Projekteinstellungen
  • Scrolle zu Rendering und öffne den Abschnitt
  • Scrolle zu Himmel und klicke auf Aktiviert
  • Weise das Himmelsmaterial dem Material-Dropdown zu
  • Setze die Textur-Eigenschaft auf die Himmeltextur

Zeigt, wie man das Himmelsrendering aktiviert

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:

Himmel gerendert als Verlauf

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:

2D Hintergrundbild
2D Hintergrundverlauf

Ressourcen 

Hier ist eine nicht erschöpfende Liste von Websites mit kostenlosen equirektangularen Bildern: