Show HN: Map33.js – a library to build 3D maps with Three.js
map33.openbloc.com
map33.openbloc.com
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?
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.
[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.