O3D Tutorial 8: Using primitives

Jul 29

Up until now, the cube we have drawn was created by a custom object. There is an easier way of creating basic shapes. This is using primitives.

What primitives are, essentially, is a set of pre-configured objects that you can create instances of to display on your screen.

I have removed all code from the previous tutorial that created the cube, and instead have created a new function that draws a cube, accompanied by a few new friends. First the code creates a fewprimitives. Since objects are created at the origin, we need to translate the object to a spot we want them or else they will all be on top of each other, therefore after we create the objects, we apply a translation translation to the objects, and add them to the 3D root, so that they will be displayed.

function createShapes(material) {
  var cube = o3djs.primitives.createCube(
      g_pack,
      material, 
      Math.sqrt(2));   // The length of each side of the cube.

  var sphere = o3djs.primitives.createSphere(
      g_pack,
      material,
      1.0,   // Radius of the sphere.
      30,    // Number of meridians.
      20);    // Number of parallels.

  var cylinder = o3djs.primitives.createCylinder(
      g_pack,
      material,
      0.5,   // Radius.
      1.5,   // Depth.
      20,    // Number of radial subdivisions.
      20);   // Number of vertical subdivisions.

  var plane = o3djs.primitives.createPlane(
      g_pack,
      material,
      1,      // Width.
      1.618,  // Depth.
      3,      // Horizontal subdivisions.
      3);     // Vertical subdivisions.

  // Make a polygon to extrude for the prism.
  var polygon = [];
  var n = 10;
  for (var i = 0; i < n; ++i) {
    var theta = 2.0 * i * Math.PI / n;
    var radius = (i % 2) ? 1 : 0.382;
    polygon.push([radius * Math.cos(theta), radius * Math.sin(theta)]);
  }

  var prism = o3djs.primitives.createPrism(
      g_pack,
      material,
      polygon,  // The profile polygon to be extruded.
      1);       // The depth of the extrusion.

  var disc = o3djs.primitives.createDisc(
      g_pack,
      material,
      1,   // Radius.
      7,   // Divisions.
      2,   // Stacks (optional).
      0,   // Start Stack (optional).
      2);  // Stack Power (optional).

  // Add the shapes to the transforms.
  var transformTable = [
    {shape: cube, translation: [-2, 1, 0]},
    {shape: sphere, translation: [0, 1, 0]},
    {shape: cylinder, translation: [2, 1, 0]},
    {shape: plane, translation: [-2, -1, 0]},
    {shape: prism, translation: [0, -1, 0]},
    {shape: disc, translation: [2, -1, 0]}
  ];

  for (var i = 0; i < transformTable.length; i++) {
    var transform = g_pack.createObject('Transform');
    transform.addShape(transformTable[i].shape);
    transform.translate(transformTable[i].translation);
    transform.parent = g_3dRoot;
  }
}

When you run the code, you may notice that the objects are all a rather boring red, with no shading or lighting, which is something that I will address in the next tutorial…

Here is the full listing of the javascript file

o3djs.require('o3djs.util');
o3djs.require('o3djs.math');
o3djs.require('o3djs.rendergraph');
o3djs.require('o3djs.canvas');
o3djs.require('o3djs.quaternions');
o3djs.require('o3djs.event');
o3djs.require('o3djs.arcball');
o3djs.require('o3djs.primitives');

// Events
// Run the init() function once the page has finished loading.
// Run the uninit() function when the page has is unloaded.
window.onload = init;
window.onunload = uninit;

// global variables
var g_o3dElement;
var g_o3d;
var g_math;
var g_client;
var g_pack;
var g_clock = 0;
var g_timeMult = 1;
var g_cubeTransform;
var g_textCanvas;
var g_paint;
var g_canvasLib;
var g_3dRoot;
var g_hudRoot;
var g_viewInfo;
var g_hudViewInfo;
var g_keyPressDelta = 0.05;

var g_quaternions;
var g_aball;
var g_thisRot;
var g_lastRot;
var g_dragging = false;
var g_camera = {
  eye: [0, 0, 10],
  target: [0, 0, 0]
};

function startDragging(e) {
  g_lastRot = g_thisRot;
  g_aball.click([e.x, e.y]);
  g_dragging = true;
}

function drag(e) {
  if (g_dragging) {
    var rotationQuat = g_aball.drag([e.x, e.y]);
    var rot_mat = g_quaternions.quaternionToRotation(rotationQuat);
    g_thisRot = g_math.matrix4.mul(g_lastRot, rot_mat);
    var m = g_3dRoot.localMatrix;
    g_math.matrix4.setUpper3x3(m, g_thisRot);
    g_3dRoot.localMatrix = m;
   }
}

