Skip to content

Commit 935b450

Browse files
Son-HNguyenSon-HNguyen
committed
Updated README.
1 parent 5a63267 commit 935b450

File tree

1 file changed

+77
-16
lines changed

1 file changed

+77
-16
lines changed

‎README.md

Lines changed: 77 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,4 @@
1-
First-person View Extension
2-
==================================
3-
This extension enables the first-person view. It shows users' current location and orientation in real-time. The former information is acquired using the Geolocation API, while the latter is provided by the DeviceOrientation API in HTML5.
4-
5-
NOTE: The Geolocation API only functions via HTTPS since Google Chrome 50. Therefore, make sure the client is called from an HTTPS page or your own localhost. For demo and testing purposes, this first-person view extension is also available under:
6-
[web link](https://3dcitydb.org/3dcitydb-web-map/first-person-view/3dwebclient/index.html?gltf_version=0.8&title=3DCityDB-Web-Map-Client&shadows=false&terrainShadows=0&latitude=48.14841421296063&longitude=11.567992899981103&height=288.0473109629219&heading=328.74761976161506&pitch=-79.22129067410187&roll=359.4611498135091&layer_0=url%3D..%252Fdata%252FMunich_Demo%252FBuildings_glTF%252FBuildings_glTF_MasterJSON.json%26name%3DMUC%26active%3Dtrue%26spreadsheetUrl%3Dhttps%253A%252F%252Ffusiontables.google.com%252Fdata%253Fdocid%253D1KE3odY92wmpwdyUs6osYhNPgRtI9W3GOQyuyHfp3%2523rows%253Aid%253D1%26cityobjectsJsonUrl%3D%26minLodPixels%3D140%26maxLodPixels%3D1.7976931348623157e%252B308%26maxSizeOfCachedTiles%3D200%26maxCountOfVisibleTiles%3D200).
7-
8-
Additional important information:
9-
10-
* If the browser informs you about the webpage not having a valid certificate, click "Advanced" -> "Continue" to proceed.
11-
* Test the client on devices equipped with GPS.
12-
* The GPS button is located in the top right hand corner. Select it to enable the first-person view.
13-
* The GPS button can be turned on (green) and off (gray).
14-
* If the Geolocation API asks for permission to retrieve your current location, select "Allow".
15-
16-
3DCityDB-Web-Map-Client
1+
3DCityDB-Web-Map-Client with Mobile Support
172
==================================
183

194
The **3DCityDB-Web-Map-Client** is a web-based front-end of the 3DCityDB for high-performance 3D visualization and interactive exploration of **arbitrarily large semantic 3D city models in CityGML**. It utilizes the [Cesium Virtual Globe](http://cesiumjs.org/index.html) as its 3D geo-visualization engine based on HTML5 and Web Graphics Library (WebGL) to provide hardware acceleration and cross-platform functionalities like displaying 3D graphic contents on web browsers without the needs of additional plugins.
@@ -121,6 +106,82 @@ Demos
121106
<img src="theme/img/vorarlberg_buildings_geometry_demo.jpg" width="800" />
122107
</p>
123108

109+
110+
# Mobile Support Extension
111+
112+
113+
### New features
114+
115+
116+
The current 3DCityDB-Web-Map-Client is equipped with an extension that provides better support while operating on mobile devices.
117+
The extension comes with a built-in mobile detector, which can automatically detect and adjust the client's behaviors accordingly to whether the 3DCityDB-Web-Map-Client is operating on a mobile device.
118+
Some of the most important mobile features enabled by this extension are listed as follows:
119+
120+
* **A more lightweight graphical user interface:**
121+
In order to make the best use of the limited screen real-estate available on mobile devices, some elements are removed or hidden from the web client,
122+
such as credit texts and logos, as well as some of Cesium's built-in navigation controls that can easily be manipulated using touch gestures.
123+
<p align="center">
124+
<img src="theme/img/mobile_homepage.png" />
125+
</p>
126+
127+
* **Visual adjustments:**
128+
* The main toolbox now scales to fit to the screen size. In case of excess lines/length, the toolbox becomes scrollable (see picture below).
129+
<p align="center">
130+
<img src="theme/img/mobile_toolbox.png" />
131+
</p>
132+
133+
* The infobox displayed when a city object (e.g. building) is clicked is now displayed in fullscreen with scrollable contents, as illustrated below.
134+
<p align="center">
135+
<img src="theme/img/mobile_infobox.png" />
136+
</p>
137+
138+
* The loading icon is now shown as a horizontal bar at the bottom of the screen (highlighted by the green box in the picture below).
139+
<p align="center">
140+
<img src="theme/img/mobile_loading.png" />
141+
</p>
142+
143+
* Most importantly: **The introduction of a GPS button** (located on the top right corner in the view toolbar) providing new functionalities involving user's current location and orientation. Namely:
144+
* GPS "snapshot" (single-click): shows the user's current position and orientation,
145+
<p align="center">
146+
<img src="theme/img/GPS_on.png" />
147+
</p>
148+
149+
* Real-time Compass Tracking (double-click): periodically shows the user's current orientation with fixed location,
150+
<p align="center">
151+
<img src="theme/img/GPS_on_ori.png" />
152+
</p>
153+
154+
* Real-time Compass Tracking + Position (triple-click) or the "First-person View" mode: periodically shows the user's current orietation and position.
155+
<p align="center">
156+
<img src="theme/img/GPS_on_pos_ori.png" />
157+
</p>
158+
159+
* To disable real-time tracking, simply either click on the button again to return to "snapshot" mode
160+
or hold the button for 1 second, the camera will then ascend to a higher altitude of the current location.
161+
162+
### Demos
163+
164+
165+
For demo and testing purposes, this mobile extension is also available under:
166+
* [first-person view link](https://www.3dcitydb.org/3dcitydb-web-map/first-person-view/3dwebclient/index.html?gltf_version=0.8&title=3DCityDB-Web-Map-Client&shadows=false&terrainShadows=0&latitude=48.14841421296063&longitude=11.567992899981103&height=288.04731096361564&heading=328.7476197616152&pitch=-79.2212906741018&roll=359.46114981350894&layer_0=url%3Dhttps%253A%252F%252Fwww.3dcitydb.org%252F3dcitydb%252Ffileadmin%252Fmydata%252FMunich_Demo%252FBuildings_glTF%252FBuildings_glTF_MasterJSON.json%26name%3DMUC%26active%3Dtrue%26spreadsheetUrl%3Dhttps%253A%252F%252Ffusiontables.google.com%252Fdata%253Fdocid%253D1KE3odY92wmpwdyUs6osYhNPgRtI9W3GOQyuyHfp3%2523rows%253Aid%253D1%26cityobjectsJsonUrl%3D%26minLodPixels%3D140%26maxLodPixels%3D1.7976931348623157e%252B308%26maxSizeOfCachedTiles%3D200%26maxCountOfVisibleTiles%3D200)
167+
* [debug-mode view link](https://www.3dcitydb.org/3dcitydb-web-map/first-person-view/3dwebclient/index.html?gltf_version=0.8&title=3DCityDB-Web-Map-Client&shadows=false&terrainShadows=0&latitude=48.14841421296063&longitude=11.567992899981103&height=288.04731096361564&heading=328.7476197616152&pitch=-79.2212906741018&roll=359.46114981350894&layer_0=url%3Dhttps%253A%252F%252Fwww.3dcitydb.org%252F3dcitydb%252Ffileadmin%252Fmydata%252FMunich_Demo%252FBuildings_glTF%252FBuildings_glTF_MasterJSON.json%26name%3DMUC%26active%3Dtrue%26spreadsheetUrl%3Dhttps%253A%252F%252Ffusiontables.google.com%252Fdata%253Fdocid%253D1KE3odY92wmpwdyUs6osYhNPgRtI9W3GOQyuyHfp3%2523rows%253Aid%253D1%26cityobjectsJsonUrl%3D%26minLodPixels%3D140%26maxLodPixels%3D1.7976931348623157e%252B308%26maxSizeOfCachedTiles%3D200%26maxCountOfVisibleTiles%3D200&viewMode=debug).
168+
169+
170+
# Notes
171+
172+
173+
The mobile extension makes use of the Geolocation API and the DeviceOrientation API in HTML5.
174+
The Geolocation API only functions via HTTPS since Google Chrome 50. Therefore, make sure the client is called from an HTTPS page or your own localhost.
175+
176+
Additional important information:
177+
178+
* If the browser informs you about the webpage not having a valid certificate, click "Advanced" -> "Continue" to proceed.
179+
* Test the client on devices equipped with GPS.
180+
* The GPS button is located in the top right hand corner. Select it to enable the first-person view.
181+
* The GPS button can be turned on (green) and off (gray).
182+
* If the Geolocation API asks for permission to retrieve your current location, select "Allow".
183+
184+
124185
More information
125186
----------------
126187
[OGC CityGML](http://www.opengeospatial.org/standards/citygml) is an open data model and XML-based format for the storage and exchange of semantic 3D city models. It is an application schema for the [Geography Markup Language version 3.1.1 (GML3)](http://www.opengeospatial.org/standards/gml), the extendible international standard for spatial data exchange issued by the Open Geospatial Consortium (OGC) and the ISO TC211. The aim of the development of CityGML is to reach a common definition of the basic entities, attributes, and relations of a 3D city model.

0 commit comments

Comments
 (0)