12 - OpenGL学习之投光物

在之前的例子中，我们使用的光源都假设是来自空间的一个点。但现实环境中，光源的类型有好几种，每种的表现不一样，我们将光投射到物体的光源叫做投光物，下面，我们将讨论几种不同类型的投光物。学会这几种投光物的使用之后，就能够模拟出更丰富的光照场景。

1.平行光

当一个光源在很远的地方时，来源于光源的每条光线都会平行。不论物体或观察者处于什么位置，好像光源都来自同一个方向，这就是平行光，生活中最常见的平行光就是太阳光 。


模拟太阳光

在之前的例子中，我们计算光线的方向向量使用的是，lightpos - fragpos(光源位置减去顶点位置)，模拟平行光，我们直接给出平行光的向量就可以了。
沿用上一篇文章的Demo,将顶点着色器改为如下：

#version 300 es 
precision mediump float;

struct Material {
    sampler2D diffuseMap;
    sampler2D specularMap;
    float shineness; //高光反射

};

struct Light {
    vec3 diffuse;
    vec3 specular;
    vec3 ambient;

};

uniform Material material;
uniform Light light;

//光源位置
uniform vec3 lightDir;

//观察点（摄像机位置）
uniform vec3 viewPos;

//顶点位置（世界空间坐标系）
in vec3 fragPos;

//垂直于顶点的法线向量(世界空间坐标系)
in vec3 N;

in vec2 oTextCoord;

out vec4 fragColor;

void main() {
    //计算环境光照(漫反射贴图也用于环境反射)
    vec3 ambient = light.ambient *  vec3(texture(material.diffuseMap, oTextCoord));

    //计算漫反射
    vec3 norm = normalize(N);

    vec3 lightDirection = normalize(lightDir);

    float diffu  = max(dot(norm,lightDirection), 0.0);

    vec3 diffuse = light.diffuse * diffu * vec3(texture(material.diffuseMap, oTextCoord));

    //计算环境反射
    vec3 viewDirection = normalize(viewPos - fragPos);

    vec3 reflectDirection =  reflect(-lightDirection,norm);

    float spec = pow( max(dot(viewDirection, reflectDirection), 0.0), material.shineness);
    vec3 specular = light.specular * spec * vec3(texture(material.specularMap, oTextCoord));

    fragColor = vec4((ambient + diffuse + specular), 1.0);
    
}

这里注意如下改动：


顶点着色器改动

//代码如下图：

        GLKVector3Make( 0.0f,  0.0f,  0.0f),
        GLKVector3Make( 1.0f,  5.0f, -15.0f),
        GLKVector3Make(1.5f, -2.2f, -2.5f),
        GLKVector3Make(-2.8f, -2.0f, -12.3f),
        GLKVector3Make(3.0, -0.5, 2.0),
        GLKVector3Make( 4.4f, -0.4f, -3.5f),
        GLKVector3Make(-5.7f,  3.0f, -7.5f),
        GLKVector3Make( 6.5f,  2.0f, -2.5f),
        GLKVector3Make(-7.0, 0.5, 2.0),
        GLKVector3Make(-6.3f,  1.0f, -1.5f),
        
    };
   
    for ( int i = 0; i < 10; i++) {
        GLKVector3 pos = cubePosition[i];
        GLKMatrix4 rotate = GLKMatrix4MakeRotation((M_PI * i / 10),0,1,0);
        GLKMatrix4 rotate2 = GLKMatrix4MakeRotation(-M_PI * 0.05 * i, 1, 0, 0);
        GLKMatrix4 scale = GLKMatrix4MakeScale(0.3, 0.3, 0.3);
        GLKMatrix4 translate1 = GLKMatrix4MakeTranslation(pos.x * 0.3, pos.y * 0.3, pos.z * 0.3);
        GLKMatrix4 modelMatrix = GLKMatrix4Multiply(rotate2, rotate);
        modelMatrix = GLKMatrix4Multiply(modelMatrix, scale);
        modelMatrix = GLKMatrix4Multiply(translate1, modelMatrix);
        glUniformMatrix4fv(modelIndex, 1, GL_FALSE, modelMatrix.m);
        [self drawCubeWithTextCoordLocation:textCoordIndex andPositionlocation:positionIndex andNormalLocation:normalIndex];
        
    }

