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.
somishere 1381 days ago [-]
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)
somishere 1380 days ago [-]
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?
somishere 1380 days ago [-]
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.
I'd be really interested in seeing performance comparisons with Martini!
somishere 1380 days ago [-]
Ditto :)
kylebarron 1381 days ago [-]
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
pheelicks 1380 days ago [-]
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!
krat0sprakhar 1381 days ago [-]
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?
blaze33 1381 days ago [-]
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/
adampk 1381 days ago [-]
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?
blaze33 1381 days ago [-]
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.
For this first demo I did nothing fancy like WebWorkers or WebAssembly which I already tried some there's some room for performance improvements.
adampk 1381 days ago [-]
Yes I meant moving through a world-scale environment and bringing asset data for rendering only as needed.
Thank you, again great!
modeless 1381 days ago [-]
I'm curious what limitations you see in WebGL, and whether they are fixed in WebGL 2 or in WebGPU.
nico_h 1380 days 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.
aclatuts 1381 days ago [-]
Anyone wanting a more mature library for 3d maps, https://deck.gl/ is pretty good and made by Uber.
kylebarron 1381 days ago [-]
As of a couple months ago, deck.gl was transferred to the Urban Computing Foundation (part of the Linux Foundation) and is now under open governance.
Indeed, I only found this post quite recently when the demo was mostly done ;)
vulkd 1381 days ago [-]
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
somishere 1380 days ago [-]
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!
gorbypark 1381 days ago [-]
Any plans on adding support for displaying GIS data? I would love something like this I could drop a point, line or polygon onto!
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 ;) )
kylebarron 1381 days ago [-]
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)
Opened this on a 3 year old iPhone 8 and it loaded quickly and generated super smooth 60 FPS renders. Looks great!
gitgud 1380 days ago [-]
Well I'm at 3 FPS on an Intel i7 2.40GHz.... would be nice to control the level of detail to give older machines higher refrefresh rates
Update: Seems to work much better on Firefox. Tested on Chrome incognito too.
quickthrower2 1380 days ago [-]
60fps on iphone6 too
detritus 1381 days ago [-]
Lovely work!
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.
mkl 1381 days ago [-]
Like GeoGuessr used to be for StreetView. Though that now seems to have pivoted into some attempt at profit instead of the simple fun it started as.
freehunter 1381 days ago [-]
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.
mcint 1381 days ago [-]
Nice pretty demo. It's for a software engineering consultancy?
Thanks for the demo, it's pretty cool to see how fast a detailed map can be rendered outside google maps.
blaze33 1381 days ago [-]
Thanks! TBH it's just me but I'm a software engineer and I have my own company, so I guess it works ;)
artifact_44 1380 days ago [-]
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?
kylebarron 1380 days ago [-]
Generating skirts is much more performant and simpler
blaze33 1380 days ago [-]
Seams are actually fixed once the adjacent tiles are loaded but at first there are skirts on 2 sides of a tile.
eg312 1380 days ago [-]
Looks cool! Is there a way to export the mesh & the texture?
qq717719152 1380 days ago [-]
2222
qq717719152 1380 days ago [-]
uuuu
Rendered at 12:18:53 GMT+0000 (Coordinated Universal Time) with Vercel.
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.
https://github.com/mapbox/martini
Proof of context demo (garbage code!): https://lab.citizensgbr.org/census-map/index-martini.html
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)
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?
https://codepen.io/theprojectsomething/details/rmmePG
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!
Built with CesiumJS: https://github.com/CesiumGS/cesium
Disclaimer, I work for Cesium.
[0]: https://fatmap.com
[1] https://forums.unknownworlds.com/discussion/comment/2372165/...
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/
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.
Thank you, again great!
There's a 3D terrain example in the deck.gl docs that uses Martini to create the mesh in the browser: https://deck.gl/examples/terrain-layer/
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
You can drop files onto the globe.
https://cesium.com/cesiumjs/cesium-viewer/
[0]: https://deck.gl
Update: Seems to work much better on Firefox. Tested on Chrome incognito too.
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.
It's all simple fun until you get the usage bill at the end.
Thanks for the demo, it's pretty cool to see how fast a detailed map can be rendered outside google maps.