Tutorial #7: Materials

In addition to the lighting techniques described in Tutorial #5, it is possible to affect how an object appears by applying a material. Before starting this tutorial, ensure you have a browser with Canvas3D installed and enabled. Tutorial #1 will guide you through that process. You will also need a copy of duck.dae and duck.png.

The HTML page

<html>
  <head>
    <title>Canvas3D Tutorial #7: Materials</title>
    <script type="application/javascript" src="../canvas3dapi/c3dapi.js" ></script>
    <script type="application/javascript" src="tutorial7.js"></script>
  </head>
  <body>
    <canvas id="tutorial" style="border: 2px solid blue" width="800" height="600"></canvas>
  </body>
</html>

The Javascript

Place the following code in a file called tutorial7.js in the mydemo folder 
// Tutorial 7: the javascript
// The models used need to be parsed before the page
// render. This code will parse the model files
// and when this complete the parser will call the
// main. The argument being passed - "tutorial" -
// is the id of the canvas element on the html page.

c3dl.addMainCallBack(canvasMain, "tutorial");
c3dl.addModel("duck.dae");
var duck;
var timesincelastchange=0;
var y=-0.001;

// This callback function is used by the scene class.  Every time
// the scene is updated, it will get called.

function spinduck(time){
 // time is in milliseconds. Thus 3000 millisecond is 3 seconds.
 timesincelastchange+=time;

 //if its been 3 sec or more since we stopped or started the spinning
 //change it.
 if(timesincelastchange >=3000){
 y = -1*y;
 duck.setAngularVel(new Array(0.0,y,0.0));
 timesincelastchange = 0;
 }
}
// The program main
function canvasMain(canvasName){

 // Create new c3dl.Scene object
 scn = new c3dl.Scene();
 scn.setCanvasTag(canvasName);

 // Create GL context
 renderer = new c3dl.WebGL();
 renderer.createRenderer(this);

 // Attach renderer to the scene
 scn.setRenderer(renderer);
 //Turn ambient lighting off
 scn.setAmbientLight([0,0,0,0]);
 
 scn.init(canvasName);

 //the isReady() function tests whether or not a renderer
 //is attached to a scene.  If the renderer failed to
 //initialize this will return false but only after you
 //try to attach it to a scene.
 if(renderer.isReady() )
 {
 
 //a material with a high red component
  var demoMat = new c3dl.Material();
  demoMat.setDiffuse([1,0.6,0.6]);
  demoMat.setAmbient([0.8,1,0.8]);
    
 // Create a Collada object that
 // will contain an imported
 // model of something to put
 // in the scene.
 duck = new c3dl.Collada();

 // If the path is already parsed
 // (as it is in this case)
 // then the model is automatically retrieved
 // from a collada manager.
 duck.init("duck.dae");

 // Give the duck a bit of a spin on y
 duck.setAngularVel(new Array(0.0, -0.001, 0.0));
 duck.setMaterial(demoMat);
 // Add the object to the scene
 scn.addObjectToScene(duck);

 // Create a camera
 var cam = new c3dl.FreeCamera();

 // Place the camera.
 // WebGL uses a right handed co-ordinate system.
 // move 200 to the right
 // move 300 up
 // move 500 units out
 cam.setPosition(new Array(200.0, 300.0, 500.0));

 // Point the camera.
 // Here it is pointed at the same location as
 // the duck so the duck will appear centered.
 cam.setLookAtPoint(new Array(0.0, 0.0, 0.0));

 // Add the camera to the scene
 scn.setCamera(cam);

 // add the callback function
 scn.setUpdateCallback(spinduck);
 
 var diffuse = new c3dl.PositionalLight();
 diffuse.setName('diffuse');
 diffuse.setPosition([0,300,0]);
 diffuse.setDiffuse([0.5,0.5,0.5,1]);
 //diffuse.setAmbient([0.4,1,0.4,1]);
 diffuse.setOn(true);
 scn.addLight(diffuse);

 // Start the scene
 scn.startScene();
 }
}

Once you view the page, you will notice a scene very similar to that in tutorial #5, however the duck now looks different.
duck with red material
The duck is still using the same model, with the same texture, and being hit by the same light as tutorial #5, but has been given a different material that alters how it will react to lights.

Within the canvasMain function, a material is created and the way it will respond to diffuse light is defined using the method setDiffuse while the way it will respond to ambient light is defined using setAmbient. Once a material has been created and has determined how it will react to different lights, it can be applied to models in the scene, changing the way they will react to the lights.

So we’ll add an ambient component to the light we have by un-commenting: 

 diffuse.setAmbient([0.4,1,0.4,1]);
