3D on the web, and how it gets built

Games, films and pages that draw themselves in your browser. This picture is one of them: a deferred renderer I wrote for this page, running on your GPU right now.

Games and films

Games you can play in a tab

Tiny Tactics

A free turn-based tactics game on a 3D toy-box diorama, built solo in about two weeks with three.js and React Three Fiber.

One deterministic TypeScript engine runs the rules everywhere, and the renderer only animates its events. So the 3D board, the battle cutscenes and the flat PNG snapshots are all views of the same game. Cutscenes play out on the real board, with no pre-rendered video.

Play it Case study

taipei.gg

Taipei After Hours: free browser games set in one endless city, with no download and no account.

轉乘 Transfer. Anomaly horror, with VR support.
垃圾不落地 Garbage Never Touches the Ground. Falling-block arcade.
開攤啦 Night Market Rush. Cooking arcade.

Play at taipei.gg

Back to the desk. It starts as geometry: every triangle, and no light at all.

Albedo next, poured in one object at a time.

Ambient light and occlusion give it weight.

What's in this frame

I wrote this renderer for this page. Nobody buys it and no client runs it. It's here because the clearest way to show how real-time 3D works is to open one up.

Geometry: One draw per mesh into a G-buffer: albedo, normals, roughness and metalness, emissive and depth. No lighting yet.
Light: Full-screen passes read those buffers. PCSS shadows for the lamp, the laptop screen as an area light, GTAO, image-based light from a PMREM and screen-space reflections.
Glass: A G-buffer holds one surface per pixel and glass needs two. So the tumbler is drawn forward, over the lit frame, bending what's already there.
Lens: Temporal resolve, a thin-lens 50 mm at f/2.4, HDR bloom, AgX and fine grain.
Materials: Walnut, brass, stoneware, felt and paper are baked from GLSL on load. The only image textures are the avatar's and the real screenshot on the laptop.

Every pass with its own texture, the GLSL that drew it, and GPU timings if your browser reports them.

One light, with a soft shadow map. Drawn per pixel, in one full-screen pass.

Then what makes its own light, and what reflects it: the screen, the city, the city in the desk.

Films made in code

My AI music videos go through a compositor I wrote: three.js, with every frame a pure function of time. It renders each frame at an exact time in headless Chrome and streams them into ffmpeg. It came out of the Tiny Tactics action trailer.

Godspeed (Little Machine)

Feel the Signal

Vibe Coder

More running on this site

Excellence How AI-built work stays as precise as a hand-finished watch.
Audience How a product finds its audience, and how people keep coming back.
Infrastructure A live system you can try to break.

What I can build for you

A game or interactive piece that opens in a browser tab, with nothing to install.
A product, place or process people can move around in.
Film and animation made in code, when you need exact timing or many versions.
An existing three.js scene made faster or better looking.

I'll tell you early what a mid-range phone can run, and what the page does when it can't.

Talk to me

Last, a lens: real depth of field on real depth, then the grade.

Have something that should be 3D?

Let's talk