Sunday Drive: A Browser Timekiller Game
Hi! Michael Popov here, Creative Frontend Lead at Red Collar.
Today, I’m diving into Sunday Drive. We’ve already dropped a few sneak peeks, but this time, we’re getting into the details and taking a more serious look at it. Lets’ go!
How it Started
From the start, I decided to bring my old gaming vibes from college straight to the web when choosing the game’s style and gameplay structure.
Back then, I built the game in Unity, but this time, I decided to port it to TypeScript and WebGL.
Graphics and Models
The game doesn’t use any graphics libraries like Three.js — I chose to skip off-the-shelf solutions and build the pipelines from scratch. For models, it uses the RC3 format, converted from GLTF, which only stores geometry data. In the case of cars, it also includes info about ‘bones’ and the attached models.
If you take a closer look at the vehicles, you’ll see they’re made up of several parts:
The front and rear sections are separate to show damage based on the side of impact. The wheels are also independent, allowing them to spin during turns. For cars that haven’t collided and are simply driving on the road (excluding the player’s car), they’re merged into a single model and rendered in one pass.
Enviroment
For the environment, all textures are packed into a single atlas to reduce texture switching in the stack. Buildings are rendered one per pass — here’s how the three road sections come together:
Here, you can see that all sprites in a section are combined into an instanced mesh and rendered in a single pass. You’ll also notice the shadows, which are drawn using a standard shadow map (without filtering) before the main pass. The road’s curve — and that of all other models — is handled in the vertex shader. Technically, the road isn’t actually bent; it’s just a visual effect.
If you’ve got questions or want to learn more details, drop a comment!
Subscribe to our newsletter!
