6 ms·

Show HN: Mountain Peaks in WebGL

281 points by pheelicks 6y ago

tomcam 6y ago
Bonus: can nick the names and use for IKEA furniture
- codetrotter 6y ago
  Most of those names don’t look very Swedish. Only one that I see really working is Daniel. And as far as I can tell there is no IKEA furniture named DANIEL. They could use that name for some furniture that would complement the BILLY bookshelves for example.
- arghwhat 6y ago
  ... IKEA furniture doesn't use German names.
- quickthrower2 6y ago
  Zuckerhütl could be a social network
hans1729 6y ago
I have some rendering-issues: https://i.imgur.com/D0LW0r9.png https://i.imgur.com/D0LW0r9.png
- pheelicks 6y ago
  That's not a bug, it's Germany! The aerial imagery comes from the Austrian basemap.at dataset, which only covers Austria. If you use imagery that covers multiple countries this isn't an issue, but for this project I wanted to try out the basemap.at data. See https://github.com/felixpalmer/procedural-gl-js/ https://github.com/felixpalmer/procedural-gl-js/ for more
  - Blahah 6y ago
    > That's not a bug, it's Germany! This is my favourite sentence of 2020.
pheelicks 6y ago
Hi HN, Merry Christmas to all! I made this as a demonstration of the open data available from the Austrian government under the www.basemap.at project. The rendering engine is built on top of THREE.js and can be found here: https://github.com/felixpalmer/procedural-gl-js/ https://github.com/felixpalmer/procedural-gl-js/ For those in the southern hemisphere, there is also a similar visualization of the national parks of New Zealand: https://felixpalmer.github.io/new-zealand-3d/ https://felixpalmer.github.io/new-zealand-3d/
- fh973 6y ago
  Where do you get the DEM from?
  - capableweb 6y ago
    > https://github.com/felixpalmer/procedural-gl-js/ https://github.com/felixpalmer/procedural-gl-js/ > Key features > Batteries included elevation data. Global 3D data coverage courtesy of nasadem.XYZ > https://www.nasadem.xyz/ https://www.nasadem.xyz/
- sillysaurusx 6y ago
  Just want to say, love the mobile interface on iOS. Smooth as butter, super controllable, intuitive. I don’t know whether you designed it or if it came with the engine, but either way, quite lovely.
  - jtbayly 6y ago
    I disagree with one aspect. Rotation doesn’t work the way it does in every other iOS UI, and so it took me forever to figure out how to rotate. On a related note, it kept inexplicably rotating whenever I would zoom in and out. Still impressive and smooth, though. And might just be part of the library chosen.
    - pheelicks 6y ago
      Could you elaborate? I'm also an iOS user and find it intuitive. But of course I would, as I've spent hours developing it and can't see the issues in the way a new user would. If you move two fingers in a rotating fashion the map rotates, does it not do this for you?
Keyframe 6y ago
Hmm, I can see rendering only as a flat map. Is it supposed to have height to it?
- Patient0 6y ago
  Same here. Maybe it does not work correctly on all platforms? I'm using an old Android phone (Samsung G8)
- strictfp 6y ago
  Same here. Could it be some rate limiting of the height data? I'm on a Samsung S20.
- pheelicks 6y ago
  Yes, there very much should be a 3rd dimension. If you're having issues I'd appreciate if you could file an issue on https://github.com/felixpalmer/procedural-gl-js https://github.com/felixpalmer/procedural-gl-js mentioning what device you have along with the output from https://webglreport.com/ https://webglreport.com/ In the meantime, there are some video captures on my twitter: https://twitter.com/pheeelicks https://twitter.com/pheeelicks
- arifmeticus 6y ago
  Same. I'm on desktop Firefox 84
