Was du lernen wirst
Dieses Tutorial zeigt dir, wie du 360-Grad-Equirectangular-Panoramabilder mit GPT Image 2 (dem Bildgenerierungsmodell in ChatGPT) erzeugst und sie in einem interaktiven 360-Grad-Viewer betrachtest, der vollstaendig in deinem Browser laeuft.
Am Ende wirst du wissen:
- Was ein Equirectangular-Bild ist und warum das Format wichtig ist
- Wie du Prompts schreibst, die brauchbare 360-Grad-Panoramen erzeugen
- Wie du das Ergebnis in den Viewer laedst und erkundest
- Wie du den Viewer auf deiner eigenen Website mit einem vorgeladenen Bild einbettest
Was ist ein Equirectangular-Bild
Ein 360-Grad-Panorama wird als Equirectangular-Projektion gespeichert; ein flaches Rechteck, das die gesamte Sichtkugel auf ein Bild im Seitenverhältnis 2:1 abbildet. Stell es dir wie eine Mercator-Weltkarte vor, nur für einen Raum statt für die Erde.
- Die horizontale Achse deckt 360 Grad Längengrad ab
- Die vertikale Achse deckt 180 Grad Breitengrad ab
- Die linke und rechte Kante müssen nahtlos zusammenpassen; sie stellen denselben Punkt im Raum dar
Wenn ein 360-Grad-Viewer dieses Bild lädt, wickelt er es mit Three.js auf die Innenseite einer Kugel und platziert die Kamera im Zentrum. Du ziehst zum Drehen, scrollst zum Zoomen, und das flache Bild wird zu einer immersiven Szene.
Professionelle Kameras wie die Ricoh Theta Z1 oder Insta360 X4 übernehmen das Stitching automatisch. Bei der Generierung mit KI muss das Modell diesen nahtlosen Übergang in einem einzigen Durchgang erzeugen.
Schritt 1: ChatGPT mit GPT Image 2 öffnen
Gehe zu ChatGPT und stelle sicher, dass du ein Modell mit GPT Image 2-Unterstützung verwendest (GPT-4o mit aktivierter Bildgenerierung). GPT Image 2 ist in den Tarifen ChatGPT Plus, Team und Enterprise verfügbar.
GPT Image 2 erzeugt standardmäßig keine Equirectangular-Projektionen. Du musst das Format, das Seitenverhältnis und die Anforderung für nahtloses Stitching in jedem Prompt explizit angeben.
Schritt 2: Den Prompt schreiben
Die Prompt-Struktur besteht aus drei entscheidenden Teilen:
- Szenenbeschreibung: was du sehen möchtest
- Formatangabe: Equirectangular-Projektion, 2:1 Seitenverhältnis
- Nahtlos-Bedingung: die linke und rechte Kante müssen beim Aufwickeln auf eine Kugel nahtlos zusammenpassen
Basis-Prompt-Template
Generate a 360-degree equirectangular panorama image of [SCENE DESCRIPTION].
The image must use equirectangular projection with a 2:1 aspect ratio.
The left and right edges must stitch seamlessly when wrapped onto a sphere.
Photorealistic style. High detail. Even lighting across the full 360 degrees.
Beispiel-Prompt: Gotischer Kathedralenraum
Generate a 360-degree equirectangular panorama image of the interior of a
gothic cathedral inspired by Sagrada Familia in Barcelona. Tall columns
branching into tree-like structures supporting the ceiling. Stained glass
windows casting colored light across stone surfaces. Warm afternoon light
filtering through the nave. The image must use equirectangular projection
with a 2:1 aspect ratio. The left and right edges must stitch seamlessly
when wrapped onto a sphere. Photorealistic style.
Beispiel-Prompt: Moderne Wohnung
Generate a 360-degree equirectangular panorama image of a modern minimalist
apartment living room. White walls, large floor-to-ceiling windows with
city skyline view, a gray sectional sofa, wooden coffee table, indoor
plants, and warm pendant lighting. Scandinavian design. The image must use
equirectangular projection with a 2:1 aspect ratio. The left and right
edges must stitch seamlessly when wrapped onto a sphere.
Beispiel-Prompt: Tropischer Strand
Generate a 360-degree equirectangular panorama image of a tropical beach
at sunset. Crystal clear turquoise water, white sand, palm trees swaying,
a wooden pier extending into the ocean, dramatic orange and pink sky. The
image must use equirectangular projection with a 2:1 aspect ratio. The
left and right edges must stitch seamlessly when wrapped onto a sphere.
Schritt 3: Das Bild herunterladen
Nachdem ChatGPT das Bild generiert hat:
- Klicke auf das generierte Bild, um es in voller Größe zu öffnen
- Klicke auf den Download-Button (Pfeil nach unten)
- Speichere es als JPEG oder PNG; nimm immer die höchste verfügbare Auflösung
GPT Image 2 gibt Bilder mit etwa 2048x1024 Pixeln aus. Höhere Auflösung bedeutet mehr Detail, wenn das Bild über die gesamte 360-Grad-Kugel gestreckt wird.
Schritt 4: Das Bild in den interaktiven Viewer laden
Öffne den Interactive 360 Photo Viewer und ziehe dein heruntergeladenes Bild auf den Upload-Bereich. Der Viewer wird:
- Das Bild herunterladen und dekodieren
- Es mit WebGL auf eine 3D-Kugel mappen
- Dir ermöglichen, per Ziehen umzusehen, per Scrollen zu zoomen und Auto-Rotate umzuschalten
Alles läuft lokal in deinem Browser. Das Bild verlässt dein Gerät nicht.
Hier ein Live-Beispiel; ziehe herum, um die Szene zu erkunden:
Tipps für bessere Ergebnisse
1. Gib immer das 2:1 Seitenverhältnis an. Ohne diese Angabe erzeugt das Modell standardmäßig quadratische oder 16:9-Ausgaben. Diese brechen die Projektionsmathematik, wenn sie in einen Viewer geladen werden.
2. Beschreibe die gesamte 360-Grad-Szene. Statt "ein Raum mit einem Fenster" beschreibe alle vier Wände: "große Fenster an der Nordwand, ein Bücherregal an der Ostwand, ein Kamin an der Südwand und eine Tür an der Westwand." Das Modell erzeugt bessere nahtlose Übergänge, wenn es die gesamte Umgebung versteht.
3. Fordere gleichmäßige Beleuchtung an. Das häufigste Fehlermuster ist eine sichtbare Naht, wo die linke und rechte Kante aufeinandertreffen. Das passiert, wenn die Beleuchtung sich innerhalb der Szene drastisch unterscheidet. Die Angabe "even lighting" oder "diffuse ambient light" reduziert Nahtartefakte.
4. Innenräume funktionieren besser als offene Landschaften. Geschlossene Räume (Zimmer, Kathedralen, Höhlen, Studios) liefern konsistentere Equirectangular-Ergebnisse. Wände und Decken verankern die Perspektive und reduzieren geometrische Verzerrungen.
5. Iteriere mit Folgeprompts. Wenn das Ergebnis eine sichtbare Naht oder verzerrte Geometrie hat, sag ChatGPT genau, was nicht stimmt: "The left and right edges don't match; there's a visible break in the wall texture. Regenerate with seamless horizontal stitching." GPT Image 2 reagiert gut auf spezifische Korrekturen.
6. Lade in voller Auflösung herunter. Bilder mit niedrigerer Auflösung verlieren an Detail, wenn sie auf eine Kugel gestreckt werden. Bei der Equirectangular-Projektion zählt jeder Pixel.
Den Viewer auf deiner eigenen Website einbetten
Der 360-Grad-Viewer lässt sich auf jeder Website per iframe einbetten. Der src-Query-Parameter lädt ein bestimmtes Bild vor:
<iframe
src="https://kitmul.com/de/embed/image-design/interactive-360-photo-viewer?src=YOUR_IMAGE_URL"
width="100%"
height="500"
frameborder="0"
allowfullscreen
loading="lazy"
></iframe>
Ersetze YOUR_IMAGE_URL durch die öffentliche URL deines Equirectangular-Bildes. Das Bild muss öffentlich zugänglich sein und entsprechende CORS-Header senden. Für Bilder auf derselben Domain verwende einen relativen Pfad: ?src=/images/my-panorama.jpg.
Einschränkungen, die du kennen solltest
GPT Image 2 ist keine 360-Grad-Kamera. Die Bilder sind beeindruckend, aber nicht perfekt:
| Einschränkung | Details |
|---|---|
| Nahtartefakte | Etwa 30 % der Generierungen zeigen eine sichtbare Naht. Beheben mit Folgeprompts oder GIMPs Verschieben-Filter |
| Geometrische Inkonsistenz | Gerade Linien biegen oder verzerren sich manchmal, besonders in Architekturszenen |
| Auflösungsobergrenze | Maximal ~2048x1024. Professionelle 360-Grad-Kameras nehmen mit 5,7K+ auf |
| Keine Tiefendaten | KI-Panoramen sind flache Projektionen; du kannst die Ansicht drehen, dich aber nicht durch den Raum bewegen |
KI-generierte vs. professionelle 360-Grad-Fotos
| Aspekt | GPT Image 2 | Professionelle 360-Grad-Kamera |
|---|---|---|
| Kosten pro Bild | Kostenlos (im ChatGPT-Abo enthalten) | 200-800+ EUR pro Aufnahme |
| Produktionszeit | 30-60 Sekunden | Stunden (Aufbau + Aufnahme + Stitching) |
| Auflösung | ~2048x1024 | 5760x2880+ |
| Geometrische Genauigkeit | Annähernd | Photogrammetrische Präzision |
| Anpassbarkeit | Unbegrenzt; beliebige Szene beschreiben | Auf physische Orte beschränkt |
| Nahtqualität | ~70 % nahtlos | Immer nahtlos |
| Ideal für | Konzepte, Prototypen, Bildung | Inserate, Dokumentation, VR |
Anwendungsfälle
- Virtuelles Staging für Immobilien: 360-Grad-Ansichten von unmöblierten Räumen mit verschiedenen Einrichtungsstilen generieren, bevor die Immobilie dekoriert wird
- Architektur-Konzeptpräsentationen: Kunden zeigen, wie sich ein geplanter Innenraum anfühlen wird, bevor der Bau beginnt
- Bildungsinhalte: 360-Grad-Ansichten historischer Innenräume für den Unterricht erstellen; römische Villen, mittelalterliche Burgen, Renaissance-Kapellen
- Spiele- und VR-Prototyping: das räumliche Gefühl von Umgebungen testen, bevor die volle 3D-Modellierung beginnt
- E-Commerce-Showrooms: 360-Grad-Produktpräsentationsräume generieren und den Viewer per iframe auf Produktseiten einbetten
Zusammenfassung
- ChatGPT mit GPT Image 2 öffnen
- Das Prompt-Template mit expliziter Equirectangular-Projektion, 2:1-Verhältnis und nahtlosen Kanten verwenden
- Das Bild in voller Auflösung herunterladen
- Es in den Interactive 360 Photo Viewer laden
- Ziehen zum Erkunden, Zoomen, Auto-Rotate umschalten, Vollbildmodus aktivieren
Der gesamte Workflow dauert unter zwei Minuten und läuft vollständig in deinem Browser.
Der Interactive 360 Photo Viewer ist kostenlos, privat und verarbeitet alles lokal. Keine Registrierung, keine Server-Uploads. Teil der Image & Design Tools-Sammlung auf Kitmul.