简介
1 .基于高度图，在材质的纹理上应用偏移量，以突出几何体表面的浮雕效果
2 .这种技术独立于法线贴图，但是一般情况都是结合法线贴图使用，因为视差贴图的所需要的高度图大部分时间都是使用编码在法线贴图上面的数据
3 .基于高度图对纹理进行UV坐标执行偏移计算的核心算法，执行起来非常快，如果已经在使用法线贴图，几乎可以认为是无成本的
4 .所以在使用视差贴图的时候，必须要有漫反射纹理，法线纹理，视差贴图额可以视为法线纹理的扩展。目前只支持在法线贴图的alpha通道中编码的高度图
5 .useParallax:开启法线纹理的视差映射。如果没有分配法线纹理，这个属性将不会产生任何影响
6 .useParallaxOcclusion:开启视差遮挡.传统的视差映射基于高度图的一个样本计算偏移量，而遮挡版本将循环多次对高度图进行采样，以达到要计算的像素应反映的更精确位置。结果比传统的视差更真实，但可能会影响性能，需要考虑
7 .parallaxScaleBias:高度图代表的深度，0.05和0.1之间的值在视差中是合理
的，使用视差遮挡的情况下可以达到0.2
实测开启之后细节更加丰富，材质的细节更加丰富
<!DOCTYPE html>
<!-- 添加小人,使用序列图 -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<title>Babylon - Getting Started</title>
<!-- Link to the last version of BabylonJS -->
<script src="https://preview.babylonjs.com/babylon.js"></script>
<!-- Link to the last version of BabylonJS loaders to enable loading filetypes such as .gltf -->
<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<!-- Link to pep.js to ensure pointer events work consistently in all browsers -->
<script src="https://code.jquery.com/pep/0.4.1/pep.js"></script>
</head>
<body>
<canvas id="renderCanvas"></canvas>
</body>
</html>
As you can see, we inserted in the <body> a <canvas> element. This <canvas> element will be the place where we'll display the result of our 3D rendering. Insert some style in the <head>:
<style>
html, body {
overflow: hidden;
width : 100%;
height : 100%;
margin : 0;
padding : 0;
}
#renderCanvas {
width : 100%;
height : 100%;
touch-action: none;
}
</style>
Now some javascript code to run our project. To begin with, insert at the end of your <body>:
<script>
window.addEventListener('DOMContentLoaded', function() {
var canvas = document.getElementById('renderCanvas');
var engine = new BABYLON.Engine(canvas, true);
var scene = function(){
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.FreeCamera('camera', new BABYLON.Vector3(0, 5,-10), scene);
camera.setTarget(BABYLON.Vector3.Zero());
camera.attachControl(canvas, false);
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.7;
let ground=BABYLON.Mesh.CreateGround('ground',6,6,2,scene)
// let sphere=BABYLON.Mesh.CreateSphere('sphere',16,2,scene)
// sphere.rotation.x=Math.PI/2
// sphere.position.y=1
let mat=new BABYLON.StandardMaterial()
mat.diffuseTexture=new BABYLON.Texture('http://127.0.0.1:8080/source/image/Wk1cGEq.png',scene)
mat.bumpTexture=new BABYLON.Texture("http://127.0.0.1:8080/source/image/wGyk6os.png",scene)
mat.invertNormalMapX=true
mat.invertNormalMapY=true
// 透明贴图
// mat.opacityTexture=new BABYLON.Texture('http://127.0.0.1:8080/source/image/smoke.png',scene)
// sphere.material=mat
mat.useParallax=true
//
mat.useParallaxOcclusion=true
mat.parallaxScaleBias=0.1
ground.material=mat
return scene;
}()
engine.runRenderLoop(function() {
scene.render();
});
window.addEventListener('resize', function() {
engine.resize();
});
});
</script>
