This is cool. I'm just starting out on a similarish idea at the moment to visualise depth data on the great barrier reef - using RTIN (mapbox's demo martini library) to simplify the dataset before render. Have you seen / tried this method at all?
I actually opensourced this code at https://github.com/blaze33/dem2mesh, just have to use dem2mesh.png2mesh which given a png data, computes the heightmap, builds a mesh, simplifies it and return the data to javascript. (can be tricky though to deal with wasm)
Yeah, Martini seems promising. Yet to implement at map scale which is why I was interested if you'd tried already!
The RTIN processing itself is very straightforward / lo-rent ... that said, if you were optimising the DEM tiles on the fly you'd probably refactor / integrate the two processes to save some loops. Dropped into a service worker (or WASM) I'm guessing it would be reasonably performant. Though perhaps meshoptimizer is more flexible with mesh dimensions?? (rtin is limited to a 2^nish grid)
With that in mind had you considered zooming out for your dem only, so as to lower the heightmap resolution (but leave the env map as is)? Maybe you're already doing that?
Actually here's a similar demo I put together in 2017 using heightmap only .. it's low-res, stitching together higher-altitude DEMs, but actually fairly performant without any trickery. You can zoom in on a section by drawing on the rendered tile on the left.
The Martini JS library is ideal for on-demand generation client side. If you're looking to pre-generate your mesh with the same algorithm, I ported it to Python/Cython: https://github.com/kylebarron/pymartini
I've spent the last ~5 years developing a terrain engine in this space (also on top of THREE.js), that you can find here: www.procedural.eu - it supports 3D models for houses and trees and roads, and uses procedural generation to augment the data. The approach taken if different from other engines, but is limited to a set area.
Recently I've also been looking at working on a terrain streaming version, a demo of which you can find here: http://next.procedural.eu.s3-website.eu-west-2.amazonaws.com... - this is lacking all the features of the full Procedural engine, but I'm pretty pleased with the performance. It looks like your engine only has tiles of a static size, which means that if you zoom out you lose terrain, and if you zoom in it is blurry.
Thanks for posting, great to see others working in this space!
This looks really cool! I've been thinking of a project where I can view a 3D map of my ride on Strava .. is that something that's possible with this library? Can it draw paths across the rendered map?
The scope of this library is just to render the map. But let's say you can export your strava ride in some json format, I guess it wouldn't be so complicated to display a path on top of the map using other three.js features (like Path from quickly looking at the doc https://threejs.org/docs/#api/en/extras/core/Path)
I had an idea to visualize terrain from Subnautica game in webgl.
Here is extracted meshes from game - .ply 9.3m faces 4.6m vertices [1]
Is it possible to display so huge map?
The full Subnautica map is probably bigger than any of those though. There are lots of options out there for streaming large 3D models in WebGL. One I'm familiar with is Cesium Ion 3D tiles: https://cesium.com/blog/2018/10/09/ion-3d-tiles-pipeline/
Really interesting work! Not sure if you are familiar with recent developments in Unity3D development but this reminds me of the new approach with "tiles" and "subscenes". Were you inspired by developments in game engine asset streaming?
Thanks! I'm not really familiar with the modern developments in game engines, though I know webgl has some big limitations regarding what's actually possible to do with the current hardware.
In the meantime we have to work with the webgl constraints and that's why the graphics look like what AAA-games were already able to render years ago.
Gorgeous! Loved the location. Very impressive and wonderful work!
I would suggest copying your discourse post to the README so it makes a little more sense.
Nice work! Had a go at modifying an existing library to display bathymetry data a little while ago, tried writing about it. https://vulkd.com/articles/3d-underwater-maps/ Some hyperlinks there which could be of interest.
It should be fairly simple to display a linestring from a gpx file or similar to the map, just write a method to convert x/y/z coords to lng/lat/alt
Yet to write about it, but I'm doing similar processing for this map of the Great Barrier Reef. Currently a shapefile loaded into Mapbox as an extrusion layer. Looking to optimise / prettify by converting to a mesh: https://lab.citizensgbr.org/census-map/
That's actually really interesting,thanks for the link. Hadn't heard of eomap, but I am working closely with both of the partners mentioned. The bathymetry dateset I'm using is 30m resolution, and comes from another researcher who heads up much of the bathymetry work on the gbr. Will definitely follow up. Cheers!
Not yet, but the code is open to reuse so it would totally be possible to do so in the future! (assuming the necessary code gets written at some point ;) )
I'd recommend deck.gl [0]. It's built for visualizing many types of GIS data in the browser, and also has a TerrainLayer for rendering extruded terrain. (Disclosure: I'm a maintainer of deck.gl)
I can imagine a game based on this where you get dropped somewhere on Earth and your score is based on how few double clicks to load new tiles it takes you to recognise where you are.
My understanding is that GeoGuessr was victim to increasing prices for the Google Maps API. Before 2018 the price for 1,000 calls to Google Maps was $0.50. Now it's $7 per 1000 calls. And considering how much I move around the map when I play, I might actually cost them the full $7 for just one round of the game.
It's all simple fun until you get the usage bill at the end.
Have you considered fixing the seams between tiles by generating tiles 2 cells larger, computing normals, and then discarding the outer ring of tiles, by trimming the index buffer, or just re-indexing/rewriting the vertices?
By the way you can add missing tiles by double clicking on the grid. Auto-loading everything as you move can be hard on some computers / phones.