function stopDragging(e) {
  g_dragging = false;
}

function scrollMe(e) {
  if (e.deltaY) {
    g_camera.eye =
        g_math.mulScalarVector((e.deltaY < 0 ? 11 : 13) / 12, g_camera.eye);
    g_viewInfo.drawContext.view = g_math.matrix4.lookAt(g_camera.eye,
                                                       g_camera.target,
                                                       [0, 1, 0]);
 }
}         

function drawText(str) {
  // Clear to completely transparent.
  g_textCanvas.canvas.clear([0.5, 0.5, 0.5, 0.5]);

  // Reuse the global paint object
  var paint = g_paint;
  paint.color = [1, 1, 1, 1];
  paint.textSize = 12;
  paint.textTypeface = 'Comic Sans MS';
  paint.textAlign = g_o3d.CanvasPaint.LEFT;
  paint.shader = null;
  g_textCanvas.canvas.drawText(str, 10, 30, paint);

  g_textCanvas.updateTexture();
}         

/**
 * This method gets called every time O3D renders a frame.  Here's
 * where we update the cube's transform to make it spin.
 * @param {o3d.RenderEvent} renderEvent The render event object that 
 * gives us the elapsed time since the last time a frame was rendered.
 */
function renderCallback(renderEvent) {
  g_clock += renderEvent.elapsedTime * g_timeMult;
  drawText("Hello world - " + (Math.round(g_clock * 100) / 100) + "s");       
}

/**
 * Function performing the rotate action in response to a key-press.
 * Rotates the scene based on key pressed. (w ,s, a, d). Note that the
 * x,y-axis referenced here are relative to the current view of scene.
 * @param {keyPressed} The letter pressed, in lower case.
 * @param {delta} The angle by which the scene should be rotated.
 * @return true if an action was taken.
 */
function keyPressedAction(keyPressed, delta) {
  var actionTaken = false;
  switch(keyPressed) {
    case 'a':
      g_3dRoot.localMatrix =
          g_math.matrix4.mul(g_3dRoot.localMatrix,
                             g_math.matrix4.rotationY(-delta));
      actionTaken = true;
      break;
    case 'd':
      g_3dRoot.localMatrix =
          g_math.matrix4.mul(g_3dRoot.localMatrix,
                             g_math.matrix4.rotationY(delta));
      actionTaken = true;
      break;
    case 'w':
      g_3dRoot.localMatrix =
          g_math.matrix4.mul(g_3dRoot.localMatrix,
                             g_math.matrix4.rotationX(-delta));
      actionTaken = true;
      break;
    case 's':
      g_3dRoot.localMatrix =
          g_math.matrix4.mul(g_3dRoot.localMatrix,
                             g_math.matrix4.rotationX(delta));
      actionTaken = true;
      break;
  }
  return actionTaken;
}

/**
 * Callback for the keypress event.
 * Invokes the action to be performed for the key pressed.
 * @param {event} keyPress event passed to us by javascript.
 */
function keyPressedCallback(event) {
  event = event || window.event;

  // Ignore accelerator key messages.
  if (event.metaKey)
    return;

  var keyChar =String.fromCharCode(o3djs.event.getEventKeyChar(event));
  // Just in case they have capslock on.
  keyChar = keyChar.toLowerCase();

  if (keyPressedAction(keyChar, g_keyPressDelta)) {
    o3djs.event.cancel(event);
  }
}         

