I love the rendering style of Townscaper by Oskar Stålberg. Since Townscaper can export your town as a .obj (including three “magic” textures), I thought it would be a nice project to reverse-engineer this style.

Townscaper’s rendering style in WebGL

Last weekend I finally had time and made a proof-of-concept in WebGL. You can find the demo here: https://projects.reindernijhoff.net/townscaper/.

I had a lot of fun reverse-engineering Townscaper’s rendering style. Especially because Oskar uses some nice tricks like the ‘every odd pixel is a line’ texture mapping technique and a boolean operation for the windows and doors. For the boolean operation, I used Carmack’s reverse – the last time I used this algorithm was over 15 years ago.

  • Use your mouse to rotate the model and zoom in and out.
  • You can drag and drop an exported .obj file onto the WebGL canvas to display it.
  • And finally: the visualization is not a perfect match, but I think it’s good enough :)

You can test the demo in the iframe above or play it full-screen here: https://projects.reindernijhoff.net/townscaper/.

Similar posts

If you like this post, you may also like one of my other posts:

Townscaper’s rendering style in WebGL