Download - WebGL for Dynamic Virtual Globes - Cesium
![Page 2: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/2.jpg)
No anisotropic filteringOverview
● Cesium○ A WebGL virtual globe for visualizing dynamic data
● Today
○ Demos - lots of em○ Architecture○ Selected implementation details○ Future plans
![Page 3: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/3.jpg)
Lots of Satellites Demo
![Page 5: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/5.jpg)
Cesium Architecture
Scene
Renderer
Core
Visualizers Buffers
Local file
Server.czm
KMLServer-side Computation
...
.czm
Client
![Page 6: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/6.jpg)
Cesium Architecture - Core
Scene
Renderer
Core
● Core - client-side number crunching○ Matrices, vectors, quaternions○ Transformations○ Sun position○ Splines○ Triangulation*
○ Subdivision surfaces○ ...
* We might move this server-side
![Page 7: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/7.jpg)
Cesium Architecture - Renderer
Scene
Renderer
Core
● Renderer - a thin abstraction over WebGL○ Shader programs
■ Built-in uniforms and functions○ Textures and cube maps○ Buffers and vertex arrays○ Render states○ Framebuffers
![Page 8: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/8.jpg)
Cesium Architecture - Scene
Scene
Renderer
Core
● Scene - Virtual globe constructs○ Streaming high-resolution imagery○ Polylines, polygons, billboards, labels○ Materials*
○ Animations○ Cameras
* Might belong in Renderer. We're still thinking about it. :)
![Page 9: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/9.jpg)
Sandbox Demo
![Page 10: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/10.jpg)
Demo - One API, Multiple Views
● 3D● 2D● Columbus view - 2.5Dish
![Page 11: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/11.jpg)
3D
![Page 12: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/12.jpg)
2D
![Page 13: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/13.jpg)
Columbus View
Columbus View (Pat. Pend.)
![Page 14: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/14.jpg)
CZM
● CZM○ A streamable JSON scene description○ Describes the value of properties over time○ Intended to become an OGC standard○ Implemented using Server-Sent Events*
*http://dev.w3.org/html5/eventsource/
Server
push
Cesium Client
buffering and prefetching
![Page 15: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/15.jpg)
CZM
[{ "id": "any unique identifier", "properties": [{ "name": "label_text", // Static properties, value is constant across time
"value": "Iridium 77" },{ "name": "billboard_color", // Interval properties, value is constant within intervals
"intervals": [{ "start": {"day": 2455971, "secondsOfDay": 35220.59}, "stop": {"day": 2455971, "secondsOfDay": 37020.59}, "value": { "a": 255, "r": 255, "g": 0, "b": 0 } }] },{ "name": "position", // Sampled properties, value is interpolated across time
"times": [ {"day": 2455971, "secondsOfDay": 35220.59}, {"day": 2455971, "secondsOfDay": 35340.59}
], "values": [ {"x": 5389687.9027777817, "y": 361715.80718983803, "z": -4702183.7113378914}, {"x": 5928861.67967367, "y": 420278.37160484237, "z": -3994351.3905959018}
], "interpolationType": "LAGRANGE", "interpolationDegree": 5 }]}]
![Page 16: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/16.jpg)
CZM Demos
● Content is king.
Server.czm
KMLServer-side Computation
...
Cesium Client
![Page 17: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/17.jpg)
Selected Implementation
Details
![Page 18: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/18.jpg)
No anisotrop ic filteringHigh-Resolution Imagery Rendering
● Tiles requested based on pixel error● Throttled texture creation*
● Cracks between tiles filled in screen space
*http://media.tojicode.com/webglCamp4/
![Page 19: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/19.jpg)
Dusk / dawnHalo
Yellow shows cracks between tiles
![Page 20: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/20.jpg)
Dusk / dawnHalo
Two-pass Gaussian blur fills cracks in screen space
![Page 21: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/21.jpg)
No anisotrop ic filteringDepth Plane
● How do we draw polylines, polygons, etc. on the surface of the globe?○ Can't write gl_FragDepth in WebGL yet.
viewer
Subdivided polyline is actually under the surface
![Page 22: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/22.jpg)
Dusk / dawnHaloThe plane intersects the ellipsoid at the horizon
![Page 23: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/23.jpg)
Dusk / dawnHaloRay casting the ellipsoid within the plane discards fragments in space
![Page 24: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/24.jpg)
Dusk / dawnHaloThe plane is rendered with depth only, so it occludes objects on the backface of the ellipsoid
![Page 25: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/25.jpg)
No anisotropic filteringAnisotropic Filtering
● Uses more texture samples to improve visual quality for horizon views○ WEBKIT_EXT_texture_filter_anisotropic○ MOZ_EXT_texture_filter_anisotropic
![Page 26: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/26.jpg)
No anisotropic filtering
![Page 27: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/27.jpg)
With anisotropic filtering
![Page 28: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/28.jpg)
FuturePlans
![Page 29: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/29.jpg)
Open Source
● Cesium will be open source ● Code available as soon as April
○ github.com/AnalyticalGraphicsInc/cesium
● Mailing lists available now
● Development - groups.google.com/d/forum/cesium-dev
● Announcements - groups.google.com/d/forum/cesium-announce
![Page 30: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/30.jpg)
● Please join our developer community○ grassroots opportunity
Contributors
Matt Amato @matt_amatoDan BagnellKristian Calhoun @KristianCalhounPatrick Cozzi @pjcozziMatt Ford
Scott HunterEd Mackey @emackeyKevin RingChris SeltzerFrank Stoner
![Page 31: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/31.jpg)
Roadmap
2012 April August
Code publicly available End user release● Terrain● 3D models - COLLADA● Improved precision● Improved visual quality● RequireJS
![Page 32: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/32.jpg)
WebGL Reporthttp://analyticalgraphicsinc.github.com/webglreport/
● Implementation-dependent maximums
● Supported extensions
![Page 33: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/33.jpg)
Resources
● Demos: cesium.agi.com
● Mailing Lists
● Development - groups.google.com/d/forum/cesium-dev
● Announcements - groups.google.com/d/forum/cesium-announce
● Source code (soon): github.com/AnalyticalGraphicsInc/cesium
![Page 34: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/34.jpg)
Bonus Slides(time permitting)
![Page 35: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/35.jpg)
Cesium Architecture - Renderer
● Example Built-in uniforms and functions ● Create shaders in one line of JavaScript
gl_Position = agi_modelViewProjection * position;v_positionWC = (agi_model * position).xyz;v_positionEC = (agi_modelView * position).xyz;v_normalEC = agi_normal * normal; // ... agi_ray ray = agi_ray(vec3(0.0), normalize(v_positionEC));agi_raySegment interval = agi_rayEllipsoidIntersectionInterval ( ray, ellipsoid);
var sp = context.getShaderCache().getShaderProgram(vs, fs);
![Page 36: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/36.jpg)
Cesium Architecture - Renderer
● Textures and uniforms○ Never worry about binding a texture○ Never call getUniformLocation on a uniform
that was optimized out
this.bumpTexture = context.createTexture2D({ source : bumpImage, pixelFormat : PixelFormat.LUMINANCE }); // ... var that = this;var uniforms = { u_bumpMap : function() { return that.bumpTexture; }, u_nightIntensity : function() { return 0.8; }};
![Page 37: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/37.jpg)
Cesium Architecture - Renderer
● Buffers and vertex arrays○ Simplify organizing vertex attributes
var mesh = BoxTessellator.compute({ dimensions : new Cartesian3(1.0, 2.0, 3.0)})); var va = context.createVertexArrayFromMesh({ mesh : mesh, bufferUsage : BufferUsage.STATIC_DRAW, vertexLayout : VertexLayout.INTERLEAVED});
![Page 38: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/38.jpg)
Cesium Architecture - Renderer
● Render states - no global state
var rs = context.createRenderState({ depthTest : { enabled : true }, cull : { enabled : true, face :CullFace.BACK }, blending : BlendingState.ALPHA_BLEND});
![Page 39: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/39.jpg)
Cesium Architecture - Renderer● Draw an object:
context.draw({ primitiveType:PrimitiveType.TRIANGLES, shaderProgram: sp, uniformMap: uniforms, vertexArray: va, renderState: rs});
context.beginDraw({ shaderProgram : sp, renderState : rs}); for ... context.continueDraw({ primitiveType :PrimitiveType.TRIANGLES, vertexArray : va[i], uniformMap : uniforms[i]}); context.endDraw();
● Or draw several:
![Page 40: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/40.jpg)
No anisotropic filteringBillboard Rendering
● Need to render up to 10,000s of viewport-aligned quads
![Page 41: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/41.jpg)
No anisotropic filteringBillboard Rendering
● Vertex shader determines each billboard's size● One batch for
○ Static billboards○ Dynamic billboards
● Batching enabled by use of a texture atlas, e.g.:
Image from www.virtualglobebook.com
![Page 42: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/42.jpg)
No anisotropic filteringBillboard Rendering
● Each vertex can have several attributes, e.g.:○ Position○ Color○ Pixel offset○ ...
● Large vertices make dynamic updates expensive○ Consider one interleaved buffer:
● What if we only update positions?
p0 c0 o0 p1 c1 o1 p2 c2 o2 p3 c3 o3
![Page 43: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/43.jpg)
No anisotropic filteringBillboard Rendering
● Replace one buffer with two organized based on update rate, e.g.:
● Re-balance static/dynamic based on usage
p0
c0 o0
p1
c1 o1
p2
c2 o2
p3
c3 o3
dynamic:
static:
![Page 44: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/44.jpg)
Label Rendering
● How do we render lots of labels?
![Page 45: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/45.jpg)
Label Rendering
![Page 46: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/46.jpg)
Atmospheric Scattering
● Using Sean O'Neil's Accurate Atmospheric Scattering from GPU Gems 2○ http://http.developer.nvidia.com/GPUGems2/gpugems2_chapter16.html
![Page 47: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/47.jpg)
Dusk / dawnHalo
![Page 48: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/48.jpg)
Dusk / dawnDusk / dawn
![Page 49: WebGL for Dynamic Virtual Globes - Cesium](https://reader031.vdocuments.us/reader031/viewer/2022021007/6203907cda24ad121e4ae1f3/html5/thumbnails/49.jpg)
Dusk / dawn