火材料

火的实现

1 .粒子
2 .精灵
3 .vu变化
4 .防火材料
5 .js文件

关键

1 .https : //github.com/BabylonJS/Babylon.js/blob/master/dist/preview%20release/materialsLibrary/babylon.fireMaterial.js
2 .他是如何把一个纹理做成shader的样子呢。这里后续还是要研究下代码

截屏2021-12-30 上午12.04.40.png
3 .在inspactor里面可以随意修改参数，来看火焰的效果。。
截屏2021-12-30 上午12.17.27.png 截屏2021-12-30 下午9.19.30.png

let fire=new BABYLON.FireMaterial('fire',scene)
                fire.diffuseTexture=new BABYLON.Texture('http://127.0.0.1:8080/source/image/fire2.png')
                fire.distortionTexture=new BABYLON.Texture("http://127.0.0.1:8080/source/image/noise.png")
                // 火扭曲的参照纹理
                fire.opacityTexture=new BABYLON.Texture("http://127.0.0.1:8080/source/image/light.png")

                fire.speed=0.5
                // 火苗跳动的速度

                let plane = BABYLON.Mesh.CreatePlane("fireplane", 10.5, scene);
                plane.position = new BABYLON.Vector3(0, 2.2, 0);
                // plane.scaling.x = 0.1;
                // 这里调节火的形状么？

                // plane.scaling.y = 0.7;
                // 火的颜色变化，以及火的真正大小要怎么调节

                // 如果仅仅是替换这种图片，会很自然么》或者是通过修改这些纹理的操作

                // plane.billboardMode = BABYLON.Mesh.BILLBOARDMODE_Y;
                plane.material = fire;

                // 这里是通过改变板子的大小和变形来控制火焰的，其实还可以改变纹理的属性，来实现各种不同的火焰效果

1 .可以看到，决定一个火焰的最终效果是由三张贴图决定，
2 .一张是火焰的纹理图可以是火焰形状，比如那个蓝色的火焰，也可以仅仅是颜色样式的，比如那张黄色的。最后决定火焰颜色的，是黑白这张图，白色的是火焰焰心，并且对应的颜色也会更亮一点
3 .火焰的形状是由mesh的形状决定,通过给mesh变形，来操作火焰的颜色
4 .不同颜色的图片，可以实现火焰的不同颜色,以下是把刚才的图片调了一下颜色生成的新的火焰

截屏2021-12-30 下午9.36.19.png