OpenGL ES on iOS --- 光照进阶

OpenGL ES on iOS --- 光照进阶

简述

本文记录我记录我学习 坐标体系和矩阵转换的过程,加深学习便于后续查询,可能有些描述不够准确,或者内容不够充实,还请多多指正,共同窗习.bash

光源分类

在基础光照时,学习了光照对物体的做用,也就至关于物体的材质,此次主要说 现实生活中的光源函数

平行光

当光源无限远时,从其发射过来的的光能够近似的看作平行光(例如太阳);这时 光线的方向都是一致的.学习

平行光

float ambientStrength = 0.3;    //环境因子
    float specularStrength = 2.0;
    float reflectance = 256.0;

    //平行光方向
    vec3 paraLightDir = normalize(vec3(-0.2,-1.0,-0.3));

    //环境光
    vec3 ambient = ambientStrength * texture(Texture,outTexCoord).rgb;

    //漫反射
    vec3 norm = normalize(outNormal);
    vec3 lightDir = normalize(lightPo - FragPo);    //当前顶点 至 光源的的单位向量
    float diff = max(dot(norm,paraLightDir),0.0);
    vec3 diffuse = diff * lightColor*texture(Texture,outTexCoord).rgb;

    //镜面反射
    vec3 viewDir = normalize(viewPo - FragPo);
    vec3 reflectDir = reflect(-paraLightDir,outNormal);
    float spec = pow(max(dot(viewDir, reflectDir),0.0),reflectance);
    vec3 specular = specularStrength * spec * texture(specularTexture,outTexCoord).rgb;

    //光线衰弱
    float constantPara = 1.0f;
    float linearPara = 0.09f;
    float quadraticPara = 0.032f;
    float LFDistance = length(lightPo - FragPo);
    float lightWeakPara = 1.0/(constantPara + linearPara * LFDistance + quadraticPara * (LFDistance*LFDistance));

    vec3 res = ambient + diffuse + specular;

    FragColor = vec4(res,1.0);
复制代码

点光源

点光源就是比较正常的光源,光从光源四散发出,光线的向量就等于光源到物体的向量. ui

点光源

float ambientStrength = 0.3;    //环境因子
    float specularStrength = 2.0;
    float reflectance = 256.0;

    float constantPara = 1.0f;    //常亮
    float linearPara = 0.09f;     //线性部分因数
    float quadraticPara = 0.032f; //二次项部分因数

    //环境光
    vec3 ambient = ambientStrength * texture(Texture,outTexCoord).rgb;

    //漫反射
    vec3 norm = normalize(outNormal);
    vec3 lightDir = normalize(lightPo - FragPo);    //当前顶点 至 光源的的单位向量

    //点光源
    float diff = max(dot(norm,lightDir),0.0);   //光源与法线夹角
    vec3 diffuse = diff * lightColor*texture(Texture,outTexCoord).rgb;

    //镜面反射
    vec3 viewDir = normalize(viewPo - FragPo);
    vec3 reflectDir = reflect(-lightDir,outNormal);

    float spec = pow(max(dot(viewDir, reflectDir),0.0),reflectance);
    vec3 specular = specularStrength * spec * texture(specularTexture,outTexCoord).rgb;

    float LFDistance = length(lightPo - FragPo);
    float lightWeakPara = 1.0/(constantPara + linearPara * LFDistance + quadraticPara * (LFDistance*LFDistance));

    vec3 res = (ambient + diffuse + specular)*lightWeakPara;

    FragColor = vec4(res,1.0);
复制代码

聚光源

聚光源的效果就至关于 手电筒,比如朝向指定范围的点光源~ spa

聚光源

在使用聚光源时,就须要指定 聚光朝向SpotDir,和切光角ϕ. 当光源指向点的向量和SpotDir的夹角大于ϕ时,则没法被光源照射到.3d

可是这样的明暗边界十分明显,效果不够真实code

初始版本

这时,咱们就须要将过渡边缘平滑,这时 咱们就须要引入两个参数, 内锥角和外锥角. 外锥角就是切光角,而内锥角之内不须要平滑效果, 内锥角和外锥角之间须要平滑过分. 代码以下orm

/(一些复杂的计算操做 应该让CPU作,提升效率,不变的量也建议外部传输,避免重复计算)
    float inCutOff = cos(radians(10.0f));   //内锥角cos值
    float outCutOff = cos(radians(15.0f));  //外锥角cos值
    vec3 spotDir = vec3(-1.2f,-1.0f,-2.0f); //聚光朝向
    
    float theta = dot(lightDir,normalize(-spotDir));    //光源指向物体的向量 和 聚光朝向的 cos值
    float epsilon  = inCutOff - outCutOff;  //内外锥角cos差值
    
    //clamp(a,b,c);若b<a<c 则函数返回值为a 若不是,则返回值最小为b 最大为c
    // (theta - outCutOff)/epsilon 若theta的角度小于内锥角 则其值>=1 若theta的角度大于外锥角 则其值<=0 这样光线就在内外锥角之间平滑变化.
    float intensity = clamp((theta - outCutOff)/epsilon,0.0,1.0);
复制代码

结果

光线衰弱

在现实状况中,光源发出的光线是会随着距离的增加而衰减的, 并且也不是线性衰减的,表现为在距离光源近的这段距离衰减的较快, 在距离光源较远的状况下衰减较慢. 一般使用这个公式来模拟光线衰减.cdn

衰减公式

常数项一般保持为1.0,它的主要做用是保证分母永远不会比1小,不然的话在某些距离上它反而会增长强度,这确定不是咱们想要的效果 一次项会与距离值相乘,以线性的方式减小强度 二次项会与距离的平方相乘,让光源以二次递减的方式减小强度。二次项在距离比较小的时候影响会比一次项小不少,但当距离值比较大的时候它就会比一次项更大了blog

效果展现

参数距离表

float LFDistance = length(lightPo - FragPo);
    float lightWeakPara = 1.0/(constantPara + linearPara * LFDistance + quadraticPara * (LFDistance*LFDistance));

    vec3 res = (ambient + diffuse + specular)*lightWeakPara;
复制代码

光照贴图

在一张纹理图中,因为材质不一样,所呈现的效果也会有所不一样,如同下面这个箱子,金属边框和木头在相同光源下所呈现的1效果确定有所不一样.

木箱纹理

这时为了在显示光照效果时将其区分开来,则须要引入光照贴图的概念~ 以下图

镜面光照贴图

在该贴图中,对应木头部分为黑色vec3(0.0); 而在金属边框部分 则对应的为灰色, 这样在计算 漫反射或者镜面时,将其做为参考系数,则可让其呈现不一样的效果.

vec3 spe = texture(specularTexture,outTexCoord).rgb;   //获取镜面光照贴图
 
vec3 viewDir = normalize(viewPo - FragPo);
vec3 reflectDir = reflect(-lightDir,outNormal);

float spec = pow(max(dot(viewDir, reflectDir),0.0),spL.reflectance);
vec3 specular = point_specularStrength * spec * spe;    //使用光照贴图纹理
复制代码

镜面光照纹理效果
是能够看出箱子铁框的镜面效果 比 木头的效果要强
相关文章
相关标签/搜索