Geo-Scale Data Visualization in a Web Browser. Patrick Cozzi pcozzi@agi.com

Transcription

1 Geo-Scale Data Visualization in a Web Browser Patrick Cozzi pcozzi@agi.com

2 About Me Developer Lecturer Author Editor

3 About Cesium A WebGL virtual globe and map engine Open source - Apache 2.0 license

4 Quick Demo Demo

5 Today WebGL in general Cesium in particular Architecture and applications

6 WebGL for Web Developers The web has Text Images Video What is the next media-type?

7 WebGL for Desktop Developers WebGL for Graphics Developers We want to support Windows, Linux, Mac Desktop and mobile How?

8 Bring 3D to the Masses Put it in on a webpage Does not require a plugin or install Does not require administrator rights Make it run on most GPUs

9 WebGL OpenGL ES 2.0 for JavaScript Seriously, JavaScript Image from

10 WebGL Performance Performance can be very good The GPU is still doing the rendering Push work onto The GPU Servers Web workers See

11 WebGL Performance 32x32 64x64 128x128 C ms 6.25 ms ms Chrome ms ms ms x slowdown CPU-intensive 32x32 64x64 128x128 C ms 9.43 ms ms Chrome ms ms ms x slowdown GPU-intensive (256 draws per frame) Image from

12 WebGL Stats In October,

13 Desktop WebGL Support In October, rd Party Plugins available See

14 Android WebGL Support In October, 2012 Stock Browser Demo at SIGGRAPH 2011 For Cesium, see our mobile page

15 Mobile WebGL Support In October, 2012 In ios 5 for iad developers See

16 HTML5 on Mobile Touch events Test with Geolocation Device orientation and motion The future of HTML5 and WebGL on mobile is very promising

17 WebGL on Your System

18 WebCL OpenCL bindings for JavaScript are coming. N-Body Simulation Prototypes for Firefox and WebKit are available

19 Cesium Builds on WebGL to provide a JavaScript virtual globe and map for the web Demo Demo

20 CZML Data-Driven visualization A streamable JSON scene description Describes the value of properties over time Intend to propose as an OGC standard Static, real-time, or streaming CZML Guide -

21 CZML [ { "id":"any unique identifier", // Static properties, value is constant across time "label":{ "text":"cesium", "verticalorigin":"center" // Interval properties, value is constant within intervals "show":[ { "interval":" t22:32:58.828z/ t22:35:59.807z", "boolean":true }, { "interval":" t22:35:59.807z/ t23:17:33.032z", "boolean":false }, }, //...next slide

22 CZML //...previous slide ] // Sampled properties, value is interpolated across time "position":{ "interpolationalgorithm":"lagrange", "interpolationdegree":5, "epoch":" t10:00:00z", "cartesian":[ 0.0, , , , 60.0, , , , 120.0, , , ] }

23 Cesium Architecture

24 CZML Architecture Static CZML Local.czml Remote.czml CZML KML, Shapefile,... Open source CZML writer:

25 CZML Architecture Real-Time CZML Server push CZML

26 CZML Architecture Streaming CZML Server CZML Client-side buffering and prefetching

27 CZML Architecture CZML Other visualization clients Demo

28 Terrain and Imagery

29 Terrain and Imagery

30 Terrain and Imagery Heightmap terrain subdivided into a quadtree Hierarchical level of detail (HLOD)

31 Terrain and Imagery Out-of-Core HLOD Backface culling View frustum culling Occlusion culling Asynchronous requests Web worker transforms Images from

32 Terrain and Imagery Performance Intel Core i7-860, NVIDIA GeForce GTS 250, 1920x1200 Max Level Tiles Triangles Textures FPS Whole-earth view , Top-down view , Horizon view ,

33 Roadmap Improved mobile support COLLADA models Full list:

34 Cesium Demos cesium.agi.com Code github.com/analyticalgraphicsinc/cesium Contributors Matt Dan Bagnell Kristian Patrick Tom Fili Matt Ford Scott Hunter Ian Lilley Ed Kevin Ring Frank Stoner

35 Closing Thoughts JavaScript and WebGL are the platform for thin-client visualization No install, no plugin, no admin rights Cross-platform, cross-device Cesium is one example Contact Patrick Cozzi