Tech Stack

Now that we know the browser’s capabilities, let’s talk about the tech stack – the set of tools and libraries – we’ll use to create our game. At the core is HTML5 and the browser itself, which gives us the canvas to draw on and the environment to run code. We’ll write our game using TypeScript/JavaScript, since that’s the language of the web. For rendering 3D graphics, we use Three.js, one of the most popular libraries for WebGL. Three.js gives us a convenient way to create 3D scenes, models, and animations without coding directly with low-level WebGL calls. On top of Three.js, we’ll utilize React Three Fiber (R3F), which is a library that lets us use Three.js inside a React framework. React itself is a JavaScript library for building user interfaces. You might wonder, why use React for a game? The reason is it helps organize our code into components and manage state efficiently. React Three Fiber turns Three.js classes into reusable React components, allowing us to build our 3D scene in a declarative way (similar to how we’d build a web UI). We also plan to handle game state with a library called Koota, which is a performant real-time state management system. Koota is an ECS-based state management library optimized for real-time apps and games. ECS stands for Entity-Component-System, a game development pattern that helps manage game objects and their data efficiently. Using Koota, we can keep track of things like player stats, enemy positions, and game logic in a way that’s optimized for performance and easy to update. Our tech stack might also include other pieces: for instance, a physics engine (more on physics later) or helper libraries for user interface/HUD elements (we could use regular HTML/CSS or React for on-screen menus and scores). We will use build tools (like a bundler and development server) to organize and test our code, but those work behind the scenes. The key idea is that our stack leverages modern web technologies: React for structure, Three.js for 3D rendering, and other libraries like Koota for state and possibly physics or sound libraries as needed. This combination will let us build a complex game in a maintainable way. Next, we’ll dive deeper into why we chose React Three Fiber over using Three.js alone, and what benefits that brings.