Gladius Avatar 2.0

‹prev | My Chain | next›

Having determined that I have a bad canary build of Chrome, I am back to building my simple avatar character in Gladius, though viewing it in Firefox. So far I have a head and a body:

I will need some cylinders for the arms and legs, so I add the definition for a skinny cylinder to the engine's resources:

  require(
    [ "gladius-core", "gladius-cubicvr" ],
    function( Gladius, cubicvrExtension ) {
      var engine = new Gladius();

      // CubicVR rendering backend
      engine.registerExtension(cubicvrExtension, { /* ... */ });

      // Mesh and material resources
      var resources = {};
      engine.get(
        [
          // ...
          {
            type: engine["gladius-cubicvr"].Mesh,
            url: 'assets/procedural-primitive-mesh.js?type=cylinder&radius=0.2&height=2',
            load: engine.loaders.procedural,
            onsuccess: function(mesh) {
              resources.cylinder_mesh = mesh;
            },
            onfailure: function(error) {console.log(error);}
          },
          // ...
        {
          oncomplete: game.bind(null, engine, resources)
        }
      );

      function game(engine, resources) {
        // ...
      }
      engine.resume();
    }
  );

This continues to use the generic, procedural primitives resource in procedural-primitive-mesh.js:

function proc(options) {
  options = options || {
    type: "sphere",
    radius: 1.0
  };

  return {
    primitive: options,
    compile: true
  };
}

With that, I am ready to add arms and legs. I start by adding the right arm to the body:

      function game(engine, resources) {
        // ...
        space.add(new engine.Entity("right-arm",
          [
            new engine.core.Transform([0.8, -0.2, 0], [0, -Math.PI/8, Math.PI/3]),
            new cubicvr.Model(resources.cylinder_mesh, resources.blue_material)
          ],
          ["avatar"],
          space.findNamed("body")
        ));
        // ...
      }

The displacement transform [0.8, -0.2, 0] was arrived at mostly through trial and error so that it would look normal coming out of the body. It is eight-tenths of a space unit from the center of the cone/body and 2 tenths down. The rotation [0, -Math.PI/8, Math.PI/3] was done so that the arm is pointing down and a little to the front.

Now I can add the hand:

        space.add(new engine.Entity("right-hand",
          [
            new engine.core.Transform([0, -0.9, 0], [0, 0, 0], [.4, .4, .4]),
            new cubicvr.Model(resources.sphere_mesh, resources.red_material)
          ],
          ["avatar"],
          space.findNamed("right-arm")
        ));

The hand is much easier. I attach it to the arm by virtue of the fourth argument to the entity constructor. The model is a simple red sphere. The transform is simple displacement along the y-axis of the arm's frame of reference. The only reason that I need two more arguments to the Transform is so that I can scale the hands to be 0.4 the size of the head (which is the default sphere size).

After doing the same for the other limbs, I have a reasonable start for an avatar:

Up tomorrow: I'll add a little movement.

Day #444