【笔记】《WebGL编程指南》学习-第8章光照（1-光照原理）

现实世界中的物体被光纤照射时，会反射一部分光。只有当反射光线进入你的眼睛时，你才能看到盒子是白色的。

在现实世界中，当光线照射到物体上时，发生了两个重要的现象：

• 根据光源和光线方向，物体不同表面的明暗程度变得不一致。
• 根据光源和光线方向，物体向地面投下影子。

生活中，你可能常常会注意到阴影，却很少注意到明暗差异。实际上正是因为明暗差异给了物体立体感，虽然难以察觉，但它始终存在。虽然上图所示的立方体是纯白色的，但我们还是能够辨认它的每个面，因为它的而每个面受到的光照的成都不同。如你所见，向着光的表面看上去明亮一些，而测着光或背着光的表面看上去就暗一些。正是有了这些差异，立方体看上去才真正像一个立方体。

在三维图形学中术语着色的真正含义就是，根据光照条件重建“物体各表面明暗不一的效果”的过程。物体向地面投下影子的现象，又被成为阴影。本节将讨论前者，而后者留到第10章再讨论。

在讨论着色过程之前，考虑两件事：

• 发出光线的光源的类型。
• 物体表面如何反射光线。

在开始编写代码之前，我们先来理解以下上述两个问题。

---

光源类型

当物体被光线照射时，必然存在发出光线的光源。真实世界的光主要由两种类型：平行光，类似于自然中的太阳光；点光源光，类似于人造灯泡的光。此外，我们还用环境光来模拟真实世界中的非直射光（也就是由光源发出后经过墙壁或其他物体反射后的光）。三维图形学还使用一些其他类型的光，比如用聚合灯光来模拟电筒，车前灯等。本书只讨论前三种基本类型的光。

本书讨论以下三种类型的光源。

平行光：顾名思义，平行光的光线是平行的，平行光具有方向。平行光可以看做是无限远处的光源（比如太阳）发出的光。因为太阳距离地球很远，所以阳光到达地球时可以认为是平行的。平行光很简单，可以用一个方向和一个颜色来定义。

点光源光：点光源光是从一个点向周围的所有方向发出的光。点光源光可以用来表示现实中的灯泡、火焰等。我们需要指定点光源的位置和颜色。光线的方向将根据点光源的位置和被照射之处的位置计算出来，因为点光源的光线的方向在场景内的不同位置是不同的。

环境光：环境光（间接光）是指那些经光源（点光源或平行光源）发出后，被墙壁等物体多次反射，然后照到物体表面上的光。环境光从各个角度照射物体，其强度都是一致的。比如说，在夜间打开冰箱的门，整个厨房都会有些微微亮，这就是环境光的作用。环境光不用指定位置和方向，只需要指定颜色即可。

现在，你已经了解了三种主要的光源类型，下面来讨论物体表面反射光线的几种方式。

---

反射类型

物体向哪个方向反射光，反射的光是什么颜色，取决于以下两个因素：入射光和物体表面的类型。入射光的信息包括入射光的方向和颜色，而物体表面的信息包括表面的固有颜色和反射特性。

物体表面反射光线的方式由两种：漫反射和环境反射。本节的重点是如何很据上述两种信息（入射光和物体表面特性）来计算出反射光的颜色。本节会涉及一些简单的数学计算。

漫反射

漫反射是针对平行光或光源而言的。漫反射的反射光在各个方向上是均匀的，如下图所示。如果物体表面像镜子一样光滑，那么光线就会以特性的角度反射出去；但是现实中的大部分材质，比如纸张、岩石、塑料等，其表面都是粗糙的，在这种情况下反射光就会以不固定的角度反射出去。漫反射就是针对后一种情况而建立的理想反射模型。

在漫反射中，反射光的颜色取决于入射光的颜色、表面的基底色、入射光与表面形成的入射角。我们将入射角定义为入射光与表面的法线形成的夹角，用 θ 表示，那么漫反射光的颜色可以根据下式计算得到：

<漫反射颜色> = <入射光颜色> x <表面基底色> x cos θ

式子中，<入射光颜色>指的是点光源或平行光的颜色，乘法操作是在颜色矢量上逐分量（R、G、B）进行的。因为漫反射光在各个方向上都是”均与“的，所以从任何角度看上去其强度都相等。

环境反射

