Materials in WebGL and p5.js

In this article, we will learn how to apply different types of material in WebGL. Light reflects off objects differently depending on their angle of reflection as well as the material of the object. There are four types of materials in p5.js:

• Basic Material: It fills the geometry with the given color, but it is not affected by light. It is defined with the fill() method.
• Normal Material: It does not take any parameter and maps automatically to the RGB color space. It is defined with the normalMaterial() method.
• Ambient Material: It reflects only if there is the light of a particular color. It is defined with the ambientMaterial() method.
• Specular Material: It is the most realistic of all four materials. Specular is a technical way of describing a material that reflects light in a single direction. It is defined with the specularMaterial() method.

Example 1: Using the fill() method.

Javascript

let angle = 0.3;

function setup() {
  createCanvas(600, 400, WEBGL);
}

function draw() {

  // Set the background
  background(250);

  fill(200,0,255);

  push();

  // Rotate on all three axis.
  rotateX(angle*0.3);
  rotateY(angle*0.6);
  rotateZ(angle*0.9);

  // Set the shape
  torus(150, 30);

  angle +=0.06;
  pop();
}

Output:

Example 2: Using the normalMaterial() method.

Javascript

let angle = 0.3;

function setup() {
  createCanvas(600, 400, WEBGL);
}

function draw() {

  // Set the background
  background(250);

  // Set the material type.
  normalMaterial();

  push();

  // Rotate on all three axis.
  rotateX(angle*0.3);
  rotateY(angle*0.6);
  rotateZ(angle*0.9);

  // Set the shape
  torus(150, 30);

  angle +=0.06;
  pop();
}

Output:

Example 3: Using ambientMaterial() when there is no light.

Javascript

let angle = 0.3;

function setup() {
  createCanvas(600, 400, WEBGL);
}

function draw() {

  // Set the background
  background(250);

  // Set the material
  ambientMaterial(0,0,255);
  push();

  // Rotate on all three axis.
  rotateX(angle*0.3);
  rotateY(angle*0.6);
  rotateZ(angle*0.9);

  // Set the shape
  torus(150, 30);

  angle +=0.06;
  pop();
}

Output:

Example 4: Using ambientMaterial() when there is light that is being reflected.

Javascript

let angle = 0.3;

function setup() {
  createCanvas(600, 400, WEBGL);
}

function draw() {

  //set the  light
  pointLight(0,0,255 ,200,-200,0)

  // Set the background
  background(250);

  // Set the material
  ambientMaterial(0,0,255);
  push();

  // Rotate on all three axis.
  rotateX(angle*0.3);
  rotateY(angle*0.6);
  rotateZ(angle*0.9);

  // Set the shape
  torus(150, 30);

  angle +=0.06;
  pop();
}

Output:

Example 4: Using specularMaterial() method.

Javascript

let angle = 0.3;

function setup() {
  createCanvas(600, 400, WEBGL);
}

function draw() {

  // Set the  light
  pointLight(255,255,0 ,200,-200,0)

  // Set the background
  background(250);

  // Set the material
  specularMaterial(250, 0, 0);
  push();

  // Rotate on all three axis.
  rotateX(angle*0.3);
  rotateY(angle*0.6);
  rotateZ(angle*0.9);

  //Set the shape
  torus(150, 30);

  angle +=0.06;
  pop();
}

Output: