Web编程技术营地
研究、演示、创新

环境光

撰写时间:2026-07-03

修订时间:2026-07-03

环境光的概念及作用

环境光是场景中整个环境的统一的光照。不管场景中有多少个网格物体,也不管各个网格物体具有什么样的颜色,环境光都会影响到所有网格物体的光照。

在一个封闭的房间里,如果没有任意光源,则环境光为全黑,此时场景中的各个网格物体将不可见。若在房间中打开一盏灯泡,则灯泡将为整个场景提供一个统一的环境光。并且,灯泡光源若有特定的颜色,则场景所有网格物体都会受此环境光颜色的影响。

一般来讲,环境光应是较暗的一种光源,以允许场景中另行添加其它的诸如点光、平行光、聚光等光照效果。如果环境光太强,则场景中所有网格物体将不可避免地趋向于统一的光照颜色。

环境光没有位置、没有方向,能均量散布在场景的任何位置。

对于环境光,网格物体的表面无论在任何位置、任何朝向,其反射的环境光的强度都是一样的。

任何表面对环境光的反射颜色值等于表面的颜色值乘以环境光的颜色值。公式如下:

Scatteredsurface = Colorsurface × Colorambient

环境光不需要物体表面的法线参与运算。

源代码

顶点着色器

与之前代码相比,顶点着色器的代码完全一样。

片断着色器

因为环境光是一种影响全局的光源,因此将代表其的变量uAmbient设置为uniform的数据类型。

与之前代码相比,使用baseColor来存储各网格物体的基本颜色。

然后,变量scatteredLight代表漫反射的光源。在本例中,漫反射光源只有环境光一种光源。

其次,将baseColorrgb成分与环境光scatteredLight相乘。只让baseColorrgb成分参与运算的原因是,如果baseColoralpha值,则该值不受运算结果的影响。

接着,将其结果钳制在[0.0, 1.0]的范围之内并赋值于变量rgb。如果有多层步骤的运算,则这种钳制行为可置于最后的环节进行。在中间运算过程中,rgb的值可允许超过[0.0, 1.0]的范围。

最后,重新加入baseColoralpha值后,向fragColor赋值,以送至帧缓冲区渲染。

客户端主要代码

ambientrgb成分值均取值0.2,以营造一种较暗的环境光效果。

尽管在片断着色器中实际未使用ambientalpha通道值,但对于所有的光照颜色值,客户端将统一使用rgba的形式。

运行应用

参考资源

  1. WebGL 1.0 Specification
  2. WebGL 2.0 Specification
  3. OpenGL ES 3.0 Reference Pages