WebGL环境光：让你的3D模型不再沉寂

前端

2024-02-02 15:50:12

环境光：点亮你的 WebGL 3D 世界

导语

在上一节的学习中，我们初步了解了光照并实战了平行光的漫反射效果。然而，现实中即使光线直射垂直 X 的面，但其余的面应该不至于是纯黑色的吧？那是因为除了平行光以外，还存在着一种叫做环境光的光照类型。

环境光：均匀的光芒

环境光是一种均匀地分布在整个场景中的光照，它可以模拟来自天空、太阳或其他光源的漫反射光。有了环境光，我们的 3D 模型就不会再是死气沉沉的，而是能够更加真实地展现出来。

环境光的工作原理

环境光是一种简单的光照类型，它不需要考虑光源的位置或方向。环境光的作用是均匀地照亮整个场景，使场景中的所有物体都能够被看到。环境光通常使用一种固定的颜色来表示，这种颜色可以是白色、灰色或其他任何颜色。

WebGL 中的环境光

在 WebGL 中，我们可以使用环境光来照亮我们的 3D 模型。为了使用环境光，我们需要在顶点着色器中声明一个环境光变量，并将其传递给片段着色器。在片段着色器中，我们可以使用环境光变量来计算每个片段的颜色。

代码示例

// 顶点着色器
attribute vec3 position;
attribute vec3 normal;

uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform vec3 lightPosition;
uniform vec3 lightColor;

varying vec3 vPosition;
varying vec3 vNormal;

void main() {
  vPosition = position;
  vNormal = normal;

  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

// 片段着色器
precision mediump float;

varying vec3 vPosition;
varying vec3 vNormal;

uniform vec3 ambientLightColor;

void main() {
  vec3 ambientLight = ambientLightColor * vNormal;

  gl_FragColor = vec4(ambientLight, 1.0);
}