Help settings up a geospacial viewport

[pcace]

Hi there,

i am trying to set up a geospacial viewport in babylon, to make loading of tiles possible. i am struggeling to set up the correct informations i need for the viewport.
currently i am gettings these informations from the babylon camera: viewMatrix, lat , lon, and height
this looks for example like this:

{
    "lat": -75.61232037066806,
    "lon": 40.0424400969135,
    "viewMatrix": [
        0.5583016872406006,
        -0.40755343437194824,
        -0.7226336598396301,
        0,
        0,
        0.8710228800773621,
        -0.49124249815940857,
        0,
        0.8296380043029785,
        0.2742615342140198,
        0.4862935543060303,
        0,
        16.59276008605957,
        -3.2249977588653564,
        35.50090408325195,
        1
    ],
    "zPos": 20.248599574231786,
    "fov": 45.83662361046586,
    "projectionMatrix": [
        1.183664321899414,
        0,
        0,
        0,
        0,
        2.365222454071045,
        0,
        0,
        0,
        0,
        1.0002000331878662,
        1,
        0,
        0,
        -2.000200033187866,
        0
    ],
    "width": 1123,
    "height": 562
}

with this i set up a new Viewport:

    const newViewport = new Viewport(
      {
        longitude: lon,
        latitude: lat,
        x : 1024,
        y : 1024,
        viewMatrix: cameraMatrix,
        position: [0,zPos,0],
        fovy: fov,
        projectionMatrix : projectionMatrix,
        width: width,
        height: height

      }

to then update my tileset with this viewport:

tileset.update(newViewport)
several propblems or missunderstandings here:

• if i console.log the zoom value (wich by my understanding should be calculated according to matrix, height and lat/lon) is always around 15.xxxxxx (but yes it changes) no matter how i change the camera or how far up i go.
• it feels like the viewport does not know where it is, because tilesets do not get loaded correctly

maybe someone coult look at the viewport object and figure what i am missing here?
any help would be just awesome!!! Thanks a lot!

here is the full viewport object:

 
 {
    "id": "Viewport",
    "x": 1024,
    "y": 1024,
    "width": 1024,
    "height": 1024,
    "isGeospatial": true,
    "zoom": 15.869184239277782,
    "focalDistance": 1,
    "position": [
        0,
        0,
        0
    ],
    "modelMatrix": null,
    "distanceScales": {
        "unitsPerMeter": [
            0.000016707040956373846,
            0.000016707040956373846,
            0.000016707040956373846
        ],
        "metersPerUnit": [
            59855.00380415919,
            59855.00380415919,
            59855.00380415919
        ],
        "unitsPerDegree": [
            1.4222222222222223,
            1.8577301374545696,
            0.000016707040956373846
        ],
        "degreesPerUnit": [
            0.703125,
            0.5382913157506197,
            59855.00380415919
        ]
    },
    "scale": 59855.00380415917,
    "center": [
        148.46279838187417,
        318.24599737237855,
        0
    ],
    "cameraPosition": [
        191.04601402755435,
        387.0714208154975,
        -0.7822530484812823
    ],
    "projectionMatrix": [
        0.08759281002436682,
        0,
        0,
        0,
        0,
        1.3032253728412058,
        0,
        0,
        0,
        0,
        -1.0002000200020003,
        -1,
        0,
        0,
        -0.2000200020002,
        0
    ],
    "viewMatrix": [
        0.014692632481455803,
        -0.8503004908561707,
        -0.5260924100875854,
        0,
        0,
        0.5261492133140564,
        -0.8503922820091248,
        0,
        0.9998920559883118,
        0.012494501657783985,
        0.007730517070740461,
        0,
        -2.024800262204832,
        -41.20103019267272,
        429.6764540257328,
        1
    ],
    "viewMatrixUncentered": [
        0.014692632481455803,
        -0.8503004908561707,
        -0.5260924100875854,
        0,
        0,
        0.5261492133140564,
        -0.8503922820091248,
        0,
        0.9998920559883118,
        0.012494501657783985,
        0.007730517070740461,
        0,
        0.15650907158851624,
        0.0058606271632015705,
        80.93736267089844,
        1
    ],
    "viewMatrixInverse": [
        0.014692632905737307,
        -3.016428702214162e-11,
        0.9998920589046244,
        0,
        -0.8503004671802407,
        0.5261491907868561,
        0.012494500969648154,
        0,
        -0.5260924062368875,
        -0.8503922630543215,
        0.007730516839123373,
        0,
        191.04601402755435,
        387.0714208154975,
        -0.7822530484812823,
        1
    ],
    "viewProjectionMatrix": [
        0.0012869689657059994,
        -1.1081331742230933,
        0.5261976390925035,
        0.5260924100875854,
        0,
        0.6856910046913183,
        0.8505623774750732,
        0.8503922820091248,
        0.08758335490505774,
        0.016283151581430597,
        -0.0077320633287804134,
        -0.007730517070740461,
        -0.17735794470459598,
        -53.69422793428768,
        -429.9624179129267,
        -429.6764540257328
    ],
    "pixelProjectionMatrix": [
        270.01824207528523,
        56.23813350539692,
        0.5261976390925035,
        0.5260924100875854,
        435.4008483886719,
        5.667817534636843,
        0.8505623774750732,
        0.8503922820091248,
        40.884652971170446,
        -0.8263754505990059,
        -0.0077320633287804134,
        -0.007730517070740461,
        -220085.15172886394,
        -12938.567863325827,
        -429.9624179129267,
        -429.6764540257328
    ],
    "pixelUnprojectionMatrix": [
        0.00032761306134634145,
        -6.725690311484466e-13,
        0.0222953707844773,
        1.3798438959682877e-19,
        0.018959810736744253,
        -0.011731957656909004,
        -0.0002785996041966304,
        -6.317097836229817e-19,
        -955.1345471305253,
        -1935.1635683666086,
        3.910874115885276,
        -4.999499999998783,
        955.031489167022,
        1936.8047605246172,
        -15.325029359630758,
        5.000499999998784
    ],
    "_frustumPlanes": {
        "left": {
            "distance": -428.2142102130283,
            "normal": [
                -0.5253677831743266,
                -0.8471486102276002,
                -0.07954825322996753
            ]
        },
        "right": {
            "distance": -427.860847311969,
            "normal": [
                -0.5228036630605087,
                -0.8471486102018245,
                0.09495031397331717
            ]
        },
        "bottom": {
            "distance": -294.2574221871945,
            "normal": [
                0.3543239614117621,
                -0.9351082411048892,
                -0.00520651391975211
            ]
        },
        "top": {
            "distance": -228.88347490339865,
            "normal": [
                -0.9948534918831262,
                -0.10026378391716641,
                0.014618595095372743
            ]
        },
        "near": {
            "distance": -429.7764501262354,
            "normal": [
                -0.526092405314183,
                -0.850392274293247,
                0.007730517000599039
            ]
        },
        "far": {
            "distance": 1429.676441053319,
            "normal": [
                0.5260924053141911,
                0.8503922742932418,
                -0.007730517000596131
            ]
        }
    }
}

[ibgreen]

Since babylon is not primarily a geospatial framework, I think your best bet may be to review a similar integration built for three.js by a contributor. https://github.com/visgl/loaders.gl/tree/master/examples/experimental

[pcace]

Hi, thanks for your reply. i did actually look into that, but stull cannot figure out what the problem could be here.
i still think there is some miss match between the deck.gl viewport and the current babylonjs camera.
how would i be able to figure out what the difference is? is there any way to see something wrong using these objects i postet in the first post?
Cheers and thanks a lot for help!

[ibgreen]

Were you able to actually run that three.js example? If you have been copying it, it could be worth making sure that it still works and hasn't been broken by recent loaders.gl releases.

[pcace]

hi,
no i have not been able to run them, because of some strange webpack errors. But i also did not really copy them but more tried to figure what they do.
still.. i am still not quite understanding where the strange zoom levels come from.

[pcace]

Hi, i still cannot really figure it out - at least i do not think the values calculated by the viewport seem to be coorect.

the zoomvalue and position is a mystery for me. zoom value just keeps around 15.xxx and camera position is

148.45984578379685,
        318.2371190639274,
        0.0016872124055622338

while the lat / lon seems to be correct. do i have to reproject the values to create the viewport beforehand? in what projection are the resulting viewport.position values? even try to reproject or unproject them i never get back to the original lat /lon.

these are the values to create the viewport :

{
    "longitude": -75.61565118973338,
    "latitude": 40.04175274005505,
    "x": 1210,
    "y": 403,
    "up": [
        0,
        0,
        1
    ],
    "position": [
        126.01094471568231,
        -472.44879751179144,
        100.98889042453851
    ],
    "fovy": 45.83662361046586,
    "projectionMatrix": [
        0.7877559065818787,
        0,
        0,
        0,
        0,
        2.365222454071045,
        0,
        0,
        0,
        0,
        1.0002000331878662,
        1,
        0,
        0,
        -2.000200033187866,
        0
    ],
    "width": 1210,
    "height": 403,
    "pitch": 80.84002607482773,
    "bearing": 20.068419650838877,
    "focalDistance": 634.3860051210934
}

the resulting viewport is this:

{
    "id": "Viewport",
    "x": 1210,
    "y": 403,
    "width": 1210,
    "height": 403,
    "isGeospatial": true,
    "zoom": 15.86919546031217,
    "focalDistance": 634.3860051210934,
    "position": [
        126.01094471568231,
        -472.44879751179144,
        100.98889042453851
    ],
    "modelMatrix": null,
    "distanceScales": {
        "unitsPerMeter": [
            0.000016706911012382423,
            0.000016706911012382423,
            0.000016706911012382423
        ],
        "metersPerUnit": [
            59855.469347915016,
            59855.469347915016,
            59855.469347915016
        ],
        "unitsPerDegree": [
            1.4222222222222223,
            1.8577156884046346,
            0.000016706911012382423
        ],
        "degreesPerUnit": [
            0.703125,
            0.5382955025043569,
            59855.469347915016
        ]
    },
    "scale": 59855.46934791504,
    "center": [
        148.4598457837969,
        318.2371190639275,
        0.0016872124055620043
    ],
    "cameraPosition": [
        148.45984578379685,
        318.2371190639274,
        0.0016872124055622338
    ],
    "projectionMatrix": [
        0.7877559065818787,
        0,
        0,
        0,
        0,
        2.365222454071045,
        0,
        0,
        0,
        0,
        1.0002000331878662,
        1,
        0,
        0,
        -2.000200033187866,
        0
    ],
    "viewMatrix": [
        56221.256428496774,
        20277.00909093903,
        -3269.623645984794,
        0,
        -20538.9273444454,
        55504.306947799174,
        -8949.948862607036,
        0,
        0,
        9528.484844384433,
        59092.17534859868,
        0,
        -1810349.9923863038,
        -20673868.457882833,
        3333514.063008176,
        1
    ],
    "viewMatrixUncentered": [
        56221.256428496774,
        20277.00909093903,
        -3269.623645984794,
        0,
        -20538.9273444454,
        55504.306947799174,
        -8949.948862607036,
        0,
        0,
        9528.484844384433,
        59092.17534859868,
        0,
        0,
        0,
        0,
        1
    ],
    "viewMatrixInverse": [
        0.000015692526320285997,
        -0.000005732843383766566,
        -1.3897560924115474e-22,
        0,
        0.0000056597365315186195,
        0.000015492410753490167,
        0.000002659599032674037,
        0,
        -9.126202148701734e-7,
        -0.0000024981175628883015,
        0.00001649385972297158,
        0,
        148.45984578379685,
        318.2371190639274,
        0.0016872124055622338,
        1
    ],
    "viewProjectionMatrix": [
        44288.62682700275,
        47959.637203291706,
        -3270.2776792258232,
        -3269.623645984794,
        -16179.661330442925,
        131280.0330905861,
        -8951.739149409263,
        -8949.948862607036,
        0,
        22536.98630721371,
        59103.995744811604,
        59092.17534859868,
        -1426113.89948277,
        -48898297.889095604,
        3334178.876252963,
        3333514.063008176
    ],
    "pixelProjectionMatrix": [
        24816496.924515862,
        -10322696.061129214,
        -3270.2776792258232,
        -3269.623645984794,
        -15203414.166795228,
        -28256341.363568418,
        -8951.739149409263,
        -8949.948862607036,
        35750766.0859022,
        7365870.591839071,
        59103.995744811604,
        59092.17534859868,
        1153977098.9328709,
        10524710108.348911,
        3334178.876252963,
        3333514.063008176
    ],
    "pixelUnprojectionMatrix": [
        3.2926519274752795e-8,
        -1.2028820235460284e-8,
        1.0412156663357192e-22,
        -1.8512840734899624e-24,
        -1.187542526470045e-8,
        -3.2506630840875966e-8,
        -5.580448732169958e-9,
        0,
        -74.22249941904546,
        -159.10264664587848,
        -0.000843521836699463,
        -0.4999499967630047,
        74.23732794194945,
        159.13448378488977,
        0.0008613088891994329,
        0.5000500033546309
    ],
    "_frustumPlanes": {
        "left": {
            "distance": 25.032573615994536,
            "normal": [
                -0.5383302551918173,
                0.32979907893899624,
                -0.7755211820937599
            ]
        },
        "right": {
            "distance": 62.464992734186524,
            "normal": [
                0.6241508356655388,
                -0.09488219254373825,
                -0.7755211820937599
            ]
        },
        "bottom": {
            "distance": -296.44345891735423,
            "normal": [
                -0.2907522232203928,
                -0.7958767770435687,
                -0.5310774900663182
            ]
        },
        "top": {
            "distance": 339.81899397792034,
            "normal": [
                0.33329641904817014,
                0.912333109113146,
                -0.23782723785472282
            ]
        },
        "near": {
            "distance": 55.692706102291936,
            "normal": [
                0.054625311297449304,
                0.14952599921294896,
                -0.987247715077136
            ]
        },
        "far": {
            "distance": -55.5256647109068,
            "normal": [
                -0.05462531129746264,
                -0.14952599921295953,
                0.9872477150771337
            ]
        }
    },
    "longitude": -75.61565118973338,
    "latitude": 40.04175274005505
}

[ibgreen]

Your viewports x,y and width, height seems to be the same. Is that intentional?

[pcace]

i am passing these values from the babylonjs camera. how are they supposed to look like?

[ibgreen]

My guess is that x and y should be equal to zero unless you are doing some offset of the viewport on the screen.

[pcace]

Hi, i got a step further, but still struggle with (i guess) the matrix conversion..
i can now load tiles correctly according to lat / lon position:

what i cannot find in the documentation is, what projection i should expect when i look at a Viewport (in my case a firstpersonViewport):

firstPersonViewport.cameraPosition = [
    148.45499116973824,
    318.25482122431964,
    0.00001671128643229255
]

and

firstPersonViewport.center = [
    148.45499116973824,
    318.25482122431964,
    0.000016711286432292547
]

what are these values and how would i interprete these?

[pcace]

Hi there, i got way further:

the only problem i am having now is, that in the corners sometimes the tiles are not loaded correctly.
what is the setting for this? i am using a FirstpersonViewport and cannot find any padding or similar settings:

this illustrates what i mean:

Thank you so much!