Deck.gl geospatial viewport in babylonjs?

Questions
1

Hi there,

i am trying to implement a way to use tiles loaded by loaders.gl. It kind of works, but i am struggeling with setting up a geospacial viewport camera how it is needed by loaders.gl / deck.gl to be able to figure out what tiles it needs to load and wich not.

so in oder to do that i need something like this (comming from the deck.gl documentation )


## Constructor[​](https://deck.gl/docs/api-reference/core/viewport#constructor)

new Viewport({width: 500, height: 500, viewMatrix, projectionMatrix, …});


General Parameters

* `x` (`Number`, optional) - x position of viewport top-left corner. Default `0`.
* `y` (`Number`, optional) - y position of viewport top-left corner. Default `0`.
* `width` (`Number`) - Width of viewport. Default `1`.
* `height` (`Number`) - Height of viewport. Default `1`.

View Matrix Parameters

* `viewMatrix` (`Array[16]`, optional) - 4x4 view matrix. Defaults to the identity matrix.

Position and Geospatial Anchor Options (Optional)

* `latitude` (`Number`, optional) - Center of viewport on map (alternative to center). Must be provided if constructing a geospatial viewport.
* `longitude` (`Number`, optional) - Center of viewport on map (alternative to center). Must be provided if constructing a geospatial viewport.
* `zoom` (`Number`, optional) - [zoom level](https://wiki.openstreetmap.org/wiki/Zoom_levels) .
* `focalDistance` (`Number`, optional) - modifier of viewport scale if `zoom` is not supplied. Corresponds to the number of pixels per meter. Default to `1`.
* `position` (`Array[3]`, optional) - Position of viewport camera. Default `[0, 0, 0]`.
* `modelMatrix` (`Array[16]`, optional) - Optional 4x4 model matrix applied to position.

is there any chance to translate ´viewMatrix´ ,´modelMatrix´ and focalDistance from babylonjs to this here?

Any idea how i could approach this would be awesome!

Thanks a lot!

2

I would not know how to do it, but maybe you can use a mapbox layer (MapboxLayer | deck.gl) and use Mapbox instead? Some people have been able to integrate Babylon.js with Mapbox:

3

Hi, in my case i really want to get this to work without Mpabox layers. To be able to do that i (think i ) need to get this viewport to work.
the problem is, that there seems to be some kind of translation problem: can it be that the ViewMatrix is differenly formatted then deck.gl wants it? like xyz xzy or something like that?

currently i am trying to pass the babylon camera values like this to the deck.gl viewport:

      const viewDistance = calculateViewDistance(camera);

      // swap rows:
      // Swap Y and Z axes --- no idea if correct or not.
      const proM = camera.getProjectionMatrix();
      const babylonMatrixYZ = proM.clone();
      babylonMatrixYZ.setRow(1, proM.getRow(2) as Vector4);
      babylonMatrixYZ.setRow(2, proM.getRow(1) as Vector4);

      const convertedMatrix: number[] = Array.from(babylonMatrixYZ.m);

      const updateViewportData: ViewportUpdate = {
        lon: cameraPosition.lon, // gets updated every frame, tested, works
        lat: cameraPosition.lat,  // gets updated every frame, tested, works
        cameraMatrix: Array.from(cameraPosition.viewMatrix.m), // i am not sure here... does that need some recalculation? conversion?!
        pos: cameraPosition.position // position in meter offset from lat / lon
          ? (cameraPosition.position as [number, number, number])
          : ([0, 0, 0] as [number, number, number]),
        fov: Angle.FromRadians(camera.fov).degrees(),
        projectionMatrix: convertedMatrix, // i am not sure here... does that need some recalculation? conversion?!
        width: engine?.getRenderWidth(),
        height: engine?.getRenderHeight(),
        pitch: calculatePitch(camera), // calculated angle how far i am looking down / up in degree
        bearing: calculateBearing(camera), // degree of north = 0° south = 180° camera rotation
        distance: viewDistance, // distance calculated from pitch and heigt
      };

      parsed3DTiles?.updateViewport(updateViewportData);

and then used here: https://github.com/pcace/loadersglBabylon/blob/796ac6c473bcf15009db96302d6e3bb7e9e139db/src/loader/ImageTilesloadersClass.ts#L52C1-L75C39

that else can be the problem here? any idea would be just awesome!!!

4

Let’s hope someone with a little knowledge of deck.gl passes by!

5

Yes… lets hope so. My guess is that the problem lies in the transformation between the babylonjs projection matrix and the by deck.gl expected matrix. Maybe someone has an idea what could go wrong here?
thanks a lot!