Panorama-Viewer für die eigene Website: Pannellum, Marzipano und Co.

Um ein 360-Grad-Foto auf der eigenen Website drehbar zu machen, brauchen Sie einen Panorama-Viewer: ein Skript, das das flache 2:1-Bild im Browser auf eine Kugel legt und die Blickrichtung per Maus, Finger oder Bewegungssensor steuert. Für die meisten Projekte genügen quelloffene Viewer wie Pannellum, Marzipano oder Photo Sphere Viewer, die kostenlos sind und auf dem eigenen Webspace laufen. Dieser Beitrag vergleicht die verbreiteten Lösungen, zeigt die Einbindung und erklärt, ab wann große Panoramen in Kacheln gehören.

Den Gesamtablauf vom Aufnehmen bis zum fertigen Rundgang beschreibt der Bereich Virtuelle Rundgänge erstellen. Hier geht es nur um den letzten Schritt: die Anzeige im Browser.

Was ein Panorama-Viewer leisten muss

Ein Kugelpanorama wird fast immer im equirektangularen Format gespeichert, also als Rechteck mit doppelt so viel Breite wie Höhe. Der Viewer rechnet daraus in Echtzeit den Ausschnitt, der in der aktuellen Blickrichtung zu sehen ist, und entzerrt ihn. Moderne Viewer nutzen dafür WebGL, die Grafikschnittstelle des Browsers, und kommen ohne Plugin aus.

Darüber hinaus unterscheiden sich die Lösungen vor allem in diesen Punkten:

• Bildquellen: einzelnes equirektangulares Bild, Würfelflächen (Cubemap) oder Kacheln mit mehreren Auflösungsstufen.
• Touren: Verknüpfung mehrerer Panoramen über Hotspots, Übergänge und Startblickrichtungen.
• Bedienung: Maus, Touch, Tastatur, Vollbild, Bewegungssensor, automatische Drehung.
• Erweiterbarkeit: eigene Schaltflächen, Grundrisse, Infofenster, Programmierschnittstelle.
• Pflege: Wie aktiv wird das Projekt weiterentwickelt, wie gut ist die Dokumentation?

Quelloffene Viewer im Vergleich

Die folgende Übersicht beschreibt den Funktionsumfang allgemein. Details ändern sich mit neuen Versionen, prüfen Sie vor dem Einsatz die aktuelle Dokumentation des jeweiligen Projekts.

Alle drei laufen in aktuellen Browsern auf Desktop und Smartphone. Wer HTML grundsätzlich versteht, kommt mit Pannellum am schnellsten zum Ergebnis. Wer ein Gigapixel-Panorama zeigen will, sollte sich Marzipano genauer ansehen, weil dort die Kachelung im Mittelpunkt steht. Mehr zu sehr großen Bildern lesen Sie im Beitrag Gigapixel-Panorama.

Kommerzielle Tour-Programme

Daneben gibt es kommerzielle Programme wie Pano2VR oder krpano, die Touren über eine grafische Oberfläche oder umfangreiche Konfigurationsdateien erstellen und als HTML5-Paket exportieren. Sie bieten Grundrisse, Vorlagen für Bedienelemente und Funktionen für viele Rundgänge auf einmal. Das Ergebnis liegt auf Ihrem eigenen Server, laufende Plattformkosten entfallen meist, Lizenzkosten fallen einmalig oder je nach Modell an. Abo-Plattformen der Kamerahersteller und Tourdienste sind die dritte Variante: am bequemsten, aber die Daten und die Darstellung liegen beim Anbieter.

Einbindung Schritt für Schritt

Das Prinzip ist bei allen Viewern gleich. Am Beispiel Pannellum sieht der Ablauf so aus:

1. Panorama vorbereiten Exportieren Sie das Bild als JPEG im Seitenverhältnis 2:1. Für eine einfache Einbindung ist eine Breite zwischen 4.000 und 8.000 Bildpunkten ein guter Kompromiss. Komprimieren Sie das JPEG moderat, Artefakte fallen im Viewer durch die Vergrößerung stärker auf als im flachen Bild.
2. Dateien hochladen Laden Sie das Skript und das Stylesheet des Viewers aus dem offiziellen Projektarchiv herunter und legen Sie beides zusammen mit dem Panorama auf Ihren Webspace.
3. Container anlegen Auf der Seite reservieren Sie ein Element mit fester Höhe, etwa 60 Prozent der Bildschirmhöhe auf dem Desktop und etwas weniger auf dem Smartphone.
4. Viewer starten Ein kurzer Aufruf übergibt Bildpfad, Typ (equirektangular) und Optionen wie Startblickrichtung, Bildwinkel oder automatisches Laden.
5. Vorschaubild setzen Ein kleines Vorschaubild mit Startknopf sorgt dafür, dass die große Datei erst nach einem Klick geladen wird. Das schont Datenvolumen und hält die Ladezeit der Seite niedrig.
6. Testen Prüfen Sie die Seite auf mindestens einem älteren Smartphone, in zwei Browsern und mit Tastatur. Erst dann zeigt sich, ob Bildgröße und Bedienung passen.