这里我们绘制10个箱子，分布在空间不同位置，来模拟平行光的效果。

效果如图：


模拟平行光效果

2.点光源

点光源示意图

现实世界中，模拟太阳光这种平行光可以提供很棒的全局照明效果，但是还有其它的光照场景，比如室内的灯泡，或者黑夜中的火把，这种可以看做点光源，虽然我们之前的例子中都是使用的点光源来模拟光照的，但是现实世界中，我们可以法线，例如一个灯泡，距离远了，灯泡发出的光是会变弱的，这就存在光线的衰减现象。
如果用线性方程式表示点光源光线衰减，效果感觉不真实。
关于点光源光纤衰减公式，已经有前行者帮我们总结出来：


光线衰减公式

公式里的d表示的是片段距离光源的距离。


常用系数

添加衰减公式之后的点光源,片段着色器改动:


片段着色器

效果图：


模拟光线衰减效果

可以看到，随着距离的增加，有些箱子已经看不到了。

3.聚光灯

大家可以想象老是街灯的那个效果，有灯罩，它的照射范围是一个圆锥体。类似下图的效果：


聚光示意图

这里几个参数代表的含义：

  • LightDir：从片段指向光源的向量。
  • SpotDir：聚光所指向的方向。
  • Phiϕ：指定了聚光半径的切光角。落在这个角度之外的物体都不会被这个聚光所照亮。
  • Thetaθ：LightDir向量和SpotDir向量之间的夹角。在聚光内部的话θ值应该比ϕ值小。

现在我们要做的就是求出Thetaθ值（ lightDir和spotDir的点乘积来表示）与切光角的大小。

所以我们需要传入三个值给片段着色器：1.从片段指向光源的向量 2.聚光所指向的方向 3.切光角

我们对片段着色器做如下改变：

#version 300 es
precision mediump float;

struct Material {
    sampler2D diffuseMap;
    sampler2D specularMap;
    float shineness; //高光反射

};
struct Light {
    vec3 diffuse;
    vec3 specular;
    vec3 ambient;


    float constant;
    float linear;
    float quadratic;

    //聚光指向的方向
    vec3 spotDir;

    //切光角
    float cutOff;

};

uniform Material material;
uniform Light light;

//光源位置
uniform vec3 lightPos;

//观察点（摄像机位置）
uniform vec3 viewPos;

//顶点位置（世界空间坐标系）
in vec3 fragPos;

//垂直于顶点的法线向量(世界空间坐标系)
in vec3 N;

in vec2 oTextCoord;

out vec4 fragColor;

void main() {

    // 顶点到光源的距离
    float  distan = length(lightPos - fragPos);

    //计算环境光照(漫反射贴图也用于环境反射)
    vec3 ambient = light.ambient *  vec3(texture(material.diffuseMap, oTextCoord));

    //计算漫反射
    vec3 norm = normalize(N);

    vec3 lightDirection = normalize(lightPos - fragPos);

    float diffu  = max(dot(norm,lightDirection), 0.0);

    vec3 diffuse = light.diffuse * diffu * vec3(texture(material.diffuseMap, oTextCoord));

    //计算镜面反射
    vec3 viewDirection = normalize(viewPos - fragPos);

    vec3 reflectDirection =  reflect(-lightDirection,norm);

    float spec = pow( max(dot(viewDirection, reflectDirection), 0.0), material.shineness);
    vec3 specular = light.specular * spec * vec3(texture(material.specularMap, oTextCoord));
    
    //计算从片段指向光源的向量和聚光所指的方向的夹角
    float theta = dot(lightDirection, normalize(-light.spotDir));
    
    vec4 color = vec4(1.0);
    
//如果处于切光角内，就这样计算，否则就用环境光照，不至于太暗
    if (theta > light.cutOff)
    {
        diffuse *= theta;
        specular *= theta;
        color = vec4((ambient + diffuse + specular), 1.0);
    }
    else {
        color = vec4(ambient, 1.0);

    }
    fragColor = color;
}

