In the current digital age, technology has undergone significant advances that have permeated various aspects of our daily lives, transforming the way we interact with the environment and access information. One of the fields that has experienced rapid development is that of Extended Reality (XR)1, an umbrella term that encompasses Virtual Reality (VR)2, Augmented Reality (AR)3, and Mixed Reality (MR)1, complementing the ability to add information virtually with the control and knowledge of a virtual environment1. These emerging technologies have opened up a wide range of possibilities in both applications for practical and leisure use, as well as its usage in various sectors, from industry and entertainment to education and medicine.
This Master's Final Project (TFM) focuses on the "Development of a React application for visualizing 3D maps with Augmented Reality (AR) and 360º photos in Virtual Reality (VR)". The objective of this project is to take advantage of technological advances in the field of XR to create an interactive application that allows users to explore and visualize 3D models in AR, as well as immerse themselves in immersive VR scenarios through 360º photos.
The combination of AR and VR opens up a new horizon in terms of the user experience, allowing for a richer and more realistic interaction with digital content. AR overlays virtual elements on the user's physical environment, while VR immerses the user in a completely digital and artificial world. Both technologies, complemented by the power of the react-three-fiber and react-xr, having under the hood the graphics engine Three.js, promises a captivating and immersive user experience.
In recent years, the development of XR technologies has been driven by major advances in hardware, such as lighter, more powerful, and more affordable display devices, and the widespread adoption of high-performance smartphones with AR and VR capabilities. In addition, the growing processing power and the improvement in tracking and recognition algorithms have made it possible to deploy these technologies more effectively on a variety of devices.
Currently, XR has found application in fields as diverse as architecture, design, the entertainment industry, medicine, education, tourism, advertising, smart cities, just to name a few. From training simulations to 3D product visualization, these technologies have revolutionized the way we perceive and experience information.
To carry out the development of the application, it has been chosen to use an architecture based on a Django Rest API server due to its easy implementation (ironically, the API Server is not yet implemented) and a mongodb database to store the 3D models and 360º photos. The choice of Django as a backend development framework is based on its robustness and ability to efficiently manage data and requests. Likewise, the use of a database will allow for an organized and secure storage of the resources needed for visualization in AR and VR.
Through the combination of these technologies, the goal is to facilitate user interaction with digitally generated content and enrich the user experience, providing tools for exploring and understanding environments and objects in an innovative and attractive way.
In the development of this research, various fundamental aspects will be addressed to achieve the objectives set out. A detailed analysis of XR technologies, their evolution over time, and their impact on society1 will be carried out. In addition, the architecture and operation of the React application will be described, highlighting the key role played by Three.js in the creation of immersive 3D experiences4.
In conclusion, the main objective of this work is to explore and take advantage of advances in XR technologies for the development of a React application that allows users to enjoy immersive experiences in AR and VR. The study of the involved technologies and the configuration of the necessary infrastructure for their correct operation will make it possible to offer an application with high potential value in different areas of everyday and professional life.
Link to the aforementioned document: Master's Thesis
[Please be aware it is in Spanish]
App in action:
Palau de les Arts Reina Sofía en Augmented and Virtual Reality