https://reindernijhoff.net/2021/11/townscapers-rendering-style-in-webgl/

Skip to content

reindernijhoff.net

Menu

  * Blog
  * Photos
  * Shadertoy
  * Turtletoy
  * About

Townscaper's rendering style in WebGL

I really love the rendering style of Townscaper by Oskar Stalberg.
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:

  * Rendering a planet with two triangles
  * JS1k post-mortem Minecraft
  * Wolfenstein: Ray Tracing On using WebGL1
  * Doom 3 - OpenGL Shading Language
  * Rendering distance fields using the Go-language

Townscaper's rendering style in WebGL
reinder November 1, 2021 Javascript

  * - Robotic Arm
  * 

Search

[                    ]
Recent Posts

  * Townscaper's rendering style in WebGL
  * Robotic Arm
  * Ray Tracing - Primitives
  * Wolfenstein: Ray Tracing On using WebGL1
  * Home - Global Game Jam
  * 3D Line Art Engine (port)
  * Yet another Cornell Box
  * Procedural cubic city
  * Turtletoy
  * Augmented Reality and Shadertoy

Categories

  * Apps (6)
  * Game (3)
  * Javascript (6)
  * Shadertoy (20)
  * Turtletoy (3)
  * Uncategorized (7)

Copyright (c) 2021 reindernijhoff.net