Web-Based Enterprise Data Visualization – a 3D Approach
-
Upload
truongdieu -
Category
Documents
-
view
222 -
download
2
Transcript of Web-Based Enterprise Data Visualization – a 3D Approach
![Page 1: Web-Based Enterprise Data Visualization – a 3D Approach](https://reader037.fdocuments.in/reader037/viewer/2022110110/58a2e9ab1a28abac368b9154/html5/thumbnails/1.jpg)
Web-Based Enterprise Data Visualization – a 3D Approach
Oleg Kachirski, Black and Veatch
![Page 2: Web-Based Enterprise Data Visualization – a 3D Approach](https://reader037.fdocuments.in/reader037/viewer/2022110110/58a2e9ab1a28abac368b9154/html5/thumbnails/2.jpg)
Contents
- Introduction- Why 3D?- Applications of 3D- 3D Content Authoring- 3D/4D in GIS- Challenges of Presenting 3D on the Web- Current 3D Web Technologies- 3D Portal- Q&A
![Page 3: Web-Based Enterprise Data Visualization – a 3D Approach](https://reader037.fdocuments.in/reader037/viewer/2022110110/58a2e9ab1a28abac368b9154/html5/thumbnails/3.jpg)
Introduction
• Our world is 3D• Not always like that – Earth was flat from 2,300 BC• Concept of a spherical Earth in 350 BC• Cartographers like to see things orthogonally• Regular people – not so much?
![Page 4: Web-Based Enterprise Data Visualization – a 3D Approach](https://reader037.fdocuments.in/reader037/viewer/2022110110/58a2e9ab1a28abac368b9154/html5/thumbnails/4.jpg)
Why 3D?
• Vast amounts of data available (spatial and non-spatial)• Having extra dimension gives more flexibility• Human brain is 12% more active with 3D contents• 3D provides immersive experience• Natural applications in architecture, engineering, construction
![Page 5: Web-Based Enterprise Data Visualization – a 3D Approach](https://reader037.fdocuments.in/reader037/viewer/2022110110/58a2e9ab1a28abac368b9154/html5/thumbnails/5.jpg)
Applications of 3D
• Visualize complex information in 3D• Extend 2D drawings and diagrams• Work in context of a real-world geographic location• Integrate 2D GIS datasets and 3D datasets (vertical construction)• Visualize and model remote sensing data (LiDAR)• Perform 3D analysis (e.g. water runoff, shadow, line-of-sight)• Prototype your work in a realistic environment (augmented reality)• Use many existing tools to author and integrate 3D content• Vast 3D libraries available (many for free)• Use 3D as a universal language among project stakeholders• Interface with 3D printers to manufacture your models• Integrate with Virtual Reality (Oculus Rift, Microsoft HoloLens)
![Page 6: Web-Based Enterprise Data Visualization – a 3D Approach](https://reader037.fdocuments.in/reader037/viewer/2022110110/58a2e9ab1a28abac368b9154/html5/thumbnails/6.jpg)
3D For The Masses
• Advances in graphics hardware and API support- 3D APIs (Direct3D, OpenGL), dedicated fast memory, SLI/CrossFire- Cool computer games and 3D software suites on desktop
• Multimedia and interactive graphics in browser- Expose GPU to the browser
• Attempts to bring 3D to the Web- Plugin-based- VRML- X3D- HTML5 Canvas- WebGL- JS libraries on top of WebGL
![Page 7: Web-Based Enterprise Data Visualization – a 3D Approach](https://reader037.fdocuments.in/reader037/viewer/2022110110/58a2e9ab1a28abac368b9154/html5/thumbnails/7.jpg)
3D Content Sources
• Author using a desktop software package• Generate from 2D data (e.g. feature extrusion, 3D symbols)• Obtain from remote sensing data (LiDAR point clouds)• Generate programmatically (API)• Use of existing 3D models as building blocks• As a result of 3D analysis
![Page 8: Web-Based Enterprise Data Visualization – a 3D Approach](https://reader037.fdocuments.in/reader037/viewer/2022110110/58a2e9ab1a28abac368b9154/html5/thumbnails/8.jpg)
3D Content Authoring
• Numerous software packages- Some allow georeferencing 3D models- Example: KML + COLLADA
• 3ds Max, Blender, Maya, etc.• SketchUp (KML, COLLADA)• CityEngine
- Export into common 3D formats- Publish WebScene (.3ws)
• ArcScene• ArcGIS Pro
- Publish web scenes to AGO/Portal- Export COLLADA
![Page 9: Web-Based Enterprise Data Visualization – a 3D Approach](https://reader037.fdocuments.in/reader037/viewer/2022110110/58a2e9ab1a28abac368b9154/html5/thumbnails/9.jpg)
Authoring a Scene in ArcScene
![Page 10: Web-Based Enterprise Data Visualization – a 3D Approach](https://reader037.fdocuments.in/reader037/viewer/2022110110/58a2e9ab1a28abac368b9154/html5/thumbnails/10.jpg)
Extruding 2D Features in ArcGIS Pro
![Page 11: Web-Based Enterprise Data Visualization – a 3D Approach](https://reader037.fdocuments.in/reader037/viewer/2022110110/58a2e9ab1a28abac368b9154/html5/thumbnails/11.jpg)
Applying 3D Symbology to 2D Data – ArcGIS Pro
![Page 12: Web-Based Enterprise Data Visualization – a 3D Approach](https://reader037.fdocuments.in/reader037/viewer/2022110110/58a2e9ab1a28abac368b9154/html5/thumbnails/12.jpg)
Authoring Realistic Buildings – Extract Texture
• Create a 3D model of the building• Obtain building photographs or textures (e.g. Pictometry)• Apply images to building facets
![Page 13: Web-Based Enterprise Data Visualization – a 3D Approach](https://reader037.fdocuments.in/reader037/viewer/2022110110/58a2e9ab1a28abac368b9154/html5/thumbnails/13.jpg)
Authoring Realistic Buildings – Apply Texture
![Page 14: Web-Based Enterprise Data Visualization – a 3D Approach](https://reader037.fdocuments.in/reader037/viewer/2022110110/58a2e9ab1a28abac368b9154/html5/thumbnails/14.jpg)
3D/4D in Web and Desktop GIS
• True distance and area calculations accounting for elevation• 3D and temporal analysis
- Hillshade- Sun shadow volume- Water runoff- Watershed- Viewshed
• Time-aware data visualization• Superimposing of 3D models onto 2D GIS maps• Overlaying of raster data over vector shapes• Presenting fused data from multiple sources
![Page 15: Web-Based Enterprise Data Visualization – a 3D Approach](https://reader037.fdocuments.in/reader037/viewer/2022110110/58a2e9ab1a28abac368b9154/html5/thumbnails/15.jpg)
3D Visualization Example – Raster Data Overlays
![Page 16: Web-Based Enterprise Data Visualization – a 3D Approach](https://reader037.fdocuments.in/reader037/viewer/2022110110/58a2e9ab1a28abac368b9154/html5/thumbnails/16.jpg)
3D Visualization Example – True Distance Measurement
![Page 17: Web-Based Enterprise Data Visualization – a 3D Approach](https://reader037.fdocuments.in/reader037/viewer/2022110110/58a2e9ab1a28abac368b9154/html5/thumbnails/17.jpg)
3D Visualization Example – True Area Measurement
![Page 18: Web-Based Enterprise Data Visualization – a 3D Approach](https://reader037.fdocuments.in/reader037/viewer/2022110110/58a2e9ab1a28abac368b9154/html5/thumbnails/18.jpg)
3D Visualization Example – Viewshed Analysis
![Page 19: Web-Based Enterprise Data Visualization – a 3D Approach](https://reader037.fdocuments.in/reader037/viewer/2022110110/58a2e9ab1a28abac368b9154/html5/thumbnails/19.jpg)
3D Visualization Example – Sun Shadow Volume
![Page 20: Web-Based Enterprise Data Visualization – a 3D Approach](https://reader037.fdocuments.in/reader037/viewer/2022110110/58a2e9ab1a28abac368b9154/html5/thumbnails/20.jpg)
Visualizing 3D on the Web Today - Examples
• Major desktop authoring products have web viewer plugins- AutoDesk BIM 360
• CityEngine Web Viewer / ArcGIS Online scene viewer• Programmatic approach – libraries to create 3D within browser:• Non-GIS API Examples
- Web3D Consortium – X3D- Numerous JavaScript libraries utilizing WebGL
- Three.js
• Examples of GIS APIs- Google Earth API (going away December 12th 2015) (plugin-based)- Cesium (WebGL)- Agency9 3DMaps SDK (WebGL)- Upcoming ArcGIS JavaScript 4 API (WebGL)
![Page 21: Web-Based Enterprise Data Visualization – a 3D Approach](https://reader037.fdocuments.in/reader037/viewer/2022110110/58a2e9ab1a28abac368b9154/html5/thumbnails/21.jpg)
AutoDesk 360 Web Viewer – Over 50 Formats Supported
![Page 22: Web-Based Enterprise Data Visualization – a 3D Approach](https://reader037.fdocuments.in/reader037/viewer/2022110110/58a2e9ab1a28abac368b9154/html5/thumbnails/22.jpg)
CityEngine Web Scene Viewer
![Page 23: Web-Based Enterprise Data Visualization – a 3D Approach](https://reader037.fdocuments.in/reader037/viewer/2022110110/58a2e9ab1a28abac368b9154/html5/thumbnails/23.jpg)
What is WebGL?
• Web Graphics Library, a JavaScript API• 2D/3D in-browser graphics with no plugins• Cross-platform• Direct GPU access• JavaScript abstraction over OpenGL• Uses HTML5 Canvas element• Advanced features not possible with SVG
- Complex lighting- Reflective material effects
• No 3D file format support (draft glTF)• Only modern browsers support this API
![Page 24: Web-Based Enterprise Data Visualization – a 3D Approach](https://reader037.fdocuments.in/reader037/viewer/2022110110/58a2e9ab1a28abac368b9154/html5/thumbnails/24.jpg)
WebGL Support by Browsers
![Page 25: Web-Based Enterprise Data Visualization – a 3D Approach](https://reader037.fdocuments.in/reader037/viewer/2022110110/58a2e9ab1a28abac368b9154/html5/thumbnails/25.jpg)
Upcoming ArcGIS JavaScript API
• Built on top of WebGL• To be released this year• Abstracts map manipulation syntax; similar for 2D and 3D• May provide a lower-level API for 3D objects, scene • Will provide a high-level web mapping API with 2D/3D support• Web AppBuilder 3D support• Manipulate 3D objects on the map• Display 3D data from web scenes• Server-side support for 3D presentation, storage and analysis
![Page 26: Web-Based Enterprise Data Visualization – a 3D Approach](https://reader037.fdocuments.in/reader037/viewer/2022110110/58a2e9ab1a28abac368b9154/html5/thumbnails/26.jpg)
Web Scene Specification
• Web scene is composed of web layers and navigation info• Published as a REST scene service to ArcGIS Online/Portal• Scene layers may contain multipatch objects, meshes, etc.• i3s is ESRI’s open specification• Support multi-dimensional spatial indexing
- Determines what to render- 3D indexing with R-Tree
http://infolab.usc.edu/csci587/Fall2014/papers/rtree.pdf
![Page 27: Web-Based Enterprise Data Visualization – a 3D Approach](https://reader037.fdocuments.in/reader037/viewer/2022110110/58a2e9ab1a28abac368b9154/html5/thumbnails/27.jpg)
Web Scene Specification
• Individually-addressable resources, streaming support- http://servicename/SceneServer/layers/0/nodes/23/geometry/0
• Dynamic level of detail (LoD)• Example – texture LoD:
• Example – building LoD:
![Page 28: Web-Based Enterprise Data Visualization – a 3D Approach](https://reader037.fdocuments.in/reader037/viewer/2022110110/58a2e9ab1a28abac368b9154/html5/thumbnails/28.jpg)
What We Can Build With 3D API
• Interactive web-based map-centric information sharing portal- Single view on multiple datasets- Access to executive-level data
• Applicable uses:- Master Plan reference- Construction schedule visualization (horizontal & vertical)- Site suitability analysis - Conflict avoidance (project activity synchronization)- On-going operations (building maintenance, office leases)- Real-time personnel location
![Page 29: Web-Based Enterprise Data Visualization – a 3D Approach](https://reader037.fdocuments.in/reader037/viewer/2022110110/58a2e9ab1a28abac368b9154/html5/thumbnails/29.jpg)
3D Portal Example – Temporal and Attribute Querying
![Page 30: Web-Based Enterprise Data Visualization – a 3D Approach](https://reader037.fdocuments.in/reader037/viewer/2022110110/58a2e9ab1a28abac368b9154/html5/thumbnails/30.jpg)
3D Portal Benefits
• Single place to manage multiple projects• Real-time reporting environment
- Construction master planning- Program integration- Site and building management
• Real-time modeling environment- Create ‘what-if’ designs in-browser- Perform spatial and temporal analysis- Participate in distributed team design charrettes- Geo-enrich your designs with public datasets
![Page 31: Web-Based Enterprise Data Visualization – a 3D Approach](https://reader037.fdocuments.in/reader037/viewer/2022110110/58a2e9ab1a28abac368b9154/html5/thumbnails/31.jpg)
3D Portal Integration
• Integration hub- Utilize service-oriented architecture (SOA) capabilities- Integrate data from CAD, BIM, project scheduling systems
• Utilize multiple visualization technologies- No “one size fits all” technology- Pick what works best for each scenario- Create multiple presentation layers within the portal- D3.js for graphing needs (SVG)- Three.js for in-building navigation (Canvas/WebGL)- HTML5 for videoconferencing (Canvas/Video)
![Page 32: Web-Based Enterprise Data Visualization – a 3D Approach](https://reader037.fdocuments.in/reader037/viewer/2022110110/58a2e9ab1a28abac368b9154/html5/thumbnails/32.jpg)
Example - Multiple Visualization Layers
![Page 33: Web-Based Enterprise Data Visualization – a 3D Approach](https://reader037.fdocuments.in/reader037/viewer/2022110110/58a2e9ab1a28abac368b9154/html5/thumbnails/33.jpg)
Example - Multiple Visualization Technologies
![Page 34: Web-Based Enterprise Data Visualization – a 3D Approach](https://reader037.fdocuments.in/reader037/viewer/2022110110/58a2e9ab1a28abac368b9154/html5/thumbnails/34.jpg)
Q&A