Townscaper's rendering style in WebGL - reindernijhoff.net
source link: https://reindernijhoff.net/2021/11/townscapers-rendering-style-in-webgl/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
I really love the rendering style of Townscaper by Oskar Stålberg. Since Townscaper has the option to export your town as an .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 really 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 before 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 visualisation 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:
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK