Babylon.js道路发光特效

本文中的道路发光特效，由B站UP主“本来是也”实现。分为四步、每步通过不同的效果实现。

方式一：

源代码：https://playground.babylonjs.com/#FRRAL0#60

测试模型的建立。

const createScene = () => {
    const scene = new BABYLON.Scene(engine);

    scene.clearColor = new BABYLON.Color3(0.3, 0.3, 0.3)

    // scene.debugLayer.show({ showExplorer: true });//????inspector????
    var Camera = new BABYLON.ArcRotateCamera("Camera", -10, 5, 10, new BABYLON.Vector3(-1.5, 8, -2), scene);

    Camera.setPosition(new BABYLON.Vector3(0, 15, 20));
    Camera.fov = 1
    Camera.attachControl(canvas, true);
    Camera.wheelPrecision = 20
    Camera.minZ = 0.1
    var light = new BABYLON.PointLight("light", new BABYLON.Vector3(3, 14, 10), scene);
    // var light2 = new BABYLON.PointLight("light2", new BABYLON.Vector3(3, 20, -10), scene);
    light.intensity = 2;//????
    light.diffuse = new BABYLON.Color3(1, 1, 0.7)
    // light2.intensity = 1
    light.shadowMinZ = 0.1
    light.shadowMaxZ = 1200
    // light2.shadowMinZ = 0.1
    // light2.shadowMaxZ = 1200
    BABYLON.SceneLoader.Append("https://smashelbow.github.io/test/", "road.glb", scene, function (scene) {
        //Create a default arc rotate camera and light.
        //scene.createDefaultCameraOrLight(true, false, false);


        var road = scene.getMeshByName("BezierCurve")
        road.material.emissiveColor = new BABYLON.Color3(1, 0.52, 0.2)


        scene.registerBeforeRender(function () {
            road.material.albedoTexture.uOffset += 0.02
        })
        var gl = new BABYLON.GlowLayer("gl", scene, {

            mainTextureFixedSize: 128,//贴图大小
            blurKernelSize: 32 //模糊大小


        })
        gl.intensity = 0.8
    });
    return scene;
}

方式二：材质通过贴图实现

源代码：https://playground.babylonjs.com/#FRRAL0#65

const createScene = () => {
    const scene = new BABYLON.Scene(engine);

    scene.clearColor = new BABYLON.Color3(0.3, 0.3, 0.3)

    // scene.debugLayer.show({ showExplorer: true });//????inspector????
    var Camera = new BABYLON.ArcRotateCamera("Camera", -10, 5, 10, new BABYLON.Vector3(-1.5, 8, -2), scene);

    Camera.setPosition(new BABYLON.Vector3(0, 15, 20));
    Camera.fov = 1
    Camera.attachControl(canvas, true);
    Camera.wheelPrecision = 20
    Camera.minZ = 0.1
    var light = new BABYLON.PointLight("light", new BABYLON.Vector3(3, 14, 10), scene);
    // var light2 = new BABYLON.PointLight("light2", new BABYLON.Vector3(3, 20, -10), scene);
    light.intensity = 2;//????
    light.diffuse = new BABYLON.Color3(1, 1, 0.7)
    // light2.intensity = 1
    light.shadowMinZ = 0.1
    light.shadowMaxZ = 1200
    // light2.shadowMinZ = 0.1
    // light2.shadowMaxZ = 1200
    BABYLON.SceneLoader.Append("https://smashelbow.github.io/test/", "road.glb", scene, function (scene) {
        //Create a default arc rotate camera and light.
        //scene.createDefaultCameraOrLight(true, false, false);

        var rtex = new BABYLON.Texture("https://smashelbow.github.io/test/788.jpg", scene, false, false)
        // var alphaTexture = rtex.getAlphaFromRGB 
        rtex.getAlphaFromRGB = true
        var road = scene.getMeshByName("BezierCurve")
        road.material.albedoTexture = null
        // road.material.albedoColor = BABYLON.Color3.Black()
        road.material.opacityTexture = rtex
        road.material.emissiveColor = new BABYLON.Color3(1, 0.47, 0.07)
        road.material.alpha = 0.1


        scene.registerBeforeRender(function () {
            road.material.opacityTexture.uOffset +=0.004
        })






        var gl = new BABYLON.GlowLayer("gl", scene, {

            mainTextureFixedSize: 512,//贴图大小
            blurKernelSize: 32 //模糊大小


        })
        gl.intensity = 3






    });




    return scene;
}

方式三：改进

源代码：https://playground.babylonjs.com/#FRRAL0#66

const createScene = () => {
    const scene = new BABYLON.Scene(engine);

    scene.clearColor = new BABYLON.Color3(0.3, 0.3, 0.3)

    // scene.debugLayer.show({ showExplorer: true });//????inspector????
    var Camera = new BABYLON.ArcRotateCamera("Camera", -10, 5, 10, new BABYLON.Vector3(-1.5, 8, -2), scene);

    Camera.setPosition(new BABYLON.Vector3(0, 15, 20));
    Camera.fov = 1
    Camera.attachControl(canvas, true);
    Camera.wheelPrecision = 20
    Camera.minZ = 0.1
    var light = new BABYLON.PointLight("light", new BABYLON.Vector3(3, 14, 10), scene);
    // var light2 = new BABYLON.PointLight("light2", new BABYLON.Vector3(3, 20, -10), scene);
    light.intensity = 2;//????
    light.diffuse = new BABYLON.Color3(1, 1, 0.7)
    // light2.intensity = 1
    light.shadowMinZ = 0.1
    light.shadowMaxZ = 1200
    // light2.shadowMinZ = 0.1
    // light2.shadowMaxZ = 1200
    BABYLON.SceneLoader.Append("https://smashelbow.github.io/test/", "road.glb", scene, function (scene) {
        //Create a default arc rotate camera and light.
        //scene.createDefaultCameraOrLight(true, false, false);

        var rtex = new BABYLON.Texture("https://smashelbow.github.io/test/788.jpg", scene, false, false)
        // var alphaTexture = rtex.getAlphaFromRGB 
        rtex.getAlphaFromRGB = true
        var road = scene.getMeshByName("BezierCurve")
        road.material.albedoTexture = null
        // road.material.albedoColor = BABYLON.Color3.Black()
        road.material.opacityTexture = rtex
        road.material.emissiveColor = new BABYLON.Color3(1, 0.07, 0)
        road.material.emissiveIntensity = 2
        road.material.alpha = 0.5
        road.material.transparencyMode = 2


        scene.registerBeforeRender(function () {
            road.material.opacityTexture.uOffset +=0.004
        })






               var defaultPipeline = new BABYLON.DefaultRenderingPipeline("default", false, scene, [scene.activeCamera]);
            // defaultPipeline.fxaaEnabled = true;
            defaultPipeline.bloomEnabled = true
            defaultPipeline.bloomKernel = 15
            defaultPipeline.bloomWeight = 1.5
            defaultPipeline.bloomThreshold = 0.1
            defaultPipeline.bloomScale = 1
            defaultPipeline.samples = 8
            // defaultPipeline.chromaticAberrationEnabled = true
            // defaultPipeline.chromaticAberration.aberrationAmount = 10
            // defaultPipeline.chromaticAberration.radialIntensity = 1
            // defaultPipeline.sharpenEnabled = true
            // defaultPipeline.sharpen.edgeAmount = 0.2
            // defaultPipeline.sharpen.colorAmount = 1
            // defaultPipeline.grainEnabled = 1
            // defaultPipeline.grain.intensity = 4
            // defaultPipeline.imageProcessing.vignetteEnabled = true
            // defaultPipeline.imageProcessing.vignetteWeight = 10
            // defaultPipeline.imageProcessing.vignetteCameraFov = 0.15
            // defaultPipeline.imageProcessing.vignetteStretch = 1
            // defaultPipeline.imageProcessing.contrast = 1
            // defaultPipeline.imageProcessing.exposure = 0.9






    });




    return scene;
}

方式四：改进

源代码：https://playground.babylonjs.com/#FRRAL0#67

const createScene = () => {
    const scene = new BABYLON.Scene(engine);

    scene.clearColor = new BABYLON.Color3(0.3, 0.3, 0.3)

    // scene.debugLayer.show({ showExplorer: true });//????inspector????
    var Camera = new BABYLON.ArcRotateCamera("Camera", -10, 5, 10, new BABYLON.Vector3(-1.5, 8, -2), scene);

    Camera.setPosition(new BABYLON.Vector3(0, 15, 20));
    Camera.fov = 1
    Camera.attachControl(canvas, true);
    Camera.wheelPrecision = 20
    Camera.minZ = 0.1
    var light = new BABYLON.PointLight("light", new BABYLON.Vector3(3, 14, 10), scene);
    // var light2 = new BABYLON.PointLight("light2", new BABYLON.Vector3(3, 20, -10), scene);
    light.intensity = 2;//????
    light.diffuse = new BABYLON.Color3(1, 1, 0.7)
    // light2.intensity = 1
    light.shadowMinZ = 0.1
    light.shadowMaxZ = 1200
    // light2.shadowMinZ = 0.1
    // light2.shadowMaxZ = 1200
    BABYLON.SceneLoader.Append("https://smashelbow.github.io/test/", "road.glb", scene, function (scene) {
        //Create a default arc rotate camera and light.
        //scene.createDefaultCameraOrLight(true, false, false);

        var rtex = new BABYLON.Texture("https://smashelbow.github.io/test/788.jpg", scene, false, false)
        // var alphaTexture = rtex.getAlphaFromRGB 
        rtex.getAlphaFromRGB = true
        var road = scene.getMeshByName("BezierCurve")
        road.material.albedoTexture = null
        // road.material.albedoColor = BABYLON.Color3.Black()
        road.material.opacityTexture = rtex
        road.material.opacityTexture.uScale = 0.2
        road.material.emissiveColor = new BABYLON.Color3(1, 0.07, 0)
        road.material.emissiveIntensity = 2
        road.material.alpha = 0.5
        road.material.transparencyMode = 2


        scene.registerBeforeRender(function () {
            road.material.opacityTexture.uOffset +=0.004
        })






               var defaultPipeline = new BABYLON.DefaultRenderingPipeline("default", false, scene, [scene.activeCamera]);
            // defaultPipeline.fxaaEnabled = true;
            defaultPipeline.bloomEnabled = true
            defaultPipeline.bloomKernel = 15
            defaultPipeline.bloomWeight = 1.5
            defaultPipeline.bloomThreshold = 0.1
            defaultPipeline.bloomScale = 1
            defaultPipeline.samples = 8
            // defaultPipeline.chromaticAberrationEnabled = true
            // defaultPipeline.chromaticAberration.aberrationAmount = 10
            // defaultPipeline.chromaticAberration.radialIntensity = 1
            // defaultPipeline.sharpenEnabled = true
            // defaultPipeline.sharpen.edgeAmount = 0.2
            // defaultPipeline.sharpen.colorAmount = 1
            // defaultPipeline.grainEnabled = 1
            // defaultPipeline.grain.intensity = 4
            // defaultPipeline.imageProcessing.vignetteEnabled = true
            // defaultPipeline.imageProcessing.vignetteWeight = 10
            // defaultPipeline.imageProcessing.vignetteCameraFov = 0.15
            // defaultPipeline.imageProcessing.vignetteStretch = 1
            // defaultPipeline.imageProcessing.contrast = 1
            // defaultPipeline.imageProcessing.exposure = 0.9






    });




    return scene;
}