环境反射是针对环境光而言的。在环境反射中，反射光的方向可以认为就是入射光的反方向。由于环境光照射物体的方式就是个方向均匀的、强度相等的，所以反射光也是各向均匀的，如下图所示。我们可以这样来描述它：

<环境反射颜色>=<入射光颜色>x<表面基底色>

这里的<入射光颜色>实际上也就是环境光的颜色。

当漫反射和环境反射同时存在时，将两者加起来，就会得到物体最终被观察到的颜色：

<表面的反射颜色>=<漫反射光颜色>+<环境反射光颜色>

注意，两种反射光并不一定总是存在，也并不一定要按照上述公式来计算。渲染三维模型时，你可以修改这些公式以达到想要的效果。

下面来建立一个示例程序，在合适的位置放置一个光源，对场景进行着色。首先实现平行光下的漫反射。

---

平行光下的漫反射

如前所述，漫反射的反射光，其颜色与入射光在入射点的入射角 θ有关。平行光入射产生的满反射光的颜色很容易计算，因为平行光的方向唯一的，对于同一个平面上的所有点，入射角是相同的，根据式子计算平行光入射的漫反射光颜色。

<漫反射颜色> = <入射光颜色> x <表面基底色> x cos θ

上式用到了三项数据：

• 平行入射光的颜色
• 表面的基底色
• 入射光与表面形成的入射角 θ

入射光的颜色可能是白色的，比如阳光，也可能是其他颜色的，比如隧道中的橘黄色灯光。我们知道颜色可以用RGB值来表示，比如标准强度的白光颜色就是（1.0, 1.0, 1.0）。物体表面的基底色其实就是”物体本来的颜色“（或者说是”物体在标准白光下的颜色“）。按照式子计算反射光颜色时，我们对 RGB 值的三个分量逐个相乘。

假设入射光是白色（1.0, 1.0, 1.0），而物体表面的基底色是红色（1.0, 0.0, 0.0），而入射角 θ 为 0.0（即入射光垂直入射），根据式子，入射光的红色分量 R 为 1.0，基底色的红色分量 R 为1.0，入射角余弦值 cos θ 为 1.0，那么反射光的红色分量 R 就可以由如下计算得到：

R = 1.0 * 1.0 * 1.0 = 1.0

类似的，我们可以算出绿色分量 G 和蓝色分量 B：

G = 1.0 * 0.0 * 1.0 = 0.0

B = 1.0 * 0.0 * 1.0 = 0.0

根据上面的计算，当白光垂直入射到红色物体的表面时，漫反射光的颜色就变成了红色（1.0, 0.0, 0.0）。而如果是红光垂直入射到白色物体的表面时，漫反射光的颜色也会是红色。这两种情况下，物体在观察者看来就是红色的，这很符合我们在显示世界中的经验。

那么如果入射角 θ 是 90 度，也就是说入射光与表面平行，一点都没有照射到表面上，在这种情况下会怎样呢？根据我们在现实世界中的经验，物体表面应该完全不反光，看上去是黑的。验证一下：当 θ 是 90 度，cos θ 的值是0，那么根据上面的式子，不管入射光的颜色和物体表面基底色是什么，最后得到的漫反射光颜色都为（0.0, 0.0, 0.0），也就是黑色，正如我们预期的那样。同样，如果 θ 是60度，也就是斜射平行光斜射到物体表面上，那么该表面应该还是红色的，只不过比垂直入射时暗一些。根据上式，cos θ 是0.5，漫反射光颜色为 （0.5, 0.0, 0.0），即暗红色。

这个简单的例子帮助你了解了如何计算漫反射光的颜色。但是我们并不知道入射光 θ 是多少，只知道光线的方向。下面我们就来通过光线和物体表面的方向来计算入射角 θ，将式子中的 θ 换成我们更加熟悉的东西。

---

根据光线和表面的方向计算入射角

在程序中，我们没法像前一节最后那样，直接说”入射角 θ 是多少多少度“。我们必须根据入射光的方向和物体表面的朝向，即法线方向来计算出入射角。这并不简单，因为在创建三维建模的时候，我们无法预先确定光线将以怎样的角度照射到每个表面上。但是，我们可以确定每个表面的朝向。在指定光源的时候，再确定光的方向，就可以用这两项信息来计算处入射角了。

