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

Anim Theme — Thu, 04 Dec 2025 15:15:27 +0000

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.

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."

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).

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.
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

🎉 I Just Launched AnimTheme A Marketplace for Web Animations

Anim Theme — Mon, 24 Nov 2025 15:18:51 +0000

Hey DEV community!
I’m Emmanuel, a full-stack developer who loves building animation-driven interfaces with Three.js, GSAP, and modern web tools.

After weeks of work, I just launched AnimTheme — a niche marketplace for developers and designers who create web animations, motion components, and animated UI elements.

🔥 What AnimTheme offers

Curated animations & themed components

Ready-to-use motion assets for websites/apps

A place for creators to list and sell their animation work

Instant downloads for buyers

I built it because I’ve always loved animation-heavy projects, and I noticed there wasn’t really a marketplace focused specifically on web animation code — so I decided to make one.

🚀 What’s next

Right now I’m:

Improving the platform week by week

Adding new animations myself

Inviting creators to upload their work

Talking to early users to understand what they want

I’ll be sharing updates, behind-the-scenes, and lessons I learn along the way here on DEV.

🙌 If you want to check it out:

https://animtheme.vercel.app

Would love any feedback, ideas, or things you'd like to see in a motion marketplace.

Thanks for having me here! 🚀

Forem: Anim Theme

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

🎉 I Just Launched AnimTheme A Marketplace for Web Animations