GreasedLines and Billboards in MapLibre/Vertex Shader setup

Questions
1

Hello forum!

I am working on an app that integrates MapLibre and BabylonJS. The implementation is based on Add a 3D model with babylon.js - MapLibre GL JS

I always had issues using the default implementations for billboards and such, but I was able to work around that by computing the billboard rotation and such manually in world space. My assumption is that, while the camera has a proper projection set up with the help of MapLibre, the vertex shaders are missing some attributes to work correctly.

Now I am looking into using GreasedLines to add lines to the scenes, and I have no idea how to use the fantastic options of GreasedLines with MapLibre. I am wondering if somebody has some information on how to approach it.

Thanks a bunch!

Stefan

The image show how the greased line is not oriented to the camera.

greased-lines
greased-lines838Ă—516 79.2 KB

2

cc @roland the overlord for GreaseLines :wink:

3

Do you use the GL context of the map?

4

Hi Roland! Yes, the context and scene maintained by MapLibre is passed into the render function.
This code from the sample shows all that is currently being done to render the scene:

        render (gl, args) {
            const cameraMatrix = BABYLON.Matrix.FromArray(args.defaultProjectionData.mainMatrix);

            // world-view-projection matrix
            const wvpMatrix = worldMatrix.multiply(cameraMatrix);

            this.camera.freezeProjectionMatrix(wvpMatrix);

            this.scene.render(false);
            this.map.triggerRepaint();
        }
5

… and also during initialisation (in “onAdd()”):

        this._scene.autoClear = false
        this._scene.beforeRender = () =>
            this._scene?.getEngine().wipeCaches(true)
6

Hi Roland,

do you see any chance to make GreasedLines work using the context of the map?

Best regards,
Stefan

7

Hello!

Can you console.log(this._scene.getViewMatrix())?

8

Thank you for support!

This is the scenes viewMatrix as requested:

updateFlag: 101
_isIdentity: false
_isIdentity3x2: false
_isIdentity3x2Dirty: true
_isIdentityDirty: true
_m: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0, -0, -0, 1]

Just in case this is helpful, here are the other matrices that are applied

The cameraMatrix as provided matrix by the map like this:

        const cameraMatrix = Matrix.FromArray(options.defaultProjectionData.mainMatrix)
        const wvpMatrix = this._modelMatrix.multiply(cameraMatrix)
...
       this._internalCamera.freezeProjectionMatrix(wvpMatrix)

      // logging the viewMatrix here...

is this:

_m: Array(16)
0: 410265864.5436151
1: 0
2: 0
3: 0
4: 0
5: -247709860.67786384
6: -70541281.31551024
7: -69284417.57792364
8: 0
9: 207853252.7337709
10: -84067825.43395816
11: -82569953.55928794
12: -213096888.50210908
13: 82451616.77492808
14: 23482475.862704903
15: 23064143.075270858

And the above mentioned this._modelMatrix is this:

_m: Array(16)
0: 2.498112117166329e-8
1: 0
2: 0
3: 0
4: 0
5: 5.5469231811463104e-24
6: 2.498112117166329e-8
7: 0
8: 0
9: -2.498112117166329e-8
10: 5.5469231811463104e-24
11: 0
12: 0.5193901062011719
13: 0.3329211473464966
14: 0
15: 1
9

You view matrix is incorrect, it is not updated. I use Google Maps WebGLOverlay to draw my stuff over Google maps and I had the same issue. Do you have access to the center, tilt and rotation of the map? If so, you can position your camera correctly thus getting a correct view matrix which is needed to render GreasedLines correctly.

10

Thank you for your support. I’ll do my best :slightly_smiling_face:

11

Any insight on how to set the view matrix on the Camera class? Having a hard time with that

12

I think you could start another thread ? and explain a bit more of the use case there @riven04