Skip to Content

POC 3D City Visualization with Cesium

Category

GIS Development

Project size

70+ MMs

Industry

Construction & Urban Planning

Scope of work

MVP Development

Full-stack Development

Quality Assurance

Technologies

Frontend: React.js

Backend: Node.js

Database: MongoDB

Cloud Services: Google Cloud, Google Storage

Mobile Platform: Android Native


About the project

 The client is a Finnish company specializing in 3D, VR, AR, BIM, and digitalization of planning to develop a Proof of Concept (POC) for visualizing large-scale 3D city data in a web application. The platform's primary goal was to convert 3D data files (e.g., .DAE, FBX) into 3D Tiles, allowing for smoother, more efficient streaming of large datasets across devices—from desktop to mobile. By optimizing 3D model handling and streaming, the solution facilitates better urban planning, real-time visualization, and decision-making for users interacting with the 3D data on a map.



The client, with over 25 years of experience in 3D visualization and BIM (Building Information Modeling), required a custom GIS solution to:


  • Stream Large-Scale 3D City Models: Develop a platform capable of handling and displaying large 3D datasets (including cityscapes, streets, buildings, and infrastructure) for urban planning and construction projects.
  • Efficient Data Conversion and Streaming: Convert 3D data from formats like .DAE and .FBX into 3D Tiles for optimized streaming and interaction via a web platform.
  • Manage Multiple Data Layers: Allow users to manage, display, and interact with different layers of 3D data, such as buildings, streets, bridges, and street lamps.
  • Support LandXML Files: Provide functionality for users to upload LandXML files, convert them into the glTF format, and then visualize the data in the web application.

The key challenges in this project included:

  • Handling Large Data Sets: The size of the 3D data was substantial, which initially slowed down system performance. A significant challenge was ensuring smooth interaction and data streaming without compromising performance.
  • Complex Data Layer Management: The platform needed to efficiently manage multiple 3D data layers and allow users to toggle between them seamlessly.
  • Geographical Distance: Working across geographical distances presented challenges in terms of communication, but BHSoft’s regular consultation with the client ensured smooth collaboration.


To overcome the challenges and deliver the required solution, BHSoft followed an agile development approach:

  • Stage 1: Data Conversion and 3D Model Streaming:
    • The first stage focused on converting 3D models into the glTF file format, enabling efficient streaming using 3D Tiles. We used Cesium, a leading open-source 3D mapping platform, to optimize streaming and interaction with the models.
    • We created a plugin for 3DSMax to handle large datasets and peel off the 3D data layer by layer for seamless integration into the Cesium platform.
    • The user interface was developed using React.js to ensure dynamic interaction with 3D models, including toggling between various data layers (buildings, roads, streetlights, etc.).
  • Stage 2: LandXML Data Management:
    • For the second stage, BHSoft developed a service to handle LandXML files, commonly used for civil engineering data.
    • The LandXML files were processed, converted to glTF format, and stored in databases for later streaming and visualization.
    • The system allowed for easy integration of additional data layers, with users able to manage and visualize civil engineering and infrastructure data alongside architectural 3D models.
  • Stage 3: Cloud Integration and Data Storage:
    • Google Cloud and Google Storage were utilized to store and manage the large datasets, ensuring scalability and fast access across different devices.
    • The backend, built using Node.js and Express, allowed for seamless interaction between the frontend and the data storage system.

Key Features of the Platform

The 3D City Visualization Platform developed by BHSoft provides several powerful features:

  • 3D Tiles Streaming: Efficient streaming of large 3D datasets using Cesium, with smooth interactions across devices.
  • Data Layer Management: Users can toggle and manage different layers of data, including buildings, streets, bridges, and street lamps, allowing for flexible visualizations.
  • LandXML Support: Integration with LandXML files for the visualization of civil engineering and survey measurement data, enabling users to view and interact with infrastructure data.
  • Real-Time Interaction: The platform supports real-time interaction with 3D models, allowing users to zoom, pan, and rotate the models to analyze different aspects of the cityscape.
  • Cloud Integration: Scalable data storage and processing on Google Cloud, ensuring fast access to 3D models and reliable performance.

The project successfully met the client’s requirements and provided a powerful tool for 3D city visualization. Key outcomes include:

  • Optimized 3D Data Streaming: By converting large 3D datasets into 3D Tiles, we ensured efficient streaming and interaction without performance issues, even on mobile devices.
  • Improved Decision-Making: The platform allows urban planners, architects, and engineers to visualize and interact with city data in a more intuitive way, enhancing the decision-making process.
  • Scalable and Flexible Solution: The use of Google Cloud and the modular architecture ensures that the platform can scale as needed, accommodating more data and users in the future.
  • Innovative Integration of BIM and GIS: The project combined elements of BIM and GIS, providing a unique solution for visualizing both architectural models and civil infrastructure in the same platform.

The platform serves as a strong foundation for the client’s future urban planning and visualization solutions, setting a new standard in 3D city modeling and data interaction.