WebGL 和 p5.js 中的材料

在本文中，我们将学习如何在 WebGL 中应用不同类型的材质。根据物体的反射角度以及物体的材质，光线会以不同的方式从物体上反射。 p5.js中有四种材质：

• 基本材质：它用给定的颜色填充几何图形，但不受光的影响。它是用 fill() 方法定义的。
• 普通材质：不带任何参数，自动映射到 RGB 颜色空间。它是用 normalMaterial() 方法定义的。
• 环境材质：只有在有特定颜色的光时才会反射。它是使用ambientMaterial() 方法定义的。
• 高光材质：它是所有四种材质中最逼真的。镜面反射是一种描述在单个方向反射光的材料的技术方式。它是用 specularMaterial() 方法定义的。

示例 1：使用 fill() 方法。

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();
}

输出：

示例 2：使用 normalMaterial() 方法。

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();
}

输出：

示例 3：在没有光的情况下使用ambientMaterial()。

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();
}

输出：

示例 4：当有光被反射时使用ambientMaterial()。

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();
}

输出：

示例 4：使用 specularMaterial() 方法。

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();
}

输出：