BabylonJS - Ground From HeightMap

In this section, we will learn how to create Ground From HeightMap.

Syntax

var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "heightmap.jpg", 200, 200, 250, 0, 10, scene, false, successCallback);

Parameters

Consider the following parameters to create Ground From HeightMap −

Name − The name given to the height map.
URL − The image url for the height map.
Sizeof the mesh − It takes width and height.
Subdivisions − The number of subdivisions.
Minimum height − The lowest level of the mesh.
Maximum height − The highest level of the mesh.
Scene − The actual scene to which the ground height map needs to be added.
Updatable − By default, it is false. If the mesh needs to be updated, this property will be true.
Sucesscallback − Will be called after the height map and the vertex data is created. It is a function with the mesh as its first variable.

Demo – Ground From HeightMap

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title> Babylon.JS : Demo</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);
            // Light
            var spot = new BABYLON.PointLight("spot", new BABYLON.Vector3(0, 30, 10), scene);
            spot.diffuse = new BABYLON.Color3(1, 1, 1);
            spot.specular = new BABYLON.Color3(0, 0, 0);

            // Camera
            var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene);
            camera.lowerBetaLimit = 0.1;
            camera.upperBetaLimit = (Math.PI / 2) * 0.9;
            camera.lowerRadiusLimit = 30;
            camera.upperRadiusLimit = 150;
            camera.attachControl(canvas, true);

            // Ground
            var groundMaterial = new BABYLON.StandardMaterial("ground", scene);
            groundMaterial.diffuseTexture = new BABYLON.Texture("images/earth1.jpg", scene);

            var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "images/heightmap1.jpeg", 200, 200, 250, 0, 10, scene, false);
            ground.material = groundMaterial;		
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Output

The above line of code generates the following output −

In this demo, we have used two images - earth1.jpg and heightmap1.jpeg. The images are stored in the images/ folder locally and are also pasted below for reference. You can download any images of your choice and use in the demo link.

We will use the ground shape to draw the ground and give the image texture for the ground which is as shown below −

Later, we will use the ground height map to draw the height for the image shown above. For the ground height map, the image used needs to have a height as shown below.

The above image is like a wrapper around the ground image creating height as given in the ground height map call made.

var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "images/heightmap1.jpeg", 200, 200, 250, 0, 10, scene, false);

babylonjs_basic_elements.htm