一个专注音视频领域问答的小圈子

在前面的文章中介绍了 OpenGL 中的环境光,现在就是散射光了。

散射光指的是从物体表面向全方位 360° 均匀发射的光,如下图:

散射光具体代表的是现实世界中粗糙的物体表面被光照射时,发射光在各个方向基本均匀的情况,如下图:

虽然反射后的散射光在各个方向是均匀的,但散射光反射的强度与入射光的强度以及入射的角度密切相关。

因此,当光源的位置发生变化时,散射光的效果会发生明显变化,主要体现在当光垂直照射到物体表面时比斜照时要亮,其计算公式如下:

散射光照射结果 = 材质的反射系数 * 散射光强度 * max(cos(入射角),0)

在实际开发中,散射光照射结果分为两步进行:

散射光最终强度 = 散射光强度 * max(cos(入射角),0)

散射光照射结果 = 材质的反射系数 * 散射光最终强度

其中:材质的反射系数实际指的就是物体被照射处的颜色,散射光强度指的是散射光中 RGB(红、绿、蓝)3 个色彩通道的强度。

从公式中可以看到,与环境光计算公式唯一的区别就是引入了最后一项 max(cos(入射角),0),这代表着入射角越大、发射强度越弱,当入射角的余弦值为负时(即入射角大于 90°),反射强度为 0 。

由于入射角为入射光向量与法向量的夹角,因此,其余弦值并不需要调用三角函数进行计算,只需要将两个向量归一化,然后进行点积计算就可以得出余弦值。

图中的 N 代表被照射点表面的法向量,P 为被照射点,L 为从 P 点到光源的向量,N 与 L 的夹角即为入射角。

关于点积:在数学中,两个向量的点乘为两个向量夹角的余弦值乘以两个向量的模

实践

加入散射光对程序的影响主要还是在着色器代码上。

对于片段着色器,变化不会太大,因为最终的都是物体本身的颜色乘以散射光最终的照射结果,这个结果可以在顶点着色器中计算好,直接传递给片段着色器。

#version 300 es
precision mediump float;
uniform float uR;
in vec3 vPosition;//接收从顶点着色器过来的顶点位置
in vec4 vDiffuse;//接收从顶点着色器过来的散射光最终强度
out vec4 fragColor;
void main()
{
   // 省略一些代码
   //最终颜色
   vec4 finalColor=vec4(color,0);
   //根据散射光最终强度计算片元的最终颜色值
   fragColor=finalColor*vDiffuse;
}

重点就在于顶点着色器里面了,除了以往的代码之外,根据散射光的计算公式,我们还需添加一些新的变量,比如:光源的位置。不同光源位置的照射结果不同。

具体的着色器代码如下:

#version 300 es
uniform mat4 uMVPMatrix; 						//总变换矩阵
uniform mat4 uMMatrix; 							//变换矩阵(包括平移、旋转、缩放)
uniform vec3 uLightLocation;						//光源位置
in vec3 aPosition;  						//顶点位置
in vec3 aNormal;    						//顶点法向量
out vec3 vPosition;							//用于传递给片元着色器的顶点位置
out vec4 vDiffuse;							//用于传递给片元着色器的散射光分量
void pointLight (								//散射光光照计算的方法
  in vec3 normal,								//法向量
  inout vec4 diffuse,								//散射光计算结果
  in vec3 lightLocation,							//光源位置
  in vec4 lightDiffuse							//散射光强度
){
  vec3 normalTarget=aPosition+normal;					//计算变换后的法向量
  vec3 newNormal=(uMMatrix*vec4(normalTarget,1)).xyz-(uMMatrix*vec4(aPosition,1)).xyz;
  newNormal=normalize(newNormal);					//对法向量归一化
//计算从表面点到光源位置的向量vp
  vec3 vp= normalize(lightLocation-(uMMatrix*vec4(aPosition,1)).xyz);
  vp=normalize(vp);									//归一化vp
  float nDotViewPosition=max(0.0,dot(newNormal,vp)); 	//求法向量与vp向量的点积与0的最大值
  diffuse=lightDiffuse*nDotViewPosition;			//计算散射光的最终强度
}
void main(){
   gl_Position = uMVPMatrix * vec4(aPosition,1); 	//根据总变换矩阵计算此次绘制此顶点的位置
   vec4 diffuseTemp=vec4(0.0,0.0,0.0,0.0);
   pointLight(normalize(aNormal), diffuseTemp, uLightLocation, vec4(0.8,0.8,0.8,1.0));
   vDiffuse=diffuseTemp;					//将散射光最终强度传给片元着色器
   vPosition = aPosition; 					//将顶点的位置传给片元着色器
}