幸运的是，我们可以通过计算两个矢量的点积，来计算这两个矢量的夹角余弦值 cos θ。点积运算的使用非常频繁，GLSL ES 内置了点积运算函数。在公式中，我们使用点符号 . 来表示点积运算。这样，cos θ 就可以通过下式计算出来。

这里由两点需要注意：其一，光线方向矢量和表面法线矢量的长度必须为1，否则反射光的颜色就会过暗或过亮。将一个矢量的长度调整为1，同时保持方向不变的过程称之为归一化。GLSL ES 提供了内置的归一化函数，你可以直接使用。

其二，这里所谓的光线反向，实际上是入射方向的反方向，即从入射点指向光源方向，如下图所示。

这里用到了表面的法线方向来参与对 θ 的计算，可是我们还不知道法线的方向。

---

法线：表面的朝向

物体表面的朝向，即垂直于表面的方向，又称法线或法向量。法向量由三个分量，向量（nx, ny, nz）表示从原点（0, 0, 0）指向点（nx, ny, nz）的方向。比如，向量（1, 0, 0）表示 x 轴正方向，向量（0, 0, 1）表示 z 轴正方向。设计到表面和法向量的问题时，必须考虑以下两点：

一个表面具有两个法向量

每个表面都有两个面，”正面“和”背面“。两个面各自具有一个法向量。比如，垂直与z 轴的 xy平面，其正面的法向量为z负半轴，即（0, 0, -1），而正面的法向量为 x 负半轴，即（0, 0, 1）。

在三维图形学中，表面的正面和背面取决与绘制表面时的顶点顺序。当你按照v0, v1, v2, v3 的顶点顺序绘制了一个平面，那么当你从正面观察这个表示时，这4个顶点是顺时针的，而你从背面观察该表面，这4个顶点就是你是真的。如上图，该平面正面的法向量是（0, 0, -1）。

平面的法向量唯一

由于法向量表示的是方向，与位置无关，所以一个平面只有一个法向量。换句话说，平面的任意一点都具有相同的法向量。

进一步来说，即使由两个不同的平面，只要其朝向相同（也就是两个平面平行），法向量也相同。比如说，有一个经过点（10, 98, 9）的平面，只要垂直与 Z 轴，它的法向量仍然是（0, 0, 1）和（0, 0, -1），和经过原点并垂直与z轴的平面一样。

下图左显示了示例程序中的立方体及每个表面的法向量。比如立方体表面上的法向量表示为 n(0, 1, 0)。

一旦计算好每个平面的法向量，接下来的任务就是将数据传给着色器程序。以前程序把颜色作为“逐顶点数据”存储在缓冲区中，并传给着色器。对法向量数据也可以这样做。如上图右所示，每个顶点对应3个法向量，就像之前每个顶点都对应3个颜色值一样。

示例程序 LightedCube 显示了一个处在白色平行光照射下的红色三角形。

---

示例程序（LightedCube.js）

LightedCube.js

