Implementation of a real-time 3D navigation visualization on the web

Abstract

Traditional nautical autopilot systems require ships to have complex and expensive electronic components, making its use and access difficult to the private user with small motor crafts. Under the need to cover this niche market, Searebbel was born, a start-up focusing on developing a digital rudder that connects to a mobile application. The app aims to make autonomous navigation easier and more accessible by means of route planning based on user-specified waypoints on a 2D map. In parallel it provides a 3D visualization simulating the users boat sailing in real-time based on weather conditions, sun position, and location, and a social component where users can add information buoys and share their journey with friends. This thesis covers the implementation of the pre-MVP with an interactive 2D map and a real-time dynamic 3D visualization of the maritime scene. The application offers the rendering of a large ocean surface in real-time with physics, as well as the support of multiple weather conditions such as rain, clouds, fog and different sea states, making it a challenging task to achieve in the context of mobile devices. This project uses the React library as the container of the frontend application, implements the MERN stack for the backend connection, Mapbox for the 2D scenery, and React Three Fiber, an extension of the Three.js library, for the graphics. The result of this work is a web demo that fulfills all the requirements with outstanding performance while still delivering great visual results, carrying out a proof of concept that can easily be extended in the future.Actualment, els vaixells necessiten components electrònics complexos i cars per tal de tenir sistemes de pilot automàtic, dificultant l’ ́ús i accés a l’usuari particular amb petites embarcacions. Sota la necessitat de cobrir aquest nínxol de mercat, va néixer Searebbel, una empresa emergent orientada a desenvolupar un timó digital que es connecta amb una aplicacio mòbil. L’app busca facilitar i fer més accessible la navegació autònoma a través de la planificació de rutes amb waypoints especificats per l’usuari sobre un mapa 2D. Paral·lelament, ofereix una visualitzaci ́o 3D simulant el vaixell de l’usuari navegant en temps real, basat en les condicions clim`atiques, posici ́o solar i localització. Així com un component social on els usuaris poden afegir pins d’informació i compartir la seva travessia amb amics. Aquesta tesi cobreix la implementaci ́o del pre-MVP amb un mapa 2D interactiu i una visualitzaci ́o 3D dinàmica en temps real de l’escena marítima. L’aplicació ofereix la repre sentació d’una gran superfície oceànica en temps real amb físiques, així com el suport de múltiples condicions meteorològiques com la pluja, núvols, boira i diferents estats marins, convertint-se en una tasca difícil d’aconseguir en el context dels dispositius mòbils. Aquest projecte utilitza la biblioteca React com a contenidor del frontend de l’aplicació, implementa l’stack MERN per a la connexió del backend, Mapbox per a l’escenari 2D, i React Three Fiber, una extensió de la biblioteca Three.js, per als gràfics. El resultat d’aquesta feina ́es una demo web que compleix tots els requisits amb un rendiment excepcional, oferint uns grans resultats visuals, obtenint així una prova de concepte que es pugui estendre fàcilment en el futur.Actualmente, los barcos necesitan componentes electrónicos complejos y caros para tener sistemas de piloto automático, dificultando el uso y acceso al usuario particular con pequeñas embarcaciones. Bajo la necesidad de cubrir este nicho de mercado, nació Searebbel, una empresa emergente orientada a desarrollar un timón digital que se conecta con una aplicación móvil. La app busca facilitar y hacer más accesible la navegación autónoma a través de la planificación de rutas con waypoints especificados por el usuario sobre un mapa 2D. Paralelamente, ofrece una visualización 3D simulando el barco del usuario navegando en tiempo real, basado en las condiciones clim ́aticas, posición solar y localización. Así como un componente social donde los usuarios pueden añaadir pines de información y compartir su travesía con amigos. Esta tesis cubre la implementación del pre-MVP con un mapa 2D interactivo y una visualización 3D dinámica en tiempo real de la escena marítima. La aplicación ofrece la representación de una gran superficie oceánica en tiempo real con físicas, así como el apoyo de múltiples condiciones meteorológicas como la lluvia, nubes, niebla y diferentes estados marinos, convirtiéndose en una tarea difícil de conseguir en el contexto de los dispositivos móviles. Este proyecto utiliza la biblioteca React como contenedor del frontend de la aplicación, implementa el stack MERN para la conexión del backend, Mapbox para el escenario 2D, y React Three Fiber, una extensión de la biblioteca Three.js, para los gráficos. El resultado de este trabajo es una demo web que cumple todos los requisitos con un rendimiento excepcional, ofreciendo unos grandes resultados visuales, obteniendo as ́ı una prueba de concepto que se pueda extender fácilmente en el futuro.