注意以下几点：


WeChat23a4af49e87f6d11dc46c1e8e62f8f0b.png

1.这里为什么对聚光所指向的方向取反呢？原因是：我们这里的lightDirection是片段只想光源的向量，而聚光的方向是光源指向外面的方向，如果不取反的话，两个计算的夹角就会大于90度，这时候就不能和切光角对比了（切光角一般是小于90度的）。看下图就能理解了。

理解

2.这里比较角度的时候为什么是 theta > light.cutOff,因为这里向量点乘积最后表示的是cosθ值，而cos函数的值(余弦值)，在角度0~90°范围内，随着角度的增加，值是减少的，所以theta大于light.cutOff表示夹角小于切光角。
余弦值函数

3.我们没有对环境光照进行改变，是因为我们希望，在聚光照射不到的地方，仍然有环境光照，这样不至于太黑。

代码中的实现：

    static float lightPos[3] = {0.0,0.2,2.0};
    
    //这里设置观察点为摄像机的位置(cameraMatrix里eye的位置)
    static float viewPos[3] = {0.0,-0.5,2.0};
    
    glUniform3fv(lightPosIndex, 1, lightPos);
    glUniform3fv(viewPosIndex, 1, viewPos);
    
    //设置材质
    glUniform3f(glGetUniformLocation(_esContext.program, "light.ambient"), 0.2, 0.2, 0.2);
    glUniform3f(glGetUniformLocation(_esContext.program, "light.diffuse"), 0.5, 0.5, 0.5);
    glUniform3f(glGetUniformLocation(_esContext.program, "light.specular"), 1.0, 1.0, 1.0);
    
    glUniform1f(glGetUniformLocation(_esContext.program, "light.constant"), 1.0);
    glUniform1f(glGetUniformLocation(_esContext.program, "light.linear"), 0.09);
    glUniform1f(glGetUniformLocation(_esContext.program, "light.quadratic"), 0.032);
    glUniform3f(glGetUniformLocation(_esContext.program, "light.spotDir"), 0.0, 0.0, -1.0);
    
    float cutoff = cos(GLKMathDegreesToRadians(12.5f));
    glUniform1f(glGetUniformLocation(_esContext.program, "light.cutOff"), cutoff);

这里我们传入的cutOff需要注意，是余弦值，float cutoff = cos(GLKMathDegreesToRadians(12.5f)); 这句代码就是求12.5°角的余弦值。
运行项目，效果如图：

IMG_6791.PNG

效果是有了，但是有点不真实，因为一般的聚光边缘没有这么锐利，这里一出聚光的范围，马上光线就变暗了，为了使效果更加真实，我们应该加一个过渡层，这里我们给添加一个外切光角，在切光角到外切光角这段范围内，让光照的影响随着距离扩大，影响越来越小，这里我们有如下公式：


截屏2021-12-14 下午3.31.44.png

这里ϵ(Epsilon)是内（ϕ）和外圆锥（γ）之间的余弦值差（ϵ=ϕ−γ）。最终的I值就是在当前片段聚光的强度。

我们修改片段着色器如下：

precision mediump float;

struct Material {
    sampler2D diffuseMap;
    sampler2D specularMap;
    float shineness; //高光反射

};
struct Light {
    vec3 diffuse;
    vec3 specular;
    vec3 ambient;


    float constant;
    float linear;
    float quadratic;

    //聚光指向的方向
    vec3 spotDir;

    //切光角
    float cutOff;

    //外切光角
    float outCutOff;

};

