Show HN: Mountain Peaks in WebGL(felixpalmer.github.io)
felixpalmer.github.io
Show HN: Mountain Peaks in WebGL
https://felixpalmer.github.io/peaks-of-austria/
12 comments
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.
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.
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.
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?
Not an iOS user, but I somehow expected rotation to work if I rotate two fingers against each other (I.e. draw a circle with two fingers at the same time). But I just need to swipe sideways with two fingers.
No. If I move two fingers from side to side it rotates. If I try to rotate two fingers, nothing happens. If I also happen to also move them closer together/further apart, then it zooms. Or if I happen to end up slightly further left or right, then it rotates. The result is that when attempting to rotate 90 degrees right, it might zoom out slightly and rotate left a few degrees.
Edit: this is an image to show how I rotate things on my phone and computer trackpad: https://cdn1.iconfinder.com/data/icons/gestureworks_gesture_...
Edit: this is an image to show how I rotate things on my phone and computer trackpad: https://cdn1.iconfinder.com/data/icons/gestureworks_gesture_...
If you hold one finger in place and rotate the other around, it works. It’s a bit more subtle than the default iOS rotate gesture. If both fingers move during the rotation it gets confused with the zoom. I found the best way is to hold my middle finger static and rotate with my thumb. The opposite (holding thumb static) was much harder.
Well, I made the engine - so the answer is both :) Glad you like it. I still feel the pinch zoom could be improved though so that the focal point was at the center of the touch points, but otherwise it is pretty close to the native controls
That's is super cool.
Thanks for the NZ links. Having lived in NZ after moving back to Austria, and look Arthur's Pass, brings back some good memories.
Very cool! How is the elevation data textured in this demo?
The imagery comes from the Orthofoto dataset on https://www.basemap.at/ - the actual texturing is done by the Procedural GL JS library https://github.com/felixpalmer/procedural-gl-js
Where do you get the DEM from?
> 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/
> Key features
> Batteries included elevation data. Global 3D data coverage courtesy of nasadem.XYZ
> https://www.nasadem.xyz/
Can you let the user zoom further, even if it is a bit lo-res?
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 :)
This demo did not want to run on CPU only :)
I have some rendering-issues: https://i.imgur.com/D0LW0r9.png
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/ for more
> That's not a bug, it's Germany!
This is my favourite sentence of 2020.
This is my favourite sentence of 2020.
Hmm, I can see rendering only as a flat map. Is it supposed to have height to it?
Same here. Maybe it does not work correctly on all platforms? I'm using an old Android phone (Samsung G8)
Same here. Could it be some rate limiting of the height data? I'm on a Samsung S20.
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 mentioning what device you have along with the output from https://webglreport.com/
In the meantime, there are some video captures on my twitter: https://twitter.com/pheeelicks
In the meantime, there are some video captures on my twitter: https://twitter.com/pheeelicks
Same. I'm on desktop Firefox 84
Merry Christmas! This is really well done. This gets very close in the look and feel to Google Maps/Earth.
Super nice work.
Can you recommend any resources/documentation/tutorials for someone interested in learning graphics programming (possibly with webgl) ?
Can you recommend any resources/documentation/tutorials for someone interested in learning graphics programming (possibly with webgl) ?
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://www.iquilezles.org - https://fgiesen.wordpress.com/2011/07/09/a-trip-through-the-... - Reading the code on shadertoy.com shaders & THREE.js examples
I would also very much recommend:
- https://webglfundamentals.org - https://www.iquilezles.org - https://fgiesen.wordpress.com/2011/07/09/a-trip-through-the-... - Reading the code on shadertoy.com shaders & THREE.js examples
Leiwand!
Amazing work! Is there any open data for elevation for germany?
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)
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)
Why is the polar angle constrained so much?
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) lets you configure the angle freely.
The library itself (https://github.com/felixpalmer/procedural-gl-js) lets you configure the angle freely.
Where the aerial imagery comes from?
This is working much better than it was last time I saw it on the front page. Nice work.
Bonus: can nick the names and use for IKEA furniture
Zuckerhütl could be a social network
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.
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.
... IKEA furniture doesn't use German names.
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/
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/