Turning height map images into sweet 2D maps

Project URL: http://testing-hill-shading.glitch.me/

Ever thought “I wish I could turn a height map image into a good looking 2D map”? You’re not the first! And it turns out that everything you might want to do to make that happen can be done entirely in JavaScript, so… let’s turn a height map…

…into a sweet looking “real” map!


I’m using this opportunity to plug your v good Flying Planes with JavaScript post: Flying planes with JavaScript | are-we-flying


you know what’s wild, SVG has a tag for a heightmap lighting engine

also the background on this game website

even has self shadowing :open_mouth: they use webgl though, I think

1 Like

There’s some really nifty stuff built into the various (well hidden) parts of the web stack! Of course, a lot of it’s locked behind “I hope you know how to write HLSL”, but with the recent WebGPU work, things might at least get a little more accessible. Although it’ll still be far more graphics programmy than most JS devs will have ever been exposed to =D

1 Like

wow that webgl background feels totally different from the actual game :rofl: which has a different style

1 Like

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.