but this might be a little more green than we’d like,
Duck with green ambient lighting
so we can modify how the material will react to ambient light by changing its setAmbient to: 
demoMat.setAmbient([0.8,0.4,0.8]);
Duck coloured

Note that there are limitations on how drastic a change materials can cause. The .dae file and the texture used will limit what the material can do to the object. For example, these ducks cannot be lit in blue.

Note that there are two more material functions (setSpecular and setShininess) are used to set how the material will react to specular lighting. This will require that we add light with a specular component to the scene. We could add it to the existing light, but we’ll use this as an opportunity to add another light to the scene as well.

So we’ll add 

  demoMat.setSpecular([0.8,0.8,0.8]);
  demoMat.setShininess(25);
to the material, to specify how it reacts to specular light, and then we’ll add the second light to the scene. 
  var spec = new c3dl.DirectionalLight();
  spec.setName('spec');
  spec.setDirection([-2,-10,-20]);
  spec.setSpecular([1,1,1,1])
  spec.setOn(true);
  scn.addLight(spec);

Now our code looks like this: 

// Tutorial 7: the javascript
// The models used need to be parsed before the page
// render. This code will parse the model files
// and when this complete the parser will call the
// main. The argument being passed - "tutorial" -
// is the id of the canvas element on the html page.

c3dl.addMainCallBack(canvasMain, "tutorial");
c3dl.addModel("duck.dae");
var duck;
var timesincelastchange=0;
var y=-0.001;

// This callback function is used by the scene class.  Every time
// the scene is updated, it will get called.

function spinduck(time){
 // time is in milliseconds. Thus 3000 millisecond is 3 seconds.
 timesincelastchange+=time;

 //if its been 3 sec or more since we stopped or started the spinning
 //change it.
 if(timesincelastchange >=3000){
 y = -1*y;
 duck.setAngularVel(new Array(0.0,y,0.0));
 timesincelastchange = 0;
 }
}
// The program main
function canvasMain(canvasName){

 // Create new c3dl.Scene object
 scn = new c3dl.Scene();
 scn.setCanvasTag(canvasName);

 // Create GL context
 renderer = new c3dl.WebGL();
 renderer.createRenderer(this);

 // Attach renderer to the scene
 scn.setRenderer(renderer);
 //Turn ambient lighting off
 scn.setAmbientLight([0,0,0,0]);

 scn.init(canvasName);

 //the isReady() function tests whether or not a renderer
 //is attached to a scene.  If the renderer failed to
 //initialize this will return false but only after you
 //try to attach it to a scene.
 if(renderer.isReady() )
 {
 
 //a material with a high red component
  var demoMat = new c3dl.Material();
  demoMat.setDiffuse([1,0.1,0.6]);
  demoMat.setAmbient([0.2,0.4,0.8]);
  demoMat.setSpecular([0.8,0.8,0.8]);
  demoMat.setShininess(25);

    
 // Create a Collada object that
 // will contain an imported
 // model of something to put
 // in the scene.
 duck = new c3dl.Collada();

 // If the path is already parsed
 // (as it is in this case)
 // then the model is automatically retrieved
 // from a collada manager.
 duck.init("duck.dae");

 // Give the duck a bit of a spin on y
 duck.setAngularVel(new Array(0.0, -0.001, 0.0));
 duck.setMaterial(demoMat);
 // Add the object to the scene
 scn.addObjectToScene(duck);

 // Create a camera
 var cam = new c3dl.FreeCamera();

 // Place the camera.
 // WebGL uses a right handed co-ordinate system.
 // move 200 to the right
 // move 300 up
 // move 500 units out
 cam.setPosition(new Array(200.0, 300.0, 500.0));

 // Point the camera.
 // Here it is pointed at the same location as
 // the duck so the duck will appear centered.
 cam.setLookAtPoint(new Array(0.0, 0.0, 0.0));

 // Add the camera to the scene
 scn.setCamera(cam);

 // add the callback function
 scn.setUpdateCallback(spinduck);
 
 var diffuse = new c3dl.PositionalLight();
 diffuse.setName('diffuse');
 diffuse.setPosition([0,300,0]);
 diffuse.setDiffuse([0.5,0.5,0.5,1]);
 diffuse.setAmbient([0.4,1,0.4,1]);
 diffuse.setOn(true);
 scn.addLight(diffuse);

 var spec = new c3dl.DirectionalLight();
 spec.setName('spec');
 spec.setDirection([-2,-10,-20]);
 spec.setSpecular([1,1,1,1])
 spec.setOn(true);
 scn.addLight(spec);
 
 // Start the scene
 scn.startScene();
 }
}
and our duck looks like this:
Shiny Duck