Download as PDF, PPTX
Uploaded byCamptocamp
AGIT 2017: Cesium 1.35, WebGL Virtual Globe and Map Engine
This document provides an overview of CesiumJS, an open-source JavaScript library for building virtual globes and maps using WebGL. It describes CesiumJS's capabilities such as rendering 3D globes and maps, supporting different terrain and imagery sources, visualizing 3D models and tiles, and integrating with OpenLayers for 2D/3D mapping. Examples of CesiumJS applications are also presented.
More Related Content
Similar to AGIT 2017: Cesium 1.35, WebGL Virtual Globe and Map Engine
![[Geocom2017] geOrchestra and ngeo](https://cdn.slidesharecdn.com/ss_thumbnails/geocom2017camptocampgeorchestrangeo-170629083949-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Geocom2017] Georchestra & monitoring](https://cdn.slidesharecdn.com/ss_thumbnails/geocom2017camptocampgeorchestramonitoring-170629082424-thumbnail.jpg?width=640&height=640&fit=bounds)
AGIT 2017: Cesium 1.35, WebGL Virtual Globe and Map Engine
- 1. WebGL Virtual Globeand Map Engine AGIT 2017, Cesium Version 1.35 Emmanuel Belo [email protected] +41 21 619 10 25 @emmanuel_belo
- 2.
- 3.
- 4. www.camptocamp.com CesiumJS ● Javascript Softwareusing WebGL ○ 3D virtual globe ○ 2D map ○ 2.5D Oblique ● 3D Tiles ● Different Terrain elevation profile sources ● Time-dynamic Scene with CZML ● Overlays: ○ Raster: WMS, TMS, OSM, Bing & Esri ○ Vector: glTF, CZML, KML, Shapefiles ● Extensible with plugins 4
- 5. www.camptocamp.com Web Graphics Library ●Javascript API for rendering interactive 2D/3D graphics within the web browser ● Hardware acceleration using the Graphics Processing Unit (GPU) WebGL Programs consist of : ○ Control code written in Javascript (CPU) and ○ Shader code that is executed on a computer's GPU ● No Plugin ! Also in IE11 !!! ● Mobile device compatible ○ iPhone/iPad ○ Samsung Sx 5
- 6.
- 7. www.camptocamp.com Terrain Tiles Stream high-resolutionglobal terrain using the open quantized-mesh format or traditional height-maps, or plug in your own. quantized mesh VS height-maps src: http://blog.mastermaps.com/2014/10/3d-terrains-with-cesium.html 7
- 8.
- 9. www.camptocamp.com High precise DEM(quantized mesh) 9
- 10. www.camptocamp.com Imagery layers ● Streamimagery using a wide array of open standards and custom tiling schemes. ● Examples: ○ Web Map Service (WMS) - OGC ○ Web Map Tile Service (WMTS) - OGC ○ Tile Map Service (TMS) ○ OpenStreetMap or any sleepy map ○ Bing Maps - Uses Bing Maps REST Services to access tiles ○ Esri ArcGIS MapServer - Uses the ArcGIS Server REST API ○ Mapbox - Uses the Mapbox API to access tiles ○ Standard image files - Create a tile from a single georeferenced image ○ Custom tiling schemes - Using UrlTemplateImageryProvider, we can connect to a wide array of imagery sources by using a URL template. 10
- 11.
- 12. www.camptocamp.com 3D Models Visualize 3Dmodels using glTF, the runtime asset format for WebGL. 12
- 13. www.camptocamp.com graphic language TransmissionFormat ● JSON used to describe node hierarchy ● Node hierarchy refers to EXTERNAL binary asset blobs ○ Geometry, Texture, Material ● Non-compressed asset blob format ○ Direct load in WebGL ● Extensible ○ Streaming and compression 13
- 14. www.camptocamp.com 3D Tiles Use 3DTiles to stream, style, and interact with heterogeneous 3D data, including photogrammetry models, 3D buildings, CAD and BIM exterior and interiors, and point clouds. 14
- 15. www.camptocamp.com Vectors and geometry LoadKML, GeoJSON, TopoJSON, and CZML. Use the Cesium API directly to draw a wide array of features and geometries. 15
- 16. www.camptocamp.com Clustered POIs overlays(geoJSON) 16
- 17. www.camptocamp.com Time-dynamic visualization See ourfirst-class support for high-fidelity time-dynamic simulation, real-time telemetry streaming, and 4D visualization. http://apps.agi.com/SatelliteViewer/?Status=Operational 17
- 18.
- 19. www.camptocamp.com 3D Web Expectation(2014) ● 3D Scenes ○ Aerial imagery and terrain ○ Buildings with textures ○ Label and marker ○ Rich interaction (Navigate, pick, popup, measure, usw.) ○ Global perimeter, higher local resolution ● Technology ○ Web (no plugin), Cross Platform and Cross Device ○ Open Standards and Formats ○ Open Source ● 2D-3D seamless transition 19
- 20. www.camptocamp.com ol-cesium ● Write once,use in 2D and 3D ● Receive and share with the community ● Easiest way to add 3D to an OpenLayers 3 map ● Start interacting in one world and continue in the other ● It literally brings a new dimension to your maps 20
- 21. www.camptocamp.com OpenLayers - Cesiumintegration library ● Create your map using OpenLayers, and visualize it on a globe with Cesium. ● Switch smoothly between 2D and 3D and synchronize: ○ Map context (bounding box and zoom level); ○ Raster data sources; ○ Vector data sources in 2D and 3D; ○ Map selection (selected items). ● The library is configurable and extensible and allows: ○ Lazy or eager loading of Cesium ○ Limiting Cesium resource consumption (idle detection) 21
- 22.
- 23.
- 24. www.camptocamp.com ol-cesium ● Custom 3Dterrain - different projections ● Optimized for lots of users ● CPU/GPU resource saving by stopping the render loop ● Workaround for lines on terrain 24
- 25. www.camptocamp.com ol-cesium ● Vector clustering:top quality, some geojsons instead of millions of raster tiles ● 3D vector clustering with 30'000 points ● Fog: reduce details, improve performance 25
- 26. www.camptocamp.com Topographical catchment areasof Swiss waterbodies 26
- 27.
- 28. www.camptocamp.com ol-cesium ● Lazy loading ●3D tiles: buildings, bridges ● Own synchronizers (raster => vector, different projections) ● Immersive views 28
- 29. www.camptocamp.com Meet the community ●Main website: http://www.cesiumjs.org ● GitHub: ○ https://github.com/AnalyticalGraphicsInc/cesium ○ https://github.com/openlayers/ol-cesium ● Mailing lists: https://groups.google.com/forum/#!forum/cesium-dev ● Twitter: @CesiumJS ● Professional Services: http://www.camptocamp.com/en/solution/virtual-globe-3d/ 29