Use of 3D visualization at CitiSim Project
Tuesday, 18th of December of 2018
One of the objectives of the CITISIM project is to use 3D technologies to represent the existing and relevant elements for a smart city; from buildings, streets, sidewalks and green areas to street furniture.
3D visualization is used in many fields and has had a great development in recent years. With the widespread use of WebGL and the arrival of more modern and powerful hardware, the browser is becoming commonplace for 3D rendering. To visually represent the different elements of a smart city, Cesium which is a 3D mapping platform has been selected.
It is worth highlighting some aspects in favor of using web technology over other types of technologies. The use of a web applications has many advantages over desktop applications:
- Immediate access, since web-based applications do not need to be downloaded, installed or configured. The user accesses the system through a browser and connects to it with an online account. The system is ready to work regardless of the configuration of your device or equipment (cross platform compatibility).
- Web applications are simple and inexpensive to update, just update the application on the server and immediately everyone accesses to the updated version.
- Web applications facilitate the centralization of data.
How to create 3D Visualizations
3D Tiles are an open specification for streaming massive heterogeneous 3D geospatial datasets. To expand on Cesium’s terrain and imagery streaming. 3D Tiles will be used to stream 3D content, including buildings, trees, point clouds and vector data.
The primary purpose of 3D Tiles is to improve streaming and rendering performance of massive heterogeneous datasets. The foundation of 3D Tiles is a spatial data structure that enables Hierarchical Level of Detail (HLOD), so only visible tiles are streamed.
The process followed for the creation of the 3D model of the ITSI Building (so that it can be drawn by Cesium) consist of, starting from a paper plane of the building, design it in 2D with the QGIS tool and then launch on this design a server process that creates the corresponding 3D geometries in the database. These 3D geometries are the ones loaded later in CitiSim and represented in the Cesium 3D globe.
For this 2D modelling, a layer of the WMS cadastre has first been added in the QGIS tool. The URL for this WMS is: http://ovc.catastro.meh.es/Cartografia/WMS/ServidorWMS.aspx.
In this layer there will be a base cartography of the whole Spanish territory. The parcel corresponding to the ITSI Building is searched and the model of the ITSI Building is designed on it. Everything that is drawn in 2D model will be georeferenced, so that all 3D geometries generated, will be drawn in the correct position in the 3D globe.
In the following screenshot you can see the cadastre of Ciudad Real (Figure 9). The parcel corresponding to the ITSI Building has been marked with a red circle:
Figure 1: Ciudad Real Cadastre
Once the parcel is located, you can begin to draw the building (Figure 10). To do this, the different elements of each floor of the building will be drawn in different layers: doors, windows, exterior and interior walls, etc.
In the following screenshot there are 2 layers: the first one contains the base cartography and therefore includes the perimeter of the ITSI Building; and the second one, which is where a single line has been drawn as an example that could be a wall of a corridor inside the ITSI Building:
Figure 2: Parcel of ITSI Building with a line inside that represents an interior wall
With this example, it is possible to launch the CitiSim service that, starting from this 2D design, creates in the database the 3D geometries that are shown in the CitiSim 3D globe:
Figure 3: geometry generated to represent a wall inside ITSI Building in the 3D model
As mentioned above, interior walls would be drawn in one layer, windows in another, doors in another, floors in another, and so on. Each of these layers are stored from QGIS in different .shp files.
This .shp files are processed by a CitiSim service and create in the database the corresponding geometries that will finally be loaded by CitiSim to draw them in the 3D globe. This service is only launched once when the 2D model is finished.
Therefore, once the 2D design is finished with de QGIS tool, after launching this service the following result is obtained:
Figure 4: Finished 3D Model
Both the ITSI Building and the sensors or earthquakes are distributed by layers and sublayers in 3D globe. At the date of writing of this document, the ITSI Building corresponds to the layer called ‘Main Building’ and has two sub-layers: ‘Ground Floor’ and ‘First Floor’.
Thanks to this distribution, the user can hide/show entire building or any of its floors:
Figure 5: 3D viewer layers menú Integration of Device status
Each sensor transmits its status at a certain frequency of time. A background process is subscribed to all these sensor transmissions. When a new sensor message is received, these data is sent to the web client and visualized in a 3D globe to know the current status of each device.
As there are several sensor types, each of them will have a different icon. For example, temperature sensors are represented by a thermometer and rain accumulators by a raining cloud:
Figure 6: ITSI Building with sensors
As can be seen in the previous image, the icon of each sensor indicates the exact coordinates where it is located. Moreover, the sensors can be located in a specific floor.
When a sensor produces a new reading, it is transmitted through its corresponding communication channel which is listened to by a Server component. Then, this reading is automatically sent to a web browser (using web sockets) and a green animation is generated under the corresponding sensor icon so that the user can immediately identify in the 3D viewer which sensor has been updated. For example, for a reading of a sensor that measures the temperature:
Figure 7: Temperature sensor with data received event animation
At the same time that this animation is shown, a text message is also displayed by the Notifications Console, located in the lower left corner.
If the user deactivates the layer ‘Sensors → ROOFTOP’ all the sensors located at this floor will be hidden until it will be enabled again.
The user can click on the sensor icon to open a pop-up window with additional information about the recorded reading. This window can be closed by clicking outside it or ‘x’. A green square will be drawn over the selected sensor.
Figure 8: Basic information from a sensor Conclusion
In this blog post we have tried to explain how to build a 3d representation of a building from scratch.
Once the representation of the building has been created, a layer of sensors has been integrated, to be able to visualize in the map the last state of each one of the sensors.
Apart from visualizing the sensors, in the future a set of intelligent services will be integrated in the 3d viewer. Some of the services that will be represented on the map are the incident service or the CEP.
Authors: Ismael Torres, Félix Villanueva and Óscar García Bayot
Company: PRODEVELOP, Valencia y Barcelona – Spain