# WaterMaterial with TransformNode Error

**URL:** <https://forum.babylonjs.com/t/watermaterial-with-transformnode-error/51976>\
**Category:** Questions\
**Tags:** material, camera, mesh\
**Created:** [July 10, 2024, 9:28am UTC](https://forum.babylonjs.com/t/watermaterial-with-transformnode-error/51976 "2024-07-10T09:28:50Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![zwzhlj100000](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/zwzhlj100000/32/41137_2.png) [@zwzhlj100000](https://forum.babylonjs.com/u/zwzhlj100000)\
**Post date:** [July 10, 2024, 9:28am UTC](https://forum.babylonjs.com/t/watermaterial-with-transformnode-error/51976/1 "2024-07-10T09:28:50Z")

</div>

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;

> **[Babylon.js Playground](https://playground.babylonjs.com/#QN92LE%238)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\
**Post date:** [July 10, 2024, 9:38am UTC](https://forum.babylonjs.com/t/watermaterial-with-transformnode-error/51976/2 "2024-07-10T09:38:46Z")

</div>

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](http://minio.cnbabylon.com) … It’s dead slow. Your [fish.glb](https://minio.cnbabylon.com/public/Assets/fish.glb) which is already quite heavy (45MB) takes me like 8 minutes to load, at 100KB/s …

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [July 10, 2024, 11:19am UTC](https://forum.babylonjs.com/t/watermaterial-with-transformnode-error/51976/3 "2024-07-10T11:19:04Z")

</div>

> [@Tricotou](#):
>
> (45MB) takes me like 8 minutes to load, at 100KB/s …

You had to be fckng curious! 😃

---

<div class="post-metadata">

**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\
**Post date:** [July 10, 2024, 11:21am UTC](https://forum.babylonjs.com/t/watermaterial-with-transformnode-error/51976/4 "2024-07-10T11:21:53Z")

</div>

> [@roland](#):
>
> 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”

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [July 10, 2024, 11:27am UTC](https://forum.babylonjs.com/t/watermaterial-with-transformnode-error/51976/5 "2024-07-10T11:27:12Z")

</div>

> [@Tricotou](#):
>
> 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! 😃

---

<div class="post-metadata">

**Author:** ![zwzhlj100000](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/zwzhlj100000/32/41137_2.png) [@zwzhlj100000](https://forum.babylonjs.com/u/zwzhlj100000)\
**Post date:** [July 11, 2024, 1:08am UTC](https://forum.babylonjs.com/t/watermaterial-with-transformnode-error/51976/6 "2024-07-11T01:08:14Z")

</div>

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>

```

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [July 11, 2024, 6:55am UTC](https://forum.babylonjs.com/t/watermaterial-with-transformnode-error/51976/7 "2024-07-11T06:55:03Z")

</div>

> [@zwzhlj100000](#):
>
> i want to Integrate BJS with CesiumJS

Good luck!

---

<div class="post-metadata">

**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\
**Post date:** [July 11, 2024, 8:45am UTC](https://forum.babylonjs.com/t/watermaterial-with-transformnode-error/51976/8 "2024-07-11T08:45:19Z")

</div>

> [@zwzhlj100000](#):
>
> i want to Integrate BJS with CesiumJS  
> the full code is here:

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` ?

---

<div class="post-metadata">

**Author:** ![zwzhlj100000](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/zwzhlj100000/32/41137_2.png) [@zwzhlj100000](https://forum.babylonjs.com/u/zwzhlj100000)\
**Post date:** [July 11, 2024, 9:09am UTC](https://forum.babylonjs.com/t/watermaterial-with-transformnode-error/51976/9 "2024-07-11T09:09:34Z")

</div>

thank you for your replay!  
code from [Integrate BJS with CesiumJS](https://forum.babylonjs.com/t/integrate-bjs-with-cesiumjs/22170) , `root_node ` with `lookAt` and `addRotation` to synchronous cesium camera and bjs camera

---

<div class="post-metadata">

**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\
**Post date:** [July 11, 2024, 9:29am UTC](https://forum.babylonjs.com/t/watermaterial-with-transformnode-error/51976/10 "2024-07-11T09:29:26Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![zwzhlj100000](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/zwzhlj100000/32/41137_2.png) [@zwzhlj100000](https://forum.babylonjs.com/u/zwzhlj100000)\
**Post date:** [July 12, 2024, 2:21am UTC](https://forum.babylonjs.com/t/watermaterial-with-transformnode-error/51976/11 "2024-07-12T02:21:29Z")

</div>

yes, rotate Babylon water meshes to the surface normal of the globe , but The water material is still strangely tilted

> **[Babylon.js Playground](https://playground.babylonjs.com/#QN92LE%239)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

 ![微信截图_20240712102450](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/d/e/deeda392a1feb7588775d68df8106b6e6d58dd49.jpeg)

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [July 13, 2024, 9:59pm UTC](https://forum.babylonjs.com/t/watermaterial-with-transformnode-error/51976/12 "2024-07-13T21:59:04Z")

</div>

‘Water mesh’ can be rotated, tilted:

> **[Babylon.js Playground](https://playground.babylonjs.com/#QN92LE%2310)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/4/9463f0b3611f8614d9f961a42a4359ce76b98070.jpeg)

---

<div class="post-metadata">

**Author:** ![zwzhlj100000](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/zwzhlj100000/32/41137_2.png) [@zwzhlj100000](https://forum.babylonjs.com/u/zwzhlj100000)\
**Post date:** [July 18, 2024, 8:22am UTC](https://forum.babylonjs.com/t/watermaterial-with-transformnode-error/51976/13 "2024-07-18T08:22:37Z")

</div>

when rotate groud,the water render strangely , bottom is black,

> **[Babylon.js Playground](https://playground.babylonjs.com/#QN92LE%2311)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

 ![water](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/a/4/a44c54307c4eb32b7ffc97288bbb001f0975e9d1.jpeg)

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [July 18, 2024, 9:36am UTC](https://forum.babylonjs.com/t/watermaterial-with-transformnode-error/51976/14 "2024-07-18T09:36:51Z")

</div>

I can see this:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/b/d/bdc4409eb8468ff6a0439996c6ecc9db563c9ea7.jpeg)

Set the camera positions correctly so we have the same view.

---

<div class="post-metadata">

**Author:** ![tanpopo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tanpopo/32/32025_2.png) [@tanpopo](https://forum.babylonjs.com/u/tanpopo)\
**Post date:** [July 18, 2024, 10:59am UTC](https://forum.babylonjs.com/t/watermaterial-with-transformnode-error/51976/15 "2024-07-18T10:59:12Z")

</div>

This PG should explains better.

> **[Babylon.js Playground](https://playground.babylonjs.com/#QN92LE%2312)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

The upper part of the water refract the clear color, but it should refract the plane in this camera view in my opinion.

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [July 19, 2024, 6:25am UTC](https://forum.babylonjs.com/t/watermaterial-with-transformnode-error/51976/16 "2024-07-19T06:25:07Z")

</div>

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.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/7/e/7ef3e9edd0d06aa012d364af510ba5c24bc6f25e.jpeg)

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.