视差贴图也称为偏移贴图.它使用高度贴图作为材质纹理的偏移应用,以突出几何体表面浮雕的效果.在3Dworld中,应用了深度的石墙将具有更明显的外观,并且对最终用户来说看起来很逼真.在更陡的视角下,纹理坐标移位更多,由于视差变化而产生视差效应的深度错觉.
Parallex映射与标准材质一起使用.我们在标准材料章节中了解到这一点.
parallex映射中有3个属性.
material.useParallax = true; : 这启用了parallex映射.要使用此属性,您需要首先为材质指定凹凸纹理.
material.useParallaxOcclusion = true; : 要使用此属性,必须将useParallax设置为true.它启用了视差遮挡.
material.parallaxScaleBias = 0.1; : 将深度的缩放因子应用于网格.对于Parallax,.05和.1之间的值很好.对于遮挡,你可以达到0.2.
<!doctype html> <html> <head> <meta charset = "utf-8"> <title>BabylonJs - Basic Element-Creating Scene</title> <script src = "babylon.js"></script> <style> canvas {width: 100%; height: 100%;} </style> </head> <body> <canvas id = "renderCanvas"></canvas> <script type = "text/javascript"> var canvas = document.getElementById("renderCanvas"); var engine = new BABYLON.Engine(canvas, true); var createScene = function() { // This creates a basic Babylon Scene object (non-mesh) var scene = new BABYLON.Scene(engine); // This creates and positions a free camera (non-mesh) var camera = new BABYLON.ArcRotateCamera("camera1", 0, Math.PI / 2, 100, new BABYLON.Vector3(0, 0, 0), scene); camera.attachControl(canvas, false); // This targets the camera to scene origin camera.setTarget(BABYLON.Vector3.Zero()); // This creates a light, aiming 0,1,0 - to the sky (non-mesh) var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene); // Default intensity is 1. Let's dim the light a small amount light.intensity = 0.7; var mesh = BABYLON.Mesh.CreateBox("box01", 25, scene); mesh.position = new BABYLON.Vector3(0, 0, 0); var brickWallDiffURL = "images/a1.png"; var brickWallNHURL = "images/a2.png"; var stoneDiffURL = "images/pebble.jpg"; var stoneNHURL = "images/a3.png"; var stoneDiffuseTexture = new BABYLON.Texture(stoneDiffURL, scene); var stoneNormalsHeightTexture = new BABYLON.Texture(stoneNHURL, scene); var wallDiffuseTexture = new BABYLON.Texture(brickWallDiffURL, scene); var wallNormalsHeightTexture = new BABYLON.Texture(brickWallNHURL, scene); var normalsHeightTexture = stoneNormalsHeightTexture; var material = new BABYLON.StandardMaterial("mtl01", scene); material.diffuseTexture = stoneDiffuseTexture; material.bumpTexture = stoneNormalsHeightTexture; material.useParallax = true; material.useParallaxOcclusion = true; material.parallaxScaleBias = 0.1; material.specularPower = 1000.0; material.specularColor = new BABYLON.Color3(0.5, 0.5, 0.5); mesh.material = material; return scene; }; var scene = createScene(); engine.runRenderLoop(function() { scene.render(); }); </script> </body> </html>
上面的代码行将生成以下输出 :
在本演示中,我们使用了图像 a1.png,a2.png ,pebble.jpg 和 a3.png .图像存储在本地的图像/文件夹中,也粘贴在下面以供参考.您可以下载您选择的任何图像并在演示链接中使用.