BabylonJS - Mesh LOD & Instances

LOD stands for line of distance. This feature allows you to specify meshes based on the distance of the viewer. As the distance from the viewer to the object increases, the level of detail for the mesh is shown clearly using LOD.

View the demo given below in browser and see how the meshes are rendered and the viewability far from the camera −

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() {
            var scene = new BABYLON.Scene(engine);
            var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 50, BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, false);

            var light0 = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0, 1, 0), scene);
            light0.diffuse = new BABYLON.Color3(1, 1, 1);
            light0.specular = new BABYLON.Color3(1, 1, 1);
            light0.groundColor = new BABYLON.Color3(0, 0, 0);

            var count = 3;
            var scale = 4;

            var knot00 = BABYLON.Mesh.CreateTorusKnot("knot0", 0.5, 0.2, 128, 64, 2, 3, scene);
            var knot01 = BABYLON.Mesh.CreateBox("box", '1', scene);
            var knot02 = BABYLON.Mesh.CreateTorusKnot("knot2", 0.5, 0.2, 24, 12, 2, 3, scene);
            var knot03 = BABYLON.Mesh.CreateSphere("origin", 15, 2.0, scene);

            var materialforsphere = new BABYLON.StandardMaterial("texture1", scene);
            materialforsphere.diffuseTexture = new BABYLON.Texture("images/rainbow.png", scene);

            var material1 = new BABYLON.StandardMaterial("colo1", scene);	
            material1.diffuseColor = new BABYLON.Color3(0.49, 0.25, 0);		
            
            var material2 = material1.clone("colo2");
            material2.diffuseColor = new BABYLON.Color3(1.0, 0.5, 0.7);	
           
            var material3 = material1.clone("colo3");
            material3.diffuseColor = new BABYLON.Color3(0.8, 1.0, 0.7);	

            knot00.material = material1;
            knot01.material = material2;
            knot02.material = material3;
            knot03.material = materialforsphere;	

            knot00.setEnabled(false);

            knot00.addLODLevel(15, knot01);
            knot00.addLODLevel(30, knot02);
            knot00.addLODLevel(45, knot03);
            knot00.addLODLevel(55, null);

            for (var x = -count; x <= count; x++) {
               for (var y = -count; y <= count; y++) {
                  for (var z = 5; z < 10; z++) {
                     var knot = knot00.createInstance("knotI");
                     knot.position = new BABYLON.Vector3(x * scale, y * scale, z * scale);
                  }
               }
            }
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Output

The above line of code generates the following output −

Explanation

LOD is added as follows −

knot00.addLODLevel(15, knot01);
knot00.addLODLevel(30, knot02);
knot00.addLODLevel(45, knot03);
knot00.addLODLevel(55, null);

The first param for addLODLevel tells the distance to the camera. Beyond this distance, the specified level is used. When you specify null the rendering of the mesh is disabled, when it is viewed from indicated distance to the camera.

babylonjs_mesh.htm