材质与光

标准材质对光的反应会有四种，漫反射、高光反射、自发光、环境光

1.自发光

自发光的概念：使材质看起来像是自己发光

自发光有一个很明显的缺点，那就是“不真实的光照”。

自发光材质不会实际照亮周围的物体，只是看起来像在发光，且它的效果是静态的，不能像实际光源那样动态变化，这也意味着光照不会对它造成影响。

当然光照对它不造成影响是缺点也是优点：

1、视觉效果突出：自发光材质可以使物体在黑暗环境中仍然可见，增加视觉效果。

 2、性能较好：相比于使用实际的光源，自发光材质对性能的影响较小，因为它不需要计算光照。

主要的使用场景为：

科幻效果：在科幻场景中，常常需要一些发光的物体，比如发光的按钮、屏幕或能量源。

灯光效果：模拟灯光或霓虹灯效果。

装饰性元素：用于装饰性元素，使其在黑暗环境中仍然可见。

        const material = new BABYLON.StandardMaterial('material', scene)
        // 使用三个浮点数参数来表示颜色的红色、绿色和蓝色分量。每个参数的范围是从 0 到 1。
        material.emissiveColor = new BABYLON.Color3(1, 0, 0)

        // 材质禁止光照
        // material.disableLighting = true
        // 透明度
        // material.alpha = 0.5;
        // 设置同时影响的光源数量为 3(默认值是4)
        // material.maxSimultaneousLights = 3;

        // 最终颜色 ≈ 自发光(material.emissiveColor) + 灯光扩散颜色(light.diffuse) * 材质扩散颜色(material.diffuseColor)
        // 没有自发光;考虑灯光即可 HemisphericLight 
        // 为什么看起来是灰色的，是因为物体颜色、漫反射颜色、灯光颜色虽然是白色的，但是默认光照强度是0.7
        // 最终颜色 = (1,1,1) × (1,1,1) × (1,1,1) × 0.7 = (0.7, 0.7, 0.7)
        // 最终颜色 = 物体颜色 × 漫反射颜色 × 灯光颜色 × 光照强度
        const sphere1 = BABYLON.MeshBuilder.CreateSphere('sphere1', {})
        sphere1.position.x = -1.5

        // 最终颜色 = (物体颜色 × 漫反射颜色 × 光照颜色 × 光照强度) + 自发光颜色
        // 受光照部分 = (1,1,1) × (1,1,1) × 0.7 = (0.7, 0.7, 0.7)  // 灰色
        // 最终颜色 = (0.7, 0.7, 0.7) + (1, 0, 0)= (1.0, 0.7, 0.7)
        const sphere2 = BABYLON.MeshBuilder.CreateSphere('sphere2', {})
        sphere2.material = material

 

2.漫反射

漫反射的概念：光线在物体表面均匀散射的效果，决定了物体在光照下的主要颜色和外观。

灯光设置漫反射属性(light.diffuse)，给材质设置漫反射颜色属性(material.diffuseColor)，两者相遇时，产生漫反射，显示最终看到的效果。

优点：

易于使用: 设置颜色和纹理非常简单，适合快速原型设计。

高效渲染: 漫反射计算相对简单，对性能影响较小。

 广泛应用: 适用于大多数常见的材质效果，如木材、金属、布料等。

 缺点：

缺乏细节: 仅使用漫反射可能无法表现出复杂的光照效果，如高光、反射等。

