BabylonJS - Paralaks Haritalama

Paralaks eşleme, ofset eşleme olarak da adlandırılır. Geometrinin yüzeyindeki rölyef etkisini vurgulamak için malzemenin dokularına ofset olarak uygulanan bir yükseklik haritası kullanır. 3Dworld'de derinliği uygulanan taş duvarlar daha belirgin bir görünüme sahip olacak ve son kullanıcıya gerçekçi görünecektir. Daha dik görüş açılarında, doku koordinatları daha fazla yer değiştirir ve görünüm değiştikçe paralaks etkilerinden dolayı derinlik yanılsaması verir.

Parallex haritalama standart malzeme ile kullanılır. Bunu standart malzeme bölümünde öğrendik.

Paralleks haritalamada mevcut olan 3 özellik vardır.

  • material.useParallax = true;- Bu, paralleks haritalamayı etkinleştirir. Bu özelliği kullanmak için önce malzemeye kabartma dokusu atamanız gerekir.

  • material.useParallaxOcclusion = true;- Bu özelliği kullanmak için useParallax'ı true olarak ayarlamanız gerekir. Paralaks Oklüzyonu sağlar.

  • material.parallaxScaleBias = 0.1;- Ağa söylenecek derinlik için bir ölçeklendirme faktörü uygular. .05 ile .1 arasında bir değer Paralaks için uygundur. Oklüzyon için 0,2'ye ulaşabilirsiniz.

Demo

<!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>

Çıktı

Yukarıdaki kod satırı aşağıdaki çıktıyı üretecektir -

Bu demoda görüntüleri kullandık a1.png, a2.png, pebble.jpg ve a3.png. Görüntüler yerel olarak görüntülerde / klasörlerde saklanır ve ayrıca referans için aşağıya yapıştırılır. İstediğiniz herhangi bir görseli indirebilir ve demo bağlantısında kullanabilirsiniz.

Görüntüler / a1.png

Images / a2.png

Images / pebble.jpg

images / a3.png