3D System Viewer
Interactive Three.js visualization for navigating complex ship engine room structures and mechanical components.
3D Engineering Platform
A browser-based engineering platform for interactive ship system visualization, structured component exploration, metadata management and real-time system updates.
Commercial project developed at AlphaWave • Included with permission.
Overview
SMECO was designed as an interactive 3D platform for visualizing and managing ship engine room systems directly in the browser. The application combines a real-time Three.js viewer with structured component metadata, documents, authentication and live database synchronization.
Features
Interactive Three.js visualization for navigating complex ship engine room structures and mechanical components.
Components are organized into ship systems, allowing users to explore the model through a clear technical hierarchy.
Component titles, descriptions and documents are stored and synchronized through a PostgreSQL-backed backend.
Server-sent events allow metadata changes to appear in the interface without requiring a full page refresh.
Architecture
Three.js, Vite and JavaScript power the interactive browser-based viewer.
Express endpoints handle authentication, component metadata and documents.
Structured project data is stored in relational tables for systems, components and users.
Live events notify the interface when database records are changed.
Interface
Technology
FAQ
Traditional engineering documentation is often spread across drawings, PDFs and disconnected software tools. SMECO brings interactive 3D visualization, technical documentation and structured component data together in one browser-based engineering platform, making complex ship systems easier to explore and manage.
The 3D model is only the visual layer. Every component is connected to structured metadata stored in PostgreSQL, allowing descriptions, documentation and engineering information to be updated independently from the model itself. This separates visualization from data management and makes the system significantly easier to maintain.
Instead of requiring users to refresh the page, SMECO uses Server-Sent Events (SSE) to notify the interface whenever component metadata changes. Updates made through the backend appear immediately in the browser, creating a more responsive engineering workflow.
Static files work for demonstrations but become difficult to maintain as projects grow. PostgreSQL provides structured relationships, reliable querying, centralized updates and a scalable foundation for managing hundreds of engineering components and future system extensions.
SMECO follows a modular architecture where the Three.js frontend, Express REST API, PostgreSQL database and authentication layer operate independently. This separation of responsibilities simplifies future maintenance, testing and feature development while allowing each layer to evolve without affecting the others.
JWT authentication separates authenticated users from public visitors and provides a foundation for role-based access. Engineering metadata, document management and administrative operations can therefore be protected while keeping the visualization experience accessible where appropriate.
The biggest challenge was integrating real-time 3D visualization with a traditional full-stack architecture. Rendering, API communication, authentication, database synchronization and user interaction all had to work together without making the interface feel complex or slowing down the application.
Continuous polling generates unnecessary network traffic because the client repeatedly asks the server whether something changed. SSE keeps an open connection and delivers updates only when changes actually occur, reducing overhead while providing near real-time synchronization.
SMECO demonstrates end-to-end software engineering across browser graphics, backend development, database design, REST APIs, authentication, real-time communication and scalable system architecture. It reflects the ability to design, build and integrate multiple technologies into a single production-oriented engineering platform.
Commercial Experience
SMECO was developed during my work at AlphaWave as a commercial engineering platform and is included in this portfolio with permission.
Designed and implemented the complete software solution, including frontend architecture, backend services, REST APIs, authentication, database integration and interactive application logic.
Built the complete interaction layer around the engineering model, including component hierarchy, system navigation, metadata management, focus tools and real-time visualization.
The engineering 3D model was provided by a colleague, while the software architecture and implementation were developed independently as part of the commercial project.
Developed within AlphaWave for practical engineering workflows, focusing on maintainability, scalability and day-to-day usability in a professional environment.