天天看點

23 Babylonjs入門進階 使用凹凸紋理,透明度紋理和平鋪凹凸紋理半透明紋理平鋪

凹凸紋理

凹凸貼圖是一種模拟渲染去面試的凹凸和凹痕的技術。這些是通過從圖像穿件發現貼圖來實作的。可以在網上查找相關生成方法。

23 Babylonjs入門進階 使用凹凸紋理,透明度紋理和平鋪凹凸紋理半透明紋理平鋪
23 Babylonjs入門進階 使用凹凸紋理,透明度紋理和平鋪凹凸紋理半透明紋理平鋪

來自圖像的原始圖像法線貼圖

凹凸貼圖可以與顔色一起使用; 原始圖像或下圖中的其他圖像。

23 Babylonjs入門進階 使用凹凸紋理,透明度紋理和平鋪凹凸紋理半透明紋理平鋪

建立凹凸貼圖示例

隻需要将凹凸貼圖建立一個凹凸紋理設定給材質的

bumpTexture

即可:

var myMaterial = new BABYLON.StandardMaterial("myMaterial", scene);
myMaterial.bumpTexture = new BABYLON.Texture("凹凸貼圖的路徑", scene);
           

反轉凸起和凹痕

在材質上使用invertNormalMapX和invertNormalMapY。

var myMaterial = new BABYLON.StandardMaterial("myMaterial", scene);
myMaterial.bumpTexture = new BABYLON.Texture("PATH TO NORMAL MAP", scene);
myMaterial.invertNormalMapX = true;
myMaterial.invertNormalMapY = true
           

半透明紋理

可以使用具有不同透明度的圖像對材料的不透明度進行分級。具有透明度漸變的以下PNG圖像可以使用opacityTexture應用于材質

23 Babylonjs入門進階 使用凹凸紋理,透明度紋理和平鋪凹凸紋理半透明紋理平鋪

使用相同的漸變應用于材質,如下圖所示。

23 Babylonjs入門進階 使用凹凸紋理,透明度紋理和平鋪凹凸紋理半透明紋理平鋪
  • 半透明貼圖示例

實作透明度設定

将opacityTexture添加到任何現有紋理。

var myMaterial = new BABYLON.StandardMaterial("myMaterial", scene);
myMaterial.opacityTexture = new BABYLON.Texture("透明度紋理的位址", scene);
           

平鋪

将材質應用于模型時,用于材質的紋理貼圖根據坐标定位,坐标值不是3d坐标軸的xy,而是對應于貼圖上的u和v。

23 Babylonjs入門進階 使用凹凸紋理,透明度紋理和平鋪凹凸紋理半透明紋理平鋪

要平鋪圖像,請使用紋理的uScale和/或vScale屬性來設定每個方向上的平鋪數。

myMaterial.diffuseTexture.uScale = 5.0;
myMaterial.diffuseTexture.vScale = 5.0;
           

偏移

要偏移模型上的紋理,可以使用紋理的uOffset和vOffset屬性來設定每個方向的偏移。

myMaterial.diffuseTexture.uOffset = 1.5;
myMaterial.diffuseTexture.vOffset = 0.5;
           

繼續閱讀