如何使用p5.js设计Phong Shading图形

Phong Shading 是一种特定的3D计算机图形着色技术，用于平滑多面形状，近似表面高光，并创建更复杂的计算机生成图像。专家将该技术称为“插值”，其中Phong Shading可视化了三维模型的更平滑表面。Phong模型还非常有用，可以学习更高级的渲染技术。

Phong Shading具有以下特点：

能够产生多边形中间发生的高光。
每个像素执行光照计算。
法向量在多边形上进行插值。
Phong Shading算法： Phong Shading包含三个不同的组成部分：
Ambient： 这个组件近似于来自表面的所有非定向环境光。
Diffuse： 这个组件近似于从光源开始反射到粗糙或非光亮的表面上的光。
Specular： 这个组件确定物体发光的程度。

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

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

多光源的模型是： multiple light sources

[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。环境和漫反射组分的颜色都是紫色，镜面反射的颜色是白色，反射了光线在物体表面的一个狭窄高光。漫反射组分的强度随着表面的方向和不同的光位置而变化。环境组分均匀着色。

如何使用p5.js设计Phong Shading图形

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

输出：

如何使用p5.js设计Phong Shading图形