Babylon in Mapbox Layer

[sharp]

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) :

(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();
        }

[Deltakosh]

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

[sharp]

YEAH

[sharp]

Scene.detachControl()

CodeSandbox updated

[dpuru]

@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!

[sharp]

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

[sharp]

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.

[Deltakosh]

That deserves a page in the doc!

[Veksi]

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 .

[Veksi]

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.

[Kun_Liu]

@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:

• single model

• multiple common shapes

• multiple parametric shapes

• multiple custom meshes

[sebavan]

Thanks for sharing it !

[gtsl-2]

Thank you for this information!!

Can you make a sample of particleSystem?
I tested it, but billboard mode is not worked well…

side ↓

[sharp]

There’s definitely problems with billboard mode because the viewMatrix is not updated.

We deduce the projectionMatrix from Mapbox coordinates and we freeze it (line 68 here)…But the camera position in fact is still (0,0,0), we overrided the projection matrix to fit the mapbox world, but from the billboard pov, camera is still at the center…

I tried to solve this problem but did not found the time to achieve it :p. If we could deduce the new camera position from the mapbox world matrix it will make the job but it’s complicated to transpose the viewMatrix.

I don’t work on mapbox anymore but new versions now come with a freeCamera support and the code should contains all the info to make a better transposition of the mapbox camera to the babylon world.

[gtsl-2]

Thank you for your help.
I know that the location of the camera can be got from the mapbox, but I am not sure how to integrate babylonjs and mapbox.

How can I get camera position in Mapbox GL JS?

[gtsl-2]

I make demo. The camera position is acquired at line 63 (console message), and it seems to be able to recognize the change in camera position.
I think the problem is, as you say, that billboardMode is not working.

Babylon-mapbox billboard - JSFiddle - Code Playground

This topic is too long, I want to move

Force to recompute billboard

In a project I’m working on (mapbox ^^), I only set the projectionMatrix to control my Camera : scene.activeCamera.freezeProjectionMatrix(projectionMatrix); scene.render(true); So billboards does not work because camera.position = (0,0,0) For a specific mesh I can make : let invert = scene.activeCamera.getProjectionMatrix().clone().invert(); scene.activeCamera.position = BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(), invert) mesh.lookAt(scene.activeCamera.position) And it works…