Shake in cesium-babylonjs

Questions
, ,
1

I am follow it , but when I move camera, the mesh in bablylon is shaking.

2

You can try to use the useHighPrecisionMatrix:true option when creating the engine and see if that helps (EngineOptions | Babylon.js Documentation).

2 Likes
3

Hi All,
the solution to se useHighPrecisionMatrix: true is not enought when you have very small models and the level of zoom is too high. This is due to the fact that Babylon Matrix class uses Float32 for internal calculations instead of Float64 and when in the sample of integration code the view matrix is decomposed we loose precision.
I found a simple work around getting the transform info directly to Cesiumjs Matrix4:

let cesiumTransform = new Cesium.Cartesian3(0, 0, 0);
Cesium.Matrix4.getTranslation(civm, cesiumTransform);
transform =cart2vec(cesiumTransform);

This way the 3d model in Babylonjs view doesn’t shake anymore.

4

Can you display the complete code？how to getting the transform info directly to Cesiumjs Matrix4

5

This is the complete block code:

let cart2vec = function(cart) {
          return new BABYLON.Vector3(cart.x, cart.z, cart.y);
        }
let geoPosition = ["your Longitude value", "your latitude value"];
let positions = [Cesium.Cartesian3.fromDegrees(geoPosition[1], geoPosition[0])]
mapBasePoint = cart2vec(new Cesium.Cartesian3(positions[0].x, positions[0].y, positions[0].z));
let fov = Cesium.Math.toDegrees(viewer.camera.frustum.fovy);
babylonCamera.fov = fov / 180 * Math.PI;
let civm = viewer.camera.inverseViewMatrix;
let transform = BABYLON.Vector3.Zero();
let cesiumTransform = new Cesium.Cartesian3(0, 0, 0);
Cesium.Matrix4.getTranslation(civm, cesiumTransform);
transform = cart2vec(cesiumTransform);
let camera_pos = transform;
let camera_direction = cart2vec(viewer.camera.direction);
let camera_up = cart2vec(viewer.camera.up);
let rotation_y = Math.atan(camera_direction.z / camera_direction.x);
if (camera_direction.x < 0) rotation_y += Math.PI;
rotation_y = Math.PI / 2 - rotation_y;
let rotation_x = Math.asin(-camera_direction.y);
let camera_up_before_rotatez = new BABYLON.Vector3(-Math.cos(rotation_y), 0, Math.sin(rotation_y));
let rotation_z = Math.acos(camera_up.x * camera_up_before_rotatez.x + camera_up.y * camera_up_before_rotatez.y + camera_up.z * camera_up_before_rotatez.z);
rotation_z = Math.PI / 2 - rotation_z;
if (camera_up.y < 0) rotation_z = Math.PI - rotation_z;
babylonCamera.position.x = camera_pos.x - mapBasePoint.x;
babylonCamera.position.y = camera_pos.y - mapBasePoint.y;
babylonCamera.position.z = camera_pos.z - mapBasePoint.z;
babylonCamera.rotation.x = rotation_x;
babylonCamera.rotation.y = rotation_y;
babylonCamera.rotation.z = rotation_z;

Hope can help you.

1 Like
6

Your help is so useful and timely, cheering for the great community again!