Luces en WebGL y p5.js

En este artículo, aprenderemos cómo aplicar diferentes tipos de luces en p5.js. La iluminación es una forma simple pero poderosa de proporcionar profundidad y realismo en los bocetos de p5.js. Hay tres tipos de luces disponibles en p5.js:

• Luz Ambiental: Es la más simple de las tres luces. Proporciona una iluminación ambiental uniforme a los objetos dibujados después. Toma como parámetros un objeto p5.Color o valores numéricos RGB. Se define usando el método ambientLight() .
• Luz direccional: Los rayos de una luz direccional brillan en una dirección dada sin ningún punto de origen específico. No se puede colocar más cerca o más lejos de ninguna geometría. Se define usando el método direccionalLight() .
• Punto de luz: Un punto de luz toma un color y una ubicación como parámetros. Brilla desde un punto de origen específico y, por lo tanto, se refleja de manera diferente cuando está más lejos o más cerca de un objeto. Se define usando el método pointLight() .

Ejemplo 1: uso del método ambientLight() para crear una luz ambiental.

let angle = 0.3;
  
function setup() {
  createCanvas(600, 400, WEBGL);
}
  
function draw() {
    
  // Set the blue light 
  ambientLight(0,0,255);
    
  // Set the background
  background(250);
  
  // Set the material
  ambientMaterial(255);
    
  // Rotate on all three axis.
  rotateX(angle*0.3);
  rotateY(angle*0.6);
  rotateZ(angle*0.9);
    
  // Set the shape
  sphere(150);
  
  angle +=0.06;
}

Producción:

Ejemplo 2: usar el método direccionalLight() para crear una luz direccional.

let angle = 0.3;
  
function setup() {
  createCanvas(600, 400, WEBGL);
}
  
function draw() {
  let dirY = (mouseY / height - 0.5) *2;
  let dirX = (mouseX / width - 0.5) *2;
  
  // Set the directional light 
  directionalLight(0, 0, 250, dirX, -dirY, 0.25);
    
  // Set the background
  background(250);
  
  // Set the material
  normalMaterial();
    
  // Rotate on all three axes
  rotateX(angle*0.3);
  rotateY(angle*0.6);
  rotateZ(angle*0.9);
    
  // Set the shape
  sphere(150);
   
  angle +=0.06;
}

Producción:

Ejemplo 3: Uso del método pointLight() para crear un punto de luz.

let angle = 0.3;
  
function setup() {
  createCanvas(600, 400, WEBGL);
}
  
function draw() {
    
  // Set a point light in the given direction
  pointLight(0, 0, 255, mouseX - 200, mouseY - 200, 200);
    
  // Set the background
  background(250);
  
  // Set the material
  ambientMaterial(255);
    
  // Rotate on all three axes
  rotateX(angle*0.3);
  rotateY(angle*0.6);
  rotateZ(angle*0.9);
  noStroke();
    
  // Set the shape
  sphere(150);
    
  angle +=0.06;
}

Producción: