Erstellen von interaktiven Panoramaviewern mit Pannellum

Veröffentlicht: 23. Dezember 2015 (Zuletzt geändert am 19. Juli 2019)
0 Kommentare
Enthalten in einer Kategorie: Website
Teil 7 von 10 in der Beitragsreihe 'Automatisierung statischer Webseiten'

Ein Panoramabild bietet deutlich mehr Einblick in eine Szenerie als ein normales Bild. Damit man richtig “eintauchen” kann, reicht es nicht das Bild einfach zu zeigen, stattdessen benötigt man einen interaktiven Bildbetrachter. Die freie Bibliothek Panellum bietet einen Betrachter speziell für Panoramabilder auf Basis von HTML5 und Javascript. Dieser Artikel beschreibt den Einsatz von Pannellum auf dieser Website.

Pannellum ist eine freie Software von Matthew Petroff zum Betrachten von Panoramabildern auf Webseiten. Sie setzt auf moderne Webtechnologien, wie HTML5, CSS3 und WebGL, benötigt dabei aber kein Webbrowser-spezifisches Plugin. Die komplexen Funktionen basieren auf Javascript, was jeder HTML5-fähige Browser beherrschen muss. Die Einbindung von Pannellum in die eigene Webseite geschieht über einen iframe und eine json-Datei. Pannellum liefert eine von allen unnötigen Leerzeichen befreite .htm-Datei. Diese wird in einem iframe-Tag verlinkt und konfiguriert. Dabei erfolgt mindestens die Pfadangabe einer .json-Datei, die weitere Konfiguration enthält.

<iframe title="pannellum" width="100%" height="500" webkitAllowFullScreen mozallowfullscreen allowFullScreen
                style="border-style:none;" src="/js/libs/pannellum.htm?config=/gallery/15/pan2.json">
</iframe>

Tatsächlich ist die iframe-Einbindung erstaunlich unspektakulär. Neben der .json-Datei zur Konfiguration ist auch die Angabe einer .json-Datei möglich, in der eine ganze Tour aus Panormabildern konfiguriert werden kann. Die Angabe zur Konfigurationsdatei ist das Wesentliche. Der folgende Codeblock zeigt die Konfigurationsdatei für ein Panorama von Grenoble, das während eines Auslandspraktikums als Lehrling entstanden ist.

{
    "title": "Blick über Grenoble von der Bastille, September 2005",
    "author": "Markus Meyer",
    "preview": "PanoramaGrenoble2-preview.jpg",
    "type": "equirectangular",
    "basePath" : "/gallery/15",
    "panorama" : "PanoramaGrenoble2.jpg",
    "haov" : 190,
    "vaov" : 40,
    "vOffset" : 0,
    "minYaw" : -75,
    "maxYaw" : 75,
    "minPitch" : -8,
    "maxPitch" : 8,
    "maxHfov" : 50,
    "minHfov" : 10,

    "hotSpots": [
        {
            "pitch": -7,
            "yaw": 35,
            "type": "info",
            "text": "World Trade Center"
        },
        {
            "pitch": 10,
            "yaw": -60,
            "type": "info",
            "text": "ESRF Gelände"
        }
    ]
}

Die Datei startet mit einigen Metainformationen wie Titel und Autor. Danach folgen die Dateinamen des Vorschaubildes sowie des eigentlichen Panoramas. Diese müssen beide in einem Pfad liegen, der unter basePath angegeben werden muss. Der type ist wichtig zur Berechnung des gekrümmten Bildes. Es gibt folgende Möglichkeiten:

  • equirectangular: Eine sehr weit verbreitete Projektion, die von vielen Kameras bzw. deren Panoramamodus genutzt wird. Bekanntestes Beispiel ist die Welkarte in jedem Atlas. Dabei wird das rechteckige Bild insbesondere im oberen und unteren Bereich stark verzerrt. Der Äquator bzw. im Idealfall der Horizont ist dabei nicht verzerrt. Der Betrachter des Bildes befindet sich im Inneren einer Kugel auf der das Bild aufgetragen wurde. (siehe auch Plattkarte auf Wikipedia)
  • cubemap: Bei der Cube Map befindet sich der Betrachter im Inneren eines Würfels auf dessen sechs Außenflächen je ein Bild aufgetragen wurde. Die Einzelbilder müssen dabei so verzerrt werden, dass ein nahtloser Übergang an den Kanten entsteht. Diese Technik wird insbesondere in Echtzeitsystemen wie z.B. Computergrafik genutzt, da es sehr schnell ist. (siehe auch Cube Mapping auf der engl. Wikipedia)
  • multires: Diese Technik wird bei sehr hochauflösenden Panoramabildern eingesetzt. Das Panorma wird in kleinere Teilstücke zerlegt, die in verschiedenen Detailstufen vorliegen. Je nachdem wo der Betrachter hinscrollt bzw. wie weit er hineinzoomt, wird dieser Teil des Bildes geladen. Wer schon mal Google Maps in Satellitenansicht genutzt hat, kennt diese Technik.

