Townscaper’s Rendering Style in WebGL | Hacker News Reader

Townscaper’s Rendering Style in WebGL

reindernijhoff.net

177 pointswinkywooster18 comments

You know what's mindblowing to me?

I remember seeing the creator of the source material here posting tech demos experimenting with this technique years ago.

Like some googling shows it was probably a demo from at least 6 years ago!

But the style was so distinct that within moments of reading the title, it clicked that it was going be that tech demo I had seen, and that the tech demo had become a game called "Townscaper"

It brought back a lot of memories, and it's amazing to see that he turned it into what looks like a very successful game years later.

It's also a testament to how unique it was, I could not think of a single "town related" rendering I had seen that was worth an entire article replicating besides his after half a decade.

I never have time for games anymore, but I'm buying a copy just as a kind of memento. It's crazy how much has changed since those days.

I bought a copy shortly after it came out. I think I've played it twice for a cumulative play time of perhaps an hour. I expect I'll pick it up again here and there for some stress free fun, but even if I don't I feel it was money well spent.

It scratches the same creative itch as Minecraft did way back when. I could spend hours walking around in first person if only that were implemented.

Could you find the original links to this technique?

Wish the article had more details about the actual rendering techniques, though. Or did I miss something?

I love reading about rendering methods because it's so visual and interesting. Still neat to see a reproduction without exposition!

Here you go: https://www.reddit.com/r/TheMakingOfGames/search?q=frame&res...

Any idea what "like the ‘every odd pixel is a line’ texture mapping technique" refers to? I can't seem to find a descrition of it anywhere...

Take a really low rez texture. Shrink every other pixel to the size of a single pixel on you screen. Now you got yourself a nice random brick texture.

Townscaper does that dynamically in a pixel shader.

Here's a great breakdown I saw linked on twitter when Townscaper came out: https://observablehq.com/@severo/every-other-pixel-is-a-line

Just a small nit, but the scroll event isn't blocked from bubbling up, so when you scroll down to zoom out, the browser scrolls the page down, which is kind of annoying.

Wow it's beautiful. Do you have more information on this rendering style?

Did anyone get it to work with your own obj files? I dropped 5 different ones in the canvas and nothing showed up.

Can you give me a link to an .obj that doesn't work so I can have a look?

I was hoping it was built on threejs - to try to add webxr support and look at it in vr...

Looks beautiful :)

It looks like the outlines are created from slightly enlarged geometry that's only visible from the backside. Neat.

A very old trick I remember also being already used by modders for quake 3 custom models because it didn't require explicit support in the engine, just the same model a bit bigger and with reversed vertex order.

https://bgolus.medium.com/the-quest-for-very-wide-outlines-b... mentions this trick, and provides an alternative approach if you want uniformly thick outlines in screen space rather than geometry space. Also geometry-based and screen-aside outlines generate different results when an object (like a curved roof) partially occludes itself.

Reply on news.ycombinator.com