Auf meiner Facebook-Seite hatte ich hier kürzlich gefragt, wie groß das Interesse sei, die Erstellung von solchen interaktiven 360°-Bildern zu lernen:
Da der Andrang groß war, gibt es heute das komplette Tutorial, wie ihr diese 360-Grad-Bilder selbst erstellen und anzeigen lassen könnt. Klickt gerne mit der Maus auf das Bild, um die Ansicht zu ändern oder unten rechts auf das „VR“-Symbol, um das Gleiche im Vollbild-Modus zu machen.
1. Die Bilderstellung
Zuerst braucht ihr dafür natürlich Zugang zu einem Generativen KI-Programm. Ich arbeite bevorzugt mit Midjourney, aber getestet habe ich es auch mit Dall‑E 3 und prinzipiell sollte es – je nach Qualität des KI-Generators – auch mit anderen Tools wie Adobe Firefly oder Stable Diffusion funktionieren.
Als Prompt habe ich bei Midjourney diesen hier verwendet (die eckige Klammer sollte weggelassen werden, mehr dazu unten):
/imagine 360° equirectangular photograph of [an empty futuristic spaceship commando room interior] –ar 2:1 –v 6.0 –style raw
Wichtig sind hier vor allem die ersten beiden Begriffe 360° und die gleichwinklige Projektion (equirectangular projection) sowie das Seitenverhältnis von 2:1, welches im Midjourney-Prompt durch das Parameter-Kürzel –ar definiert wird.
Bei der gleichwinkligen Projektion wird diese aus einem einzigen Bild zusammengesetzt, wobei der horizontale Winkel 360° und der vertikale 180° beträgt. Daher sollte das Seitenverhältnis 2:1 sein, um unnötige Verzerrungen zu vermeiden. Adobe Firefly kommt z.B. nur bis zum Seitenverhältnis 16:9, weshalb die Ergebnisse weniger überzeugend aussehen.
Die Versionsnummer (v6) und der Style (raw) sind Geschmackssache und können variiert werden. Ich habe diese gewählt, weil sie aktuell die beste Renderqualität (v6) liefern bei realistisch anmutendem Ergebnis (raw).
Statt des Raumschiff-Prompts in der eckigen Klammer könnt ihr natürlich eurer Fantasie freien Lauf lassen. Beim oben verlinkten Facebook-Post lautete der Prompt zum Beispiel:
/imagine 360° equirectangular photograph of the rainforest –v 6.0 –ar 2:1 –style raw
Ihr könnt aber auch deutlich elaborierter in eurer Beschreibung werden, wenn ihr wollt.
Midjourney zeigt euch dann vier Auswahlmöglichkeiten an. Hier solltet ihr bei der Wahl eures Favoriten schon darauf achten, ob die linke und rechte Bildkante sich halbwegs dazu eignen, miteinander verbunden zu werden.
Im obigen Beispiel habe ich mit einem roten Pfeil markiert, wo die KI einen Lichteinfall gerendert hat, der sich nicht auf der rechten Kante wiederfindet. Das würde die optische Illusion zerstören. Beim oberen linken Bild sind oben und unten schwarze Balken, die ebenfalls störend sind. Daher habe ich mich für das Bild links unten entschieden.
Hinweis: Es gibt in Midjourney auch den Parameter „–tile“, der dafür sorgen soll, dass die Bilder nahtlos kachelbar sind, was für unsere Zwecke erst mal prinzipiell gut klingt. Manchmal funktioniert es auch gut, aber leider achtet Midjourney dann auch darauf, dass die obere und untere Kante zusammenpassen, was bei Außenaufnahme, wo oben Himmel und unten Erde ist, selten gute Ergebnisse bringt. Bei Innenaufnahmen ist die Trefferquote höher. Daher: Einfach mal testen.
Das fertige Bild wird mit „U3“ vergrößert (upscaling) und dann noch mal „Upscale (Subtle)“ vergrößert. Damit haben wir schon eine Auflösung von 1536x3072 Pixeln. Wer will, kann diese Auflösung mit einer der hier aufgezählten Upscale-Methoden noch weiter erhöhen. Das Raumschiff-Bild habe ich mit Topaz Photo AI auf 3072x6144 Pixel vergrößert.
Wie schon oben erwähnt, funktioniert es prinzipiell auch mit ChatGPT, wenn auch das Seitenverhältnis nicht korrekt als 2:1 ausgegeben wurde und die fertige Auflösung geringer ist:
2. Die Bildbearbeitung
Das fertige PNG-Bild öffne ich nun in Photoshop und wähle den Befehl „Verschiebungseffekt“ (unter Filter/Sonstige Filter):
Im sich öffnenen Menüfenster gebe ich nun „horionzal +1000 Pixel nach rechts“ ein. Wichtig ist, dass unten die Option „Durch verschobenen Teil ersetzen“ aktiv ist.
Damit verschiebt sich das Bild um eintausend Pixel nach rechts und wir sehen auch im Screenshot schon, wo die Nahtkante unseres Bildes ist. Diese können wir mit den Photop-Bordmitteln wie „generatives Entfernen“, „generatives Füllen“ und den altbekannten Stempel-Werkzeugen bearbeiten, bis die Kante nicht mehr so stark erkennbar ist. Tipp: Einfach den Übergang komplett mit dem rechteckigen Auswahlwerkzeug markieren und „Generatives Füllen“ anklicken, wirkt oft wahre Wunder.
Hier meine bearbeitete Version:
Zusätzlich könnt ihr natürlich je nach Belieben das Bild vom Farbton, Kontrast etc. anpassen oder andere Bildbereiche verbessern, entfernen oder austauschen.
Wenn ihr fertig seid, könnt ihr den „Verschiebungseffekt“ in die andere Richtung (also ‑1000) anwenden, damit das Bild wieder in seine Ausgangsposition verschoben wird.
Das ist nicht unbedingt notwendig, aber die meisten 360°-Anzeigen nutzen die Bildmitte als Startpunkt, welcher dadurch von uns beeinflusst werden kann.
Das fertige Bild sollte als JPG abgespeichert werden.
3. Die Bild-Metadaten
Damit Tools unser Bild nun auch als „echtes“ 360°-Bild erkennen, müssen wir manuell Metadaten hinzufügen, welche durch 360°-Kameras erzeugt werden. Wir täuschen damit quasi vor, unser KI-Bild sei mit einer richtigen Kamera aufgenommen worden.
Das sind die notwendigen Metadaten:
-xmp:ProjectionType=equirectangular
-xmp:CroppedAreaLeftPixels=0
-xmp:CroppedAreaTopPixels=0
-xmp:CroppedAreaImageWidthPixels=3072
-xmp:CroppedAreaImageHeightPixels=1536
-xmp:FullPanoWidthPixels=3072
-xmp:FullPanoHeightPixels=1536
-xmp:UsePanoramaViewer=true
Die Pixelwerte können (und sollten) natürlich abweichen, wenn euer Bild andere Pixelmaße aufweist.
Damit ihr nicht wie der letzte Höhlenmensch in eure EXIF-Daten eingreifen müsst, gibt es verschiedene Offline- und Online-Tools, welche das für euch übernehmen.
Ich nutze selbst gerne den „Exif Fixer Online“. Dieser unterstützt JPG-Bilder bis zu 15 MB. Nach dem Hochladen des Bildes erhaltet ihr einen Link, wo ihr die „gefixte“ Version mit den korrekten Metadaten runterladen könnt:
WICHTIG: Damit die Datei als 360°-Bild ausgelesen werden kann, müssen diese Metadaten intakt bleiben. Das Versenden der Datei mit Whatsapp oder Email etc. kann dazu führen, dass diese Metadaten wieder gelöscht werden und das Bild nicht interaktiv angezeigt werden kann.
4. Die Anzeige
Kommen wir zur Belohnung für unsere Mühen. Damit wir das 360°-Bild anzeigen lassen können, müssen wir es irgendwo hochladen, wo diese Art der Anzeige unterstützt wird.
Hier im Blog habe ich auf die Schnelle das kostenlose Plugin „Algori 360 Image“ installiert, es gibt aber auch etliche andere.
Eine andere Möglichkeit ist das Hochladen des Bildes bei Facebook oder Google Photos. Zusätzlich gibt es hier eine Liste von weiteren Apps, welche diese 360°-Anzeige unterstützen.
5. Galerie und Material zum Testen
Wer sehen will, dass das oben kein Glückgriff war, sondern auch mehrmals funktioniert, kann sich hier meine „360° KI-Bilder“-Galerie auf Facebook ansehen.
Wer gerade keinen Zugriff auf einen KI-Generator hat, kann sich die Rohdaten für die Galerie-Bilder hier runterladen, direkt ohne Bildbearbeitung aus Midjourney exportiert. Die jeweiligen Prompts findet ihr in den Metadaten in der Bildbeschreibung oder in der Facebook-Galerie.
Wichtiger Hinweis: Die Bilder sind die rohen Ausgangsbilder, es müssen also weiterhin die Schritte 2–4 durchlaufen werden, wenn die Bilder 360°-tauglich werden sollen. Alternativ könnt ihr die Bilder direkt in der Galerie ansehen.
