Babylon.js 第20章 材料

材质允许您覆盖网格的颜色和纹理。材质的显示方式取决于场景中使用的一个或多个灯光以及它的反应设置方式。

一、对光的反应

有四种方式

1. Diffuse：漫反射——在灯光下观察到的材料的基本颜色或纹理；
2. Specular：镜面反射 - 灯光赋予材质的高光；
3. Emissive：发射光 - 材料的颜色或纹理，仿佛自发光；
4. Ambient：环境 - 由环境背景照明而照亮的材料的颜色或纹理。

scene.ambientColor = new BABYLON.Color3(1, 1, 1);

漫反射和高光材质需要创建光源。
环境色需要设置场景的环境色，给环境背景照明。

材质颜色：

创建材料颜色

scene.ambientColor=new BABYLON.Color3.Red()
var myMaterial = new BABYLON.StandardMaterial("myMaterial", scene);
myMaterial.diffuseColor = new BABYLON.Color3(1, 0, 1);
myMaterial.specularColor = new BABYLON.Color3(0.5, 0.6, 0.87);
myMaterial.emissiveColor = new BABYLON.Color3(1, 1, 1);
myMaterial.ambientColor = new BABYLON.Color3(0.23, 0.98, 0.53);

ambientColor 仅在设置了场景环境颜色时才适用。

二、透明

sphereMaterial.alpha=0.2

材质设置了alpha。

对于有些图片已经设置了透明，此时使用hasAlpha。

    sphereMaterial.diffuseTexture=new BABYLON.Texture('../img/TEST.png',scene)
    //取消背面剔除
    sphereMaterial.backFaceCulling=false    
    sphereMaterial.diffuseTexture.hasAlpha=true

三、使用图像材料

var myMaterial = new BABYLON.StandardMaterial("myMaterial", scene);
myMaterial.diffuseTexture = new BABYLON.Texture("PATH TO IMAGE", scene);
myMaterial.specularTexture = new BABYLON.Texture("PATH TO IMAGE", scene);
myMaterial.emissiveTexture = new BABYLON.Texture("PATH TO IMAGE", scene);
myMaterial.ambientTexture = new BABYLON.Texture("PATH TO IMAGE", scene);
mesh.material = myMaterial;

四、凹凸纹理

    sphereMaterial.diffuseTexture=new BABYLON.Texture('../img/3.png',scene)
    //凹凸纹理
    sphereMaterial.bumpTexture=new BABYLON.Texture('../img/6.png',scene)

颠倒凹痕：

    sphereMaterial.invertNormalMapX = true;
    sphereMaterial.invertNormalMapY = true

 五、不透明度材料

var myMaterial = new BABYLON.StandardMaterial("myMaterial", scene);
myMaterial.opacityTexture = new BABYLON.Texture("PATH TO OPACITY MAP", scene);

可以使用具有不同透明度的图像对材料的不透明度进行分级。

六、平铺

 将材质应用于网格时，用于纹理的图像根据坐标进行定位。要平铺图像，您可以使用纹理的uScale和/或vScale属性来设置每个方向上的平铺数量。

    sphereMaterial.diffuseTexture.uScale=5
    sphereMaterial.diffuseTexture.vScale=5

 七、纹理偏移

要在网格上偏移纹理，请使用纹理的uOffset和vOffset属性来设置每个方向的偏移。

    sphereMaterial.diffuseTexture.uOffset=0.3
    sphereMaterial.diffuseTexture.vOffset=0.5

 偏移量uOffset为图像宽度比例，vOffset为图像高度比例。

八、细节贴图

细节贴图（也称为辅助贴图）通常用于在近距离查看时为常规主纹理添加额外的细节。 

    //启用详细材质映射
    sphereMaterial.detailMap.Texture=new BABYLON.Texture('../img/10.png',scene)
    sphereMaterial.detailMap.isEnable=true
    //扩散混合等级
    sphereMaterial.detailMap.diffuseBlendLevel =0.1;
    //凹凸纹理大小
    sphereMaterial.detailMap.bumpLevel = 1;
    //粗糙度混合级别
    sphereMaterial.detailMap.roughnessBlendLevel = 0.25;

 九、视差映射

视差映射是一种算法，它基于高度图，在材质纹理上应用偏移，以突出几何体表面的浮雕效果。虽然这种技术独立于法线贴图（又名凹凸），但它经常与它结合使用。原因很简单，执行 Parallax Mapping 所需的高度图大部分时间都编码在 Normal Map 纹理的 Alpha 通道中。（使用视差贴图需要漫反射纹理）。可以使用三个属性来使用视差：

• useParallax：启用凹凸上的视差映射。如果你没有分配一个bumpTexture ，这个属性不会有任何影响。
• useParallaxOcclusion：启用视差遮挡，设置此属性时，还必须将useParallax设置为 true。
• parallaxScaleBias：应用一个比例因子来确定高度图应该代表哪个“深度”。在 Parallax 中，介于 0.05 和 0.1 之间的值是合理的，使用 Parallax Occlusion 可以达到 0.2。

    //启用凹凸上的视差映射
    sphereMaterial.useParallax=true
    //启用视差遮挡，设置此属性时，还必须将useParallax设置为 true。
    sphereMaterial.useParallaxOcclusion=true
    sphereMaterial.parallaxScaleBais=0.1
    sphereMaterial.specularPower = 1000.0;
    sphereMaterial.specularColor = new BABYLON.Color3(0.5, 0.5, 0.5);