Gladius Background Color

‹prev | My Chain | next›

I have enjoyed working with Three.js quite a bit over the past couple of weeks. I liked it enough that my first draft of Gaming JavaScript was written with Three.js. Still, I think that a game engine like Gladius makes for a better approach for gaming.

There are some things that I was able to do in Three.js that I did not try in Gladius. So tonight, I go back to attempt get them working. First up, I try to get get a different background color for my avatar demo.

In Three.js, this is done with setClearColor() on the renderer:

  if (webgl) renderer = new THREE.WebGLRenderer();
  else if (canvas) renderer = new THREE.CanvasRenderer();
  if (renderer) {
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColorHex(0x87CEEB);
    document.body.appendChild(renderer.domElement);
  }
  else {
    alert("Can't make renderer. What kind of browser are you using?!");
  }

Vanilla CubicVR.js seems to stick with WebGL's setClearColor(), but I have a problem with that in Gladius: I cannot seem to get access to the WebGL instance. Well, at least not through the Gladius API. Instead, I have to step out of Gladius to grab the already initialized WebGL instance:

      var gl =document.
        getElementById('test-canvas').
        getContext('experimental-webgl');
      gl.clearColor(135/255,206/255,250/255,1.0);

With that, I have my sky blue background:

I would also like to build an island on which my Gladius avatar can frolic as its Three.js counterpart can. I still have the primitive mesh generator function:

      function primitiveMesh(type, options) {
        var Mesh = engine["gladius-cubicvr"].Mesh;

        options = options || {};
        options.type = type;

        return new Mesh({primitives: options, compile: true});
      }

CubicVR.js has a "plane" primitive, so I make use of that, adding it and a green material to the list of resources that will be used in my animation:

      var resources = {
        sphere_mesh: primitiveMesh('sphere'),
        cone_mesh: primitiveMesh('cone', {height: 2, base: 2}),
        cylinder_mesh: primitiveMesh('cylinder', {radius: 0.2, height: 2}),
        plane_mesh: primitiveMesh('plane', {size: 100}),
        red_material: colorMaterial(255, 0, 0),
        blue_material: colorMaterial(0, 0, 255),
        green_material: colorMaterial(0, 255, 0)
      };

In the game() setup, I then add the island to the scene:

        space.add(new engine.Entity("island",
          [
            new engine.core.Transform(),
            new cubicvr.Model(resources.plane_mesh, resources.green_material)
          ]
        ));

But that is not quite right:

I need to flip the plan 90° around the y-axis (left-right). I also need to shift it down so that the avatar is walking on top of it:

        space.add(new engine.Entity("island",
          [
            new engine.core.Transform([0,2.6,0], [Math.PI/2,0,0]),
            new cubicvr.Model(resources.plane_mesh, resources.green_material)
          ]
        ));

With that, I get my avatar walking on land:

That will do for a stopping point tonight. It is good to get back to Gladius hacking, though I think Three.js probably has a cleaner API at this point (especially from a kid perspective).

I still need to get water surrounding the island. To make that look right, I believe that I need a skybox around everything. I also need to add movement controls to the avatar and collision detection. I'll get started on all of that tomorrow.


Day #466