OpenGL ES 学习教程(七) 亮瞎狗眼的 Specular Lighting 镜面高光

OpenGL ES 学习教程(七) 亮瞎狗眼的 Specular Lighting 镜面高光_第1张图片

来来来,拿起手机,站到镜子前面,对着镜子打开手机闪光灯,朝镜子看,是不是亮瞎狗眼啊!

又比如下面的房子,被太阳照的反光太厉害,就像镜子一样。

OpenGL ES 学习教程(七) 亮瞎狗眼的 Specular Lighting 镜面高光_第2张图片

还有玩家口中的的 油腻的Unreal Engine ,各种YY的油腻的师姐。

OpenGL ES 学习教程(七) 亮瞎狗眼的 Specular Lighting 镜面高光_第3张图片

上面举了这么多例子,就是引入这一节要讲的 Speculer Lighting 镜面高光  。

一张图来解释下镜面高光

OpenGL ES 学习教程(七) 亮瞎狗眼的 Specular Lighting 镜面高光_第4张图片


左侧是灯泡,灯泡发出光,到达顶点片段,然后被反射出来为 R 。

我们站在右侧观察,如果眼睛正好位于 光 的反射 的方向,即 眼睛位于 R 方向上,那么这个时候我们看到的光肯定是最强的。

随着眼睛 和 反射光 R 的夹角越大,那我们观察到Speculer Lighting 镜面光强度越小。


和上一篇了解到的 Diffuse Lighting 漫反射光照 对比,Speculer Lighting 镜面高光需要添加一个新的变量 - 观察者的位置。

我们代码中观察者 就是 摄像机,所以就使用 摄像机 的位置坐标 替代 观察者的位置。


所以我们添加另一个 uniform 变量添加到 Fragment Shader 片段着色器中,然后把摄像机位置传过去。(GLProgram_Cube.h Line 82)

"uniform vec3 m_camerapos;"//观察者位置

然后计算 顶点片段 指向 观察者的向量(GLProgram_Cube.h Line 96)

"vec3 cameraDir=normalize(m_camerapos-out_fragpos);" //计算顶点片段指向观察者的向量

然后计算光的反射 向量 R (GLProgram_Cube.h Line 97)

"vec3 reflectDir=reflect(-lightdir,normal);" //计算光的反射 R reflect第一个参数是光源指向片段的向量,所以这里使用 -lightdir

然后通过 cameraDir 和 reflectDir 的点积,计算出来的数值,再去 进行 pow 运算,求出 镜面亮度 (GLProgram_Cube.h Line 98)

"float spec=pow(max(dot(cameraDir,reflectDir),0.0),256.0);" //计算镜面亮度,32是高光的发光值 Shininess,发光值越高,反射光越强,散射越小,高光点越集中。

然后指定一个镜面光 强度 (GLProgram_Cube.h Line 95)

"float specularStrength=0.5;" //镜面光 中等强度 Specular Intensity

然后 相乘得到镜面光 (GLProgram_Cube.h Line 102)

"vec3 specular=specularStrength * spec * m_lightcolor;"

最后用 Specular Lighting + Diffuse Lighting + Ambient Lighting 乘以顶点颜色,得到最终颜色 (GLProgram_Cube.h Line 102)

"vec3 result=(ambient+diffuse+specular) * m_color;" //(环境光+漫反射光) * 物体本身的颜色 

然后从代码中传入 观察者的位置 ( GLProgram_Cube.h Line 93)

//传入摄像机位置;
glUniform3f(m_programCube.m_camerapos, -2, 0, 10);

运行结果如下图

OpenGL ES 学习教程(七) 亮瞎狗眼的 Specular Lighting 镜面高光_第5张图片

可以看到中间的高亮区域

在Fragment Shader中 计算镜面亮度的时候,进行了 pow 操作,操作数是指定的一个数,这个数叫 高光的发光值 Shininess 。

下图是不同的Shininess 值产生的效果,可以看到 高光的发光值 Shininess,发光值越高,反射光越强,散射越小,高光点越集中。

OpenGL ES 学习教程(七) 亮瞎狗眼的 Specular Lighting 镜面高光_第6张图片


示例工程下载:

http://pan.baidu.com/s/1dDSdo3J


你可能感兴趣的:(unity3d,OpenGL,shader,es,光照,镜面高光)