Roofs shape in 3D building preview

[Andygol]

Description

Re https://github.com/facebook/Rapid/discussions/993

As of now, there is almost no convenient tool for visualizing the shape of roofs during 3D modeling of buildings before saving the data in the database. It seems that a similar plugin in JOSM is currently in the process of being redesigned, and it does not work as expected. It would be nice to be able to preview buildings with LOD2+ before sending them to an upstream DB and not wait for third party tools like https://osmbuildings.org and https://demo.f4map.com/ to render.

It would be great to have roof shape support in the next release of RapiD.

[Bonkles]

To be sure, I investigated this and tried a few different ways to get roof shapes into the 3D capabilities of maplibre-gl-js, but there was no simple way to do it. I also want this feature to be a thing very badlly!

Adding some context here: This feature was requested in mapbox-gl back in 2017: https://github.com/mapbox/mapbox-gl-js/issues/3998

It was never implemented in either mapbox-gl or maplibre-gl. The official response seems to be to create a 3D model for any buildings we want to draw at higher fidelity. I don't love that idea because I suspect it will bring performance to a standstill.

If we really need roof shapes though, we might have to look at using something like cesium's building renderer instead.

[tordans]

Maybe this has something helpful about the roof shapes https://ths.rwth-aachen.de/wp-content/uploads/sites/4/schulz20203d.pdf

In his dissertation, at the RWTH Aachen, Philipp Schulz studied [PDF] the construction of 3D maps based on OSM data. His aim was to make the planning of wind farms easier. He focused on how to create 3D shapes for buildings, including roofs, and how to create curved roads and trees.

Source: WeeklyOSM

[rene78]

I know this might sound naive, but sites like f4map display buildings in 3D. I wonder why it's so challenging to achieve something similar within the iD editor. Implementing 3D tags would really take off with better visualization. As @Andygol mentioned, it's currently a struggle since we have to wait for the building to be rendered in f4map.

[bhousel]

We are using Maplibre to render the 3D scene, and it really only supports extruded shapes.

If we wanted to turn the buildings into meshes with roofs, and render them to a canvas, maybe with another Pixi.js scene, that's possible too, but it's not what we can do currently.

[bryceco]

Kinda related to https://github.com/bryceco/GoMap/issues/728

Beakerboy’s renderer pulls from the OSM API by default, but you can also send it an XML with relevant data to render.

[1ec5]

A full-fledged 2.5D map library like MapLibre might not be well-suited for the task of previewing a 3D building – essentially, previewing a 3D model. Even if you do generate a proper 3D model for the building, GL JS doesn’t really help you beyond positioning it in the middle of the frame and swiveling the camera. What if the preview were an A-Frame model instead? 3DStreet shows how this could be useful at a street scale. It’s part of an interactive lane editor, so you can see how it might perform in a Rapid environment.

[tordans]

FYI @tordanik just started a funding phase with the Prototype Fund https://prototypefund.de/project/osm2world/ which AFAIK will entail to make it easier to embed OSM2World into other environments.

[bhousel]

I’d probably just use Pixi, the same thing we use for the main map. We can make our own meshes and render the scene with perspective.

lot of work for roofs though 😆

[1ec5]

Sure, that’s the only reason I suggested A-Frame: that it’s pretty much ready-made for displaying buildings with roofs in 3D. (An A-frame is a roof shape.) So it’s probably less work for you then building a 3D model renderer atop pixi.js and generating a mesh. Though I guess there would still be the work to figure out coordinate spaces. That might make OSMBuilding a less involved option.

[tordanik]

@tordans thanks for the ping!

I indeed got funding to provide OSM2World's functionality as a library (planning to use Kotlin multiplatform to target web and mobile): Input some OSM data, get 3D meshes that you can display with your preferred rendering solution. OSM2World fully supports Simple 3D Buildings, by the way, not just roof shapes – so if desired this would allow an editor preview to be very close to what the building will look on f4map and similar renderers.

Happy to keep you updated on the project's progress if it's relevant.