BabylonJS - Parallaxen-Kartierung

Das Parallaxen-Mapping wird auch als Offset-Mapping bezeichnet. Es wird eine Höhenkarte verwendet, die als Versatz auf die Texturen des Materials angewendet wird, um den Effekt des Reliefs auf der Oberfläche der Geometrie hervorzuheben. In der 3Dworld sehen Steinmauern mit einer darauf angewendeten Tiefe offensichtlicher aus und sehen für den Endbenutzer realistisch aus. Bei steileren Blickwinkeln werden die Texturkoordinaten stärker verschoben, wodurch die Illusion von Tiefe aufgrund von Parallaxeneffekten entsteht, wenn sich die Ansicht ändert.

Parallex-Mapping wird mit Standardmaterial verwendet. Dies haben wir im Kapitel Standardmaterial erfahren.

Es gibt 3 Eigenschaften, die bei der Parallex-Zuordnung vorhanden sind.

material.useParallax = true;- Dies aktiviert die Parallex-Zuordnung. Um diese Eigenschaft zu verwenden, müssen Sie dem Material zuerst eine Höckertextur zuweisen.
material.useParallaxOcclusion = true;- Um diese Eigenschaft zu verwenden, müssen Sie useParallax auf true setzen. Es aktiviert Parallax Occlusion.
material.parallaxScaleBias = 0.1;- Wendet einen Skalierungsfaktor für die Tiefe an, die auf das Netz abgestimmt werden soll. Ein Wert zwischen 0,05 und 0,1 ist für Parallaxe in Ordnung. Für die Okklusion können Sie 0,2 erreichen.

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>

Ausgabe

Die obige Codezeile generiert die folgende Ausgabe:

In dieser Demo haben wir Bilder verwendet a1.png, a2.png, pebble.jpg und a3.png. Die Bilder werden lokal in Bildern / Ordnern gespeichert und unten als Referenz eingefügt. Sie können jedes Bild Ihrer Wahl herunterladen und im Demo-Link verwenden.