Blender 制作水面材质贴图

源链接:https://www.youtube.com/watch?v=MtlSIRh5r_E
源链接:https://www.bilibili.com/video/BV16Y4y1w7oY/?spm_id_from=333.788.recommend_more_video.0&vd_source=36d4e6a338b4da1890ddbdd4fd2af24e

运行地址https://playground.babylonjs.com/#TH2XS4#26

材质
https://nme.babylonjs.com/#N8UNHX#22

代码:

var createScene = function () {
    // This creates a basic Babylon Scene object (non-mesh)
    var scene = new BABYLON.Scene(engine);
    var hdrTexture = new BABYLON.HDRCubeTexture("https://smashelbow.github.io/test/chun.hdr", scene, 128, false, true, false, true);

    // This creates and positions a free camera (non-mesh)
    var camera = new BABYLON.ArcRotateCamera("camera", 3.3, 1.33, 120, BABYLON.Vector3.Zero(), scene)
    scene.environmentTexture = hdrTexture
    scene.environmentIntensity = 0.5
    // This targets the camera to scene origin
    camera.setTarget(BABYLON.Vector3.Zero());

    // This attaches the camera to the canvas
    camera.attachControl(canvas, true);
    camera.wheelPrecision = 100
    camera.minZ = 10
    camera.lowerRadiusLimit = 1
    camera.inertia = 0.9
    camera.panningInertia = 0.9
    camera.panningSensibility = 300
    camera.angularSensibilityX = 800
    camera.angularSensibilityY = 800



    var rect = engine.getRenderingCanvasClientRect();

    var hw = rect.width

    var hh = rect.height

    console.log(rect.width);

    var ortCamFOV = 1000
    scene.registerBeforeRender(function () {

        rect = engine.getRenderingCanvasClientRect();

        hw = rect.width / ortCamFOV;

        hh = rect.height / ortCamFOV;
        camera.orthoLeft = -hw * camera.radius;

        camera.orthoRight = hw * camera.radius;

        camera.orthoBottom = -hh * camera.radius;

        camera.orthoTop = hh * camera.radius;

        // camera.beta = 0.01 - 0.01
        camera.wheelPrecision = 200 / camera.radius
        camera.panningSensibility = 3000 / camera.radius
    })



var  sun = new BABYLON.DirectionalLight("sun",new BABYLON.Vector3(0.6, -1, 0.8),scene)
sun.diffuse = new BABYLON.Color3(1, 0.99, 0.87)

    var moonSky = new BABYLON.HemisphericLight("moonSky", new BABYLON.Vector3(0, 1, 0), scene)
    moonSky.specular = BABYLON.Color3.Black()
    moonSky.diffuse = new BABYLON.Color3(0.05, 0.08, 0.33)
    moonSky.intensity = 5

    var moon = new BABYLON.DirectionalLight("moon", new BABYLON.Vector3(-0.6, -1, -0.8), scene)
    moon.diffuse = new BABYLON.Color3(1, 0.98, 0.89)
    // moon.specular = new BABYLON.Color3.Black()
    moon.intensity = 1

    // Our built-in 'sphere' shape.
    var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 6000, segments: 32 }, scene);

    // Move the sphere upward 1/2 its height
    sphere.position.y = 1;

    // var knot = new BABYLON.CreateTorusKnot("knot",{},scene)
    // knot.position.y = 4

    BABYLON.SceneLoader.Append("https://smashelbow.github.io/test/", "landscape.glb", scene, function (scene) {

        scene.getMeshByName("__root__").scalingDeterminant = 100
        scene.getMeshByName("__root__").position.y = 0.5
 BABYLON.NodeMaterial.ParseFromSnippetAsync("#N8UNHX#22", scene).then((node) => {
        scene.getMeshByName("landscape_0.002").material = node;
        // node.getInputBlockByPredicate((b) => b.name === "diffuseCut").value = 0.21
        // node.getInputBlockByPredicate((b) => b.name === "shadowItensity").value = 0.71
        // node.getInputBlockByPredicate((b) => b.name === "rimIntensity").value = 0.08
    });

    })



    // Our built-in 'ground' shape.
    // var ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 99999, height: 99999 }, scene);
    BABYLON.NodeMaterial.ParseFromSnippetAsync("#4YYWPX#12", scene).then((skymat) => {
        skymat.backFaceCulling = false
        sphere.material = skymat
        skymat.getInputBlockByPredicate((b) => b.name === "masterSpeed").value = 2.5
        skymat.getInputBlockByPredicate((b) => b.name === "masterScale").value = 6

        var i = 1
        scene.registerBeforeRender(function () {
            i += 0.005
            skymat.getInputBlockByPredicate((b) => b.name === "day").value = Math.cos(i) * 0.4 + 0.6

            scene.environmentIntensity = Math.cos(i) * 0.48 + 0.52
            scene.environmentTexture.level = Math.cos(i) * 0.45 + 0.55
            moonSky.intensity = (1 - (Math.cos(i) * 0.4 + 0.6))
            moon.intensity =(1 - (Math.cos(i) * 0.4 + 0.6))*3
            sun.intensity = Math.max(Math.cos(i)+0.5,0)*2
        })

        // scene.meshes.forEach(m => {

        //     if (m.name.indexOf("sphere") !== 1 ) {

        //         m.material = skymat

        //     }

        // })
    });
    return scene;
};