Combining babylon.js and openstreetmaps.org data to create 3D maps from user data

[Convergence]

I worked before on a city simulator before but unfortunately my motivation fizzled out and I never really continued with it, because there were some issues such as intersections for which I never got a good solution.

After a while I stumbled accross Mapzen, which mainly uses openstreetmaps data and decided, why not combine it with babylon. I'm not the first one to try it , but still doing it for fun  It uses SPS, but the SPS.buildMesh() function is kinda slow which causes the initial load to be rather slow.

Here's my rendition (still alpha/beta) of 3D openstreetmaps with babylon.js with some examples (only tested in chrome desktop and android):

newark liberty airport

french alphs

naarden vesting

hong kong (elevation data is not very accurate for asia unfortunately)

Need good gfx card:

lower manhattan 

manila

The search currently uses openstreetmaps search which is kind of wonky. If you want to search a city, it's better to search a landmark within that city.

Current issues:

Is there any way to speed up the initial buildMesh() call for SPS? I remember reading something about offloading SPS tasks to the worker?

I can't get the minimap thing to work.. how to copy a mesh to another scene?

[jerome]

The worker experiments I did with the SPS were for the particle animation parts : setParticles()

I'll have a check about where or what could be optimized in the building process.

[EDIT] SPS experiment link : 

 

[jerome]

and BTW, I just downloaded some of your demos : huge work and really impressive !! 

[GameMonetize]

This is extremely impressive!!!

Do you want to be featured on babylonjs.com ?

[GameMonetize]

Regarding minimap, can you repro your issue in the PG?

[jerome]

@Convergence just for my own curiosity, and like you soldi particles don't look to move/evolve once created, did you try to build an immutable SPS to check if this could speed up the scene ?

[Convergence]

Sorry, I didn't receive a notification, so apologies for the late reply.

17 hours ago, Deltakosh said:

This is extremely impressive!!!

Do you want to be featured on babylonjs.com ?

Thank you No problem, but I might get a better url if I'll get more serious about this project lol.  I'm not sure how to repro the minimap issue in the playground since I'd need more than once <canvas>. I basically want to have two instances of the babylon engine, two separate scenes and then copy meshes from scene one to scene two. I tried to just push() the meshes to the scene2.meshes[] array but that didn't work..

17 hours ago, jerome said:

@Convergence just for my own curiosity, and like you soldi particles don't look to move/evolve once created, did you try to build an immutable SPS to check if this could speed up the scene ?

Thank you for the suggestion I tried it, unfortunately I think maybe my babylon.js is outdated (3.0), the updatable flag didn't seem to do anything. When doing a performance check in Chrome during the building of SPS, the top function are javascript internals: GC, typedArrayConstructionByArrayLike, bufferData, push. the top non-internal function is SPS.setParticles().

PS. any chance SPS could support a second UV channel? I always need to manually edit babylon.js to add UV2 to the SPS, which makes it quite bothersome for me to upgrade

[jerome]

thanks for the feedback.

Calling setParticles() could be done only once (even before the render loop start) to set the final particle positions if they don't move or evolve then. I suppose the buildings are in this case (probably not the cars).

About immutable SPS, setting the updatable flag to false will either create a non-updatable mesh (so faster VBO) and won't either populate the particle arrays (so less memory, less things to manage for the CPU but no effect then by setParticles() ) : it's just way to build a custom geometry.

About the UV2, it should be possible as the SPS is just a layer on top the standard BJS mesh. Added to my todo list.

[GameMonetize]

Ping me when you will consider being ready to be highlighted

[jerome]

About UV2 in the SPS, it's not that simple regarding the way the SPS works : the SPS is built by adding different shapes in its geometry. Let's imagine that we add some shape1 particles having UV1 and UV2, then we add some shape2 particles having only UV1, then again some other shape3 ones with UV2 ...

What would be the rule to apply ?

Or maybe we should impose a rule ..? say, if some parameter useUV2 is set to true, then all the model shape must have UV2 and UV2 will be used. Ideas ?

[Convergence]

Thanks for the effort  My own edit work as such that if one shape has UV2, then it is assumed that all shapes have UV2. I believe this is also the behavior of the color channel?

[Convergence]

On 11/7/2017 at 12:56 AM, Deltakosh said:

Ping me when you will consider being ready to be highlighted

Hmm, looks like I won't be registering a domain for this, so you might as well use the current url

[GameMonetize]

Ok so do you mind giving me:

- a title

- an author name

- the link you want to use

- a 800x500 picture

thanks!

[hilderonny]

It is too late for an answer here?

I think there can be another way to render geographical data. One can use the vector data provided by openstreetmaps and create lines and polygons from it.

 

You can see a simple demo here: https://hilderonny.github.io/public/babylonjs/simplevectormap/

 

With this approach, you have very little traffic and a very performant rendering of the buildings and streets. You could even adapt the rendering to use planes with street textures for the roads instead of simple lines. What do you think?