MapBox GL to BABYLON Camera Projection

Questions
1

:champagne: I managed to plug BABYLON in mapbox :champagne:

https://jsfiddle.net/2za498v3/2/

…But there are artefacts when we pan or zoom in the map :smirk:

capture2
capture2623×536 481 KB

I started from the sample provided for THREE.js and I’m 99% sure my babylon matrix are right.

/** Mapbox give the context(*gl*) and the perspective matrix(*matrix*).**/
render: function(gl, matrix) {
   if(this.scene) {
        let projection = BABYLON.Matrix.FromArray(matrix);
        this.scene.activeCamera.freezeProjectionMatrix(world.multiply(projection));
        this.scene.render(false);
        this.engine.wipeCaches(true);
   }
    this.map.triggerRepaint();
}

Is BABYLON approximates perspective values somewhere?

…I said that because I notice this small kind of delay :

capture1
capture1623×536 437 KB

Any ideas about where this could come ?

2 Likes
2

I don’t think so :frowning:
anyway you can repro on the PG?

(btw fantastic news regarding mapbox!!)

3

https://jsfiddle.net/2za498v3/2/

I can’t repro on the PG because I need to create the engine :confused:

4

I meant : Can you repro the same behavior (Without mapBox)

5

It’s difficult to repro because mapbox give crazy projection matrix and I don’t see how I could emulate that :stuck_out_tongue:

6

I didn’t found a way to isolate the bug, it’s a very specific case…

7

Are we sure the matrix is sent correctly?

I definitely repro the issue in your jsfiddle

8

I think so because they have the exact same values as the ones generated in the THREE.js sample

9

I triple checked: the projectionMatrix you are giving to bjs is the one used :frowning:

10

And the update to the world matrix is also correct?

11

Also is there anything done in 3js to offset the center of the world? Maybe the coordinates are REALLY big and we end up facing a precision issue?

12

Nothing, only the projection matrix.

They are because it is the real world coordinates :p…But precision from where ?

13

like if the projection is getting super large value then we could lose precision

So a repro in the PG could definitely help a lot

14

Ok I will do that tomorrow, thanks for helping !

15

always :smiley:

16

https://jsfiddle.net/y09ucome/ (You’ll need to put the mapbox access token back in there, as I removed it in case you don’t want it there forever)

Yeah it is a precision issue caused by the matrix class using Float32Arrays. Doing the maths as just a standard array fixes the issue entirely.

Integration with mapbox might actually be very useful, so thanks for posting this here :slight_smile:

Edit:
It’s just the conversion of the matrix provided by mapbox to a float32array (with Matrix.FromArray) that causes precision loss, so just setting the internal array to that matrix directly (and ignoring that you’re setting it to the wrong type) also solves the issue. https://jsfiddle.net/dt6ovyxL/

Ideally babylonjs would have matrix methods that allow multiplication of a matrix by an array (for both pre and post multiplication) to help with this use case. I could do a pr to add these if that sounds like a good idea @Deltakosh, though I’m weary that math.vector.ts is growing quite large.

3 Likes
17

Thank you @sable !!

18

Please add it, I really think it could serve more needs

19

@sharp: Do you want to add a page in the doc to explain how to integrate into MapBox?

20

@Deltakosh maybe better to make a small github project and link it in the doc ?

I made a dedicated layer :

const createScene = (engine) => {
    return new Promise(resolve => {
        BABYLON.SceneLoader.Load("https://docs.mapbox.com/mapbox-gl-js/assets/34M_17/", "34M_17.gltf", engine,
            (scene) => {
                new BABYLON.DirectionalLight("DirectionalLight", new BABYLON.Vector3(0, -70, 100), scene);
                new BABYLON.DirectionalLight("DirectionalLight2", new BABYLON.Vector3(0, 70, 100), scene);
                resolve(scene);
            });
    });
};

let layer = new BabylonMapboxLayer(createScene,  [148.9819, -35.39847]);

map.on("load", function() {
    map.addLayer(layer, "building")
});