BabylonJS - Mesh Morph Targets



We have already seen morhphing of lines, ribbon, polygon, etc. Now, we will see morphing of sphere and box in this demo.With morph targets, the shape of the sphere is changed which is seen in the demo below.

Syntax

var box = BABYLON.Mesh.CreateBox("box1", 3.0, scene);
var manager = new BABYLON.MorphTargetManager();
box.morphTargetManager = manager;

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 scrambleUp = function(data) {
            console.log(data);
            for (index = 0; index < data.length; index ++) {
               data[index] += 1.8 * Math.random();
            }
         }

         var scrambleDown = function(data) {
            for (index = 0; index < data.length; index ++) {
               data[index] -= 1.8 * Math.random();
            }
         }

         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
         
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);
            
            // This creates and positions a free camera (non-mesh)
            var camera = new BABYLON.ArcRotateCamera("camera1", 1.14, 1.13, 10, BABYLON.Vector3.Zero(), scene);
            
            // This targets the camera to scene origin
            camera.setTarget(BABYLON.Vector3.Zero());
            
            // This attaches the camera to the canvas
            camera.attachControl(canvas, true);
            
            // 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;
            
            // Our built-in 'sphere' shape. Params: name, subdivs, size, scene
            var box = BABYLON.Mesh.CreateBox("box1", 3.0, scene);//BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);

            var materialSphere = new BABYLON.StandardMaterial("mat", scene);
            materialSphere.diffuseTexture = new BABYLON.Texture("images/sphere.jpg", scene);    
            box.material = materialSphere;

            //var sphere2 = BABYLON.Mesh.CreateSphere("sphere2", 16, 2, scene);//BABYLON.Mesh.CreateBox("box", 6.0, scene);
            var box1 = BABYLON.Mesh.CreateBox("box2", 3.0, scene);
            box1.setEnabled(false);
            box1.updateMeshPositions(scrambleUp);
            var manager = new BABYLON.MorphTargetManager();
            box.morphTargetManager = manager;

            var target0 = BABYLON.MorphTarget.FromMesh(box1, "sphere2", 0.25);
            manager.addTarget(target0);

            var sphere = BABYLON.Mesh.CreateSphere("sphere", 16, 2, scene);//BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);
            sphere.position.x="10";
            
            var materialSphere = new BABYLON.StandardMaterial("mat", scene);
            materialSphere.diffuseTexture = new BABYLON.Texture("sphere.jpg", scene);    
            sphere.material = materialSphere;

            var sphere2 = BABYLON.Mesh.CreateSphere("sphere2", 16, 2, scene);//BABYLON.Mesh.CreateBox("box", 6.0, scene);
            sphere2.setEnabled(false);
            sphere2.updateMeshPositions(scrambleUp);
            
            var manager1 = new BABYLON.MorphTargetManager();
            sphere.morphTargetManager = manager1;

            var target2 = BABYLON.MorphTarget.FromMesh(sphere2, "sphere4", 0.25);
            manager1.addTarget(target2);
            return scene; 
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Output

The above line of code generates the following output −

morph_targets

In this demo, we have used the sphere.jpg image. 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/sphere.jpg

Sphere Images

Explanation

var box = BABYLON.Mesh.CreateBox("box1", 3.0, scene);
var manager = new BABYLON.MorphTargetManager();
box.morphTargetManager = manager;

The above code creates a box and adds it to the morphTargetManager. Consider the following example to understand this −

box.morphTargetManager = manager;

To create morph object, execute the following command and assign mesh to the morphTargetManager.

var manager = new BABYLON.MorphTargetManager();

Another box is created as shown below −

var box1 = BABYLON.Mesh.CreateBox("box2", 3.0, scene);
box1.setEnabled(false);
box1.updateMeshPositions(scrambleUp);
var manager = new BABYLON.MorphTargetManager();
box.morphTargetManager = manager;
var target0 = BABYLON.MorphTarget.FromMesh(box1, "box2", 0.25);
manager.addTarget(target0);

The box calls updateMeshPositions(scrambleUp); scrambleUp is a function which adds random numbers.

var target0 = BABYLON.MorphTarget.FromMesh(box1, "box2", 0.25);
manager.addTarget(target0);

The above code creates morphtarget on box1 and adds influence to it -0.25.

Check the above demo in browsers to see results.

babylonjs_mesh.htm
Advertisements