Im Beispiel nutze ich die equirectangular-Projektion. Diese benötigt zur Berechnung die weiter folgenden Parameter. Und gerade die Ermittlung dieser komplexen Parameter für horizontalen und vertikalen Blickwinkel sowie die Sichtbarkeitsgrenzen ist die eigentliche Arbeit. Momentan schätze ich die Werte ab und probiere dann einfach so lange, bis alles passt. Ich habe bisher keine andere Möglichkeit gefunden, die Werte aus den Pixeln zu errechnen. Die folgenden Parameter müssen angegeben werden:

  • haov: Horizontaler Blickwinkel des Panoramas in Grad. Ist 360, wenn das Panorama geschlossen ist.
  • vaov: Vertikaler Blickwinkel des Panoramas in Grad. Bei 180 ist das Panorama auch vertikal geschlossen. Nimmt man mit der Panoramafunktion seiner Kamera nur einen Streifen auf, liegt dieser Wert teils deutlich unter 180.
  • vOffset: Setzt die vertikale Abweichung der Mitte des Bildes zum Horizont des Panoramas in Grad. Ist also Null, wenn der Horizont genau in der Mitte des Bildes liegt.
  • minYaw: Setzt den minimalen horizontalen Wert um den der Beobachter das Bild schwenken kann.
  • maxYaw: Setzt den maximalen horizontalen Wert um den der Beobachter das Bild schwenken kann. Liegt der horizontale Blickwinkel (haov) beispielsweise bei 190, dann man ein Wert von -75 bzw. +75 Sinn, damit der Beobachter nicht über das Bild hinaus in den schwarzen Bereich schwenken kann. Je nach Bildschirmauflösung und Zoom sieht man dennoch schwarze Ränder.
  • minPitch: Setzt den minimalen vertikalen Wert um den der Beobachter das Bild schwenken kann.
  • maxPitch: Setzt den maximalen vertikalen Wert um den der Beobachter das Bild schwenken kann.
  • maxHfov: Setzt den maximalen horizontalen Blickwinkel, den der Beobachter auf einen Blick sehen kann. Es ist damit indirekt eine Begrenzung für das Herauszoomen.
  • minHfov: Setzt den minimalen horizontalen Blickwinkel, den der Beobachter auf einen Blick sehen kann. Es ist damit indirekt eine Begrenzung für das Hineinzoomen.

Mit den Angaben unter hotSpots können Punkte im Panorama festgelegt werden, die mit einem Punkt und einer Beschriftung angezeigt werden sollen. Der Typ info setzt einen einfachen Informationspunkt dem auch eine Verlinkung mit der Angabe URL hinzugefügt werden kann, während mit scene Verlinkungen zu weiteren Panoramen zum Aufbau einer Tour eingefügt werden können. Auch hier ist die Ermittlung der Positionsangaben in Grad für horizontale (pitch) und vertikale (yaw) Position mehr probieren als berechnen.
Es sind noch viele weitere Einstellungen möglich, die in der Dokumentation nachgeschlagen werden können.

Durch Pannellum ist das Einfügen von Panoramabildern recht einfach. In einigen Artikeln finden Sie auch eingebundene Panoramabilder. Über den Quellcode können Sie auch die .json-Datei anschauen. Im nächsten Artikel dieser Serie erkläre ich, wie ich Codeblöcke in meine Webseiten einbaue. Vielen Dank fürs Lesen!

Vorheriger Beitrag der ReiheNächster Beitrag der Reihe

zurück

Teile deinen Kommentar oder Feedback zu diesem Beitrag.

Die Angabe der E-Mail-Adresse ist optional und wird nicht veröffentlicht. Sie wird zur Einbindung deines Gravatars und ggf. zur Kontaktaufnahme verwendet. Erforderliche Felder sind mit * markiert.

*

*

*

Durch Betätigen von "Kommentar abschicken", stimmen Sie der Veröffentlichung der eingegebenen Daten zu. Weitere Informationen finden Sie in der Datenschutzerklärung.
Sie können Quellcode über <pre><code>Quellcode</code></pre> in Kommentare einfügen.