geo-scale data visualization in a web browser
TRANSCRIPT
![Page 2: Geo-Scale Data Visualization in a Web Browser](https://reader030.vdocuments.mx/reader030/viewer/2022020703/61fb37c52e268c58cd5b8e58/html5/thumbnails/2.jpg)
About Me
http://www.seas.upenn.edu/~pcozzi/
Developer Lecturer Author Editor
![Page 3: Geo-Scale Data Visualization in a Web Browser](https://reader030.vdocuments.mx/reader030/viewer/2022020703/61fb37c52e268c58cd5b8e58/html5/thumbnails/3.jpg)
About Cesium
• A WebGL virtual globe and map engine• Open source - Apache 2.0 license
![Page 4: Geo-Scale Data Visualization in a Web Browser](https://reader030.vdocuments.mx/reader030/viewer/2022020703/61fb37c52e268c58cd5b8e58/html5/thumbnails/4.jpg)
Quick Demo
Demo
![Page 5: Geo-Scale Data Visualization in a Web Browser](https://reader030.vdocuments.mx/reader030/viewer/2022020703/61fb37c52e268c58cd5b8e58/html5/thumbnails/5.jpg)
Today
• WebGL in general• Cesium in particular
– Architecture and applications
![Page 6: Geo-Scale Data Visualization in a Web Browser](https://reader030.vdocuments.mx/reader030/viewer/2022020703/61fb37c52e268c58cd5b8e58/html5/thumbnails/6.jpg)
WebGL for Web Developers
• The web has– Text– Images– Video
• What is the next media-type?
![Page 7: Geo-Scale Data Visualization in a Web Browser](https://reader030.vdocuments.mx/reader030/viewer/2022020703/61fb37c52e268c58cd5b8e58/html5/thumbnails/7.jpg)
WebGL for Graphics Developers• We want to support
– Windows, Linux, Mac– Desktop and mobile
• How?
WebGL for Desktop Developers
![Page 8: Geo-Scale Data Visualization in a Web Browser](https://reader030.vdocuments.mx/reader030/viewer/2022020703/61fb37c52e268c58cd5b8e58/html5/thumbnails/8.jpg)
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
![Page 9: Geo-Scale Data Visualization in a Web Browser](https://reader030.vdocuments.mx/reader030/viewer/2022020703/61fb37c52e268c58cd5b8e58/html5/thumbnails/9.jpg)
WebGL
Image from http://www.khronos.org/assets/uploads/developers/library/2011-siggraph-mobile/Khronos-and-the-Mobile-Ecosystem_Aug-11.pdf
• OpenGL ES 2.0 for JavaScript– Seriously, JavaScript
![Page 10: Geo-Scale Data Visualization in a Web Browser](https://reader030.vdocuments.mx/reader030/viewer/2022020703/61fb37c52e268c58cd5b8e58/html5/thumbnails/10.jpg)
WebGL Performance
• Performance can be very good– The GPU is still doing the rendering– Push work onto
• The GPU• Servers• Web workers
See http://www.youtube.com/watch?v=rfQ8rKGTVlg
![Page 11: Geo-Scale Data Visualization in a Web Browser](https://reader030.vdocuments.mx/reader030/viewer/2022020703/61fb37c52e268c58cd5b8e58/html5/thumbnails/11.jpg)
WebGL Performance
Image from http://openglinsights.com/
32x32 64x64 128x128
C++ 1.9 ms 6.25 ms 58.82 ms
Chrome 18 27.77 ms 111.11 ms 454.54 ms
x slowdown 14.62 17.78 7.73
32x32 64x64 128x128
C++ 3.33 ms 9.43 ms 37.03 ms
Chrome 18 12.82 ms 22.72 ms 41.66 ms
x slowdown 3.85 2.41 1.13
CPU-intensive
GPU-intensive (256 draws per frame)
![Page 12: Geo-Scale Data Visualization in a Web Browser](https://reader030.vdocuments.mx/reader030/viewer/2022020703/61fb37c52e268c58cd5b8e58/html5/thumbnails/12.jpg)
WebGL Stats
� In October, 2012
http://webglstats.com/
![Page 13: Geo-Scale Data Visualization in a Web Browser](https://reader030.vdocuments.mx/reader030/viewer/2022020703/61fb37c52e268c58cd5b8e58/html5/thumbnails/13.jpg)
Desktop WebGL Support
� In October, 2012
- 3rd Party Plugins available
See http://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation
![Page 14: Geo-Scale Data Visualization in a Web Browser](https://reader030.vdocuments.mx/reader030/viewer/2022020703/61fb37c52e268c58cd5b8e58/html5/thumbnails/14.jpg)
Android WebGL Support
� In October, 2012
Stock Browser• Demo at SIGGRAPH 2011
For Cesium, see our mobile page
![Page 15: Geo-Scale Data Visualization in a Web Browser](https://reader030.vdocuments.mx/reader030/viewer/2022020703/61fb37c52e268c58cd5b8e58/html5/thumbnails/15.jpg)
Mobile WebGL Support
� In October, 2012
See http://news.cnet.com/8301-30685_3-20071902-264/apple-signs-up-for-webgl-graphics-in-iads/
In iOS 5 for iAd developers
![Page 16: Geo-Scale Data Visualization in a Web Browser](https://reader030.vdocuments.mx/reader030/viewer/2022020703/61fb37c52e268c58cd5b8e58/html5/thumbnails/16.jpg)
HTML5 on Mobile
• Touch events– Test with http://www.snappymaria.com/misc/TouchEventTest_v2.html
• Geolocation• Device orientation and motion
� The future of HTML5 and WebGL on mobile is very promising
![Page 17: Geo-Scale Data Visualization in a Web Browser](https://reader030.vdocuments.mx/reader030/viewer/2022020703/61fb37c52e268c58cd5b8e58/html5/thumbnails/17.jpg)
WebGL on Your System
• http://www.webglreport.com
![Page 18: Geo-Scale Data Visualization in a Web Browser](https://reader030.vdocuments.mx/reader030/viewer/2022020703/61fb37c52e268c58cd5b8e58/html5/thumbnails/18.jpg)
N-Body Simulationhttp://www.youtube.com/watch?v=F7YSQxz3j7o
http://www.khronos.org/webcl/Prototypes for Firefox and WebKit are available
WebCL
• OpenCL bindings for JavaScript are coming.
![Page 19: Geo-Scale Data Visualization in a Web Browser](https://reader030.vdocuments.mx/reader030/viewer/2022020703/61fb37c52e268c58cd5b8e58/html5/thumbnails/19.jpg)
Cesium
• Builds on WebGL to provide a JavaScript virtual globe and map for the web
Demo Demo
![Page 20: Geo-Scale Data Visualization in a Web Browser](https://reader030.vdocuments.mx/reader030/viewer/2022020703/61fb37c52e268c58cd5b8e58/html5/thumbnails/20.jpg)
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 - http://git.io/czml
![Page 21: Geo-Scale Data Visualization in a Web Browser](https://reader030.vdocuments.mx/reader030/viewer/2022020703/61fb37c52e268c58cd5b8e58/html5/thumbnails/21.jpg)
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":"2012-03-15T22:32:58.828Z/2012-03-15T22:35:59.807Z","boolean":true
},{"interval":"2012-03-15T22:35:59.807Z/2012-03-15T23:17:33.032Z","boolean":false
},},
// ...next slide
![Page 22: Geo-Scale Data Visualization in a Web Browser](https://reader030.vdocuments.mx/reader030/viewer/2022020703/61fb37c52e268c58cd5b8e58/html5/thumbnails/22.jpg)
CZML// ...previous slide
// Sampled properties, value is interpolated across time"position":{"interpolationAlgorithm":"LAGRANGE","interpolationDegree":5,"epoch":"2012-03-15T10:00:00Z","cartesian":[0.0,5758814.86335812,68448.0918072779,-4082012.64698081,60.0,5491825.89961442,-36646.1482569654,-4436012.6589284,120.0,5201672.72301352,-139154.225693654,-4771903.02821491
]}
]
![Page 23: Geo-Scale Data Visualization in a Web Browser](https://reader030.vdocuments.mx/reader030/viewer/2022020703/61fb37c52e268c58cd5b8e58/html5/thumbnails/23.jpg)
Cesium Architecture
https://github.com/AnalyticalGraphicsInc/cesium/wiki/Architecture
![Page 24: Geo-Scale Data Visualization in a Web Browser](https://reader030.vdocuments.mx/reader030/viewer/2022020703/61fb37c52e268c58cd5b8e58/html5/thumbnails/24.jpg)
CZML Architecture
CZML
Local .czml
Remote .czml
KML, Shapefile, ...
Open source CZML writer: https://github.com/AnalyticalGraphicsInc/czml-writer
• Static CZML
![Page 25: Geo-Scale Data Visualization in a Web Browser](https://reader030.vdocuments.mx/reader030/viewer/2022020703/61fb37c52e268c58cd5b8e58/html5/thumbnails/25.jpg)
CZML Architecture
CZMLServer push
• Real-Time CZML
![Page 26: Geo-Scale Data Visualization in a Web Browser](https://reader030.vdocuments.mx/reader030/viewer/2022020703/61fb37c52e268c58cd5b8e58/html5/thumbnails/26.jpg)
CZML Architecture
CZMLServer
• Streaming CZML
Client-side buffering and prefetching
![Page 27: Geo-Scale Data Visualization in a Web Browser](https://reader030.vdocuments.mx/reader030/viewer/2022020703/61fb37c52e268c58cd5b8e58/html5/thumbnails/27.jpg)
CZML Architecture
CZML
Other visualizationclients
Demo
![Page 28: Geo-Scale Data Visualization in a Web Browser](https://reader030.vdocuments.mx/reader030/viewer/2022020703/61fb37c52e268c58cd5b8e58/html5/thumbnails/28.jpg)
Terrain and Imagery
![Page 29: Geo-Scale Data Visualization in a Web Browser](https://reader030.vdocuments.mx/reader030/viewer/2022020703/61fb37c52e268c58cd5b8e58/html5/thumbnails/29.jpg)
Terrain and Imagery
![Page 30: Geo-Scale Data Visualization in a Web Browser](https://reader030.vdocuments.mx/reader030/viewer/2022020703/61fb37c52e268c58cd5b8e58/html5/thumbnails/30.jpg)
Terrain and Imagery
• Heightmap terrain subdivided into a quadtree• Hierarchical level of detail (HLOD)
![Page 31: Geo-Scale Data Visualization in a Web Browser](https://reader030.vdocuments.mx/reader030/viewer/2022020703/61fb37c52e268c58cd5b8e58/html5/thumbnails/31.jpg)
Terrain and Imagery
• Out-of-Core• HLOD• Backface culling• View frustum culling• Occlusion culling• Asynchronous requests• Web worker transforms
Images from http://www.virtualglobebook.com/
![Page 32: Geo-Scale Data Visualization in a Web Browser](https://reader030.vdocuments.mx/reader030/viewer/2022020703/61fb37c52e268c58cd5b8e58/html5/thumbnails/32.jpg)
Terrain and Imagery
Max Level Tiles Triangles Textures FPS
Whole-earth view 4 30 253,500 68 210
Top-down view 14 38 321,100 86 166
Horizon view 13 113 954,850 254 146
• Performance– Intel Core i7-860, NVIDIA GeForce GTS 250, 1920x1200
![Page 33: Geo-Scale Data Visualization in a Web Browser](https://reader030.vdocuments.mx/reader030/viewer/2022020703/61fb37c52e268c58cd5b8e58/html5/thumbnails/33.jpg)
Roadmap
• Improved mobile support• COLLADA models• …• Full list:
https://github.com/AnalyticalGraphicsInc/cesium/wiki/Roadmap
![Page 34: Geo-Scale Data Visualization in a Web Browser](https://reader030.vdocuments.mx/reader030/viewer/2022020703/61fb37c52e268c58cd5b8e58/html5/thumbnails/34.jpg)
Cesium
Contributors• Matt Amato @matt_amato• Dan Bagnell• Kristian Calhoun @KristianCalhoun• Patrick Cozzi @pjcozzi• Tom Fili• Matt Ford• Scott Hunter• Ian Lilley• Ed Mackey @emackey• Kevin Ring• Frank Stoner
Demos• cesium.agi.com
Code• github.com/AnalyticalGraphicsInc/cesium
![Page 35: Geo-Scale Data Visualization in a Web Browser](https://reader030.vdocuments.mx/reader030/viewer/2022020703/61fb37c52e268c58cd5b8e58/html5/thumbnails/35.jpg)
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– [email protected]