OpenStreetMap Forum

The Free Wiki World Map

You are not logged in.

Announcement

A fix has been applied to the login system for the forums - if you have trouble logging in please contact support@openstreetmap.org with both your forum username and your OpenStreetMap username so we can make sure your accounts are properly linked.

#1 2017-11-04 17:08:59

nrdegroot
Member
Registered: 2017-11-04
Posts: 5

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
manila

Offline

#2 2017-11-05 13:03:09

-karlos-
Member
Registered: 2016-05-29
Posts: 29

Re: making a 3D renderer using babylon.js

There is a Wiki page with only a view entries
https://wiki.openstreetmap.org/wiki/Simple_3D_Art


-karlos-

Offline

#3 2017-11-05 17:16:09

kocio
Administrator
From: Warszawa
Registered: 2013-09-04
Posts: 2,430
Website

Re: making a 3D renderer using babylon.js

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

Offline

#4 2017-11-05 17:48:58

-karlos-
Member
Registered: 2016-05-29
Posts: 29

Re: making a 3D renderer using babylon.js

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:
https://wiki.openstreetmap.org/wiki/Sim … Demo_areas

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

Great work!
-karlos-


-karlos-

Offline

#5 2017-11-05 18:29:28

Convergence84
Member
Registered: 2017-11-04
Posts: 5

Re: making a 3D renderer using babylon.js

kocio wrote:

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

Thanks 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?

-karlos- wrote:

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:
https://wiki.openstreetmap.org/wiki/Sim … Demo_areas

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

Great work!
-karlos-

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 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.

Thanks!

Offline

#6 2017-11-05 18:46:33

Mateusz Konieczny
Member
Registered: 2013-09-22
Posts: 1,092

Re: making a 3D renderer using babylon.js

Convergence84 wrote:

Thanks smile Which performance do you mean?

For me just opening http://misc.blicky.net/map3d/?q=naarden … =4&zoom=17 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?).

Last edited by Mateusz Konieczny (2017-11-05 18:53:49)

Offline

#7 2017-11-05 19:16:04

Convergence84
Member
Registered: 2017-11-04
Posts: 5

Re: making a 3D renderer using babylon.js

Mateusz Konieczny wrote:
Convergence84 wrote:

Thanks smile Which performance do you mean?

For me just opening http://misc.blicky.net/map3d/?q=naarden … =4&zoom=17 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.

Offline

#8 2017-11-06 19:47:51

Tordanik
Moderator
From: Germany
Registered: 2008-06-17
Posts: 2,172
Website

Re: making a 3D renderer using babylon.js

Very nice, I like the attention to detail (parking spaces!) and the great-looking colours. 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. wink)

Offline

#9 2017-11-06 23:40:14

Convergence84
Member
Registered: 2017-11-04
Posts: 5

Re: making a 3D renderer using babylon.js

Tordanik wrote:

Very nice, I like the attention to detail (parking spaces!) and the great-looking colours. 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. wink)

Thanks 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.

Offline

#10 2017-11-07 18:52:24

Tordanik
Moderator
From: Germany
Registered: 2008-06-17
Posts: 2,172
Website

Re: making a 3D renderer using babylon.js

Convergence84 wrote:

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

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

building:part gets passed through currently though as you might see in the manhattan link.

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

Offline

#11 2017-11-07 19:24:26

Convergence84
Member
Registered: 2017-11-04
Posts: 5

Re: making a 3D renderer using babylon.js

Tordanik wrote:
Convergence84 wrote:

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

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

Ah ok 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.

Offline

Board footer

Powered by FluxBB