function createShapes(material) {
  var cube = o3djs.primitives.createCube(
      g_pack,
      material, 
      Math.sqrt(2));   // The length of each side of the cube.

  var sphere = o3djs.primitives.createSphere(
      g_pack,
      material,
      1.0,   // Radius of the sphere.
      30,    // Number of meridians.
      20);    // Number of parallels.

  var cylinder = o3djs.primitives.createCylinder(
      g_pack,
      material,
      0.5,   // Radius.
      1.5,   // Depth.
      20,    // Number of radial subdivisions.
      20);   // Number of vertical subdivisions.

  var plane = o3djs.primitives.createPlane(
      g_pack,
      material,
      1,      // Width.
      1.618,  // Depth.
      3,      // Horizontal subdivisions.
      3);     // Vertical subdivisions.

  // Make a polygon to extrude for the prism.
  var polygon = [];
  var n = 10;
  for (var i = 0; i < n; ++i) {
    var theta = 2.0 * i * Math.PI / n;
    var radius = (i % 2) ? 1 : 0.382;
    polygon.push([radius * Math.cos(theta), radius * Math.sin(theta)]);
  }

  var prism = o3djs.primitives.createPrism(
      g_pack,
      material,
      polygon,  // The profile polygon to be extruded.
      1);       // The depth of the extrusion.

  var disc = o3djs.primitives.createDisc(
      g_pack,
      material,
      1,   // Radius.
      7,   // Divisions.
      2,   // Stacks (optional).
      0,   // Start Stack (optional).
      2);  // Stack Power (optional).

  // Add the shapes to the transforms.
  var transformTable = [
    {shape: cube, translation: [-2, 1, 0]},
    {shape: sphere, translation: [0, 1, 0]},
    {shape: cylinder, translation: [2, 1, 0]},
    {shape: plane, translation: [-2, -1, 0]},
    {shape: prism, translation: [0, -1, 0]},
    {shape: disc, translation: [2, -1, 0]}
  ];

  for (var i = 0; i < transformTable.length; i++) {
    var transform = g_pack.createObject('Transform');
    transform.addShape(transformTable[i].shape);
    transform.translate(transformTable[i].translation);
    transform.parent = g_3dRoot;
  }
}

/**
 * Creates the client area.
 */
function init() {
  o3djs.util.makeClients(initStep2);
}

/**
 * Initializes O3D.
 * @param {Array} clientElements Array of o3d object elements.
 */
function initStep2(clientElements) {
  // Initializes global variables and libraries.
  g_o3dElement = clientElements[0];
  g_client = g_o3dElement.client;
  g_o3d = g_o3dElement.o3d;
  g_math = o3djs.math;
  g_quaternions = o3djs.quaternions;

  // Initialize O3D sample libraries.
  o3djs.base.init(g_o3dElement);

  // Create a pack to manage the objects created.
  g_pack = g_client.createPack();

  //Create the arcball which is used for the rotation
  g_aball = o3djs.arcball.create(300, 300);

  //Initialise rotation matrixes
  g_lastRot = g_math.matrix4.identity();
  g_thisRot = g_math.matrix4.identity();

  // Create 2 root transforms, one for the 3d parts and 2d parts.
  // This is not strictly neccassary but it is helpful.
  g_3dRoot = g_pack.createObject('Transform');
  g_hudRoot = g_pack.createObject('Transform');

  // Create the render graph for a view.
  g_viewInfo = o3djs.rendergraph.createBasicView(
      g_pack,
      g_3dRoot,
      g_client.renderGraphRoot);

  // Set the background color to black.
  g_viewInfo.clearBuffer.clearColor = [0, 0, 0, 1];

  // Create a second view for the hud. 
  g_hudViewInfo = o3djs.rendergraph.createBasicView(
       g_pack,
       g_hudRoot,
       g_client.renderGraphRoot);

  // Make sure the hud gets drawn after the 3d stuff
  g_hudViewInfo.root.priority = g_viewInfo.root.priority + 1;

  // Turn off clearing the color for the hud since that would erase the
  // 3d parts but leave clearing the depth and stencil so the HUD is
  //  unaffected by anything done by the 3d parts.
  g_hudViewInfo.clearBuffer.clearColorFlag = false;

  // Set up a perspective view
  g_viewInfo.drawContext.projection = g_math.matrix4.perspective(
      g_math.degToRad(30), // 30 degree fov.
      g_client.width / g_client.height,
      1,                  // Near plane.
      5000);              // Far plane.

  // Set up our view transformation to look towards the world origin 
  // where the cube is located.
  g_viewInfo.drawContext.view = g_math.matrix4.lookAt(g_camera.eye, //eye
                                            g_camera.target,  // target
                                            [0, 1, 0]); // up

  //Set up the 2d orthographic view
  g_hudViewInfo.drawContext.projection = g_math.matrix4.orthographic(
      0 + 0.5,
      g_client.width + 0.5,
      g_client.height + 0.5,
      0 + 0.5,
      0.001,
      1000);

  g_hudViewInfo.drawContext.view = g_math.matrix4.lookAt(
      [0, 0, 1],   // eye
      [0, 0, 0],   // target
      [0, 1, 0]);  // up                                                     

  // Load effect
  var redEffect = g_pack.createObject('Effect');
  var shaderString = 'shaders/solidred.shader';
  o3djs.effect.loadEffect(redEffect, shaderString);

  // Create a Material for the mesh.
  var redMaterial = g_pack.createObject('Material');

  // Set the material's drawList.
  redMaterial.drawList = g_viewInfo.performanceDrawList;

  // Apply our effect to this material. The effect tells the 3D
  // hardware which shaders to use.
  redMaterial.effect = redEffect;

  createShapes(redMaterial);

  // Create the global paint object that's used by draw operations.
  g_paint = g_pack.createObject('CanvasPaint');

  // Creates an instance of the canvas utilities library.
  g_canvasLib = o3djs.canvas.create(g_pack, g_hudRoot, g_hudViewInfo);

  // Create a canvas that will be used to display the text.
  g_textCanvas = g_canvasLib.createXYQuad(70, 70, 0, 100, 50, true);
  // Set our render callback for animation.
  // This sets a function to be executed every time frame is rendered.
  g_client.setRenderCallback(renderCallback);

  //Set up a callback to interpret keypresses
  window.document.onkeypress = keyPressedCallback;

  //Set up mouse events
  o3djs.event.addEventListener(g_o3dElement, 'mousedown', startDragging);
  o3djs.event.addEventListener(g_o3dElement, 'mousemove', drag);
  o3djs.event.addEventListener(g_o3dElement, 'mouseup', stopDragging);
  o3djs.event.addEventListener(g_o3dElement, 'wheel', scrollMe);           
}

