[en] 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.

[es] 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.