3D-Geoapplikationen im Browser

Überblick & Erfahrungen

Michael Holthausen & Daniel Koch, terrestris GmbH & Co. KG

FOSSGIS 2019, Dresden, 14.03.2019

Gliederung

Über…
Was sind 3D-Geoapplikationen?
Technische Lösungen
Datenformate & Schnittstellen
Vergleich von Bibliotheken

Michael Holthausen

holthausen@terrestris.de
@mholthausen

M. Sc. Geographie
Anwendungsentwickler @terrestris

Daniel Koch

koch@terrestris.de
@dnlkoch

M. Sc. Geographie
Lead developer @terrestris
Kernentwickler react-geo
Kernentwickler SHOGun

terrestris

info@terrestris.de
@terrestris
@terrestrisde

terrestris.de
OpenSource GIS aus Bonn
Entwicklung, Projekte & Support/Schulung
Beratung, Planung, Implementierung & Wartung

Was sind 3D-Geoapplikationen?

We live in a 3D world. People move, think, and experience in three dimensions

Eine Einführung

Viele Medieninhalte liegen in 3D vor, werden aber auf flachen Bildschirmen präsentiert
Animationsfilme werden aus computergenerierten 3D-Bildern erstellt
Online-Kartendienste lassen uns die Welt in 3D erkunden

Ursprung bereits in den 1960er Jahren
Umspannt viele Bereiche des Alltags

Voraussetzungen früher:

Und heute?

3D-fähige Hardware in jedem Computer und mobilen Endgerät
universell verfügbar & kostenlos:

Google Chrome logo Logo of Firefox since version 57 (2017) Logo del navegador de Apple, 'Safari' Logo of Microsoft Edge browser

Google Chrome Anwendung "100,000 Stars"

Browserbasierte 3D-Simulation unserer stellaren Nachbarn in der Milchstraße
Wissenschaftliche Genauigkeit der Daten kann nicht garantiert werden
HTML5 Elemente wie WebGL, CSS3D und Web Audio

Im Rahmen eines Tests für den Google Chrome wurde vom Team "Google Data Arts" das Projekt "100,000 Stars" kreiert, eine browserbasierte 3D-Simulation unserer stellaren Nachbarn in der Milchstraße
Während die wissenschaftliche Genauigkeit der Daten nicht garantiert werden kann und von einer Verwendung der Anwendung zur interstellaren Navigation abgeraten wird, ist die Technik zur Visualisierung bereits seit längerem etabliert: die Anwendung wurde mit HTML5 Elementen kreiert, das in den meisten modernen Webbrowsern verarbeitet werden kann

"100,000 Stars", Google Data Arts Team

Die Galaxie und die Sterne werden über WebGL in Echtzeit gerendert, die Beschriftungen werden über 3D-Transformationen aus CSS3 platziert und die Überlagerungen fügen sich nahtlos in den 3D-Inhalt ein, da der Webbrowser alle Seitenelemente zu einer einheitlichen Darstellung kombiniert
Erst noch vor wenigen Jahren konnte solch eine Applikation nur durch eine teure, native, clientseitige Anwendung erreicht werden
Heutzutage können Anwendungen dieser Art mit einem Browser, "free and open source"-Bibliotheken und einer Standard-Webtechnologie entwickelt werden
Ohne die Verwendung von PlugIns wie Flash oder QuickTime können die Informationen einfach und aktuell weltweit per URL aufgerufen werden

Anwendung im Raum

Darstellung von texturierten Gebäuden oder Objekten
Darstellung von Geländemodellen
Visualisierung von geologischen Untergrundschichten einer bestimmten Region
Einbindung von Orthofotos
u. v. a. m.

Keine Reise zu den interstellaren Nachbarn notwendig um den Nutzen von 3D-Webanwendungen zu erkennen, auch auf der Erde bieten sich vielfätige Einsatzmöglichkeiten an, insbesondere in geographischen Informationssystemen, wie z.B.:

die Darstellung von texturierten Gebäuden oder Objekten innerhalb eines definierten Raumes auf der Erdoberfläche,
die Darstellung von Geländemodellen oder
die Visualisierung von geologischen Untergrundschichten einer bestimmten Region von Interesse
Einbindung von Orthofotos
...

Technische Lösungen

Ziele

Level of Detail (LOD)
Übertragung als Stream

Clientseitig


Hardwarebeschleunigtes 3D-Rendering mit JavaScript Basiert auf der bewährten Grafik-API OpenGL Alle Desktopbrowser Die meisten mobilen Browser


Transformationen, Übergänge und benutzerdefinierte Filter Hardwarebeschleunigte 3D-Rendering- und Animationsfunktionen Alle Desktop- & mobilen Browser


2D-Grafiken auf der Oberfläche eines DOM-Elements (Canvas) zusätzliche JavaScript Bibliotheken rendern 3D-Effekte Alternative zu WebGL oder CSS3 3D

Welche Technologie?

