1 of 13

„Performante Echtzeit-Geovisualisierung im Web am Beispiel des Projekts VerbaAlpina”

​

Dr. David Englmeier

2 of 13

Übersicht

  • Interaktive Echtzeit Visualisierungen
  • Ansprüche verschiedener Nutzergruppen
  • Rendering Technologien im Web
  • WebGL Implementierung im Detail + Demos

2

3 of 13

Echtzeit Visualisierung

Performante Visualisierung mit direktem User Feedback

​

  • > 60 Bilder pro Sekunde
  • Direkte Reaktion auf User Eingabe
  • Häufig 3D Grafik, aber auch zweidimensional sinnvoll

​

3

4 of 13

Usergruppen

Crowdsourcing User (Laien) VS. Wissenschaftliche Mitarbeiter

​

  • Unterschiedliche Ansprüche: Einfachheit VS. Komplexe Funktionalität
  • User Experience: Geradlinig VS. Vielfalt an Optionen
  • Überschneidung: große Menge an Interaktiven Daten

​

4

5 of 13

Rendering Technologien im Web

5

Canvas

SVG

HTML

WebGL

Komplexität

Leistungsfähigkeit

6 of 13

WebGL Setup zur Geovisualisierung

Komponenten:

  • Leaflet.js (https://github.com/Leaflet/Leaflet)
  • Leaflet.PixiOverlay (https://github.com/manubb/Leaflet.PixiOverlay)
  • Pixi.js (https://github.com/pixijs)
  • Performante Eigenimplementierung (https://github.com/VerbaAlpina/Interactive-Map_Plugin)

​

​

​

7 of 13

Funktionsweise

Leaflet BaseLayer (HTML <img>)

Canvas (HTML)

WebGL (Pixi.js)

WebGL Shader Implementierung

Weitergabe von

User Input =>�Parallele Bewegung

8 of 13

WebGL Grafikpipeline

8

CPU Programm (JS)

WebGL Programm (low-level)

Daten / Updates

GPU-Programm�GLSL Shader (high-level)

Rendering

Unidirektionaler Ablauf!

9 of 13

WebGL Implementierung

  • Elemente: Linien, Linienzüge, Polygone und Marker
  • WebGL Drawing-Modes: Dreiecke, Linien (1px!), Punkte + Texturen (Bilder)
  • => Linien (mit Stärke) und Polygone triangulieren (CPU), bevor an GPU

​

​

9

10 of 13

WebGL Implementierung

  • Triangulation von Linien-(Zügen) und Polygonen:

​

​

10

11 of 13

WebGL Implementierung

  • Texturen und Inverse Skalierung

​

​

  • Skalierung i.d.R auf alle Objekte angewendet => konstante Objekte invers skalieren (Shader)!
  • Im Demo: Linien sowie Marker

​

​

11

12 of 13

Fazit

  • Komplexe Implementierung => Große Leistungsfähigkeit
  • Uniforme Lösungen schwierig für Karten-Tools => Selbst Implementierung nötig
  • Grundlagen der Grafikprogrammierung sehr hilfreich

​

​

12

13 of 13

Demo:

  • Interaktive Karte
  • Ausbildungsmodalitäten für Sprachdaten
  • Crowdsourcing Tool

​

​

13