procedural-gl-js

Nice writeup, I always like it when the shaders are highlighted like this. I got started in a similar way 7 years ago and have been making 3D terrains with THREE.js & WebGL since. The real fun begins when you need to implement some sort of Level-of-Detail system and streaming in data to give the illusion of high detail everywhere without sacrificing performance. Last year I released an open-source framework (https://github.com/felixpalmer/procedural-gl-js) for creating 3D terrains for web applications, you can see Uluru here: https://www.procedural.eu/map/?longitude=131.036&latitude=-2... (unfortunately the aerial imagery from our default provider isn't as high resolution as other places in Europe)

Great visualization and approach with compressing the tile data. Do you have a comparison of how much smaller the payload ends up being compared to simply sending PNG files? I use PNGs to encode elevation data in my 3D mapping library (https://github.com/felixpalmer/procedural-gl-js/) and this does a pretty good job of compressing the data, for example in the ocean the PNG files are also very small as the image is mostly black. Different use case I now as your data is much more sparse, but I wonder how close the PNG compression would be compared to your approach.

Yeah, the React parts of this are very minimal. I'm not really sure what using it gets you, since it just manages a single div. The _actual_ library that does all the work is here: https://github.com/felixpalmer/procedural-gl-js

Bug reports are welcome at: https://github.com/felixpalmer/procedural-gl-js/ Also the geocoding quota issue has been resolved

Procedural GL JS: a mobile-first 3D mapping engine with emphasis on user experience. Live demo here: https://felixpalmer.github.io/procedural-gl-js/ After 7 years of working on closed source products in this space, I open-sourced the library last December. People have already started building cool projects with it, like air quality sensor visualizations or enhanced travel blogs. Some key features - Novel GPU powered level-of-detail system gives butter-smooth rendering, including on mobile - Stream in standard raster imagery tiles. Supports map tiles from a variety of providers - Easily include elevation data. Global 3D data integration via nasadem.XYZ - Powerful overlay capabilities. Draw crisp markers and lines - Well-thought-out API, complex applications can be built without needing to deal with 3D concepts - Great UX and intuitive cont

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

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

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.

> 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/

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/ 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/

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

I've read through all the docs and it is unclear if aerial imagery is supported. I just launched a JavaScript 3D mapping library (https://github.com/felixpalmer/procedural-gl-js) and would be up for trying it out if it were supported. Also interesting to see them use Mapbox as an example of an open source library that can be used with this. They obviously haven't been paying attention this past week.

I recently launched an open-source 3D mapping library https://github.com/felixpalmer/procedural-gl-js/ which can be configured to display imagery tiles for 3rd party providers. However, to make 3D terrain, elevation data is needed, and for this I wanted to have a simple, friction-less API that would work seamlessly with the library. Hence: www.nasadem.xyz. The API is fully operational, and has served over 200k requests over the last month. While I built this primarily for the purpose above, the image format is easy to understand and could be used to power any other apps that need elevation data. Right now the data is returned as an image, but in the future other options are being considered, like returning the elevation at a given point, or along a route.

> For anyone interested in an open source mapping library (that also has 3D support) that can handle raster data (including the Mapbox tiles), I launched a project 2 weeks ago that is the culmination of 7 years effort: https://github.com/felixpalmer/procedural-gl-js/. This is really impressive. Just one question about the distance fog, though: as you say it does give the scene scale when you're close to ground, but if you zoom out everything becomes foggy so it seems like it kind of gets hard to see anything. Wouldn't it make sense to somehow reduce the fog as you zoom out so this doesn't happen?