在WebGL中探索点光源的奥秘，开启光照效果的无限可能！

2023-03-13 21:56:36

点亮场景：揭秘 WebGL 中的点光源

点亮你的 WebGL 世界

在前面两篇文章中，我们探索了平行光和环境光在 WebGL 中的作用，现在是时候向我们的光照库中添加一个新成员了——点光源。点光源就像小型的发光球体，它们的光线向各个方向发散，营造出更真实、更有层次感的照明效果。

理解点光源的工作原理

与平行光和环境光不同，点光源占据了三维空间中的一个特定位置。这意味着它们的照明效果会随着光源与物体的距离而衰减，就像我们现实世界中的灯泡一样。随着你移动场景中的摄像机，你将看到点光源对场景的影响随之改变，这创造了动态的照明环境。

在 WebGL 中实现点光源

要在 WebGL 中实现点光源，我们需要进行一些编程调整。首先，我们需要在场景中创建点光源对象，并设置其位置、颜色和强度等属性。接下来，我们需要修改顶点着色器和片元着色器，以计算顶点与光源之间的距离，并将此信息传递给片元着色器。最后，片元着色器将根据距离计算光源对每个片元的影响，并将其添加到最终的片元颜色中。

代码示例

为了更直观地理解点光源在 WebGL 中的实现，让我们看看一些代码示例：

// 创建点光源
var pointLight = new THREE.PointLight(0xffffff, 1, 100);

// 设置点光源的位置
pointLight.position.set(0, 5, 0);

// 将点光源添加到场景中
scene.add(pointLight);

// 修改顶点着色器
var vertexShader = `
  attribute vec3 aPosition;

  uniform mat4 uModelMatrix;
  uniform mat4 uViewMatrix;
  uniform mat4 uProjectionMatrix;

  uniform vec3 uLightPosition;

  varying float vDistanceToLight;

  void main() {
    vec4 position = uModelMatrix * vec4(aPosition, 1.0);
    gl_Position = uProjectionMatrix * uViewMatrix * position;

    // 计算顶点和光源之间的距离
    vDistanceToLight = distance(position.xyz, uLightPosition);
  }
`;

// 修改片元着色器
var fragmentShader = `
  precision mediump float;

  varying float vDistanceToLight;

  uniform vec3 uLightColor;
  uniform float uLightIntensity;

  void main() {
    // 计算衰减系数
    float attenuation = max(1.0 - vDistanceToLight / 100.0, 0.0);

    // 计算最终的片元颜色
    vec3 color = uLightColor * uLightIntensity * attenuation;

    gl_FragColor = vec4(color, 1.0);
  }
`;