In the last tutorial, our primitives looked rather boring, so now we going to spice it up a bit. mybloggingplanet.com
Phong shading allows us to add a light to the scene, and creates shadows and highlights on an object depending which way it is facing to the light source. There is a good article on phong shading on wikipedia, if you would like to find out more about it.
The first thing we going to do is add a global variable containing the coordinates of our light source.
Then we have a new function called createPhongMaterial() that creates a material with a base colour that has the phong shader effect added.
So breaking down the function, we first create a new material, and assign the standard phong shader to it.
var material = g_pack.createObject('Material');
o3djs.effect.attachStandardShader(
g_pack, material, g_lightPosition, 'phong');
material.drawList = g_viewInfo.performanceDrawList;
Now we assign the values of the differnet kinds of lighting effects the material can have. Changing these values will change how the material interacts with the light. Emissive light is the light given off by the material. Ambient is the background light. Diffuse light colour the object would appear under full light. And finally, specular are the highlights on the object. Shininess is how reflective the material is
// Assign parameters to the phong material.
material.getParam('emissive').value = [0, 0, 0, 1];
material.getParam('ambient').value = g_math.mulScalarVector(0.1, baseColor);
material.getParam('diffuse').value = g_math.mulScalarVector(0.9, baseColor);
material.getParam('specular').value = [.2, .2, .2, 1];
material.getParam('shininess').value = 20;
I also updated the createShapes function to no longer accept a material as a parameter, but rather to add the materials to the objects using the new createPhongMaterial() function. This means as well, that the red material from previous tutorials is now no longer used here.
Here is the complete listing
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_lightPosition = [5, 5, 7];
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);
}
}
/**
* Creates a phong material based on the given single color.
* @param {Array} baseColor An array with 4 entries, the R,G,B, and A components
* of a color.
* @return {Material} A phong material whose overall pigment is baseColor.
*/
function createPhongMaterial(baseColor) {
// Create a new, empty Material object.
var material = g_pack.createObject('Material');
o3djs.effect.attachStandardShader(
g_pack, material, g_lightPosition, 'phong');
material.drawList = g_viewInfo.performanceDrawList;
// Assign parameters to the phong material.
material.getParam('emissive').value = [0, 0, 0, 1];
material.getParam('ambient').value = g_math.mulScalarVector(0.1, baseColor);
material.getParam('diffuse').value = g_math.mulScalarVector(0.9, baseColor);
material.getParam('specular').value = [.2, .2, .2, 1];
material.getParam('shininess').value = 20;
return material;
}
function createShapes() {
var cube = o3djs.primitives.createCube(
g_pack,
createPhongMaterial([1, 0, 0, 1]),
Math.sqrt(2)); // The length of each side of the cube.
var sphere = o3djs.primitives.createSphere(
g_pack,
createPhongMaterial([1, 1, 0, 1]),
1.0, // Radius of the sphere.
30, // Number of meridians.
20); // Number of parallels.
var cylinder = o3djs.primitives.createCylinder(
g_pack,
createPhongMaterial([0, 1, 0, 1]),
0.5, // Radius.
1.5, // Depth.
20, // Number of radial subdivisions.
20); // Number of vertical subdivisions.
var plane = o3djs.primitives.createPlane(
g_pack,
createPhongMaterial([0, 0, 1, 1]),
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,
createPhongMaterial([0, 1, 1, 1]),
polygon, // The profile polygon to be extruded.
1); // The depth of the extrusion.
var disc = o3djs.primitives.createDisc(
g_pack,
createPhongMaterial([1, 0, 1, 1]),
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
createShapes();
// 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();
}
}
Comments