[WebGL入门]二十二，从环境光源发出的光

浏览数：26 / 时间：2015年06月09日

注：文章译自http://wgld.org/，原作者杉本雅広(doxas)，文章中如果有我的额外说明，我会加上［lufy：］，另外，鄙人webgl研究还不够深入，一些专业词语，如果翻译有误，欢迎大家指正。

平行光源的弱点

上次挑战了一下从平行光源发出的光。平行光源的光的方向是固定的。而且，为了模拟这些，需要用到模型变换矩阵的逆矩阵，以及需要向模型数据中加入法线情报等等。
平行光源的计算负担比较小，在一定程度上模拟了光照效果，在3D模拟世界中经常被用到。但是，平行光源也有弱点，阴面的部分，就是没有被光照到的部分是无法完美的模拟。
比如上次的demo中的定点着色器，仔细观察的话，获取光向量和法线的内积的部分，实际上是取巧的。
>上次的demo中的一部分代码

float diffuse  = clamp(dot(normal, invLight), 0.1, 1.0);

这里使用了GLSL的内置函数clamp，这个函数是将参数的数值限制到指定的范围之内，上面的代码，结果会限制在0.1 ～ 1.0之间。

但是，获取光向量和法线的内积，根据使用场合的不同，可能会出现负数，而使用了clamp函数，即使有负数，也会被指定的最小值0.1代替，假设把clamp的范围设置为0.0 ～ 1.0之间会是什么效果呢，试着运行一下的话，出现下图效果。

这样，完全没有和光发生碰撞的地方会变成完全的黑色。这样会导致无法分清楚模型的轮廓，这就是平行光源的缺点。

就像上次的demo那样，将光照系数的范围设定的大一些，在一定程度上可以解决上述问题。但是使用环境光源的话，可以彻底解决这个问题。

什么是环境光源

环境光是模拟现实世界中的自然光的漫反射。现实世界中，从太阳或是照明器械等发射出的光，遇到物体或者大气中的灰尘等遮挡而发生反射，将世界照亮。比如说，在一个漆黑的屋子里面，只需要一个灯泡，背对着灯泡的话，就会看到自己的影子映射到床或者墙壁上，而自己的身体虽然没有直接被光照到，但是也应该能看得见吧。

由于墙壁和屋顶，以及床和大气中的灰尘等对灯泡发出的光的反射，即使是没有直接被光照到的部分也会受到光的影响。这样，呈现光的漫反射的就是环境光源了。

环境光源用于照亮三维空间中的所有部分。就是说，不是根据顶点的不同处理attribute变量，而是向着色器中传递uniform变量。进一步说，环境光最终影响的是在context中输出的颜色，处理包含四个元素的颜色情报。

>定义环境光的例子

var ambientColor = [0.1,0.1,0.1,1.0];

使用环境光源的时候，需要注意颜色的亮度。环境光照的是全部，比如上面的代码中指定的0.1，如果全都换成1.0的话，模型就会变成全白了。和平行光源不一样，所以要注意。

环境光的颜色，最好是限制在0.2左右以下，这次的demo使用的是0.1。

顶点着色器和javascript的修改

接着，看一下各个代码部分的修改。先从顶点着色器开始看。

>顶点着色器代码

attribute vec3 position;
attribute vec3 normal;
attribute vec4 color;
uniform   mat4 mvpMatrix;
uniform   mat4 invMatrix;
uniform   vec3 lightDirection;
uniform   vec4 ambientColor;
varying   vec4 vColor;

void main(void){
    vec3  invLight = normalize(invMatrix * vec4(lightDirection, 0.0)).xyz;
    float diffuse  = clamp(dot(normal, invLight), 0.0, 1.0);
    vColor         = color * vec4(vec3(diffuse), 1.0) + ambientColor;
    gl_Position    = mvpMatrix * vec4(position, 1.0);
}

上次追加了一个uniform变量，就是vec4型的变量ambientColor。环境光是在平行光源等一连串的计算结束之后，最后输出颜色的阶段开始添加的。

这里，如果不使用加法而使用乘法的话，整个画面都会变暗，所以要特别注意。

接下来，修改主程序。

说起来，只是把环境光作为参数传给顶点着色器，追加的东西还是挺少的。

首先在程序中定义环境光的参数。

>增加环境光参数

var ambientColor = [0.1,0.1,0.1,1.0];

接着，为了正确的传给顶点着色器，追加获取着色器的uniformLocation的部分。

// 将uniformLocation保存到数组中
var uniLocation = new Array();
uniLocation[0] = gl.getUniformLocation(prg, ‘mvpMatrix‘);
uniLocation[1] = gl.getUniformLocation(prg, ‘invMatrix‘);
uniLocation[2] = gl.getUniformLocation(prg, ‘lightDirection‘);
uniLocation[3] = gl.getUniformLocation(prg, ‘ambientColor‘);

接着，作为uniform变量在持续循环的时候传给着色器就行了。

>向着色器中传送环境光的参数

gl.uniformMatrix4fv(uniLocation[0], false, mvpMatrix);
gl.uniformMatrix4fv(uniLocation[1], false, invMatrix);
gl.uniform3fv(uniLocation[2], lightDirection);
gl.uniform4fv(uniLocation[3], ambientColor);

这样，就完成了顶点着色器和javascript程序的修改了。

其实，因为这次引入了环境光源，所以平行光源部分的光照系数设定成了0.0 ～ 1.0，没有被平行光源照到的部分，就会使用纯粹的环境光来照射。