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?

https://github.com/mapbox/martini

Proof of context demo (garbage code!): https://lab.citizensgbr.org/census-map/index-martini.html

Wow, Martini looks really interesting! I did some research about mesh simplification and had some success using https://github.com/zeux/meshoptimizer. Meshoptimizer is in c++ so I had to use the Rust wrapper https://github.com/gwihlidal/meshopt-rs and compile it to wasm.

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.

https://codepen.io/theprojectsomething/details/rmmePG

I'd be really interested in seeing performance comparisons with Martini!

Ditto :)

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

Looks nice, great job!

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)

Have you seen https://www.relive.cc/ ?

You can do this with Ayvri: https://ayvri.com/

Built with CesiumJS: https://github.com/CesiumGS/cesium

Disclaimer, I work for Cesium.

Fatmap [0] has a Strava integration, so you can see your rides/runs on top of the terrain.

[0]: https://fatmap.com

Look at deck.gl

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?

[1] https://forums.unknownworlds.com/discussion/comment/2372165/...

This site is full of levels extracted from games: https://noclip.website/

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.

Regarding asset streaming I guess you're referencing https://docs.unity3d.com/Manual/StreamingAssets.html ?

For this first demo I did nothing fancy like WebWorkers or WebAssembly which I already tried some there's some room for performance improvements.

Yes I meant moving through a world-scale environment and bringing asset data for rendering only as needed.

Thank you, again great!

I'm curious what limitations you see in WebGL, and whether they are fixed in WebGL 2 or in WebGPU.

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.