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.

12 - OpenGL学习之投光物

1.平行光

2.点光源

3.聚光灯

你可能感兴趣的:(12 - OpenGL学习之投光物)