首页 > 代码库 > [WebGL入门]二十三，反射光的光照效果

[WebGL入门]二十三，反射光的光照效果

2024-07-25 19:40:08   222人阅读

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



本次的demo的运行结果

各种各样的光照

上次，以及上上次，介绍了通过顶点着色器来实现光照效果。
最开始介绍了从平行光源发出的光，上次介绍了平行光源的缺点，以及对应这个缺点的方法，就是环境光源。
这次是光照处理的第三篇，进一步介绍反射光照。
反射光和它的名字一样，就是模拟光的反射。通过反射光，可以让3D场景更加的真实。
具体点儿说，反射光可以让模型呈现出光泽，就像金属那样，有光滑质感的表面。所以反射光的作用是很大的。
顺便说一下，specular直接翻译的话，是镜面反射，就是像镜子那样反射的意思。

反射光的概念

从平行光源发出的扩散光的光照，通过光的方向（光向量）和面的方向（面法线向量），来计算这个面的扩散程度，从而实现光照。光照最强的地方就是模型的颜色，反之，没有被光照到的地方，就会变成暗色。

但是，像金属那样的质感，就是光泽的表现，只用扩散光就不够了。为什么呢，光照最强的部分，也只不过是显示了模型的原来的颜色，要想表现出光泽，则需要表现一下高亮这样的强光效果。

修改顶点着色器，只通过扩散光虽然也可以实现高亮效果，但是大部分场合都会感觉不自然。这是因为扩散光是不会考虑视线的。扩散光，只是考虑光的方向和面的方向。而反射光，则会考虑观看模型的视线和光的方向，表现出的高亮部分会非常的自然。

表示视线的向量和表示光的向量，再加上面法线向量，可以算出反射光的强度。想一下的话，就是从光源发出的光，撞到模型上发生反射，反射的光的方向如果正好和视线一致的话，这就是最强光了。如下图所示：


像这样模拟反射光，就不得不进行高负荷的计算。这里，有一个手法，可以用比较简单的处理来得到相似的结果，就是通过光向量和视线向量的中间向量来求反射光的类似效果。

使用中间向量得到的反射光的近似处理，首先求出光向量和视线向量的中间向量，然后求中间向量和面法线向量的内积，从而决定反射光的强度。

和面法线向量的内积在之前也做过了吧。在平行光源的计算的时候，就计算了光向量和面法线向量的内积。和这个处理流程是一样的，这次求一下中间向量和面法线向量的内积。这样，就可以简单的模拟反射光的效果了。



顶点着色器的修改

这次和上次一样，全都在顶点着色器中进行计算，将最终计算的颜色情报传给片段着色器。
>顶点着色器的代码
attribute vec3 position;
attribute vec3 normal;
attribute vec4 color;
uniform   mat4 mvpMatrix;
uniform   mat4 invMatrix;
uniform   vec3 lightDirection;
uniform   vec3 eyeDirection;
uniform   vec4 ambientColor;
varying   vec4 vColor;

void main(void){
    vec3  invLight = normalize(invMatrix * vec4(lightDirection, 0.0)).xyz;
    vec3  invEye   = normalize(invMatrix * vec4(eyeDirection, 0.0)).xyz;
    vec3  halfLE   = normalize(invLight + invEye);
    float diffuse  = clamp(dot(normal, invLight), 0.0, 1.0);
    float specular = pow(clamp(dot(normal, halfLE), 0.0, 1.0), 50.0);
    vec4  light    = color * vec4(vec3(diffuse), 1.0) + vec4(vec3(specular), 1.0);
    vColor         = light + ambientColor;
    gl_Position    = mvpMatrix * vec4(position, 1.0);
}
这次没有增加attribute变量，而是增加了表示视线向量的uniform变量eyeDirection，视线向量并不是每个顶点情报都不同，所有的顶点都是一致的处理，所以使用了uniform修饰符。
和平行光源发出的扩散光原理一样，使用模型坐标变换矩阵的逆矩阵来对视线向量进行变换，变换之后的视线向量和光向量的中间向量保存到halfLE中，然后和面法线向量求内积，进行光反射计算。
这里新出现了一个内置函数，就是给变量specular赋值的时候的时候使用的函数pow，这个函数是用来求幂的，比如2的平方，2的三次方等计算。
因为反射光是为了体现强光照射，根据内积得到的结果进行求幂运算，然后限制结果范围。由内积得到的结果用clamp函数将范围限制在0.0 ～ 1.0，求幂之后，小的数，会变的越来越小，而最强光的状态就是1，无论求多少次幂，也依然是1。

反射光根据求幂运算，让弱光的效果更弱，而强光的效果则不变。这样，就更能体现强光的反射效果。另外，降低求幂的次数，则会将该部分的亮点覆盖的范围会变大，要实现局部闪烁等效果的时候，适当的对求幂的次数进行控制就能实现了。
反射光的强度系数的使用和环境光的原理相同，所以颜色部分也使用加法运算，最终的颜色计算公式如下。
颜色＝顶点颜色 * 扩散光 + 反射光 + 环境光
注意只有顶点颜色和扩散光的计算是乘法。

修改javascript代码

接着修改主要的代码部分。
顶点着色器做了几个比较复杂的修改，但是修改并不算多，主要是利用uniform变量来传入视线向量的处理。
>取得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, ‘eyeDirection‘);
uniLocation[4] = gl.getUniformLocation(prg, ‘ambientColor‘);
取得正确的uniformLocation之后，再定义视线向量并传给着色器。基本上，把在生成视图坐标变换矩阵的时候所指定的镜头的坐标，当作视线向量就可以了。（镜头的注视点是原点）
>视线向量的定义和写入
// 视图×投影坐标变换矩阵
m.lookAt([0.0, 0.0, 20.0], [0, 0, 0], [0, 1, 0], vMatrix);
m.perspective(45, c.width / c.height, 0.1, 100, pMatrix);
m.multiply(pMatrix, vMatrix, tmpMatrix);

// 平行光源的方向
var lightDirection = [-0.5, 0.5, 0.5];

// 视点向量
var eyeDirection = [0.0, 0.0, 20.0];

// 环境光的颜色
var ambientColor = [0.1, 0.1, 0.1, 1.0];

// (中间部分代码略)

// uniform变量的写入
gl.uniformMatrix4fv(uniLocation[0], false, mvpMatrix);
gl.uniformMatrix4fv(uniLocation[1], false, invMatrix);
gl.uniform3fv(uniLocation[2], lightDirection);
gl.uniform3fv(uniLocation[3], eyeDirection);
gl.uniform4fv(uniLocation[4], ambientColor);
视线向量在着色器中是有三个元素的vec3，所以用uniform3fv函数传给着色器。这次的demo和光向量是一样的，所以视线向量也在持续循环的时候处理。

总结

好了，反射光相关的知识已经基本理解了吧。
与目前为止所涉及到的算法相比，今天的算法也不算难，就是，计算从光源发出的光向量和视线向量之间的半向量，然后与面法线向量求内积，所以相对的负荷也不大。但是，这只是在一定程度上模拟了反射光的效果，并不是非常严格的反射光的计算。
从渲染的结果来看，圆环体已经变的非常漂亮了，实际的效果，请参考文章最后给出的链接。
下一回，介绍一下高氏着色和补色着色。
用扩散光，环境光以及反射光渲染的demo
http://wgld.org/s/sample_011/


转载请注明：转自lufy_legend的博客http://blog.csdn.net/lufy_legend

[WebGL入门]二十三，反射光的光照效果


联系
我们