依赖光源: 漫反射效果依赖于场景中的光源设置，光源不足时效果不明显。

        // 漫反射计算颜色:
        // 当光源的颜色和材质的颜色进行乘法运算时，实际上是在计算每个颜色通道（红、绿、蓝）上的光能量和反射能力的乘积
        // 例如：光源颜色为蓝色 (0, 0, 1)，材质颜色为黄色 (1, 1, 0)。
        // 计算每个通道的乘积：
        // 红色通道：0 * 1 = 0
        // 绿色通道：0 * 1 = 0
        // 蓝色通道：1 * 0 = 0
        // 最终的结果是 (0, 0, 0)，即黑色。
        // 若无材质颜色,则为灯源颜色;若无光源,则未黑色(看不到无光)

        // 材质
        const material = new BABYLON.StandardMaterial('material', scene)
        // 使用三个浮点数参数来表示颜色的红色、绿色和蓝色分量。每个参数的范围是从 0 到 1。
        material.diffuseColor = new BABYLON.Color3(1, 1, 0)

        // 材质禁止光照
        // material.disableLighting = true
        // 透明度
        // material.alpha = 0.5;
        // 设置同时影响的光源数量为 3(默认值是4)
        // material.maxSimultaneousLights = 3;

        const sphere1 = BABYLON.MeshBuilder.CreateSphere('sphere1', {})
        sphere1.position.x = -1.5

        const sphere2 = BABYLON.MeshBuilder.CreateSphere('sphere2', {})
        sphere2.material = material

 

3.环境光

环境光对应的是场景的 ambientColor属性，与材质的 ambientColor属性（或者 ambientTexture属性）相遇时产生的效果。

环境光计算颜色: 跟漫反射一样,只是光源换成了场景光

        // 材质
        const material = new BABYLON.StandardMaterial('material', scene)
        material.ambientColor = new BABYLON.Color3(0.23, 0.98, 0.53) // 环境光颜色

        // 材质禁止光照
        // material.disableLighting = true
        // 透明度
        // material.alpha = 0.5;
        // 设置同时影响的光源数量为 3(默认值是4)
        // material.maxSimultaneousLights = 3;

        // 最终颜色 ≈ 环境光(scene.ambientColor) * 材质环境颜色(material.ambientColor) + 灯光扩散颜色(light.diffuse) * 材质扩散颜色(material.diffuseColor)

        // sphere1没有材质， 材质环境颜色默认值为黑色(new BABYLON.Color3(0, 0, 0))  
        // 所以没有环境光只计算了灯光扩散颜色(light.diffuse) * 材质扩散颜色(material.diffuseColor)
        // 材质扩散颜色 (material.diffuseColor) 默认值为白色(new BABYLON.Color3(1, 1, 1))
        const sphere1 = BABYLON.MeshBuilder.CreateSphere('sphere1', {})
        sphere1.position.x = -1.5

        const sphere2 = BABYLON.MeshBuilder.CreateSphere('sphere2', {})
        sphere2.material = material

 

4.高光

高光指光源照射到物体然后反射到人的眼睛里时，物体上最亮的那个点就是高光。高光不是光，而是物体上最亮的部分

        // 材质
        const material = new BABYLON.StandardMaterial('material', scene)
        // 使用三个浮点数参数来表示颜色的红色、绿色和蓝色分量。每个参数的范围是从 0 到 1。
        // material.specularColor = new BABYLON.Color3(0.5, 0.6, 0.87)
        // 不要高光
        // material.specularColor = new BABYLON.Color3(0, 0, 0)
        material.specularColor = new BABYLON.Color3(0, 1, 0)


        const sphere1 = BABYLON.MeshBuilder.CreateSphere('sphere1', {})
        sphere1.position.x = -1.5

        const sphere2 = BABYLON.MeshBuilder.CreateSphere('sphere2', {})
        sphere2.material = material

 

 

总结StandardMaterial（标准材质）：

默认值为白色：diffuseColor漫反射颜色、specularColor高光颜色

默认值为黑色：ambientColor环境光颜色、emissiveColor自发光颜色

Scene:

默认值为黑色：ambientColor环境光颜色

Light:

默认值为白色：diffuse漫反射

 

其他Babylonjs 资料

官方文档：https://doc.babylonjs.com/

Babylon.js 中文教程：https://doc.cnbabylon.com/

 

github的demo：https://github.com/ssszjh/babylon