/**
 * Removes callbacks so they aren't called after the page has unloaded.
 */
function uninit() {
  if (g_client) {
    g_client.cleanup();
  }
}

Javascript, O3D, Tutorials

Comments

Eamonn Calwey

August 3rd, 2009 at 10:03 PM

Hello Serge

I am working my way through the tutorials. When I got to number seven, seperating the shaders and the HTML, I encountered a problem. I have placed the tutorial7.js code in the a folder called tutorial7, the tutorial7.html file is sitting on the desktop. There is also a shaders folder on the desktop containing a notepad file called solidred.shaders. At first internet explorer had warning symbol in the botttom left hand corner, and no o3d would appear in the window. I am now just getting a black background. I guess the first issue was because the files were in the wrong place. Now that it’s just black, do you think that there is another issue with the code.
Also I tried to clean up the files by placing them in a folder called O3D. Within this folder, are all the html files and the o3djs folder. I fixed the src code to correspond with this change ie src=”O3D/o3djs/base.js”>

However after this change none of the tutorials would run. I went through the code to make sure I had not missed any other relivant changes to allow this housekeeping to work but alas it would not
Any thoughts?

Regard
Eamonn
Serge Meunier

August 4th, 2009 at 8:38 AM

Hi Eamonn,

The errors you are getting seems to point to a Javascript error. In IE, if you click on the warning symbol, it will tell you which line it failed on. If you are using Firefox, then going to Tools->Error Console will bring up a list of errors on the page. Once you have gotten that we can work out what is going wrong.

Serge
Filip

October 7th, 2009 at 10:16 PM

Hi Serge,

I’ve run through your tutorials, and they are really great, it’s pleasure to study from them.

Actually, i’ve encountered the same error as Eamon did. Since tutorial 7, the same error occurs all the time. The only thing i get i empty div.
Files are cleaned up in one directory (with subdirs like shaders of course).

you asked about the error on the console, here’s what i get:

“o3djs.effect is undefined” in line where the shader is loaded:
” var redEffect = g_pack.createObject(‘Effect’);
var shaderString = ‘shaders/red.shader’;
o3djs.effect.loadEffect(redEffect, shaderString); //here comes the error”

i’ve run out of ideas, how to fox this
Serge Meunier

October 8th, 2009 at 1:39 PM

Hi Filip,

If you are getting an o3djs.effect is undefined error then it means one of two things. Either something is wrong with your o3d library, or else the line in the html loading the o3djs library is either missing or incorrect. Make sure that the line
Serge Meunier

October 8th, 2009 at 1:42 PM

Oops. I noticed my comment got cut off there.

I meant to say check the line which loads the o3d base.js file in the html is pointing to the right place.

I have also found that the shader files must have a line feed at the end of hte file, otherwise it tends to crash the application. Try that as well.

hope it helps. If you still have a problem, let me know.
Filip

October 8th, 2009 at 3:23 PM

Hello again.

I’ve checked it. base.js is loaded correctly, and the the line feed in *.shader is also provided,

But I’ve found solution today. All We need to do is to add

o3djs.require(‘o3djs.effect’);

at the top of the file and all works properly..

I’ve no idea why it worked when I had copied and pasted your files from tutorial7 but when I separated the code from tutorial 2 to *.shader, *.js and *.html files it crashed..

Its somehow weired but it works.

Smoky Cogs