惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

云风的 BLOG
云风的 BLOG
GbyAI
GbyAI
G
Google Developers Blog
Engineering at Meta
Engineering at Meta
月光博客
月光博客
腾讯CDC
Recent Announcements
Recent Announcements
酷 壳 – CoolShell
酷 壳 – CoolShell
爱范儿
爱范儿
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
S
SegmentFault 最新的问题
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
阮一峰的网络日志
阮一峰的网络日志
博客园 - 【当耐特】
The GitHub Blog
The GitHub Blog
Last Week in AI
Last Week in AI
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
aimingoo的专栏
aimingoo的专栏
Google DeepMind News
Google DeepMind News
Y
Y Combinator Blog
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
Martin Fowler
Martin Fowler
A
About on SuperTechFans
博客园 - 叶小钗

音视频开发进阶

音视频教程-第三节 音视频教程-第二节 真的,AI 可能就是新时代的信息差 充值 Cursor 之后,工作有了哪些变化?🤔 个人'蒸馏'大模型能做哪些有意思的事情 DeepSeek 大模型在 Mac 上的部署和运行 音视频教程-第一节 【WebRTC 专栏】-- Android 开发集成 WebRTC 库的几种方式 【WebRTC 专栏】-- 在 Mac M1 等系列芯片编译和开发 WebRTC-Android 库 Meta Llama3 大模型在 Mac 上的部署和运行 iOS VideoToolBox 解码 HEVC Open-GOP 视频的问题排查 Flutter 状态管理之 InheritedWidget 使用和分析 用 ChatGPT 回答技术问题怎么样 ? 音视频开发系统入门大致路线 UE 4.27 添加自定义 ShadingModel 用 UE4 虚幻引擎做个捏脸小功能~~ UE4 材质练习 之 凹凸贴图偏移的使用 UE4 材质练习系列基础 OpenGL上下文创建以及共享机制 007 | 播放器系列专栏-解析 MP4 文件读取信息 006 | 播放器系列专栏-在 Mac 上查看 MP4 格式信息 干货 | 快速抽取缩略图是怎么练成的? 关于直播、WebRTC、FFmpeg 的那些事 005 | 播放器系列专栏-在 Windows 上查看 MP4 格式信息 将音视频中的花屏、绿屏、黑屏问题一网打尽 关于音视频里面的解码帧率和渲染帧率 004 | 播放器系列专栏-认识MP4视频(下) 003 | 播放器系列专栏-认识MP4视频(上) 入门或者转行音视频,应该要怎么做? H264视频文件如何缩放分辨率
《OpenGL ES 3.x 游戏开发》 光照系列之散射光
音视频开发进阶 · 2018-07-22 · via 音视频开发进阶

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

在前面的文章中介绍了 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 游戏开发》

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