//顶点着色器程序var VSHADER_SOURCE =    'attribute vec4 a_Position;'+    'attribute vec4 a_Color;'+    'attribute vec4 a_Normal;'+    //法向量    'uniform mat4 u_MvpMatrix;'+    'uniform vec3 u_LightColor;'+    //光线颜色    'uniform vec3 u_LightDirection;'+    //归一化的世界坐标    'varying vec4 v_Color;'+    'void main(){'+    'gl_Position = u_MvpMatrix * a_Position;'+    //对法向量进行归一化    'vec3 normal = normalize(vec3(a_Normal.xyz));'+    //计算法向量和光线方向的点积    'float nDotL = max(dot(u_LightDirection, normal), 0.0);'+    //计算漫反射光的颜色    'vec3 diffuse = u_LightColor * vec3(a_Color) * nDotL;'+    'v_Color = vec4(diffuse, a_Color.a);'+    '}';//片元着色器程序var FSHADER_SOURCE=    '#ifdef GL_ES\n' +    'precision mediump float;\n' +    '#endif\n' +    'varying vec4 v_Color;' +    'void main() {'+    'gl_FragColor = v_Color;'+    '}';function main() {    //获取canvas元素    var canvas = document.getElementById("webgl");    if(!canvas){        console.log("Failed to retrieve the <canvas> element");        return;    }    //获取WebGL绘图上下文    var gl = getWebGLContext(canvas);    if(!gl){        console.log("Failed to get the rendering context for WebGL");        return;    }    //初始化着色器    if(!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)){        console.log("Failed to initialize shaders.");        return;    }    //设置顶点位置    var n = initVertexBuffers(gl);    if (n < 0) {        console.log('Failed to set the positions of the vertices');        return;    }    //指定清空<canvas>颜色    gl.clearColor(0.0, 0.0, 0.0, 1.0);    gl.enable(gl.DEPTH_TEST);    //获取 u_MvpMatrix 、u_LightColor u_LightDirection 变量的存储位置    var u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_MvpMatrix');    var u_LightColor = gl.getUniformLocation(gl.program, 'u_LightColor');    var u_LightDirection = gl.getUniformLocation(gl.program, 'u_LightDirection');    if(!u_MvpMatrix || !u_LightColor || !u_LightDirection){        console.log("Failed to get the storage location");        return;    }    //设置光线颜色    gl.uniform3f(u_LightColor, 1.0, 1.0, 1.0);    //设置光线方向    var lightDirection = new Vector3([0.5, 3.0, 4.0]);    lightDirection.normalize();    gl.uniform3fv(u_LightDirection, lightDirection.elements);    var mvpMatrix = new Matrix4();    mvpMatrix.setPerspective(30, 1, 1, 100);    mvpMatrix.lookAt(3, 3, 7, 0, 0, 0, 0, 1, 0);    gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements);    gl.clear(gl.COLOR_BUFFER_BIT || gl.DEPTH_BUFFER_BIT);    //绘制立方体    gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);}function initVertexBuffers(gl) {    //    v6----- v5    //   /|      /|    //  v1------v0|    //  | |     | |    //  | |v7---|-|v4    //  |/      |/    //  v2------v3    var vertices = new Float32Array([   //顶点坐标        1.0, 1.0, 1.0,  -1.0, 1.0, 1.0,  -1.0,-1.0, 1.0,   1.0,-1.0, 1.0,  // v0-v1-v2-v3        1.0, 1.0, 1.0,   1.0,-1.0, 1.0,   1.0,-1.0,-1.0,   1.0, 1.0,-1.0,  // v0-v3-v4-v5        1.0, 1.0, 1.0,   1.0, 1.0,-1.0,  -1.0, 1.0,-1.0,  -1.0, 1.0, 1.0,  // v0-v5-v6-v1        -1.0, 1.0, 1.0,  -1.0, 1.0,-1.0,  -1.0,-1.0,-1.0,  -1.0,-1.0, 1.0,  // v1-v6-v7-v2        -1.0,-1.0,-1.0,   1.0,-1.0,-1.0,   1.0,-1.0, 1.0,  -1.0,-1.0, 1.0,  // v7-v4-v3-v2        1.0,-1.0,-1.0,  -1.0,-1.0,-1.0,  -1.0, 1.0,-1.0,   1.0, 1.0,-1.0   // v4-v7-v6-v5    ]);    var colors = new Float32Array([     // 颜色        1, 0, 0,   1, 0, 0,   1, 0, 0,  1, 0, 0,        1, 0, 0,   1, 0, 0,   1, 0, 0,  1, 0, 0,        1, 0, 0,   1, 0, 0,   1, 0, 0,  1, 0, 0,        1, 0, 0,   1, 0, 0,   1, 0, 0,  1, 0, 0,        1, 0, 0,   1, 0, 0,   1, 0, 0,  1, 0, 0,        1, 0, 0,   1, 0, 0,   1, 0, 0,  1, 0, 0    ]);    var normals = new Float32Array([    // 法向量        0.0, 0.0, 1.0,   0.0, 0.0, 1.0,   0.0, 0.0, 1.0,   0.0, 0.0, 1.0,        1.0, 0.0, 0.0,   1.0, 0.0, 0.0,   1.0, 0.0, 0.0,   1.0, 0.0, 0.0,        0.0, 1.0, 0.0,   0.0, 1.0, 0.0,   0.0, 1.0, 0.0,   0.0, 1.0, 0.0,        -1.0, 0.0, 0.0,  -1.0, 0.0, 0.0,  -1.0, 0.0, 0.0,  -1.0, 0.0, 0.0,        0.0,-1.0, 0.0,   0.0,-1.0, 0.0,   0.0,-1.0, 0.0,   0.0,-1.0, 0.0,        0.0, 0.0,-1.0,   0.0, 0.0,-1.0,   0.0, 0.0,-1.0,   0.0, 0.0,-1.0    ]);    var indices = new Uint8Array([       // 顶点索引        0, 1, 2,   0, 2, 3,        4, 5, 6,   4, 6, 7,        8, 9,10,   8,10,11,        12,13,14,  12,14,15,        16,17,18,  16,18,19,        20,21,22,  20,22,23    ]);    if (!initArrayBuffer(gl, 'a_Position', vertices, 3, gl.FLOAT)) return -1;    if (!initArrayBuffer(gl, 'a_Color', colors, 3, gl.FLOAT)) return -1;    if (!initArrayBuffer(gl, 'a_Normal', normals, 3, gl.FLOAT)) return -1;    //创建缓冲区对象    var indexBuffer = gl.createBuffer();    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);    return indices.length;}function initArrayBuffer(gl, attribute, data, num, type) {    var buffer = gl.createBuffer();    if(!buffer){        console.log("Failed to create thie buffer object");        return -1;    }    //将缓冲区对象保存到目标上    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);    //向缓存对象写入数据    gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);    var a_attribute = gl.getAttribLocation(gl.program,attribute);    if(a_attribute < 0){        console.log("Failed to get the storage location of " + attribute);        return -1;    }    gl.vertexAttribPointer(a_attribute, num, type, false, 0, 0);    gl.enableVertexAttribArray(a_attribute);    return true;}

