Auf mei­ner Facebook-​Seite hat­te ich hier kürz­lich gefragt, wie groß das Interesse sei, die Erstellung von sol­chen inter­ak­ti­ven 360°-Bildern zu lernen:

Da der Andrang groß war, gibt es heu­te das kom­plet­te Tutorial, wie ihr die­se 360-​Grad-​Bilder selbst erstel­len und anzei­gen las­sen könnt. Klickt ger­ne 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ür­lich Zugang zu einem Generativen KI-​Programm. Ich arbei­te bevor­zugt mit Midjourney, aber getes­tet habe ich es auch mit Dall‑E 3 und prin­zi­pi­ell soll­te es – je nach Qualität des KI-​Generators – auch mit ande­ren Tools wie Adobe Firefly oder Stable Diffusion funktionieren.

Als Prompt habe ich bei Midjourney die­sen hier ver­wen­det (die ecki­ge Klammer soll­te weg­ge­las­sen wer­den, mehr dazu unten):

/​imagine 360° equi­rec­tan­gu­lar pho­to­graph of [an emp­ty futu­ristic space­ship com­man­do room inte­ri­or] –ar 2:1 –v 6.0 –style raw

Wichtig sind hier vor allem die ers­ten bei­den Begriffe 360° und die gleich­wink­li­ge Projektion (equi­rec­tan­gu­lar pro­jec­tion) sowie das Seitenverhältnis von 2:1, wel­ches im Midjourney-​Prompt durch das Parameter-​Kürzel –ar defi­niert wird.

Bei der gleich­wink­li­gen Projektion wird die­se aus einem ein­zi­gen Bild zusam­men­ge­setzt, wobei der hori­zon­ta­le Winkel 360° und der ver­ti­ka­le 180° beträgt. Daher soll­te das Seitenverhältnis 2:1 sein, um unnö­ti­ge Verzerrungen zu ver­mei­den. Adobe Firefly kommt z.B. nur bis zum Seitenverhältnis 16:9, wes­halb die Ergebnisse weni­ger über­zeu­gend aussehen.

Die Versionsnummer (v6) und der Style (raw) sind Geschmackssache und kön­nen vari­iert wer­den. Ich habe die­se gewählt, weil sie aktu­ell die bes­te Renderqualität (v6) lie­fern bei rea­lis­tisch anmu­ten­dem Ergebnis (raw).

Statt des Raumschiff-​Prompts in der ecki­gen Klammer könnt ihr natür­lich eurer Fantasie frei­en Lauf las­sen. Beim oben ver­link­ten Facebook-​Post lau­te­te der Prompt zum Beispiel:

/​imagine 360° equi­rec­tan­gu­lar pho­to­graph of the rain­fo­rest –v 6.0 –ar 2:1 –style raw

Ihr könnt aber auch deut­lich ela­bo­rier­ter in eurer Beschreibung wer­den, wenn ihr wollt.

Midjourney zeigt euch dann vier Auswahlmöglichkeiten an. Hier soll­tet ihr bei der Wahl eures Favoriten schon dar­auf ach­ten, ob die lin­ke und rech­te Bildkante sich halb­wegs dazu eig­nen, mit­ein­an­der ver­bun­den zu werden.

Im obi­gen Beispiel habe ich mit einem roten Pfeil mar­kiert, wo die KI einen Lichteinfall ger­en­dert hat, der sich nicht auf der rech­ten Kante wie­der­fin­det. Das wür­de die opti­sche Illusion zer­stö­ren. Beim obe­ren lin­ken Bild sind oben und unten schwar­ze Balken, die eben­falls 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 sor­gen soll, dass die Bilder naht­los kachel­bar sind, was für unse­re Zwecke erst mal prin­zi­pi­ell gut klingt. Manchmal funk­tio­niert es auch gut, aber lei­der ach­tet Midjourney dann auch dar­auf, dass die obe­re und unte­re Kante zusam­men­pas­sen, was bei Außenaufnahme, wo oben Himmel und unten Erde ist, sel­ten gute Ergebnisse bringt. Bei Innenaufnahmen ist die Trefferquote höher. Daher: Einfach mal testen.

Das fer­ti­ge Bild wird mit „U3“ ver­grö­ßert (ups­ca­ling) und dann noch mal „Upscale (Subtle)“ ver­grö­ßert. Damit haben wir schon eine Auflösung von 1536x3072 Pixeln. Wer will, kann die­se Auflösung mit einer der hier auf­ge­zähl­ten Upscale-​Methoden noch wei­ter erhö­hen. Das Raumschiff-​Bild habe ich mit Topaz Photo AI auf 3072x6144 Pixel vergrößert.

Wie schon oben erwähnt, funk­tio­niert es prin­zi­pi­ell auch mit ChatGPT, wenn auch das Seitenverhältnis nicht kor­rekt als 2:1 aus­ge­ge­ben wur­de und die fer­ti­ge Auflösung gerin­ger ist:

2. Die Bildbearbeitung

