Introduce Web3D Development and Visualization. Moxie Zhang Esri R&D Center Beijing

Transcription

1 Introduce Web3D Development and Visualization Moxie Zhang Esri R&D Center Beijing

2

3

4

5 Web Scene Desktop Web Device New in ArcGIS Online and Portal Web Scene Mash-up of 3D / 2D layers Web Scene Viewer and Author Built with the JavaScript API Server Online Content and Services Developing 3D Web Applicatin with

6 Web Scene designed for 3D - 3D Layers - 3D Symbology - 3D Labels - Table of Contents - 3D Popups - Tours - Developing 3D Web Applicatin with

7 Introduce Web 3D for ArcGIS Esri UC 2014 Technical Workshop Data is Beautiful

8 Web 3D for ArcGIS ArcGIS Professional ArcGIS Online/Portal 3D Scene Service ArcGIS Platform Web Scene Layers Developers ArcGIS API for JavaScript 3 rd Party tools ArcGIS Server, Online, Portal Web Scene ArcGIS Runtime SDKs Developing 3D Application using Web

9 Web 3D Architect Data Processing Services SDKs Apps ArcGIS Professional ArcGIS Server 3D Scene Service ArcGIS API for JavaScript Web App Builder ArcGIS Online/Portal Client ArcGIS Online/Portal Service Web Scene ArcGIS Runtime SDKs Widgets w w w w w Esri UC 2014 Demo Theater

10 General 3D Web Application Architecture Developing 3D Application using Web

11 New ArcGIS API for Javascript 3D Capabilities Same Javascript class model extended with - New 3D Layer (Scene Service Layer) - New 3D Symbology - New 3D Mesh geometry type - Added Z values to geometries Same programming pattern that has been taught, learned and used for many years The 3D core and rendering technologies are transparent to developers and browserindependent

12 Web 3D Client Architecture ArcGIS API for JavaScript with 3D capabilities New internal architecture but same* public JS API classes Map Layer * 99% backwards compatible code + new classes for 3D Developing 3D Application using Web Esri UC 2014 Demo Theater Developing 3D Web Applocatin with ArcGIS

13 Web 3D Client Architecture ArcGIS API for JavaScript with 3D capabilities New internal architecture but same* public JS API classes Map Layer Viewport(s) LayerView(s) * 99% backwards compatible code + new classes for 3D Developing 3D Application using Web Esri UC 2014 Demo Theater Developing 3D Web Applocatin with ArcGIS

14 Web 3D Client Architecture ArcGIS API for JavaScript with 3D capabilities New internal architecture but same* public JS API classes Abstracted public API methods Map Layer Loosely coupled implementation(s) Viewport(s) LayerView(s) * 99% backwards compatible code + new classes for 3D Developing 3D Application using Web Esri UC 2014 Demo Theater Developing 3D Web Applocatin with ArcGIS

15 Web 3D Client Architecture ArcGIS API for JavaScript with 3D capabilities New internal architecture but same* public JS API classes Abstracted public API methods Map Layer Loosely coupled implementation(s) 2D Viewport 3D Viewport 2D Viewport 3D Viewport * 99% backwards compatible code + new classes for 3D Developing 3D Application using Web Esri UC 2014 Demo Theater Developing 3D Web Applocatin with ArcGIS

16 Under the 3D ViewPort 3D Runtime Render - Full 3D Runtime functions - High performance - Large data set - Cross browser support - Need install browser plugin WebGL Render - Pure browser app without plugin - WebGL is maturing - Under heavy development - Performance and large data set support are improving - Cross browser support Application Development (1) the same JavaScript API (2) via Web AppBuilder for ArcGIS Developing 3D Application using Web

17 Build 3D Web App Helping users with extra dimension Esri UC 2014 Technical Workshop Developing 3D Application using Web AppBuilder

18 Demo: Map and Viewport

19 Create a Map

20 Add a Basemap

21

22 What s 3D Data Visualization Symbolization of data in 3D effects. A way to better visualize and understand data. Data is Beautiful

23 Why 3D Data Visualization 3D adds one additional dimension to data visualization. People tend to learn and understand from visual representations easier and more than from textual representations. 3D visualization is more in-depth and more intuitional than 2D visualization. 3D visualization can better handle time-relevant data by supporting animated effects. Data is Beautiful

24 Data lifecycle Collect data Process and analyze data Visualize data Data is Beautiful

25 Data visualization SDK requirements Simple to use General Beautiful Animation support High performance Data is Beautiful

26 Viz Render architecture WebGL Engine Viz Module MeshRender PointSpriteRender ViewPortRender Layer Draw TemperatureRender ExtrusionRender TrafficRender Esri UC 2014 Demo Theater Data is Beautiful

27 Data sources GraphicsLayer FeatureLayer SceneLayer 3D Data Visualization Data sources 3D Symbols 3D Renderers 3D Renderers 3D Map Browser with WebGL Engine Browser with Runtime 3D Plugin Type Presentation Title Here

28 Demo 3D Data is Beautiful Esri UC 2014 Demo Theater Data is Beautiful

29 Data is Beautiful

30 Data is Beautiful

31 Data is Beautiful

32 Data is Beautiful

33 Data is Beautiful

34 Data is Beautiful

35 Data is Beautiful

36 Data is Beautiful

37 Data is Beautiful

38 Data is Beautiful

39 Data is Beautiful

40 Data is Beautiful

41 Data is Beautiful

42 Data is Beautiful