Babylon in Mapbox Layer

I would like to make the same as this example with Three.js but with a Babylon renderer instead :p…

It works but I think BABYLON is still handling touch events (scrolling zoom works) :

Edit BABYLON
(I can’t make a Playground because 3D context is provided by mapbox)

 onAdd: function(map, gl) {
            this.engine = new BABYLON.Engine(gl, true, {
                doNotHandleTouchAction : true,
                preserveDrawingBuffer : true,
            });
            this.scene = this._createScene();
            this.scene.autoClear = false;
            this.map = map;
        },
render: function(gl, matrix) { 
             this.scene.render();
             this.engine.wipeCaches(true);
             this.map.triggerRepaint();
        }

just make sure to call scene.detach() and you should be fine :wink:

1 Like

YEAH :raised_hands: :champagne:

Scene.detachControl()

CodeSandbox updated

2 Likes

@sharp If you don’t mind, could you please share the CodeSandBox again? I can’t seem to open it on my end, it errors out saying reached 10 MB limit. Thanks!

Hi,

I will release a full featured Babylon Mapbox Layer next week so be patient it will be a much better option than the old Sandbox :smiley:

2 Likes

The full featured repo is not yet ready and I will be in holiday tonight so I made a minimal jsFiddle :
https://jsfiddle.net/fabsharp/w3dephvm/

It is the same example as in the mapbox-gl doc but with babylon instead of three.

4 Likes

That deserves a page in the doc!

2 Likes

In case someone is interested, noticed there are a few examples that apparently use deck.gl that is a library on top of Mapbox (or compatible) maps and draw a custom 3D object on the map. See at
How to click on 3D object on map (mapbox) with help form deck.gl (uber library) | by Bartłomiej Leja | Medium and Zero to One: How I mastered Data Visualization and how you can too | by hijiangtao | Medium .

Saw a really good discussion about integrating https://www.harp.gl/ with deck.gl at Interleaving DeckGL layers with a base map · Issue #4603 · visgl/deck.gl · GitHub. Harp.gl uses ThreeJS underneath so the situation is not too different to BabylonJS, I think.

The difference to Mapbox is that it’s basemaps only whereas Harp.gl combines both basemaps and ThreeJS. One another interesting piece could be Terrain rendering layer · Issue #1215 · visgl/deck.gl · GitHub for terrain rendering, add here since if one is looking into this, probably wants to see that also. :slight_smile:

@sharp Thanks for your example. I found Babylon meshes can not georeference correctly on the map. Setting the adaptToDeviceRatio parameter to be true can solve this problem, which can ensure the width and height of the canvas to be consistent with Mapbox.

The following examples show how Babylon integrated with Mapbox:

3 Likes

Thanks for sharing it !