uniform Material material;
uniform Light light;

//光源位置
uniform vec3 lightPos;

//观察点（摄像机位置）
uniform vec3 viewPos;

//顶点位置（世界空间坐标系）
in vec3 fragPos;

//垂直于顶点的法线向量(世界空间坐标系)
in vec3 N;

in vec2 oTextCoord;

out vec4 fragColor;

void main() {

    // 顶点到光源的距离
    float  distan = length(lightPos - fragPos);

    //计算环境光照(漫反射贴图也用于环境反射)
    vec3 ambient = light.ambient *  vec3(texture(material.diffuseMap, oTextCoord));

    //计算漫反射
    vec3 norm = normalize(N);

    vec3 lightDirection = normalize(lightPos - fragPos);

    float diffu  = max(dot(norm,lightDirection), 0.0);

    vec3 diffuse = light.diffuse * diffu * vec3(texture(material.diffuseMap, oTextCoord));

    //计算镜面反射
    vec3 viewDirection = normalize(viewPos - fragPos);

    vec3 reflectDirection =  reflect(-lightDirection,norm);

    float spec = pow( max(dot(viewDirection, reflectDirection), 0.0), material.shineness);
    vec3 specular = light.specular * spec * vec3(texture(material.specularMap, oTextCoord));
    
    //计算从片段指向光源的向量和聚光所指的方向的夹角
    float theta = dot(lightDirection, normalize(-light.spotDir));
    float epsilon = light.cutOff - light.outCutOff;
    float intensity = clamp(((theta - light.outCutOff) / epsilon), 0.0 , 1.0);
    
    
    //如果处于切光角内，就这样计算，否则就用环境光照，不至于太暗

    diffuse *= intensity;
    specular *= intensity;
    
    fragColor = vec4((ambient + diffuse + specular), 1.0);

}

注：这里我们取到最终的intensity是要在0.0~1.0范围内的，不然是没有意义的。

代码改变如下：

    static float lightPos[3] = {0.0,0.2,2.0};
    
    //这里设置观察点为摄像机的位置(cameraMatrix里eye的位置)
    static float viewPos[3] = {0.0,-0.5,2.0};
    
    glUniform3fv(lightPosIndex, 1, lightPos);
    glUniform3fv(viewPosIndex, 1, viewPos);
    
    //设置材质
    glUniform3f(glGetUniformLocation(_esContext.program, "light.ambient"), 0.2, 0.2, 0.2);
    glUniform3f(glGetUniformLocation(_esContext.program, "light.diffuse"), 0.5, 0.5, 0.5);
    glUniform3f(glGetUniformLocation(_esContext.program, "light.specular"), 1.0, 1.0, 1.0);
    
    glUniform1f(glGetUniformLocation(_esContext.program, "light.constant"), 1.0);
    glUniform1f(glGetUniformLocation(_esContext.program, "light.linear"), 0.09);
    glUniform1f(glGetUniformLocation(_esContext.program, "light.quadratic"), 0.032);
    glUniform3f(glGetUniformLocation(_esContext.program, "light.spotDir"), 0.0, 0.0, -1.0);
    
    float cutoff = cos(GLKMathDegreesToRadians(12.5f));
    glUniform1f(glGetUniformLocation(_esContext.program, "light.cutOff"), cutoff);
    
    float outCutOff = cos(GLKMathDegreesToRadians(17.5f));
    glUniform1f(glGetUniformLocation(_esContext.program, "light.outCutOff"), outCutOff);

运行项目，效果如下图：


模拟聚光

最终得到的效果比较真实了。感兴趣的读者可以改变聚光的位置，还有模型矩阵，来观察聚光的效果。
代码已上传至github.

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 202,723评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,080评论 2赞 379
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,604评论 0赞 335
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,440评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,431评论 5赞 364
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,499评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,893评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,541评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,751评论 1赞 296
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,547评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,619评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,320评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,890评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,896评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,137评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,796评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,335评论 2赞 342