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/.
If you like this post, you may also like one of my other posts:
- JS1k post-mortem Minecraft
- Rendering a planet with two triangles
- Wolfenstein: Ray Tracing On using WebGL1
- Doom 3 – OpenGL Shading Language
- Rendering distance fields using the Go-language