点亮你的 WebGL 世界：照明篇（上）

2023-10-28 10:33:15

现代网络中，WebGL 已成为构建交互式 3D 场景的行业标准。虽然 WebGL 提供了令人印象深刻的图形功能，但如果没有适当的照明，场景就会显得黯淡无光、缺乏生机。在本文中，我们将深入探讨 WebGL 中照明的艺术，为你的场景带来令人惊叹的逼真感和深度感。

照明类型

在 WebGL 中，有几种不同的照明类型可用：

环境光： 一种全局光照，照亮场景中的所有对象，无论其朝向如何。
漫反射光： 一种取决于表面法线方向的光照，使表面看起来粗糙或漫反射。
镜面反射光： 一种与观察者视线形成角度反射的光照，使表面看起来光滑或镜面反射。

着色器中的照明

在 WebGL 中，照明是通过顶点着色器和片段着色器实现的。顶点着色器负责计算每个顶点的照明，而片段着色器负责将照明值应用于每个片段（像素）。

代码示例

以下代码示例展示了如何在 WebGL 中实现简单的照明：

// 顶点着色器
attribute vec3 aVertexPosition;
attribute vec3 aVertexNormal;

uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;
uniform vec3 uLightPosition;

varying vec3 vVertexPosition;
varying vec3 vVertexNormal;
varying vec3 vLightDirection;

void main() {
  vVertexPosition = aVertexPosition;
  vVertexNormal = aVertexNormal;
  vLightDirection = normalize(uLightPosition - vVertexPosition);

  gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aVertexPosition, 1.0);
}

// 片段着色器
varying vec3 vVertexPosition;
varying vec3 vVertexNormal;
varying vec3 vLightDirection;

uniform vec3 uAmbientColor;
uniform vec3 uDiffuseColor;
uniform vec3 uSpecularColor;

void main() {
  vec3 ambientLight = uAmbientColor;

  vec3 lightDirectionNormalized = normalize(vLightDirection);
  vec3 normalNormalized = normalize(vVertexNormal);
  float diffuseLight = max(dot(lightDirectionNormalized, normalNormalized), 0.0);
  vec3 diffuseColor = uDiffuseColor * diffuseLight;

  vec3 viewDirection = normalize(-vVertexPosition);
  vec3 reflectionDirection = normalize(reflect(lightDirectionNormalized, normalNormalized));
  float specularLight = pow(max(dot(viewDirection, reflectionDirection), 0.0), 32.0);
  vec3 specularColor = uSpecularColor * specularLight;

  vec3 finalColor = ambientLight + diffuseColor + specularColor;

  gl_FragColor = vec4(finalColor, 1.0);
}