outlol is a free multiplayer football game that runs in the browser: https://outlol.bid
The 3D view and the lobby are three.js (WebGLRenderer):
- Lobby: a globe that turns into a low-poly city island, where every field is a stadium. The stadiums are instanced. The shadow map has
autoUpdate = falseand is only rebuilt when the scene’s structure changes. - Match view: in 3D you play from behind your own player, and spectators watch from the side like a TV broadcast. The foosball tables sit inside their own rectangular arena.
- Models: built in Blender or generated by Python scripts, with no third-party packs. Replacing the old packs took the map from 1.36M to 0.45M triangles per frame, and the model download from 890 KB to 144 KB gzipped.
- Phones: pixel ratio 2 with MSAA, ACES filmic tone mapping. The rule was to draw less on phones, not to draw worse.
The match itself is a fixed 60 Hz physics simulation on one player’s browser, sent to the others over WebRTC. There is also a 2D Canvas view of the same match.
I’d love feedback on how it runs on your GPU and phone, especially the city map.
