Show HN: Map33.js – a library to build 3D maps with Three.js(map33.openbloc.com)
map33.openbloc.com
Show HN: Map33.js – a library to build 3D maps with Three.js
https://map33.openbloc.com
11 comments
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!
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!
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.
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.
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.
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
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)
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?
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
https://codepen.io/theprojectsomething/details/rmmePG
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
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.
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
[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/...
[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/
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/
Opened this on a 3 year old iPhone 8 and it loaded quickly and generated super smooth 60 FPS renders. Looks great!
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.
Update: Seems to work much better on Firefox. Tested on Chrome incognito too.
60fps on iphone6 too
Looks cool! Is there a way to export the mesh & the texture?
Nice, reminds me of this demo from a few years back: https://blog.mapbox.com/bringing-3d-terrain-to-the-browser-w...
Indeed, I only found this post quite recently when the demo was mostly done ;)
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.
Thanks for the demo, it's pretty cool to see how fast a detailed map can be rendered outside google maps.
Thanks! TBH it's just me but I'm a software engineer and I have my own company, so I guess it works ;)
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?
Generating skirts is much more performant and simpler
Seams are actually fixed once the adjacent tiles are loaded but at first there are skirts on 2 sides of a tile.
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.
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.
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.
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.
It's all simple fun until you get the usage bill at the end.
Any plans on adding support for displaying GIS data? I would love something like this I could drop a point, line or polygon onto!
How about Cesium.js?
You can drop files onto the globe.
https://cesium.com/cesiumjs/cesium-viewer/
You can drop files onto the globe.
https://cesium.com/cesiumjs/cesium-viewer/
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)
[0]: https://deck.gl
[0]: https://deck.gl
Anyone wanting a more mature library for 3d maps, https://deck.gl/ is pretty good and made by Uber.
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.
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/
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/
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
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/
Nice implementation! :) https://www.eomap.com/portfolio/3d-live-habitats-for-the-ful... may be of interest to you
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!
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.