Wie Sie Ihre eigenen Environment Maps erstellen können.

Environment Maps sind eine gute Sache. Wann immer Sie Reflexionen oder Refraktionen in WebGL oder OpenGL machen, stehen die Chancen gut, dass Sie eine verwenden. Die Erstellung kann viel Zeit und spezifisches Equipment beanspruchen. In dem folgenden Beitrag möchten wir Ihnen erklären, wie Sie vorgehen müssen, wenn Sie Ihre eigenen Environment Maps erstellen möchten.

Damit dies funktioniert, benötigen Sie eine Anwendung, mit der Sie Panoramabilder aufnehmen können. In unserem Fall verwenden wir Microsofts Photosynth App auf dem iPhone, da sie genau das tut, was wir brauchen.

Environment Maps.

Lassen Sie uns zunächst darüber sprechen, was Environment Maps sind. Im Falle von WebGL und OpenGL sind es typischerweise Cube-Maps, was ein bestimmer Typ einer Environment Map ist. Eine Cube-Map ist einfach eine Panorama-Ansicht einer Szene (kann eine reale oder virtuelle sein), die auf das Innere eines Würfels abgebildet wurde. Stellen Sie sich vor, Sie befinden sich auf der Spitze eines Hügels und schauen geradeaus, dann 90 Grad nach links und dann 90 Grad nach rechts, gerade auf und ab und schließlich direkt hinter Ihnen.

Handlich würde man jede Seite dieses „Würfels“ sehen. Wenn der Würfel, von dem wir sprechen, groß genug ist, wird es schwierig, die Verbindungen in den Kanten und Ecken des Würfels zu erkennen, und es gibt uns den Effekt, uns in einer großen Umgebung zu befinden. Wenn Sie das alles verwirrt, sollten Sie sich unseren Beitrag über Cube-Maps etwas genauer durchlesen.

Halbe Achsen.

Ein kurzer Hinweis auf die Terminologie, die für Cube Maps verwendet wird. Da wir typischerweise drei Achsen verwenden: x, y und z, daraus folgt, dass die für Cube-Maps verwendeten Bilder für diese Achsen gekennzeichnet sind. Wie bereits angesprochen, es gibt jedoch 6 Bilder, zwei pro Achse. Diese werden als Halbachsen bezeichnet, z.B. positives x und negatives x.

Panorama-Bild.

Der erste Schritt ist also, nach draußen zu gehen und mit der App ein Panoramabild zu machen. Das folgende Beispiel visualisiert einen Spaziergang in San Francisco:

Es sei darauf hingewiesen, dass diese Panorama-Apps oft auf eine Kugel zurückzuführen, was in Ordnung ist, aber das bedeutet, dass wir sie jetzt in einen Würfel konvertieren müssen, damit sie mit unseren von WebGL unterstützten Cube-Maps kompatibel ist.

In Würfel konvertieren.

Dieser Schritt wurde für Sie abgekürzt. Die Theorie ist, dass wir das Bild aufnehmen und in eine 3D-Anwendung wie Maya oder Blender laden und auf eine Kugel abbilden. Von dort aus erstellen wir insgesamt sechs 90-Grad-Kameras, die jeweils auf eine der Halbachsen zeigen. Dann exportieren wir die von diesen Kameras gesehenen Bilder und wir haben die sechs Bilder, die wir in unsere WebGL-Szene laden können. Es ist sehr aufwendig, das zu erklären und umzusetzen, deshalb haben wir eine Blender-Datei erstellt, in der bereits soweit alles gemacht wurde.

Um die Datei zu verwenden:

• Benennen Sie Ihr Panorama in environment.jpg um.
• Platzieren Sie das Panoramabild neben der Blender-Datei.
• Laden der Blender-Datei.
• Klicken Sie auf der rechten Seite auf „Animation“.
• Lehnen Sie sich zurück im Staunen, als 6 Bilder im Ordner erstellt werden.

Interessant oder? Im konkreten Fall haben wir nur eine einzelne Kamera und anschließend eine „Animation“ mit sechs Bildern erstellt, auf jedem Bild habe ich den Kamerawinkel auf eine der Halbachsen aktualisiert.

Jetzt können Sie die Dateien so umbenennen, dass sie der Halbachse entsprechen, die sie darstellen. Im Folgenden erklären wir Ihnen, was Sie genau tun müssen:

• Umbenennen von 0001.png in pos-z.png
• Umbenennen von 0002.png in neg-x.png
• Umbenennen von 0003.png in neg-z.png
• Umbenennen von 0004.png in pos-x.png
• Umbenennen von 0005.png in neg-y.png
• Umbenennen von 0006.png in pos-y.png

Zur Szene hinzufügen:

Jetzt haben wir unsere eigene Environment Map, das Letzte, was wir tun müssen, ist, sie in die Szene zu laden und zu benutzen. Wir zeigen Ihnen auf, wie man das mit Three.js machen kann:

Jetzt müssen Sie nur noch die Cube Map einem Material zuordnen und schon kann es losgehen.

Schlußfolgerungen.

So ist es gut. Es kann schwierig sein, ein gutes Umgebungsbild zu erhalten, je nachdem, wo Sie Ihre Aufnahmen machen können, aber es ist eine wirklich schöne Möglichkeit, Ihre WebGL-Szenen zu personalisieren.

Vielen Dank für Ihren Besuch.