var root_node = new BABYLON.TransformNode(“BaseNode”, scene);
root_node.lookAt(new
BABYLON.Vector3(-106.10503533761948,152.7263565324247,-167.08196041546762));
root_node.addRotation(Math.PI / 2, 0, 0);
waterMesh.parent = root_node;
Hello and welcome 
Your PG shows no error in console. The water is strangely tilted, but due to the root_node.lookAt and root_node.addRotation so… It would be better if you could explain what behavior you are expecting, in order for us to help.
Also, I don’t know if it’s yours, but there is a problem with the server at minio.cnbabylon.com … It’s dead slow. Your fish.glb which is already quite heavy (45MB) takes me like 8 minutes to load, at 100KB/s …
You had to be fckng curious! 
Ahah ! Truth is, I didn’t notice that the .glb didn’t load, but for no reason I did not close the tab. A few minutes later, I come back and see some fishes swimming arround, and was like “WTF is this, where are these fishes coming from xD”
Shit, now Ì must see them!
i want to Integrate BJS with CesiumJS
the full code is here:
<title>Babylon.js sample code</title>
<!-- Babylon.js -->
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.js"></script>
<!-- Cesium.js -->
<script src="https://cesium.com/downloads/cesiumjs/releases/1.110/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.110/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<style>
html,
body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#renderCanvas {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
pointer-events: none;
touch-action: none;
}
#canvasZone {
width: 100%;
height: 100%;
}
#cesiumContainer {
width: 100%;
height: 100%;
}
.ui-button {
position: absolute;
top: 20px;
left: 40px;
z-index: 999999;
}
</style>
<button onclick="startRotate()" class="ui-button">Rotation</button>
<canvas id="renderCanvas"></canvas>
<script>
let enableRotation = false;
function startRotate() {
if (enableRotation)
document.getElementById("renderCanvas").style.pointerEvents = "none";
else
document.getElementById("renderCanvas").style.pointerEvents = "auto";
enableRotation = !enableRotation;
}
function rotation(x, y, z) {
objList.map(item => {
item.rotation.x = x;
})
}
var canvas = document.getElementById("renderCanvas");
var engine = null;
var scene = null;
const LNG = -122.4175,
LAT = 37.655;
const _this = {};
let objList = [];
var createDefaultEngine = function () {
engine = new BABYLON.Engine(canvas, true, {
preserveDrawingBuffer: true,
stencil: true,
useHighPrecisionMatrix: true,
disableWebGL2Support: false
});
};
var createScene = function () {
// This creates a basic Babylon Scene object (non-mesh)
scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
// This creates and positions a free camera (non-mesh)
// var camera = new BABYLON.ArcRotateCamera("Camera", 3 * Math.PI / 2, Math.PI / 2.5, 50, BABYLON.Vector3
// .Zero(), scene);
// camera.attachControl(canvas, true);
// camera.setTarget(BABYLON.Vector3.Zero());
// camera.attachControl(canvas, true);
const camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0, 0, -10), scene);
// This creates a light, aiming 0,1,0 - to the sky (non-mesh)
var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
// Water material
var waterMaterial = new BABYLON.WaterMaterial("waterMaterial", scene, new BABYLON.Vector2(512, 512));
waterMaterial.bumpTexture = new BABYLON.Texture(
"https://minio.cnbabylon.com/public/Assets/waterbump.png",
scene);
waterMaterial.windForce = -10;
waterMaterial.waveHeight = 0.5;
waterMaterial.bumpHeight = 0.1;
waterMaterial.waveLength = 0.1;
waterMaterial.waveSpeed = 50.0;
waterMaterial.colorBlendFactor = 0;
waterMaterial.windDirection = new BABYLON.Vector2(1, 1);
waterMaterial.colorBlendFactor = 0;
// Ground
var groundTexture = new BABYLON.Texture("https://minio.cnbabylon.com/public/Assets/sand.jpg", scene);
groundTexture.vScale = groundTexture.uScale = 4.0;
var groundMaterial = new BABYLON.StandardMaterial("groundMaterial", scene);
groundMaterial.diffuseTexture = groundTexture;
var ground = BABYLON.Mesh.CreateGround("ground", 512, 512, 32, scene, false);
ground.position.y = -2;
ground.material = groundMaterial;
// Water mesh
var waterMesh = BABYLON.Mesh.CreateGround("waterMesh", 512, 512, 32, scene, false);
waterMesh.material = waterMaterial;
// Sphere
var sphereMaterial = new BABYLON.StandardMaterial("sphereMaterial", scene);
sphereMaterial.diffuseTexture = new BABYLON.Texture(
"https://minio.cnbabylon.com/public/Assets/wood.jpg",
scene);
var sphere = BABYLON.Mesh.CreateSphere("sphere", 16, 10, scene);
sphere.position.y = 20;
sphere.material = sphereMaterial;
// Configure water material
waterMaterial.addToRenderList(ground);
waterMaterial.addToRenderList(sphere);
_this.root_node = new BABYLON.TransformNode("BaseNode", scene);
_this.root_node.lookAt(_this.base_point_up.subtract(_this.base_point));
_this.root_node.addRotation(Math.PI / 2, 0, 0);
ground.parent = _this.root_node;
sphere.parent = _this.root_node;
waterMesh.parent = _this.root_node;
light.parent = _this.root_node;
_this.engine = engine;
_this.scene = scene;
_this.camera = camera;
return scene;
};
function initCesium() {
const viewer = new Cesium.Viewer('cesiumContainer', {
useDefaultRenderLoop: false,
contextOptions: {
webgl: {
preserveDrawingBuffer: true,
stencil: true,
}
}
});
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(LNG, LAT, 300),
orientation: {
heading: Cesium.Math.toRadians(0.0),
pitch: Cesium.Math.toRadians(-90.0),
}
});
_this.viewer = viewer;
_this.base_point = cart2vec(Cesium.Cartesian3.fromDegrees(LNG, LAT, 50));
_this.base_point_up = cart2vec(Cesium.Cartesian3.fromDegrees(LNG, LAT, 300));
}
function initBabylon() {
createDefaultEngine();
createScene();
}
function moveBabylonCamera() {
let fov = Cesium.Math.toDegrees(_this.viewer.camera.frustum.fovy)
_this.camera.fov = fov / 180 * Math.PI;
let civm = _this.viewer.camera.inverseViewMatrix;
let cesiumTransform = new Cesium.Cartesian3(0, 0, 0);
Cesium.Matrix4.getTranslation(civm, cesiumTransform);
transform = cart2vec(cesiumTransform);
let camera_pos = transform;
let camera_direction = cart2vec(_this.viewer.camera.direction);
let camera_up = cart2vec(_this.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;
_this.camera.position.x = camera_pos.x - _this.base_point.x;
_this.camera.position.y = camera_pos.y - _this.base_point.y;
_this.camera.position.z = camera_pos.z - _this.base_point.z;
_this.camera.rotation.x = rotation_x;
_this.camera.rotation.y = rotation_y;
_this.camera.rotation.z = rotation_z;
}
function cart2vec(cart) {
return new BABYLON.Vector3(cart.x, cart.z, cart.y);
}
var startRenderLoop = () => {
engine.runRenderLoop(() => {
if (scene && scene.activeCamera) {
scene.render();
}
});
}
initCesium();
initBabylon();
startRenderLoop();
_this.engine.runRenderLoop(() => {
_this.viewer.render();
moveBabylonCamera();
_this.scene.render();
});
// Resize
window.addEventListener("resize", function () {
engine.resize();
});
</script>
Good luck!
Ok but as I said, please explain your problem, and what you are trying to acheive in your PG
Why is the title “WaterMaterial with TransformNode Error” ? Why do you rotate the root_node with lookAt and addRotation ?
thank you for your replay!
code from Integrate BJS with CesiumJS , root_node with lookAt and addRotation to synchronous cesium camera and bjs camera
Ok so what I understand of the code is that it’s fitting the Babylon meshes to the surface normal of the globe, at the specified coordinates. Which explains why the meshes are tilted.
yes, rotate Babylon water meshes to the surface normal of the globe , but The water material is still strangely tilted
This PG should explains better.
The upper part of the water refract the clear color, but it should refract the plane in this camera view in my opinion.
I think that’s how your environment would be refracted in real as well or the shader is assuming that water surfaces has to be horizontal as they’re in reality. I’m not sure.
Look at the refraction texture. This is what the camera sees and creates the refraction from.
If you need this setup you can render your own RTT by a second camera and set the refraction texture on the water material manually.