注意，顶点着色器实现了：

计算漫反射光颜色需要：

1. 入射光颜色
2. 表面基底色
3. 入射光方向

4. 表面法线方向

   其中后两者必须是归一化的。

顶点着色器

顶点着色器中的 a_Color 变量表示表面基底色，a_Normal 变量表示表面法线方向，u_LightColor 变量表示入射光颜色，u_LightDirection 变量表示入射光方向。注意，入射光方向 u_LightDirection 实在世界坐标下的，而且在传入着色器前已经在 JS 中归一化了。这样，我们就可以避免在顶点着色器每次执行时都对它进行归一化。

var VSHADER_SOURCE =    'attribute vec4 a_Position;'+    'attribute vec4 a_Color;'+    'attribute vec4 a_Normal;'+    //法向量    'uniform mat4 u_MvpMatrix;'+    'uniform vec3 u_LightColor;'+    //光线颜色    'uniform vec3 u_LightDirection;'+    //归一化的世界坐标    'varying vec4 v_Color;'+    'void main(){'+    'gl_Position = u_MvpMatrix * a_Position;'+    //对法向量进行归一化    'vec3 normal = normalize(vec3(a_Normal.xyz));'+    //计算法向量和光线方向的点积    'float nDotL = max(dot(u_LightDirection, normal), 0.0);'+    //计算漫反射光的颜色    'vec3 diffuse = u_LightColor * vec3(a_Color) * nDotL;'+    'v_Color = vec4(diffuse, a_Color.a);'+    '}';

有了这些信息，就可以开始在顶点着色器中进行计算了。首先对 a_Normal 进行归一化。严格地说，本例通过缓冲区传入的法向量都是已经归一化过的，所以实际上这一步可以略去。但是顶点着色器可不知道传入的矢量是否经过了归一化，而且这里没有节省开销的理由，所以，有这一步总比没有要好：

    'vec3 normal = normalize(vec3(a_Normal.xyz));'+

