Building 'Block City Racer': Procedural Generation & Performance in Three.js

The Challenge
I wanted to build an infinite, procedural cyberpunk city. I wanted traffic, drones, physics, and day/night cycles.
But there was a catch: I’m coding on a laptop with only 4GB of RAM.
If I loaded a single 4K texture or a heavy physics engine, my browser tab would crash. So, I had to get creative. I decided to build Block City Racer—a lightweight, mobile-responsive driving simulator for the web—using raw math and optimization tricks.
Here is a look at the dev log and how I pulled it off.

1. The Visuals: "Baking" on the Fly I couldn't afford to download heavy .jpg textures for the buildings or roads. Instead, I used the HTML Canvas API to generate textures in memory when the game loads. Roads: Generated via code (black background + white dashed lines + noise). Branding: I wrote a script to paint "ANIMTHEME" directly onto the asphalt texture, so as you drive, the road itself markets the platform. Windows: Procedurally drawn rectangles with a chance to be "lit" (yellow/blue) or "dark."

1. Performance: The Power of Instancing Rendering 3,000 unique building meshes kills the CPU. Instead, I used THREE.InstancedMesh. This allows the GPU to render one cube geometry 3,000 times in a single draw call. I used the same technique for the traffic system and the drone swarm. Traffic: 50 cars. Drones: 50 sci-fi discs tilting into the wind. Draw Calls: 2. FPS: 60 (even on mobile).

1. The "Dr. Driving" Mobile Controls
   I didn't want simple buttons. I wanted a simulation feel. I built a custom DOM-based dashboard overlay that sits on top of the Canvas.
   Steering: I used SVG math to track the user's thumb rotation. You actually "turn" the wheel.
   Gearbox: A working D/R shifter that inverts the gas pedal logic.
   Pedals: Custom SVG graphics for Gas and Brake.

2. Audio Synthesis (No MP3s!)
   Downloading an engine sound file takes bandwidth. Instead, I built an AudioEngine class using the Web Audio API.
   I created an oscillator (Sawtooth wave) and connected it to a Low Pass Filter.
   Idle: The filter closes (muffled rumble).
   Accelerate: The filter opens (aggressive growl) and pitch increases based on velocity.
   It sounds like a sci-fi turbine, and it costs almost 0kb of memory.
   What's Next?
   This project is a flagship template for AnimTheme, a new marketplace for developers and designers that we just launched.
   I'm currently working on:
   Adding a Third-Person Character Controller (getting out of the car).
   Interior mapping for fake 3D windows.
   More aggressive drone AI.
   x.com/Animtheme
   Follow me here for Part 2 where I add the character controller!

Preview the project here:
https://animtheme-city.vercel.app
Watch Demo