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.
Last weekend, I finally had time to create a proof-of-concept in WebGL.
I had a lot of fun reverse-engineering Townscaper’s rendering style, mainly because Oskar uses nice tricks like the ‘every odd pixel is a line’ texture mapping technique and a boolean operation for the windows and doors. I used Carmack’s reverse for the boolean operation — 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://renderqueue.dev/townscaper.
Similar posts
If you like this post, you may also like one of my other posts:
- WebGL Lightmapping Demo
- Wolfenstein: Ray Tracing On using WebGL1
- JS1k post-mortem Minecraft
- 3D Line Art Engine (port)
- The RenderQueue