a_Normal 变量是 vec4 类型的，使用前三个分量x、y和 z 表示法线法相，所以我们将这三个分量提取出来进行归一化。对vec3 类型的变量进行归一化不必这样做。本例使用 vec4 类型的 a_Normal 变量是为了方便对下一个示例程序进行扩展。GLSL ES 提供了内置函数 normalize(）对矢量参数进行归一化。归一化的结果赋给了 vec3类型的 normal 变量，供之后使用。

接下来，计算点积。光线方向存储在 u_LightDirection 变量中，而且已经被归一化了，可以直接使用。法线方向存储在之前进行归一化后的结果 normal 变量中。使用 GLSL ES 提供的内置函数 dot(）计算两个矢量的点积，该函数接受两个矢量作为参数，返回它们的点积。

    'float nDotL = max(dot(u_LightDirection, normal), 0.0);'+

如果点积大于0，就将点积赋值给 nDotL 变量，如果其小于0，就将0赋给该变量。使用内置函数 max（）完成这个任务，将点积和0两者中的较大者赋值给 nDotL。

点积值小于0，意味着 cos θ 中的 θ 大于90度。 θ 是入射角，也就是入射反方向与表面法向量的夹角 。 θ大于90度说明光线照射在表面的背面上，此时，将nDotL 赋为 0.0。

现在准备工作都已经就绪了，我们在顶点着色器中直接计算。注意 a_Color 变量即顶点的颜色，被从vec4对象转成了 vec3 对象，因为其第4个分量与式子无关。

实际上，物体表面的透明度确实会影响物体的外观。但这时光照的计算较为复杂，现在暂时认为物体都是不透明的，这样就计算出了漫反射光的颜色 diffuse：

    'vec3 diffuse = u_LightColor * vec3(a_Color) * nDotL;'+

然后，将 diffuse 的值赋给 v_Color 变量。v_Color 是 vec4 对象，而 diffuse 是 vec3 对象，需要将第4个分量补上为1.0。

    'v_Color = vec4(diffuse, a_Color.a);'+

顶点着色器运行的记过就是计算出了 v_Color 变量，其值取决于顶点的颜色、法线方向、平行光的颜色和方向。v_Color 变量将被传入片元着色器并赋值给 gl_FragColor 变量。本例中的光是平行光，所以立方体上同一个面的颜色是一直的，没有之前出现的颜色渐变效果。

这就是顶点着色器的代码，下面来看一下JS程序如何将数据传给顶点着色器并计算。

JS 程序流程

JS 将光的颜色 u_LightColor 和方向 u_LightDirection 传给顶点着色器。首先用 gl.uniform3f(）函数将 u_LightColor 赋值为（1.0, 1.0, 1.0），表示入射光是白光：

  gl.uniform3f(u_LightColor, 1.0, 1.0, 1.0);

下一步是设置光线方向，注意光线方向必须被归一化。cuon-matrix.js 为 vector3 类型提供了 normalize(）函数，以实现归一化。该函数的用法非常简单：在你想要进行归一化的 Vector3 对象上调用 normalize(）函数即可。注意 JS 和 GLSL ES 对矢量进行归一化的不同之处。

 var lightDirection = new Vector3([0.5, 3.0, 4.0]);    lightDirection.normalize();    gl.uniform3fv(u_LightDirection, lightDirection.elements);

归一化后的光线方向以 Float32Array 类型的形式存储在 lightDirection 对象的 elements 属性中，使用 gl.uniform3fv(）将其分配给着色器中的 u_LightDirection 变量。

最后，在 initVertexBuffers(）函数中为每个顶点定义法向量。法向量数据存储在 normals 数组中，然后被 initArrayBuffer(）函数传给了顶点着色器的 a_Normal 变量。

    if (!initArrayBuffer(gl, 'a_Normal', normals, 3, gl.FLOAT)) return -1;

initArrayBuffer(）函数的作用是将第3个参数指定的数组分配给第2个参数指定的着色器中的变量。

---

环境光下的漫反射

现在，我们已经成功实现了平行光下的漫反射光。但是结果图和显示中的立方体还是有点不大一样，特别是右侧表面是全黑的，仿佛不存在一样。如果这个立方体动起来，你也许就能看的更清楚一些，试着运行程序 Lighted_Cube_animation，如图所示：

虽然程序是严格按照式子对场景进行光照的，但经验告诉我们肯定有什么对方不对劲。在现实世界中，光照下物体的个表面的差异不会如此分明：那些背光的面虽然会暗一些，但决不至于黑到看不见的成都。实际上，那些背光的面是被非直射光着凉的，前面提到的环境光就起到了这部分非直射光的作用，它使场景更加逼真。因为环境光均匀地从各个角度照在物体表面，所以由环境光反射产生的颜色只去取决与光的颜色和表面基底色，使用式子计算后我们再来看一下：

接下来，向示例程序中加入上式中的环境光所产生的反射光颜色：

环境光是由墙壁等其物体反射产生的，所以环境光的强度通常比较弱。假设环境光是较弱的白光（0.2, 0.2, 0.2），为物体表面是红色的（1.0, 1.0, 1.0）。根据式子，由环境光反射的光颜色就是暗红色（0.2, 0.0, 0.0）。同样，在蓝色的空间中，环境光为（0.0, 0.0, 0.2），有一个白色的物体，即表面基底色为（1.0, 1.0, 1.0），那么由环境光产生的漫反射光颜色就是淡蓝色（0.0, 0.0, 0.2）。

示例程序 LightedCube_ambient 实现了环境光漫反射的效果，如下图所见。可见，完全没有被平行光照到的表面也不是全黑，而是呈现较暗的颜色，与真实世界更加相符。

示例程序（LightedCube_ambient .js）

LightedCube_ambient.js

//顶点着色器程序var VSHADER_SOURCE =    'attribute vec4 a_Position;'+    'attribute vec4 a_Color;'+    'attribute vec4 a_Normal;'+    //法向量    'uniform mat4 u_MvpMatrix;'+    'uniform vec3 u_LightColor;'+    //光线颜色    'uniform vec3 u_LightDirection;'+    //归一化的世界坐标    'uniform vec3 u_AmbientLight;'+    //环境光颜色    'varying vec4 v_Color;'+    'void main(){'+    'gl_Position = u_MvpMatrix * a_Position;'+    //对法向量进行归一化    'vec3 normal = normalize(vec3(a_Normal.xyz));'+    //计算法向量和光线方向的点积    'float nDotL = max(dot(u_LightDirection, normal), 0.0);'+    //计算漫反射光的颜色    'vec3 diffuse = u_LightColor * vec3(a_Color) * nDotL;'+    //计算环境光产生的反射颜色    'vec3 ambient = u_AmbientLight * a_Color.rgb;'+    'v_Color = vec4(diffuse + ambient, a_Color.a);'+    '}';//片元着色器程序var FSHADER_SOURCE=    '#ifdef GL_ES\n' +    'precision mediump float;\n' +    '#endif\n' +    'varying vec4 v_Color;' +    'void main() {'+    'gl_FragColor = v_Color;'+    '}';function main() {    //获取canvas元素    var canvas = document.getElementById("webgl");    if(!canvas){        console.log("Failed to retrieve the <canvas> element");        return;    }    //获取WebGL绘图上下文    var gl = getWebGLContext(canvas);    if(!gl){        console.log("Failed to get the rendering context for WebGL");        return;    }    //初始化着色器    if(!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)){        console.log("Failed to initialize shaders.");        return;    }    //设置顶点位置    var n = initVertexBuffers(gl);    if (n < 0) {        console.log('Failed to set the positions of the vertices');        return;    }    //指定清空<canvas>颜色    gl.clearColor(0.0, 0.0, 0.0, 1.0);    gl.enable(gl.DEPTH_TEST);    //获取 u_MvpMatrix 、u_LightColor u_LightDirection u_AmbientLight 变量的存储位置    var u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_MvpMatrix');    var u_LightColor = gl.getUniformLocation(gl.program, 'u_LightColor');    var u_LightDirection = gl.getUniformLocation(gl.program, 'u_LightDirection');    var u_AmbientLight = gl.getUniformLocation(gl.program, 'u_AmbientLight');    if(!u_MvpMatrix || !u_LightColor || !u_LightDirection || !u_AmbientLight){        console.log("Failed to get the storage location");        return;    }    //设置光线颜色    gl.uniform3f(u_LightColor, 1.0, 1.0, 1.0);    //设置光线方向    var lightDirection = new Vector3([0.5, 3.0, 4.0]);    lightDirection.normalize();    gl.uniform3fv(u_LightDirection, lightDirection.elements);    //传入环境光颜色    gl.uniform3f(u_AmbientLight, 0.2, 0.2, 0.2);    var mvpMatrix = new Matrix4();    mvpMatrix.setPerspective(30, 1, 1, 100);    mvpMatrix.lookAt(3, 3, 7, 0, 0, 0, 0, 1, 0);    gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements);    gl.clear(gl.COLOR_BUFFER_BIT || gl.DEPTH_BUFFER_BIT);    //绘制立方体    gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);}function initVertexBuffers(gl) {    //    v6----- v5    //   /|      /|    //  v1------v0|    //  | |     | |    //  | |v7---|-|v4    //  |/      |/    //  v2------v3    var vertices = new Float32Array([   //顶点坐标        1.0, 1.0, 1.0,  -1.0, 1.0, 1.0,  -1.0,-1.0, 1.0,   1.0,-1.0, 1.0,  // v0-v1-v2-v3        1.0, 1.0, 1.0,   1.0,-1.0, 1.0,   1.0,-1.0,-1.0,   1.0, 1.0,-1.0,  // v0-v3-v4-v5        1.0, 1.0, 1.0,   1.0, 1.0,-1.0,  -1.0, 1.0,-1.0,  -1.0, 1.0, 1.0,  // v0-v5-v6-v1        -1.0, 1.0, 1.0,  -1.0, 1.0,-1.0,  -1.0,-1.0,-1.0,  -1.0,-1.0, 1.0,  // v1-v6-v7-v2        -1.0,-1.0,-1.0,   1.0,-1.0,-1.0,   1.0,-1.0, 1.0,  -1.0,-1.0, 1.0,  // v7-v4-v3-v2        1.0,-1.0,-1.0,  -1.0,-1.0,-1.0,  -1.0, 1.0,-1.0,   1.0, 1.0,-1.0   // v4-v7-v6-v5    ]);    var colors = new Float32Array([     // 颜色        1, 0, 0,   1, 0, 0,   1, 0, 0,  1, 0, 0,        1, 0, 0,   1, 0, 0,   1, 0, 0,  1, 0, 0,        1, 0, 0,   1, 0, 0,   1, 0, 0,  1, 0, 0,        1, 0, 0,   1, 0, 0,   1, 0, 0,  1, 0, 0,        1, 0, 0,   1, 0, 0,   1, 0, 0,  1, 0, 0,        1, 0, 0,   1, 0, 0,   1, 0, 0,  1, 0, 0    ]);    var normals = new Float32Array([    // 法向量        0.0, 0.0, 1.0,   0.0, 0.0, 1.0,   0.0, 0.0, 1.0,   0.0, 0.0, 1.0,        1.0, 0.0, 0.0,   1.0, 0.0, 0.0,   1.0, 0.0, 0.0,   1.0, 0.0, 0.0,        0.0, 1.0, 0.0,   0.0, 1.0, 0.0,   0.0, 1.0, 0.0,   0.0, 1.0, 0.0,        -1.0, 0.0, 0.0,  -1.0, 0.0, 0.0,  -1.0, 0.0, 0.0,  -1.0, 0.0, 0.0,        0.0,-1.0, 0.0,   0.0,-1.0, 0.0,   0.0,-1.0, 0.0,   0.0,-1.0, 0.0,        0.0, 0.0,-1.0,   0.0, 0.0,-1.0,   0.0, 0.0,-1.0,   0.0, 0.0,-1.0    ]);    var indices = new Uint8Array([       // 顶点索引        0, 1, 2,   0, 2, 3,        4, 5, 6,   4, 6, 7,        8, 9,10,   8,10,11,        12,13,14,  12,14,15,        16,17,18,  16,18,19,        20,21,22,  20,22,23    ]);    if (!initArrayBuffer(gl, 'a_Position', vertices, 3, gl.FLOAT)) return -1;    if (!initArrayBuffer(gl, 'a_Color', colors, 3, gl.FLOAT)) return -1;    if (!initArrayBuffer(gl, 'a_Normal', normals, 3, gl.FLOAT)) return -1;    //创建缓冲区对象    var indexBuffer = gl.createBuffer();    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);    return indices.length;}function initArrayBuffer(gl, attribute, data, num, type) {    var buffer = gl.createBuffer();    if(!buffer){        console.log("Failed to create thie buffer object");        return -1;    }    //将缓冲区对象保存到目标上    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);    //向缓存对象写入数据    gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);    var a_attribute = gl.getAttribLocation(gl.program,attribute);    if(a_attribute < 0){        console.log("Failed to get the storage location of " + attribute);        return -1;    }    gl.vertexAttribPointer(a_attribute, num, type, false, 0, 0);    gl.enableVertexAttribArray(a_attribute);    return true;}

顶点着色器中新增加了 u_AmbientLight 变量用来接收环境光的颜色。使用该变量和表面的基底色 a_Color 计算出反射光的颜色，将其存储在 ambient 变量中。这样我们就即由环境光反射产生的颜色 ambient，又有了由平行光漫反射产生的颜色 diffuse。最后根据式子计算物体的最终颜色并存储在 v_Color 变量中，作为物体表面最终显示处的颜色，和 LightCube 一样。

如你所见，与 LightCube 相比，本例对顶点着色器的 v_Color 变量加上了 ambient 变量，就使得整个立方体变量了一些，这正式环境光从各个方向均匀照射在立方体上产生的。