making a 3D renderer using babylon.js

For fun I’m making a 3D renderer for openstreetmaps using Mapzen and babylon.js. The aim is to find a balance between accuracy and ‘filling in’ some blanks; for example rendering trees where there reasonably may be some, like residential areas; assuming a gabled roof to buildings that may have it.

Still busy developing it, but here are some examples:

newark airport
french alphs
naarden vesting
hong kong

the ones below need decent graphics cards:

lower manhattan

There is a Wiki page with only a view entries

I like this tool, I guess it’s even better than F4 in general! Do you plan to publish the code (preferably on the open license)?

What I like:

  • image quality
  • windows style on buildings
  • vehicles

Problems I see:

  • slow performance
  • fences are too high
  • too many trees
  • trees inside the buildings

Oops, sorry, my last quote was not intended to be placed in your post.

That looks great!

babylon.js is about like three.js I use for my “OSM go”. You have an other intention than me: To show the world als realistic as possible. And yes, it makes a great impression.
Some “effects” remind me to my own problems. But you also has found some good solutions, I did not. Sure, a lot details are just random but the animated trains make me smile. Building:parts and roof shapes make it even better. It may be good if you start downloading in the center of the area and in rings around it.

What data/tiles do you use? Did you find any OSM frameworks to analyse tags and render in 3D? Or did you write it all yourself? Will you keep it open source?

Could you add keyboard controls for move and rotate? And allow to go deeper to height zero?
Is there any description of your work? A name for your renderer? You should make a OSM wiki page.
The URL parameters are q for quarry location, c for coordinates, zoom for “height" size for the downloaded tiles?
Are there more for direction and view angle?

Would you mind if we add you as a column there:

I added your URL with parameters
in the context menu of my as an additional renderer

Great work!

Thanks :slight_smile: Which performance do you mean? Just FPS when rotating around or loading new tiles when panning?

Where do you see trees inside buildings? Could you post coords or search term please?

No problem, I figured :wink: And thank you.

Yes, tile-loading order is indeed on the todo list. I use mapzen vector tiles, actually only because I don’t know any alternatives that deliver json data in tiles.

Sure, keyboard controls is no problem. And I assume with deeper you mean to allow the camera to go below ground?

No, I don’t have a name or anything yet haha, I just did it for fun for now. I’ll put a title in the page if I think of one :slight_smile:

Yes, q is for search query, c is for coords, zoom for tile size, and size for the number of rings around tile zero (currently limited to 6). I’ll still need to add parameters for camera angles.

I need a better domain first, but feel free to add it to wiki.


For me just opening nearly freezes the browser. Maybe I will retry later.

On mobile it worked better and displayed quite impressive rendering (but navigation was very unintuitive - how one is supposed to zoom in?).

How long did you wait. It is (for now unfortunately) normal that the window freezes for several seconds while the map loads.

On mobile, you should be able to zoom in by the normal pinch move you would use on pictures. Its panning though that doesn’t work yet on mobile.

Very nice, I like the attention to detail (parking spaces!) and the great-looking colours. :slight_smile:

Curious to what extent you support Simple 3D Buildings tagging – is that possible with Mapzen? I read in your reddit thread that you are limited due to limitations in the vector tiles when it comes to lane tagging, for example. Do they already include building:part and similar attributes?

In any case, great work! (And some extra encouragement for me to finish my own WebGL frontend project. ;))

Thanks :slight_smile: With tagging support, you mean making it into an editor to contribute data to OSM?

And yeah, the mapzen vector tiles have some limitations like the one you menttioned. building:part gets passed through currently though as you might see in the manhattan link.

No, I just meant what tags your renderer is parsing.

Good to hear that building:part is considered important enough to be included in vector tiles! :slight_smile: Although you’re right, of course – it should have been obvious from just looking at some of the buildings.

Ah ok :slight_smile:

For buildings, Mapzen supports name, kind, height, landuse, kind_detail, roof:shape, roof:height. Missing tags are material/color and #floors unfortunately (though #floors can be guesstimated from height).

For roads: kind, service, isBridge, isTunnel, oneWay are some of the supported tags. Missing in Mapzen are number of lanes.

Mapzen is also missing some industrial tags like container cranes, ship mooring locations, and a way to see where container depots are; but I believe at least some of these are not prevalent in openstreetmaps in the first place.

Hey - is this project still alive? The example links don’t work, I see just fragments.
I just started to use BabylonJS (instead of ThreeJS) May be we could exchange some experiences.