BabylonJS - MeshHightlight Layer

Highlight layer is used to highlight the mesh in the scene. You can give color to it and the color is applied to the borders of the mesh. In case in a game you want to hightlight, the mesh hightlight layer can be used for the same.

Syntax

var h1 = new BABYLON.HighlightLayer("h1", scene);

You can add mesh to the same using the addmesh property.

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,{ stencil: true });
         
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);
            var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
            camera.setTarget(BABYLON.Vector3.Zero());
            camera.attachControl(canvas, true);
            
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
            light.intensity = 0.7;
            var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);
            sphere.position.y = 1;

            var box = BABYLON.Mesh.CreateBox("box", 5, scene);
            box.position.x = 5;
            box.position.y = 1;

            var materialSphere = new BABYLON.StandardMaterial("texture4", scene);
            materialSphere.emissiveTexture = new BABYLON.Texture("images/baseball.jpg", scene);
            materialSphere.emissiveTexture.uOffset = -0.1;
            sphere.material = materialSphere;	

            var ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene);
            var h1 = new BABYLON.HighlightLayer("h1", scene);
            h1.addMesh(sphere, BABYLON.Color3.Green(), true);
            h1.addMesh(ground, BABYLON.Color3.Red());
            h1.addMesh(box, BABYLON.Color3.Red());			

            var alpha = 0;
            scene.registerBeforeRender(() => {
               alpha += 0.06;
               var dateValue = new Date();
               var s = dateValue.getSeconds();
               if (s %2 == 0) {
                  h1.outerGlow = false;
                  h1.innerGlow = true;
               } else {
                  h1.outerGlow = true;
                  h1.innerGlow = false;	
               }
               h1.blurHorizontalSize = 0.3 + Math.cos(alpha) * 0.6 + 0.6;		
               h1.blurVerticalSize = 0.3 + Math.sin(alpha / 3) * 0.6 + 0.6;

            });
            return scene;	
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Output

The above line of code generates the following output −

Highlayer

In this demo, we have used image an called baseball.jpg. The images are stored in the images/ folder locally and are also pasted below for reference. You can download any image of your choice and use in the demo link.

images/baseball.jpg

baseball

Explanation

Highlight layer is used to highlight a mesh in a scene.

Syntax

var h1 = new BABYLON.HighlightLayer("h1", scene);

You can add mesh to it to hightlight with the color you need. Consider the following example to understand this.

h1.addMesh(sphere, BABYLON.Color3.Green(), true);
h1.addMesh(ground, BABYLON.Color3.Red());
h1.addMesh(box, BABYLON.Color3.Red());

To make the hightlight layer glow, you can use the following command.S et the innerGlow to true to activate. To activate outerGlow, set the same to true.

h1.outerGlow = true;
h1.innerGlow = false;

Check the demo in the browser to see the hightlight layer and the glows added to it.

babylonjs_mesh.htm
Advertisements