babylon101

Height_Map


Introduction

In this tutorial, our goal is to understand height maps, and to learn how to generate realistic grounds.

HeightMap

Final result

How can I do this ?

  • Introduction Those mountains are very easy to generate with Babylon.js, and with only a single function. But before we do that, we have to create a new material, like we have done many times before:

    var groundMaterial = new BABYLON.StandardMaterial("ground", scene);
    groundMaterial.diffuseTexture = new BABYLON.Texture("Earth__land.jpg", scene);
    
    var groundPlane = BABYLON.Mesh.CreatePlane("groundPlane", 200.0, scene);
    groundPlane.material = groundMaterial;
    

HeightMap2

Our material, a texture, applied to the plane

  • Explanations of a height map

    Understanding height maps is the main objective of this tutorial. A height map is simply a greyscale image like the one we are going to use:

    HeightMap3

    This image will now be used to generate our ground, using the different variants of gray of our picture. This image is the elevation data for your ground. Each pixel’s color is interpreted as a distance of displacement or “height” from the “floor” of your mesh. So, the whiter the pixel is, the taller your mountain will be.

    To help you generate those gray-scale height maps, you can use software such as “Terragen”, or ”Picogen”.

  • Javascript code Now let’s see this powerful function named “CreateGroundFromHeightMap”:

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

    Many parameters here:

    • Name
    • Height map picture url
    • Size of this mesh:
    • Width
    • Height
    • Number of subdivisions: increase the complexity of this mesh in order to improve the visual quality of it

    HeightMap4

    • Minimum height : The lowest level of the mesh
    • Maximum height : the highest level of the mesh
    • Scene: the actual scene
    • Updatable: indicates if this mesh can be updated dynamically in the future (Boolean)
    • successCallback : will be called after the height map was created and the vertex data is created. It is a function with the mesh as its first variable.

    Finally, when our new mesh is ready, we simply apply our material:

    ground.material = groundMaterial;
    

    And now we have a beautiful 3D view of the earth!

    HeightMap4

    In my example, I have added a skybox (like we have learned before here), and a spotlight to simulate sun activity.

    Here is another example showing what you can achieve with BabylonJS height maps:

    HeightMap5

  • Tips When the user is manipulating the camera, it can be awkward if he can see under the ground, or if he zooms-out outside the skybox. So, to avoid that kind of situation, we can constrain the camera movement:

    var camerasBorderFunction = function () {
            //Angle
            if (camera.beta < 0.1)
                camera.beta = 0.1;
            else if (camera.beta > (Math.PI / 2) * 0.9)
                camera.beta = (Math.PI / 2) * 0.9;
    
      //Zoom
            if (camera.radius > 150)
                camera.radius = 150;
    
            if (camera.radius < 30)
                camera.radius = 30;
        };
    
        scene.registerBeforeRender(camerasBorderFunction);
    

You may be interested in visiting the playground demo that goes with this tutorial.

Next step

Well done! Your scene looks good now, and you can imagine a lot of new landscapes! One more important thing you need to know is how to create shadows. Shadows will give your scene a beautiful rendering effect, so don't forget about them!