September 2024, Vogesen. Eine halbe Stunde Motorrad auf kurvigen Bergstraßen, aufgenommen mit einer Insta360 X4 auf dem Helm. Zwei Fisheye-Linsen, 190° Sichtfeld pro Seite, lückenlose Rundumsicht. Das Ergebnis: ein 360°-Video mit mehreren Gigabyte Rohdaten.
Und jetzt die Frage: Wie archiviert man so etwas, ohne den Speicher zu sprengen?
Die Antwort steht direkt hier im Artikel. 30 Frames, komprimiert in ein einziges JPEG mit 2,2 MB. Kein Video-Streaming, kein Cloud-Player, kein Plugin. Nur ein Bild, ein WebGL-Shader und dein Browser. Zieh mit der Maus — und schau dich um.
Das Rohmaterial: Ein einziges JPEG
Das ist die komplette Datei, die der Viewer oben lädt — 30 Frames in einem 5×6-Grid, komprimiert auf 2,2 MB. Jeder Frame enthält zwei Fisheye-Kreise: oben die Front-Linse, unten die Rück-Linse. Der WebGL-Shader im Browser entzerrt diese Rohdaten in Echtzeit zu einer nahtlosen 360°-Ansicht.
Wie funktioniert das?
Was du gerade siehst, ist kein vorgerendertes Panorama. Es ist Echtzeit-Dewarping direkt in deinem Browser. Das Bild, das der Viewer lädt, enthält die rohen Fisheye-Aufnahmen beider Kameralinsen — ungesticht, unverarbeitet, so wie sie von der Kamera kommen.
Jeder Frame im Grid ist zweigeteilt: Oben die Front-Linse (190° Sichtfeld nach vorne), unten die Back-Linse (190° nach hinten). Zusammen decken sie die komplette Sphäre ab, mit einer kleinen Überlappungszone bei etwa 85°, die der Shader sanft überblendet.
Die ganze Magie passiert in einem GLSL Fragment Shader, der auf deiner Grafikkarte läuft. Für jeden Pixel auf dem Bildschirm berechnet er: Welcher Punkt auf der Kugel wird gerade betrachtet? Ist er im Sichtfeld der vorderen oder der hinteren Linse? Dann projiziert er den Fisheye-Kreis zurück auf die flache Textur — und du siehst ein verzerrungsfreies Bild, egal wohin du schaust.
Warum Dual-Lens statt Panorama?
Die naheliegende Lösung wäre, die beiden Fisheye-Bilder vorher zu einem Equirectangular-Panorama zusammenzusetzen — so wie es jede 360°-Kamera-App macht. Aber genau das machen wir bewusst nicht.
Kein Stitching auf dem Server. Das Zusammensetzen eines Panoramas ist rechenintensiv. Bei 511 Filmstrips mit je 30 Frames wären das über 15.000 Stitching-Operationen. Stattdessen liefern wir die Rohdaten aus und lassen den Browser die Arbeit erledigen — mit einem Shader, der auf jeder halbwegs modernen Grafikkarte in Echtzeit läuft.
Kleinere Dateien. Ein Equirectangular-Panorama hat doppelt so viele Pixel wie die beiden Fisheye-Kreise zusammen, weil die Polregionen gestreckt werden. Das Dual-Lens-Format spart Platz, weil es nur die tatsächlich aufgenommenen Pixel speichert.
Volle Kontrolle im Client. Der Shader kann die Blend-Zone zwischen den Linsen dynamisch anpassen, Lens-Flare kompensieren oder Farbkorrekturen vornehmen — alles in Echtzeit, ohne dass ein neues Bild vom Server geladen werden muss.
Von der Kamera zum Browser
Vier Schritte trennen die Rohaufnahme vom interaktiven Viewer:
- Frame-Extraktion — FFmpeg extrahiert gleichmäßig verteilte Schlüsselbilder aus dem 360°-Video. Bei einer 30-Minuten-Tour entstehen 30 Frames, einer pro Minute.
- Dual-Stacking — Jeder Frame behält seine natürliche Dual-Lens-Struktur: Front-Linse oben, Back-Linse unten. Kein Stitching, kein Qualitätsverlust.
- Sprite-Grid — Alle 30 Frames werden in ein 5×6-Grid gepackt. Ein einziger HTTP-Request statt 30 einzelne Bilder. Das gesamte Grid wiegt nur 2,2 MB.
- Auslieferung — Der Browser lädt das JPEG, der WebGL-Shader dewarpt die Fisheye-Projektion in Echtzeit, und der Benutzer kann sich frei in der Szene umschauen.
Mehr über ArchivBlick
Der 360°-Viewer ist nur ein Baustein von ArchivBlick — einem System, das über 150.000 Videos und Fotos mit lokaler KI durchsuchbar macht. Ohne Cloud, ohne Abo, ohne Daten die das Haus verlassen.
ArchivBlick Showcase ansehen