如何使用 p5.js 设计 Phong 着色图形？

Phong 着色是 3D 计算机图形学中一种特定类型的着色技术，可用于平滑多表面形状、近似表面高光以及创建更复杂的计算机建模图像。专家将该技术称为“插值”，其中 Phong 着色显示 3D 模型的更平滑表面。 Phong 模型对于了解更高级的渲染技术也非常有用。

Phong 着色具有以下特点：

• 它能够产生出现在多边形中间的高光。
• 照明计算在每个像素处执行。
• 法线向量在多边形上插值。

Phong 着色算法：Phong 着色涉及三个不同的组件：

• 环境：由于环境中的所有非定向环境光，该组件近似于来自表面的光。
• 漫反射：此组件近似于最初来自光源的光，从漫反射或无光泽表面反射。
• 镜面反射：该组件决定了物体的发光程度。

单个光源的完整 Phong 着色模型是：

[ra,ga,ba] + [rd,gd,bd]max0(n•L) + [rs,gs,bs]max0(R•L)p

多光源模型为：

[ra,ga,ba] + Σi( [Lr,Lg,Lb] 
    ( [rd,gd,bd]max0(n•Li) + [rs,gs,bs]max0(R•Li)p ) )

Phong 阴影的视觉插图：这里的光是白色的，位置x=1, y =1, z=-1 。环境和漫反射分量颜色均为紫色，镜面反射颜色为白色，反射一小部分光线以狭窄的高光照射到物体表面。漫反射分量的强度随表面方向和光位置的不同而变化。环境分量被均匀着色。

环境 + 漫反射 + 镜面 = PHONG 阴影

Javascript

function setup() {
  createCanvas(640, 500, WEBGL);
}
  
function draw() {
  
  // Setting the vector values 
  // or the direction of light
  let dx = 300;
  let dy = 200;
  let dz = -600;
  let v = createVector(dx, dy, dz);
  
  // Creating the ambient light 
  ambientLight(0, 0,255);
    
  // Creating the directional light
  // by using the given vector
  directionalLight(255, 0, 0, v);
    
  shininess(255);
  specularColor(255);
  specularMaterial(255);
    
  // Creating the point lights at the
  // given points from the given directions
  pointLight(255, 255, 255, 0, -50, 0);
  pointLight(255, 255, 255, 200,200,30);
    
  rotateX(0.01*frameCount);
  rotateY(0.01*frameCount);
  rotateZ(0.03*frameCount);
    
  // Setting the background
  // to black
  background(0);
  
  noStroke();
  
  fill(255, 0, 0);
  torus(100,25);
}

输出：