Web Game Engine
I developed a browser-based game engine in TypeScript, following the latest modern standards. It is built on an object-oriented programming (OOP) structure combined with an Entity-Component-System (ECS) model, ensuring optimal modularity, extensibility, and performance. I integrated Three.js for real-time 3D rendering and Rapier for physics simulation, achieving precise synchronization between the two engines to maintain perfect consistency in movements and collisions.
Project Link
Key points
OOP and ECS Architecture
The engine is based on an object-oriented approach combined with an ECS structure. Each entity is dynamically composed of specialized components (physics, rendering, controllers, etc.), orchestrated by dedicated systems. This setup enables adding, modifying, or removing behaviors flexibly, improving maintainability and scalability across the project.
Physics and Graphics Synchronization
The engine ensures a reliable bridge between Rapier (physics) and Three.js (graphics). Physical entities (RigidBody, Collider) are created from Hitbox components, and their states are synchronized each frame with their corresponding Three.js objects, ensuring visually consistent interactions.
Mouse and Keyboard Input Management
The engine implements a complete abstraction layer for user input. Mouse movements and keyboard keys are captured and converted into events accessible to relevant systems. This allows characters to be controlled, actions to be triggered, or cameras to be manipulated without tight coupling between entities and input devices.
Dynamic Camera Systems
I designed a system to manage multiple camera modes dynamically: first-person view (FPS), third-person view (TPS), and free aerial camera. Each mode adapts the mouse and physics behavior to provide a smooth and intuitive experience.
Challenges
I had to design a reliable bridge between two engines with very different workflows (Rapier for physics simulation and Three.js for 3D rendering). This required strict management of position, rotation updates, and collision events, while adhering to the best practices of each technology.
Building a clean ECS architecture required careful separation of responsibilities between components and systems. Each system must orchestrate entities efficiently while remaining completely decoupled from their specific content.
Designing a modular engine capable of accommodating new systems, entities, and components without strong coupling pushed me to adopt the best software design patterns while ensuring real-time performance suitable for the browser.