5 ms·

Author here, I also made a small post on the three.js discourse with a little more background: https://discourse.threejs.org/t/map33-js-v0-1-a-library-to-build-

Author here, I also made a small post on the three.js discourse with a little more background: https://discourse.threejs.org/t/map33-js-v0-1-a-library-to-build-3d-maps/16877?u=maxmre https://discourse.threejs.org/t/map33-js-v0-1-a-library-to-b... 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.

adampk 6y 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 6y 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. Regarding asset streaming I guess you're referencing https://docs.unity3d.com/Manual/StreamingAssets.html 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.
  - adampk 6y ago
    Yes I meant moving through a world-scale environment and bringing asset data for rendering only as needed. Thank you, again great!
  - modeless 6y ago
    I'm curious what limitations you see in WebGL, and whether they are fixed in WebGL 2 or in WebGPU.
somishere 6y 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? https://github.com/mapbox/martini https://github.com/mapbox/martini Proof of context demo (garbage code!): https://lab.citizensgbr.org/census-map/index-martini.html https://lab.citizensgbr.org/census-map/index-martini.html
- blaze33 6y ago
  Wow, Martini looks really interesting! I did some research about mesh simplification and had some success using https://github.com/zeux/meshoptimizer https://github.com/zeux/meshoptimizer. Meshoptimizer is in c++ so I had to use the Rust wrapper https://github.com/gwihlidal/meshopt-rs https://github.com/gwihlidal/meshopt-rs and compile it to wasm. I actually opensourced this code at https://github.com/blaze33/dem2mesh 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)
  - kylebarron 6y ago
    I'd be really interested in seeing performance comparisons with Martini!
    - somishere 6y ago
      Ditto :)
  - somishere 6y 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?
krat0sprakhar 6y 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 6y 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 https://threejs.org/docs/#api/en/extras/core/Path)
- dodo6502 6y ago
  Have you seen https://www.relive.cc/ https://www.relive.cc/ ?
- sroussey 6y ago
  Look at deck.gl
- kylebarron 6y ago
  Fatmap [0] has a Strava integration, so you can see your rides/runs on top of the terrain. [0]: https://fatmap.com https://fatmap.com
- OmarShehata 6y ago
  You can do this with Ayvri: https://ayvri.com/ https://ayvri.com/ Built with CesiumJS: https://github.com/CesiumGS/cesium https://github.com/CesiumGS/cesium Disclaimer, I work for Cesium.
diimdeep 6y ago
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/#Comment_2372165 https://forums.unknownworlds.com/discussion/comment/2372165/...
- modeless 6y ago
  This site is full of levels extracted from games: https://noclip.website/ 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/ https://cesium.com/blog/2018/10/09/ion-3d-tiles-pipeline/
nico_h 6y 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.
pheelicks 6y 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/ 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!

adampk 6y 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 6y 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. Regarding asset streaming I guess you're referencing https://docs.unity3d.com/Manual/StreamingAssets.html 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.
- adampk 6y ago
  Yes I meant moving through a world-scale environment and bringing asset data for rendering only as needed. Thank you, again great!
- modeless 6y ago
  I'm curious what limitations you see in WebGL, and whether they are fixed in WebGL 2 or in WebGPU.

somishere 6y 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? https://github.com/mapbox/martini https://github.com/mapbox/martini Proof of context demo (garbage code!): https://lab.citizensgbr.org/census-map/index-martini.html https://lab.citizensgbr.org/census-map/index-martini.html

blaze33 6y ago
Wow, Martini looks really interesting! I did some research about mesh simplification and had some success using https://github.com/zeux/meshoptimizer https://github.com/zeux/meshoptimizer. Meshoptimizer is in c++ so I had to use the Rust wrapper https://github.com/gwihlidal/meshopt-rs https://github.com/gwihlidal/meshopt-rs and compile it to wasm. I actually opensourced this code at https://github.com/blaze33/dem2mesh 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)
- kylebarron 6y ago
  I'd be really interested in seeing performance comparisons with Martini!
  - somishere 6y ago
    Ditto :)
- somishere 6y 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?

krat0sprakhar 6y 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 6y 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 https://threejs.org/docs/#api/en/extras/core/Path)
dodo6502 6y ago
Have you seen https://www.relive.cc/ https://www.relive.cc/ ?
sroussey 6y ago
Look at deck.gl
kylebarron 6y ago
Fatmap [0] has a Strava integration, so you can see your rides/runs on top of the terrain. [0]: https://fatmap.com https://fatmap.com
OmarShehata 6y ago
You can do this with Ayvri: https://ayvri.com/ https://ayvri.com/ Built with CesiumJS: https://github.com/CesiumGS/cesium https://github.com/CesiumGS/cesium Disclaimer, I work for Cesium.

diimdeep 6y ago

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/#Comment_2372165 https://forums.unknownworlds.com/discussion/comment/2372165/...

modeless 6y ago
This site is full of levels extracted from games: https://noclip.website/ 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/ https://cesium.com/blog/2018/10/09/ion-3d-tiles-pipeline/

nico_h 6y 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.

pheelicks 6y 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/ 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!