Was soll mit der Anwendung abgebildet werden?
Welche Plattformen sollen unterstützt werden?
Welche Performance soll erreicht werden?
Wie hoch soll der der Grad der Interaktivität sein (messen, bewegen, navigieren)?
u. v. a. m.

Serverkomponenten

GeoServer

W3DS (Web 3D Service)
WVS (Web View Service)

Beide Dienste sind deprecated und werden nicht weiter entwickelt

3D City DB

Kostenlose Geodatenbank zum Speichern, Darstellen und Verwalten von virtuellen 3D-Stadtmodellen
Implementiert den CityGML-Standard
Produktive und kommerzielle Nutzung seit mehr als 14 Jahren
Direkter Export in den Formaten KML, COLLADA und glTF

Datenformate & Schnittstellen

OGC Standards

3DPS (3D Portrayal Service)

Seit 2017 OGC Standard
Große Menge raumbezogener 3D-Daten im Web
Keine Definition eines bestimmten Formates
Stellt ein Framework bereit zur Bestimmung der Interoperabilität

Seit 2008 OGC Standard
Offenes Datenmodell und XML-basiertes Format
Speicherung und Austausch von virtuellen 3D-Stadtmodellen
Gemeinsame Definition der grundlegenden Bestandteile eines 3D-Stadtmodells
CityJSON: kompakte Beschreibung von CityGML Daten

CityGML (City Geography Markup Language, seit 2008 OGC Standard, Version 3 soll 2019 verabschiedet werden)

Offenes Datenmodell und XML-basiertes Format für die Speicherung und den Austausch von virtuellen 3D-Stadtmodellen
gemeinsame Definition der grundlegenden Entitäten, Attribute und Beziehungen eines 3D-Stadtmodells
Wiederverwendung der gleichen Daten in verschiedenen Anwendungsbereichen soll ermöglicht werden
CityJSON ermöglicht eine kompaktere Beschreibung von CityGML-Architektur; Implementierung der Stadtobjekte an letzter Stelle der Baumstruktur führt zu Verinfachung, ohne dass Informationen verloren gehen

I3S (Indexed 3D Scene Layers)

Seit 2017 OGC Standard
Spezifikation für Speicherung und Übertragung von heterogenen 3D (Geo-)Daten
Unterstützung von diversen 3D Datentypen (3D Objekte, Punktwolken, etc.)
Scene Layer (Container für Daten)
Scene Service (REST API) vs. Scene Layer Package (SLPK)

Web3D Consortium

X3D (Extensible 3D Graphics)

Ersetzt das Vorgängerformat VRML (Virtual Reality Modelling Language)
Standard für 3D-Grafiken im Web
Kompatibel mit anderen Standards (DOM, XML)
Szenen werden direkt in das HTML-Markup geschrieben
Bevorstehendes Upgrade auf Version 4

X3D (Extensible 3D Graphics)

VRML-Format
offener internationaler Standard (ISO-zertifiziert) für 3D-Grafiken im Web
animierte Objekte aus verschiedenen Blickwinkeln ansehen
kompatibel mit anderen Open-Source-Standards wie DOM, XML
Szenen werden direkt in das HTML-Markup geschrieben
Bevorstehendes Upgrade auf Verson 4 soll eine noch einfachere Veröffentlichung von interaktiven 3D-Inhalten an beliebigen Stellen im Web, ohne Einschränkungen oder Plugins ermöglichen

Beispiel einer 3D-Box mit X3D


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.3//EN" "http://www.web3d.org/specifications/x3d-3.3.dtd">
<X3D profile='Interchange' version='3.3'  xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' xsd:noNamespaceSchemaLocation =' http://www.web3d.org/specifications/x3d-3.3.xsd '>
 <head>
  <meta name='title' content='Box.x3d'/>
  <meta name='description' content='Simple Box shape used as test scene for GeoInline/Inline loading and unloading.'/>
 </head>
 <Scene>
  <Transform translation='-1.0 0.0 0.0'>
   <Shape>
    <Appearance>
     <Material diffuseColor='0.0 1.0 0.0'/>
    </Appearance>
   <Box/>
  </Shape>
  </Transform>
 </Scene>
</X3D>

X3D Beispiel (Box)

Bisher ohne Standardisierung

CZML (Cesium Language)

JSON basiertes Format
Punkte, Flächen, Modelle und andere grafische Grundelemente
Beschreibung einer raumzeitlich-dynamischen grafischen Szene
Effizientes Streaming & einfach zu parsen
Hauptsächlich zur Anzeige im Browser über CesiumJS

Beispiel zur Positionierung eines Punktes mit CZML


{
  "id": "point",
  "availability":"2012-08-04T16:00:00Z/2012-08-04T16:05:00Z",
  "position": {
    "epoch": "2012-08-04T16:00:00Z",
    "cartographicDegrees": [
      0, -70, 20, 150000,
      100, -80, 44, 150000,
      200, -90, 18, 150000,
      300, -98, 52, 150000
    ]
  },
  "point": {
    "color": {
      "rgba": [255, 255, 255, 128]
    },
    "pixelSize": 15
  }
}

