Simple mobile figure

WebGL 3D Model of a mobile skwish

In this entry I will explain the process of making this simple mobile figure in WebGL, taking as a model a skwish that we would normally see in baby cribs like this one:

In order to achieve this, we have to have a very clear concept of hierarchical modeling and scene graphs in WebGL, letting us establish dependencies between 3d objects and making the rotation of the spheres, cubes and cones seem as natural as they can be. After having this concepts clear, we can begin with the explanation of the example.

Establishing the hierarchy

For the setup of the scene graph, I took as an example the WebGLFundamentals lesson about this topic, where they show a solar system example with a parent node and some planets rotating around it. First, we take a look at the Node class:

var Node = function() {
  this.children = [];
  this.localMatrix = m4.identity();
  this.worldMatrix = m4.identity();
};
Node.prototype.setParent = function(parent) {
  if (this.parent) {
    var ndx = this.parent.children.indexOf(this);
    if (ndx >= 0) {
      this.parent.children.splice(ndx, 1);
    }
  }
if (parent) {
    parent.children.push(this);
  }
  this.parent = parent;
};
Node.prototype.updateWorldMatrix = function(parentWorldMatrix) {
  if (parentWorldMatrix) {
    // a matrix was passed in so do the math
    m4.multiply(parentWorldMatrix, this.localMatrix, this.worldMatrix);
  } else {
    // no matrix was passed in so just copy local to world
    m4.copy(this.localMatrix, this.worldMatrix);
  }
// now process all the children
  var worldMatrix = this.worldMatrix;
  this.children.forEach(function(child) {
    child.updateWorldMatrix(worldMatrix);
  });
};

Now every element we create in the example, will be of type Node, and will have the methods of setParent and updateWorldMatrix, which will help us establish the hierarchy we want. This way, we can guarantee that out children class will inherit their’s parent properties, like its position and rotation.

Creating the objects

For our example we used a library that helps us through the process of creating elements, so we only need a function that calls upon the creation of the elements:

function createFlattenedVertices(gl, vertices) {
    var last;
    return webglUtils.createBufferInfoFromArrays(
      gl,
      primitives.makeRandomVertexColors(primitives.deindexVertices(vertices), {
        vertsPerColor: 1,
        rand: function(ndx, channel) {
          if (channel == 0) {
            last = (128 + Math.random() * 128) | 0;
          }
          return channel < 3 ? last : 255;
        }
      })
    );
  }

Now we can call this function whenever we want to create a new element, so we only have to specify the type of element that we want and set some parameters in each case:

Every primitive has its own set of parameters that we need to adjust to make the figures we want. The important thing here is to know that we are creating some cubes, cones, spheres and sticks to link all of the objects together.

Creating the nodes as objects

Now that we have our objects and we have our Node constructor, we can begin to create the nodes we want in our scene.

In the example we have a total of 7 levels but we can explain everything we need with these two. We notice that on every level we have to create the node, setup the local matrix and the information for the drawing, the program and the buffer. In the buffer is where we specify what object are we going to create. In the code shown above we are setting up the main node that will be the parent of every other node (and it is a cube), a string that will connect the cube with the level 2 node, and the level 2 node (which is a sphere). The important thing to notice is that when we make a translation to the level 1 node, it will affect all of its children, so that’s the type of hierarchy we are looking for.

Another important thing to look out for is the rotation on the x axis of the string. This is important because we want the string to show up vertically and not horizontally (which is the default way of showing it for the library we are using). That way we can make connections between the nodes in the most natural way possible.

Connecting the nodes

Now that we have our nodes all set up we have to establish the hierarchy between them. We do this with the method we defined at the beggining: setParent():

As we already said, this method lets our nodes connect to each other and inherit the properties of their parents. This way, if the parent of a node is having some rotation effect or has a height set up in 0, the children will have this property too.

Setting up the rotation

Now that we have all the nodes in the graph correctly defined, we can start giving some rotations to our levels. This will define the mobile part of our example, but without doing anything of the things we have done with the nodes, the movement of every level would be independent and it wouldn’t make any sense at all. We execute the rotation inside the drawScene function, that will be executed every frame:

With this done, we will have our mobile skwish system, and we only had to do three things: define the nodes, link them and give them rotation. This example gets to show the simplicity that we can have with WebGL when we know what we are doing.

Embedded Example:

Hours Planned vs Hours Executed

I planned 7 hours for this example, but finding out about the library that helped me create the objects instantly and make them into nodes let me finish the example in just 4 hours.