Das fer­ti­ge PNG-​Bild öff­ne ich nun in Photoshop und wäh­le den Befehl „Verschiebungseffekt“ (unter Filter/​Sonstige Filter):

Im sich öff­ne­nen Menüfenster gebe ich nun „hori­on­zal +1000 Pixel nach rechts“ ein. Wichtig ist, dass unten die Option „Durch ver­scho­be­nen Teil erset­zen“ aktiv ist.

Damit ver­schiebt sich das Bild um ein­tau­send Pixel nach rechts und wir sehen auch im Screenshot schon, wo die Nahtkante unse­res Bildes ist. Diese kön­nen wir mit den Photop-​Bordmitteln wie „gene­ra­ti­ves Entfernen“, „gene­ra­ti­ves Füllen“ und den alt­be­kann­ten Stempel-​Werkzeugen bear­bei­ten, bis die Kante nicht mehr so stark erkenn­bar ist. Tipp: Einfach den Übergang kom­plett mit dem recht­ecki­gen Auswahlwerkzeug mar­kie­ren und „Generatives Füllen“ ankli­cken, wirkt oft wah­re Wunder.

Hier mei­ne bear­bei­te­te Version:

Zusätzlich könnt ihr natür­lich je nach Belieben das Bild vom Farbton, Kontrast etc. anpas­sen oder ande­re Bildbereiche ver­bes­sern, ent­fer­nen oder austauschen.

Wenn ihr fer­tig seid, könnt ihr den „Verschiebungseffekt“ in die ande­re Richtung (also ‑1000) anwen­den, damit das Bild wie­der in sei­ne Ausgangsposition ver­scho­ben wird.

Das ist nicht unbe­dingt not­wen­dig, aber die meis­ten 360°-Anzeigen nut­zen die Bildmitte als Startpunkt, wel­cher dadurch von uns beein­flusst wer­den kann.

Das fer­ti­ge Bild soll­te als JPG abge­spei­chert werden.

3. Die Bild-Metadaten

Damit Tools unser Bild nun auch als „ech­tes“ 360°-Bild erken­nen, müs­sen wir manu­ell Metadaten hin­zu­fü­gen, wel­che durch 360°-Kameras erzeugt wer­den. Wir täu­schen damit qua­si vor, unser KI-​Bild sei mit einer rich­ti­gen Kamera auf­ge­nom­men worden.

Das sind die not­wen­di­gen 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ön­nen (und soll­ten) natür­lich abwei­chen, wenn euer Bild ande­re Pixelmaße aufweist.

Damit ihr nicht wie der letz­te Höhlenmensch in eure EXIF-​Daten ein­grei­fen müsst, gibt es ver­schie­de­ne Offline- und Online-​Tools, wel­che das für euch übernehmen.

Ich nut­ze selbst ger­ne den „Exif Fixer Online“. Dieser unter­stützt JPG-​Bilder bis zu 15 MB. Nach dem Hochladen des Bildes erhal­tet ihr einen Link, wo ihr die „gefix­te“ Version mit den kor­rek­ten Metadaten run­ter­la­den könnt:

WICHTIG: Damit die Datei als 360°-Bild aus­ge­le­sen wer­den kann, müs­sen die­se Metadaten intakt blei­ben. Das Versenden der Datei mit Whatsapp oder Email etc. kann dazu füh­ren, dass die­se Metadaten wie­der gelöscht wer­den und das Bild nicht inter­ak­tiv ange­zeigt wer­den kann.

4. Die Anzeige

Kommen wir zur Belohnung für unse­re Mühen. Damit wir das 360°-Bild anzei­gen las­sen kön­nen, müs­sen wir es irgend­wo hoch­la­den, wo die­se Art der Anzeige unter­stützt wird.

Hier im Blog habe ich auf die Schnelle das kos­ten­lo­se Plugin „Algori 360 Image“ instal­liert, es gibt aber auch etli­che ande­re.

Eine ande­re Möglichkeit ist das Hochladen des Bildes bei Facebook oder Google Photos. Zusätzlich gibt es hier eine Liste von wei­te­ren Apps, wel­che die­se 360°-Anzeige unterstützen.

5. Galerie und Material zum Testen

Wer sehen will, dass das oben kein Glückgriff war, son­dern auch mehr­mals funk­tio­niert, kann sich hier mei­ne „360° KI-Bilder“-Galerie auf Facebook ansehen.

Wer gera­de kei­nen Zugriff auf einen KI-​Generator hat, kann sich die Rohdaten für die Galerie-​Bilder hier run­ter­la­den, direkt ohne Bildbearbeitung aus Midjourney expor­tiert. Die jewei­li­gen Prompts fin­det ihr in den Metadaten in der Bildbeschreibung oder in der Facebook-Galerie.

Wichtiger Hinweis: Die Bilder sind die rohen Ausgangsbilder, es müs­sen also wei­ter­hin die Schritte 2–4 durch­lau­fen wer­den, wenn die Bilder 360°-tauglich wer­den sol­len. Alternativ könnt ihr die Bilder direkt in der Galerie ansehen.