Seit 2016 OGC Community Standard, auf dem Weg zum OGC Standard
Konzipiert für das Streaming und Rendern von 3D-Inhalten auf einen Globus
Photogrammetrie, 3D-Gebäude, BIM/CAD (Bauwerksdatenmodellierung) und Punktwolken
Definiert eigene Binärfomate für das Streaming
Styling-Spezifikationen

3D Tiles (seit 2016 OGC Community Standard)

Konzipiert für das Streaming und Rendern von einer großen Menge an 3D-Inhalten auf einen Globus
insbesondere Photogrammetrie, 3D-Gebäude, BIM/CAD (Bauwerksdatenmodellierung) und Punktwolken
beinhaltet außerdem Styling-Spezifikationen, die auf die Tilesets angewendet werden können
Tiles sind in einer Baumstruktur angeordnet, um das Konzept der des "Hierarchical Level of Detail" (HLOD) für optimales Rendern räumlicher Daten zu unterstützen
Dafür wurden eigene binäre Tile-Formate entwickelt:

3D Tiles

b3dm (Batched 3D Model)
- heterogene 3D-Modelle
- z.B. für verschiedene Gebäude in einer Stadt
i3dm (Instanced 3D Model)
- effizientes Streaming und Rendern einer großen Anzahl von Modellen mit geringfügigen Abweichungen

3D Tiles

pnts (Point Cloud)
- effizientes Streaming von Punktwolken zur 3D-Visualisierung
cmpt (Composite)
- flexibles Streaming kombinierter, heterogener Datensätze
- z.B. aus b3dm- und i3dm-Modellen

3D Tiles

Hierarchical Level of Detail (HLOD)
zur optimalen Wiedergabe räumlicher Daten

JPEG of 3D
Konzipiert für das Streaming und Rendern von 3D-Inhalten auf einen Globus
Besteht aus:
- Einer JSON Datei (.gltf), Szenenbeschreibung & Verweis auf externe Dateien
- Binärdateien (.bin), Geometrie- und Animationsdaten
- Bilddateien (.jpg, .png, usw.), Texturen

glTF (GL Transmission Format)

"JPEG of 3D"
Spezifikation zum effizienten Übertragen und Laden von 3D-Szenen und -Modellen
Minimiert die Größe von 3D-Objekten
besteht im Grunde aus:
- einer JSON Datei (.gltf), die eine vollständige Szenenbeschreibung enthält und auf externe Daten verweist
- Binärdateien (.bin) mit Geometrie- und Animationsdaten und
- Bilddateien (.jpg, .png usw.) für die Texturen
Konvertierung in einzelne Binärdatei (.glb) möglich

Vergleich von Bibliotheken

three.js

three.js Beispiel

x3dom

x3dom Beispiel

CesiumJS

CesiumJS Beispiel (History of Wildfire Severity, oregonhowl.org)

CesiumJS 3D Tiles

CesiumJS Beispiel (3D Tiles)

Zusammenfassung

	three.js	x3dom	CesiumJS
Beispiele/Tutorials	✔	✔	✔
Dokumentation & API	✔	✔	✔
Support Community	✔	◯	✔
Updates	✔	◯	✔
Raumbezug	❌	❌	✔

Beispiele: Alle Projekte verlinken Beispiele (auch auf externe Projekte), oder Tutorials, CesiumJS stellt mit dem Sandcastle die Möglichkeit zur direkten Anpassung der Beispiele bereit
Dokumentation und API in CesiumJS und x3dom getrennt, Three.js hingegen bindet die API direkt in die Dokumentation ein
kommerzielle Plattform nur bei Cesium mit der Ion-Plattform verfügbar (Speicherplatz und Tiling Service, persönlicher Support oder individuelle Lösungen)
die größte Support-Community liegt wohl bei three.js vor, bei CesiumJS werden Fragen im Forum hauptsächlich von Entwicklern des CesiumJS-Projektes beantwortet
three.js und CesiumJS werden regelmäßig gepflegt und veröffentlicht, aktuelle Versionen von x3dom zur Zeit nur im developer branch
für geographische Fragestellungen bietet sich CesiumJS an, aufgrund der Vollständigkeit als Software für 3D Prozessierung, Darstellung auf dem Globus sowie eine Navigation durch Raum und Zeit
three.js und x3dom bieten keine implementierte Unterstützung für die Einbindung von 3D-Szenen im geographischen Kontext

Zusammenfassung

Erhöhte Aktivitäten im Kontext der Web-Visualisierung von 3D-Inhalten erkennbar
Viele unterschiedliche (standardisierte) Datenformate
Teils schwer oder nicht untereinander austauschbar
Alle Bibliotheken arbeiten ohne zusätzliche Plugins (WebGL)

Vielen Dank

Fragen & Anmerkungen?

Impressum

Autoren

Michael Holthausen
terrestris GmbH & Co. KG
Kölnstr. 99
53111 Bonn
holthausen@terrestris.de

Daniel Koch

koch@terrestris.de

Lizenz

Diese Folien sind unter CC BY-SA veröffentlicht.

Vortragsfolien, PDF-Version, git repository