3D models in the map

[AndreasAtakan]

Hi everyone,

I am trying to add 3D models to the map in the same manner as this.
As far as I could see there was no obvious way to do this.

My current strategy is to use a fork of the rnmapbox repo and manually expose some OpenGL functions that I can use to add 3D models.

Is it possible to access the OpenGL context used by rnmapbox, and inject calls after every map draw using the same viewport?

@mfazekas

[mfazekas]

Mapbox has ModelSource and ModelLayer to display models in gltf format. That seems to be a better approach then OpenGL as AFAIK iOS version already uses Metal, and not OpenGL.

[AndreasAtakan]

Thank you Miklós!

I will have a look at this approach and try to get something working.
I will keep this thread open in the meantime, if anything else pops up.

Best regards

[AndreasAtakan]

Hi again Miklós,

I have done further research on this, and figured out that it will be best to exclusively target maplibre/OpenGL.
In this case, is it possible to acquire the GL-context and/or the viewport of the renderer?

@mfazekas

[mfazekas]

@AndreasAtakan sorry we're going to drop MapLibre with next release, they now have a fork

[AndreasAtakan]

I see, thank you very much for your help!

[TenUchikawa]

@AndreasAtakan

Have you been able to implement it?　

I can't find the classes ModelSource and ModelLayer in rnmapbox and am struggling to implement them.

I would appreciate it if you could give me a sample.

[AndreasAtakan]

I have not been able to, unfortunately

[sercaneryaz]

is there any example for react native project?

[WataruTsuchida]

Can someone write ModelSource and ModelLayer in swift side because I don't have mac at hand?
I will write the typescript file in react native side.

[mfazekas]

@WataruTsuchida pls open a draft PR with js+android code, I'm sure someone will be able to implement iOS side as well. And we can also start as an android only for start.

[MichaelDanielTom]

I've implemented/been using a ModelLayer on the iOS/js side, but haven't yet opened a PR/pushed anything yet since the way the models are loaded is specific to our project (patched RNMBXMapView.swift to load models bundled with our project from a specific dir with addStyleModel on MapView load), and because I wasn't sure how to autogenerate the styles in RNMBXStyle.swift so just ended up doing them in a more concise way than the previous pattern. Have been planning on figuring out the model loading mechanism in a more generalized way, but I could push up some of what I have now in a draft PR if it's useful.

[WataruTsuchida]

@mfazekas
Got it. Let me write both android and js file in this weekend.
How is RNMBXStyle.swift generated auto?

@MichaelDanielTom
Nice. If you can share codes, they can be good resource.
What's your concern for the loading mechanism?

[MichaelDanielTom]

Sorry for the delay - here's a patch file gist to this repo at 10.1.0-beta.21 with the changes I made for a ModelLayer to work on iOS (has been working well in production for a few months). Tried to clean it up but there might be a few non-model related things in there like some extra FillExtrusionLayer props. Also of note is the loadRadiateData method that loads models to the map from one of our application specific directories which will need to be replaced with a more robust loading mechanism, possibly similar to how this lib handles images.

There are also a few other application specific things and some general messiness in my code that will need to be cleaned up.

Hopefully this is useful - not sure if I'll have time in the next 2 weeks to generalize this stuff but likely will after that if someone else hasn't already, regardless lmk if anyone has any questions about the code!

[mfazekas]

I've added a PR for Models and ModeLayer see #3209

RNMBXStyle.swift is generated from RNMBXStyle.swift.ejs

[mfazekas]

This should be available in beta25

https://github.com/rnmapbox/maps/releases/tag/v10.1.0-beta.25