Für Rundgänge ergänzen Sie in der Konfiguration mehrere Szenen und verbinden sie über Hotspots. Wie Sie Übergänge, Blickrichtungen und Infopunkte sinnvoll setzen, erklärt der Beitrag Hotspots und Infopunkte.

Einbindung in Baukästen und Redaktionssysteme

Viele Website-Baukästen erlauben kein eigenes JavaScript im Seiteninhalt. Dann legen Sie den Viewer als eigenständige HTML-Datei auf einen Webspace und betten diese per iframe ein. Achten Sie darauf, dem iframe das Vollbild zu erlauben (Attribut allowfullscreen), sonst funktioniert die Vollbild-Schaltfläche nicht. Für die Bewegungssteuerung auf Smartphones braucht das iframe je nach Browser zusätzliche Berechtigungen.

Große Panoramen: Kacheln statt einer Riesendatei

Ein Viewer legt das Panorama als Textur in den Grafikspeicher. Viele Geräte begrenzen die Kantenlänge solcher Texturen, besonders ältere Smartphones. Ist das Bild breiter, zeigt der Viewer es verkleinert, unscharf oder gar nicht an. Außerdem dauert das Laden einer Datei mit vielen Megabyte spürbar.

Die Lösung heißt Multiresolution oder kurz Multires: Das Panorama wird in Würfelflächen umgerechnet und jede Fläche in mehreren Auflösungsstufen in kleine Kacheln zerlegt. Der Viewer lädt zuerst eine grobe Stufe und dann nur die Kacheln, die gerade im Bild sind. So lassen sich auch Panoramen mit sehr hoher Auflösung flüssig zeigen.

Pannellum und Marzipano bringen eigene Werkzeuge zum Kacheln mit, kommerzielle Tour-Programme erledigen das beim Export. Die Kacheln liegen danach als Ordnerstruktur auf dem Server, was beim Hochladen viele kleine Dateien bedeutet.

Datenschutz und Recht bei der Einbindung

Ein selbst gehosteter Viewer hat einen klaren Vorteil: Weder das Skript noch die Bilder werden von fremden Servern geladen, es fließen also keine Besucherdaten an Dritte. Laden Sie dagegen das Skript über ein externes Content Delivery Network oder betten Sie eine Plattform-Tour ein, wird beim Seitenaufruf die IP-Adresse der Besucher an diesen Anbieter übertragen. Das gehört in die Datenschutzerklärung und kann je nach Gestaltung eine Einwilligung erfordern. Plattformen setzen außerdem häufig eigene Cookies oder Statistikdienste ein.

Unabhängig vom Viewer gilt: Was im Panorama zu sehen ist, wird öffentlich. Erkennbare Personen, Kennzeichen oder Bildschirme sollten vor der Veröffentlichung geprüft werden.

Barrierefreiheit und Bedienung

Ein Panorama ist ein visuelles Medium, die Seite drumherum sollte trotzdem für alle funktionieren:

• Geben Sie dem Viewer-Bereich eine kurze Textbeschreibung, was im Panorama zu sehen ist.
• Achten Sie darauf, dass Schaltflächen per Tastatur erreichbar sind und einen sichtbaren Fokus haben.
• Verzichten Sie auf automatisches Drehen ohne Stopp-Möglichkeit, es kann ablenken und Unwohlsein auslösen.
• Bieten Sie wichtige Informationen aus Infopunkten zusätzlich im normalen Seitentext an.

Welcher Weg passt zu Ihnen?

Ein selbst gehosteter Viewer ist kein Hexenwerk. Mit einer HTML-Datei, einem Skript und einem sauber exportierten Panorama ist der erste Test meist in einer Stunde fertig. Danach lohnt es sich, Bildgröße, Vorschaubild und Bedienung auf echten Geräten zu prüfen, bevor der Rundgang online geht.