Windland: the Codrops case study, and how a two-week city got famous

· 1 min read · three.js, case-study, codrops, blender, optimization

Windland, a stylized mini-city with saturated colors and soft post-processing, the subject of a Codrops case study

On April 25, 2022, Codrops published my case study, Windland: An Immersive Three.js Experience. Windland is the project people tend to remember, so it deserves a proper celebration.

How it started #

I have always loved games, and I dreamed of an interactive mini-city with saturated colors, like SimCity. The obstacle was that I had neither the 3D knowledge nor a library. At the end of 2021 I took Bruno Simon's Three.js Journey, and discovered I was a creative developer. The whole project was made in about two weeks, between shifts at work at Neotix.

The goals #

  • decent realism from game-style post-processing without hurting performance,
  • at least 30 fps on as many devices as possible, especially phones,
  • a download smaller than 2 MB.

What made it light #

  • Blender for everything static. The city, sculpted terrain and free building templates adapted to the setting.
  • Natural light with Nishita. Blender's world node for the sky, baked into a single 2048x2048 floor texture that contains all the shadows, at no runtime cost.
  • Trees with geometry nodes for variation in size, shape and rotation, with a density painted by material selection.
  • Draco compression: the whole model comes out at about 1.2 MB, with Draco sometimes making files 7 times smaller.
  • MeshSurfaceSampler for the trees in three.js, instead of exporting them all, since exporting every tree made the GPU upload too slow.

What people did with it #

The article came with a free boilerplate, and the project began to show up in curated lists, such as the Web Game Dev list of demos, which links Windland together with the article. Windland was also one of the first projects of mine featured on the three.js homepage.

Try it #

The city is live at windland-neotix.vercel.app, and the project is on its project page. The earlier post about it is here.

Related projects