3D Architectural and Construction Viewer Application
It is an application designed for the construction industry that allows viewing 3D and 2D building model data in a web browser. The objects from various sources such as AutoCAD, Fusion 360, Revit, and many other programs can be easily displayed and seen.
Project Description
According to the customer`s request, the legacy project must have been supported, and the new functionality must have been added. The main requirement was to implement the functionality to visualize different 3D models with an ability to change the display modes. The used models may consist of hundreds of thousands of elements, and all operations on the models should be displayed in real-time in a web browser. All model elements should have unique identifiers. Using this data, we should have created lists, trees with controls, and a filter for the content display.
Due to the browser calculations and as JavaScript is a single-threaded programming language, we decided to also use Web Workers API. It provided us with an opportunity to run several heavy processes simultaneously.
Unfortunately, that was not enough because we still had a low performance in other code parts. During the investigation and code review, we decided to make a refactoring and code optimization. It enabled us to significantly improve productivity, offload the mainstream, and simultaneously display different interface parts.
During logic and interface developing, we faced the following challenges
1Slow data processing of multielement 3D models
2Displaying of 3D models with delays;
3Slow response time of the UI;
Client and Business Goals:
- It was required to speed up the slow data processing of 3D models in the application viewer to improve usability and reduce loading time.
- The client asked to work quickly on UI/UX improvement, upgrade the current tech stack, and implement new technologies.
- The speed of the application performance was an essential factor. The client was losing his customers because of its slow work.
- Along with the requirements mentioned above, the client wanted to expand the features list significantly.
Technologies Used:
Autodesk Forge API
React
Redux
Redux Saga
Material-UI
Project Highlights:
Autodesk Forge APIHigh PerformanceHuge Tree Calculations