Jump to content

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


Recommended Posts

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 


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?

Link to comment
Share on other sites

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 :P

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 ?

Link to comment
Share on other sites

  • 5 months later...

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?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...