ajnin 6y ago
Why is the polar angle constrained so much?
- pheelicks 6y ago
  Generally just a choice for the demo - in part because restricting the view distance means less data to download (thus lower cost to serve!). If you switch the phone to portrait you will be able to see the horizon. The library itself (https://github.com/felixpalmer/procedural-gl-js https://github.com/felixpalmer/procedural-gl-js) lets you configure the angle freely.
bigdict 6y ago
Merry Christmas! This is really well done. This gets very close in the look and feel to Google Maps/Earth.
la_fayette 6y ago
Amazing work! Is there any open data for elevation for germany?
- pheelicks 6y ago
  There are a number of global elevation datasets. Check out JAXA, EUDEM or NASADEM for example. Processing them into a usable form is another issue. For the Procedural GL JS library we use NASADEM, via the www.nasadem.xyz service, which has almost global coverage (up to 60 degrees N)
recursive 6y ago
This is working much better than it was last time I saw it on the front page. Nice work.
yincrash 6y ago
Apparently my setup was on the GPU blocklist in chrome so I had to enable #ignore-gpu-blocklist in chrome://flags This demo did not want to run on CPU only :)
turbinerneiter 6y ago
Leiwand!
germanka 6y ago
Where the aerial imagery comes from?
tarruda 6y ago
Super nice work. Can you recommend any resources/documentation/tutorials for someone interested in learning graphics programming (possibly with webgl) ?
- pheelicks 6y ago
  I have a few articles on my blog (and will be adding more related to the Procedural GL JS) library: www.pheelicks.com I would also very much recommend: - https://webglfundamentals.org https://webglfundamentals.org - https://www.iquilezles.org https://www.iquilezles.org - https://fgiesen.wordpress.com/2011/07/09/a-trip-through-the-graphics-pipeline-2011-index https://fgiesen.wordpress.com/2011/07/09/a-trip-through-the-... - Reading the code on shadertoy.com shaders & THREE.js examples

281 points by pheelicks 6y ago

tomcam 6y ago

Bonus: can nick the names and use for IKEA furniture

codetrotter 6y ago
Most of those names don’t look very Swedish. Only one that I see really working is Daniel. And as far as I can tell there is no IKEA furniture named DANIEL. They could use that name for some furniture that would complement the BILLY bookshelves for example.
arghwhat 6y ago
... IKEA furniture doesn't use German names.
quickthrower2 6y ago
Zuckerhütl could be a social network

hans1729 6y ago

I have some rendering-issues: https://i.imgur.com/D0LW0r9.png https://i.imgur.com/D0LW0r9.png

pheelicks 6y ago
That's not a bug, it's Germany! The aerial imagery comes from the Austrian basemap.at dataset, which only covers Austria. If you use imagery that covers multiple countries this isn't an issue, but for this project I wanted to try out the basemap.at data. See https://github.com/felixpalmer/procedural-gl-js/ https://github.com/felixpalmer/procedural-gl-js/ for more
- Blahah 6y ago
  > That's not a bug, it's Germany! This is my favourite sentence of 2020.

pheelicks 6y ago

Hi HN, Merry Christmas to all! I made this as a demonstration of the open data available from the Austrian government under the www.basemap.at project. The rendering engine is built on top of THREE.js and can be found here: https://github.com/felixpalmer/procedural-gl-js/ https://github.com/felixpalmer/procedural-gl-js/ For those in the southern hemisphere, there is also a similar visualization of the national parks of New Zealand: https://felixpalmer.github.io/new-zealand-3d/ https://felixpalmer.github.io/new-zealand-3d/

fh973 6y ago
Where do you get the DEM from?
- capableweb 6y ago
  > https://github.com/felixpalmer/procedural-gl-js/ https://github.com/felixpalmer/procedural-gl-js/ > Key features > Batteries included elevation data. Global 3D data coverage courtesy of nasadem.XYZ > https://www.nasadem.xyz/ https://www.nasadem.xyz/
sillysaurusx 6y ago
Just want to say, love the mobile interface on iOS. Smooth as butter, super controllable, intuitive. I don’t know whether you designed it or if it came with the engine, but either way, quite lovely.
- jtbayly 6y ago
  I disagree with one aspect. Rotation doesn’t work the way it does in every other iOS UI, and so it took me forever to figure out how to rotate. On a related note, it kept inexplicably rotating whenever I would zoom in and out. Still impressive and smooth, though. And might just be part of the library chosen.
  - pheelicks 6y ago
    Could you elaborate? I'm also an iOS user and find it intuitive. But of course I would, as I've spent hours developing it and can't see the issues in the way a new user would. If you move two fingers in a rotating fashion the map rotates, does it not do this for you?

Keyframe 6y ago

Hmm, I can see rendering only as a flat map. Is it supposed to have height to it?

Patient0 6y ago
Same here. Maybe it does not work correctly on all platforms? I'm using an old Android phone (Samsung G8)
strictfp 6y ago
Same here. Could it be some rate limiting of the height data? I'm on a Samsung S20.
pheelicks 6y ago
Yes, there very much should be a 3rd dimension. If you're having issues I'd appreciate if you could file an issue on https://github.com/felixpalmer/procedural-gl-js https://github.com/felixpalmer/procedural-gl-js mentioning what device you have along with the output from https://webglreport.com/ https://webglreport.com/ In the meantime, there are some video captures on my twitter: https://twitter.com/pheeelicks https://twitter.com/pheeelicks
arifmeticus 6y ago
Same. I'm on desktop Firefox 84

ajnin 6y ago

Why is the polar angle constrained so much?

pheelicks 6y ago
Generally just a choice for the demo - in part because restricting the view distance means less data to download (thus lower cost to serve!). If you switch the phone to portrait you will be able to see the horizon. The library itself (https://github.com/felixpalmer/procedural-gl-js https://github.com/felixpalmer/procedural-gl-js) lets you configure the angle freely.

bigdict 6y ago

Merry Christmas! This is really well done. This gets very close in the look and feel to Google Maps/Earth.

la_fayette 6y ago

Amazing work! Is there any open data for elevation for germany?

pheelicks 6y ago
There are a number of global elevation datasets. Check out JAXA, EUDEM or NASADEM for example. Processing them into a usable form is another issue. For the Procedural GL JS library we use NASADEM, via the www.nasadem.xyz service, which has almost global coverage (up to 60 degrees N)

recursive 6y ago

This is working much better than it was last time I saw it on the front page. Nice work.

yincrash 6y ago

Apparently my setup was on the GPU blocklist in chrome so I had to enable #ignore-gpu-blocklist in chrome://flags This demo did not want to run on CPU only :)

turbinerneiter 6y ago

Leiwand!

germanka 6y ago

Where the aerial imagery comes from?

tarruda 6y ago

Super nice work. Can you recommend any resources/documentation/tutorials for someone interested in learning graphics programming (possibly with webgl) ?

pheelicks 6y ago
I have a few articles on my blog (and will be adding more related to the Procedural GL JS) library: www.pheelicks.com I would also very much recommend: - https://webglfundamentals.org https://webglfundamentals.org - https://www.iquilezles.org https://www.iquilezles.org - https://fgiesen.wordpress.com/2011/07/09/a-trip-through-the-graphics-pipeline-2011-index https://fgiesen.wordpress.com/2011/07/09/a-trip-through-the-... - Reading the code on shadertoy.com shaders & THREE.js examples