WebGL初学必修的光照详解

2023-04-11 12:07:03

WebGL 中的光照：赋予 3D 图形以生命力

光照在 3D 图形中的重要性

光照是 WebGL 中塑造逼真 3D 图形体验的核心元素之一。就像在现实世界中一样，光线照射在物体上时，会发生反射、折射和吸收等现象。这些相互作用决定了我们如何感知物体的颜色、纹理和形状。在 WebGL 中，我们需要模拟这些光照现象，以创建引人入胜且令人信服的 3D 场景。

光照的基础概念

要理解光照在 WebGL 中的实现，我们首先需要了解一些基本概念：

光源：光源是发光实体，可以是点光源、方向光源或聚光灯。
材质：材质定义了物体对光线的反应方式，包括漫反射、镜面反射和透明度。
法线：法线是物体表面上一点的单位向量，用于确定物体表面的朝向。
着色器 ：着色器是 WebGL 程序，用于计算每个像素的光照效果。

光照的实现

在 WebGL 中，光照通过顶点着色器和片元着色器来实现。顶点着色器主要负责计算顶点的法线，而片元着色器则负责计算每个像素的光照效果。

顶点着色器：

顶点着色器主要执行以下任务：

传递顶点位置和法线到片元着色器。
应用模型视图和投影矩阵来变换顶点坐标。

片元着色器：

片元着色器执行更复杂的光照计算：

计算光源方向和法线方向。
计算漫反射光和环境光。
根据材质属性混合不同类型的光照。

代码示例

以下是顶点着色器和片元着色器的示例代码：

顶点着色器：

attribute vec3 position;
attribute vec3 normal;

uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;

void main() {
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  gl_Normal = normalize(normal);
}

片元着色器：

uniform vec3 lightPosition;
uniform vec3 lightColor;
uniform vec3 ambientLightColor;

void main() {
  // 计算光源方向和法线方向
  vec3 lightDirection = normalize(lightPosition - position);
  vec3 normalDirection = normalize(gl_Normal);

  // 计算漫反射光
  float diffuse = max(dot(lightDirection, normalDirection), 0.0);
  vec3 diffuseColor = diffuse * lightColor;

  // 计算环境光
  vec3 ambientColor = ambientLightColor;

  // 计算最终颜色
  vec3 finalColor = diffuseColor + ambientColor;

  gl_FragColor = vec4(finalColor, 1.0);
}