首先,定义了一个函数,用来计算散射光的最终强度。

散射光的最终强度 = 散射光强度 * max(cos(入射角),0) 。

根据此公式,散射光强度自己设定为 vec4(0.8,0.8,0.8,1.0),那么接下来要做的就是计算入射光向量和法向量之间的夹角,根据点乘公式进行计算:

由于在世界模型里,点的位置会发生移动,所以也要把法向量进行移动到当前的观察坐标下:

  vec3 normalTarget=aPosition+normal;					//计算变换后的法向量
  vec3 newNormal=(uMMatrix*vec4(normalTarget,1)).xyz-(uMMatrix*vec4(aPosition,1)).xyz;

然后把法向量进行归一化:

  newNormal=normalize(newNormal);					//对法向量归一化

接下来就是用到光源的位置了,计算入射光向量并进行归一化。

  vec3 vp= normalize(lightLocation-(uMMatrix*vec4(aPosition,1)).xyz);

最后就是计算余弦值。

  float nDotViewPosition=max(0.0,dot(newNormal,vp)); 	//求法向量与vp向量的点积与0的最大值

得到了余弦值之后,就可以得到散射光的最终强度了,有了最终强度直接传递给片段着色器进行计算就方便多了。

具体效果如下:

可以拖滑动条改变光源的位置,明显看到光源不同得到的照射结果也是不同的。

具体的示例代码可以参考我的 Github 项目,求一波 Star 。

https://github.com/glumes/AndroidOpenGLTutorial

参考

  1. 《OpenGL ES 3.x 游戏开发》

知识星球

一个专注音视频领域问答的小圈子

公众号音视频开发进阶对应的知识星球,一个编程开发领域的专业圈子,贩卖知识和技巧!

※ 入群须知:了解该星球能提供的价值和帮助,在提问时务必阐述好背景,附带相关的信息。

iOS 用户可以加我微信 ezglumes 邀请你进星球,有疑问也可以加我微信咨询。

※ 星球内容:

基础教程:

在知识星球连载的干货教程,可以在专栏中找到,随着时间的推移,教程也会越来越多:

- 音视频基础概念
- WebRTC 入门教程及源码实践
- 播放器教程及源码实践
- OpenGL 和特效开发教程
- Vulkan 入门教程

部分内容可以在博客 https://glumes.com 中检索到,后面会在星球里持续更新.

干货分享:

涵盖了移动开发和音视频工程领域的绝大部分,从项目实战角度出发,提升能力,包括但不限于以下领域:

- Android/iOS 移动开发
- Camera 开发
- 短视频编辑 SDK 项目实践
- 在线直播和推流
- WebRTC 开发
- 播放器基础和提高
- OpenGL 图像渲染及特效开发
- C++ 基础和提高
- FFmpeg 使用和分析
- 干货资源和书籍分享

不止于技术方面的,各种 IT 新闻、茶余饭后、生活趣事也欢迎大家分享!!!

技术答疑解惑:

针对上述基础教程和干货分享的答疑,另外还有音视频和 IT 开发中的各种交流讨论。

- 基础知识点答疑
- 工业项目实践答疑
- 问题排查思路分析

一个 BUG 排查很久,不如来星球里提个问题,效率提升百倍。

求职和面试辅导:

一站式职场服务,每份工作都值得用心对待!!!

- 面试题和面试经验分享
- 简历修改和模拟面试
- 大厂内推和信息同步
- 职场经验分享
- 职业规划和发展分析

※ 星主和合伙人介绍

星主是公众号音视频开发进阶的作者,也是网站 https://glumes.com 的作者,曾参与过抖音、剪映等头部音视频 APP 底层 SDK 的开发。

合伙人也是在头条、快手从事音视频架构师的职位,具有多年的音视频开发经验,能力圈覆盖了音视频的绝大多数领域,资深音视频从业人员为你保驾护航。

微信公众号

扫描下面的二维码关注我的微信公众号《音视频开发进阶》,推送更多精彩内容!

添加我的微信 ezglumes 拉你入音视频与图形图像技术群一起交流学习~

wechat-account-qrcode

原创文章,转载请注明来源:    《OpenGL ES 3.x 游戏开发》 光照系列之散射光