# MapBox GL to BABYLON Camera Projection

**URL:** <https://forum.babylonjs.com/t/mapbox-gl-to-babylon-camera-projection/9972>\
**Category:** Questions\
**Created:** [April 13, 2020, 7:37pm UTC](https://forum.babylonjs.com/t/mapbox-gl-to-babylon-camera-projection/9972 "2020-04-13T19:37:34Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![sharp](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sharp/32/1325_2.png) [@sharp](https://forum.babylonjs.com/u/sharp)\
**Post date:** [April 13, 2020, 7:37pm UTC](https://forum.babylonjs.com/t/mapbox-gl-to-babylon-camera-projection/9972/1 "2020-04-13T19:37:34Z")

</div>

🍾 I managed to plug BABYLON in mapbox 🍾

[https://jsfiddle.net/2za498v3/2/](https://jsfiddle.net/2za498v3/2/)

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

 ![capture2](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/f/f278d32388f3244f224bd387a3a9ab6535481de4.gif)

I started from the [sample provided for THREE.js](https://docs.mapbox.com/mapbox-gl-js/example/add-3d-model/) and I’m 99% sure my babylon matrix are right.

```auto
/**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](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/c/c6685145a77fc26d71ed75a6c58bc4649a611573.gif)

Any ideas about where this could come ?

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [April 13, 2020, 8:21pm UTC](https://forum.babylonjs.com/t/mapbox-gl-to-babylon-camera-projection/9972/2 "2020-04-13T20:21:57Z")

</div>

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

(btw fantastic news regarding mapbox!!)

---

<div class="post-metadata">

**Author:** ![sharp](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sharp/32/1325_2.png) [@sharp](https://forum.babylonjs.com/u/sharp)\
**Post date:** [April 13, 2020, 8:56pm UTC](https://forum.babylonjs.com/t/mapbox-gl-to-babylon-camera-projection/9972/3 "2020-04-13T20:56:15Z")

</div>

[https://jsfiddle.net/2za498v3/2/](https://jsfiddle.net/2za498v3/2/)

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

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [April 13, 2020, 9:02pm UTC](https://forum.babylonjs.com/t/mapbox-gl-to-babylon-camera-projection/9972/4 "2020-04-13T21:02:01Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sharp](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sharp/32/1325_2.png) [@sharp](https://forum.babylonjs.com/u/sharp)\
**Post date:** [April 13, 2020, 9:03pm UTC](https://forum.babylonjs.com/t/mapbox-gl-to-babylon-camera-projection/9972/5 "2020-04-13T21:03:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sharp](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sharp/32/1325_2.png) [@sharp](https://forum.babylonjs.com/u/sharp)\
**Post date:** [April 13, 2020, 9:05pm UTC](https://forum.babylonjs.com/t/mapbox-gl-to-babylon-camera-projection/9972/6 "2020-04-13T21:05:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [April 13, 2020, 9:14pm UTC](https://forum.babylonjs.com/t/mapbox-gl-to-babylon-camera-projection/9972/7 "2020-04-13T21:14:29Z")

</div>

Are we sure the matrix is sent correctly?

I definitely repro the issue in your jsfiddle

---

<div class="post-metadata">

**Author:** ![sharp](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sharp/32/1325_2.png) [@sharp](https://forum.babylonjs.com/u/sharp)\
**Post date:** [April 13, 2020, 9:17pm UTC](https://forum.babylonjs.com/t/mapbox-gl-to-babylon-camera-projection/9972/8 "2020-04-13T21:17:40Z")

</div>

> [@Deltakosh](#):
>
> matrix is sent correctly

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

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [April 13, 2020, 9:21pm UTC](https://forum.babylonjs.com/t/mapbox-gl-to-babylon-camera-projection/9972/9 "2020-04-13T21:21:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [April 13, 2020, 9:24pm UTC](https://forum.babylonjs.com/t/mapbox-gl-to-babylon-camera-projection/9972/10 "2020-04-13T21:24:28Z")

</div>

And the update to the world matrix is also correct?

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [April 13, 2020, 9:26pm UTC](https://forum.babylonjs.com/t/mapbox-gl-to-babylon-camera-projection/9972/11 "2020-04-13T21:26:21Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![sharp](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sharp/32/1325_2.png) [@sharp](https://forum.babylonjs.com/u/sharp)\
**Post date:** [April 13, 2020, 9:27pm UTC](https://forum.babylonjs.com/t/mapbox-gl-to-babylon-camera-projection/9972/12 "2020-04-13T21:27:54Z")

</div>

> [@Deltakosh](#):
>
> Also is there anything done in 3js to offset the center of the world?

Nothing, only the projection matrix.

> [@Deltakosh](#):
>
> Maybe the coordinates are REALLY big and we end up facing a precision issue?

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

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [April 13, 2020, 9:31pm UTC](https://forum.babylonjs.com/t/mapbox-gl-to-babylon-camera-projection/9972/13 "2020-04-13T21:31:39Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sharp](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sharp/32/1325_2.png) [@sharp](https://forum.babylonjs.com/u/sharp)\
**Post date:** [April 13, 2020, 9:33pm UTC](https://forum.babylonjs.com/t/mapbox-gl-to-babylon-camera-projection/9972/14 "2020-04-13T21:33:41Z")

</div>

> [@Deltakosh](#):
>
> So a repro in the PG could definitely help a lot

Ok I will do that tomorrow, thanks for helping !

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [April 13, 2020, 9:38pm UTC](https://forum.babylonjs.com/t/mapbox-gl-to-babylon-camera-projection/9972/15 "2020-04-13T21:38:04Z")

</div>

always 😃

---

<div class="post-metadata">

**Author:** ![sable](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sable/32/207_2.png) [@sable](https://forum.babylonjs.com/u/sable)\
**Post date:** [April 13, 2020, 10:08pm UTC](https://forum.babylonjs.com/t/mapbox-gl-to-babylon-camera-projection/9972/16 "2020-04-13T22:08:44Z")

</div>

[https://jsfiddle.net/y09ucome/](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 🙂

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/](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.

---

<div class="post-metadata">

**Author:** ![sharp](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sharp/32/1325_2.png) [@sharp](https://forum.babylonjs.com/u/sharp)\
**Post date:** [April 14, 2020, 6:09am UTC](https://forum.babylonjs.com/t/mapbox-gl-to-babylon-camera-projection/9972/17 "2020-04-14T06:09:01Z")

</div>

Thank you @sable !!

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [April 14, 2020, 2:23pm UTC](https://forum.babylonjs.com/t/mapbox-gl-to-babylon-camera-projection/9972/18 "2020-04-14T14:23:32Z")

</div>

> [@sable](#):
>
> I could do a pr to add these if that sounds like a good idea

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

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [April 14, 2020, 2:24pm UTC](https://forum.babylonjs.com/t/mapbox-gl-to-babylon-camera-projection/9972/19 "2020-04-14T14:24:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sharp](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sharp/32/1325_2.png) [@sharp](https://forum.babylonjs.com/u/sharp)\
**Post date:** [April 14, 2020, 4:03pm UTC](https://forum.babylonjs.com/t/mapbox-gl-to-babylon-camera-projection/9972/20 "2020-04-14T16:03:37Z")

</div>

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

I made a dedicated layer :

```auto
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")
});

```

[Next page](https://forum.babylonjs.com/t/mapbox-gl-to-babylon-camera-projection/9972.md?page=2)