重新自学学习openGL 之颜色和光照

作者: 充满活力的早晨 | 来源:发表于2019-08-05 14:47 被阅读0次

颜色

我们在现实生活中看到某一物体的颜色并不是这个物体真正拥有的颜色，而是它所反射的(Reflected)颜色。当我们在OpenGL中创建一个光源时，我们希望给光源一个颜色。当我们把光源的颜色与物体的颜色值相乘，所得到的就是这个物体所反射的颜色（也就是我们所感知到的颜色）。

颜色计算 把光源的颜色与物体的颜色值相乘

基础光照

现实的光照非常复杂，因此OpenGL的光照使用的是简化的模型，对现实的情况进行近似，这样处理起来会更容易一些，而且看起来也差不多一样。其中一个模型被称为冯氏光照模型(Phong Lighting Model)。
冯氏光照模型的主要结构由3个分量组成：环境(Ambient)、漫反射 (Diffuse)和镜面(Specular)光照

环境光照(Ambient Lighting)：物体几乎永远不会是完全黑暗的。所以环境光照一般是个常量
漫反射光照(Diffuse Lighting)：模拟光源对物体的方向性影响,物体的某一部分越是正对着光源，它就会越亮。
镜面光照(Specular Lighting)：模拟有光泽物体上面出现的亮点。镜面光照的颜色相比于物体的颜色会更倾向于光的颜色。

光照公式

最终片段颜色：环境颜色+漫反射颜色+镜面反射颜色

环境颜色 = 光源的环境光颜色 × 物体的环境材质颜色
漫反射颜色 = 光源的漫反射光颜色 × 物体的漫反射材质颜色 × 漫反射因子
漫反射
DiffuseFactor = max(0, dot(N, L))
镜面反射颜色 = 光源的镜面光颜色 × 物体的镜面材质颜色 × 镜面反射因子

镜面光照

R=reflect(L, N)
SpecularFactor = power(max(0, dot(R,V)), shininess)

我们的测试模型如下红色正方体

下面是正常正方体光照图

正常立方体

顶点着色器

attribute vec3 beginPostion; ///开始位置
attribute vec3 vertexColor;
uniform mat4 u_mvpMatrix;

varying lowp vec3 vary_vertexColor;

void main(){
    gl_Position =u_mvpMatrix * vec4(beginPostion, 1.0);
    vary_vertexColor  = vertexColor;

}

片段着色器

precision lowp float;
varying lowp vec3 vary_vertexColor;
void main()
{
    gl_FragColor =vec4( vary_vertexColor,1.0);
}

环境光照

我们使用一个很小的常量（光照）颜色，添加到物体片段的最终颜色中，这样子的话即便场景中没有直接的光源也能看起来存在有一些发散的光。
把环境光照添加到场景里非常简单。我们用光的颜色乘以一个很小的常量环境因子，再乘以物体的颜色，然后将最终结果作为片段的颜色：
顶点着色器

attribute vec3 beginPostion; ///开始位置
attribute vec3 vertexColor;
uniform mat4 u_mvpMatrix;

varying lowp vec3 vary_vertexColor;

void main(){
    gl_Position =u_mvpMatrix * vec4(beginPostion, 1.0);
    vary_vertexColor  = vertexColor;

}

片段着色器

precision lowp float;

varying lowp vec3 vary_vertexColor;
uniform vec4   ambientLight; ///环境光

void main()
{
    float  ambientStrength = 0.2;
    vec4 ambient = ambientStrength * ambientLight;
    gl_FragColor = ambient * vec4( vary_vertexColor,1.0);;
}

漫反射光照

QQ20190805-111228.gif

漫反射光照使物体上与光线方向越接近的片段能从光源处获得更多的亮度。为了能够更好的理解漫反射光照，请看下图：

漫反射

计算漫反射光照需要：
+ 法向量：一个垂直于顶点表面的向量。
+ 定向的光线：作为光源的位置与片段的位置之间向量差的方向向量。为了计算这个光线，我们需要光的位置向量和片段的位置向量。

法向量一般作为顶点的属性传入顶点着色器中

attribute vec3 aNormal; //法向量

所有光照的计算都是在片段着色器里进行，所以我们需要将法向量由顶点着色器传递到片段着色器。我们这么做：

varying lowp vec3 normal;
void main(){
  normal =  aNormal;;
}

我们现在对每个顶点都有了法向量，但是我们仍然需要光源的位置向量和片段的位置向量。由于光源的位置是一个静态变量，我们可以简单地在片段着色器中把它声明为uniform。然后在渲染循环中（渲染循环的外面也可以，因为它不会改变）更新uniform。

最后，我们还需要片段的位置。我们会在世界空间中进行所有的光照计算，因此我们需要一个在世界空间中的顶点位置。我们可以通过把顶点位置属性乘以模型矩阵（不是观察和投影矩阵）来把它变换到世界空间坐标。这个在顶点着色器中很容易完成，所以我们声明一个输出变量，并计算它的世界空间坐标：

attribute vec3 beginPostion; ///开始位置
attribute vec3 vertexColor;
attribute vec3 aNormal; //法向量

uniform mat4 u_mvpMatrix;
uniform mat4 u_model;
uniform mat4  u_inverModel;

varying lowp vec3 normal;
varying lowp vec3 FragPos;


varying lowp vec3 vary_vertexColor;

void main(){
    gl_Position =u_mvpMatrix *u_model* vec4(beginPostion, 1.0);
    vary_vertexColor  = vertexColor;
    FragPos = vec3(u_model * vec4(beginPostion, 1.0));
    normal =  aNormal;;
}

最后，在片段着色器中添加相应的输入变量。现在，所有需要的变量都设置好了，我们可以在片段着色器中添加光照计算了。

我们需要做的第一件事是计算光源和片段位置之间的方向向量。前面提到，光的方向向量是光源位置向量与片段位置向量之间的向量差。我们希望确保所有相关向量最后都转换为单位向量，所以我们把法线和最终的方向向量都进行标准化：

void main()
{
    vec3 norm = normalize(normal);
    vec3 lightDir = normalize(lightPos - FragPos);
}

一步，我们对norm和lightDir向量进行点乘，计算光源对当前片段实际的漫发射影响。结果值再乘以光的颜色，得到漫反射分量。两个向量之间的角度越大，漫反射分量就会越小：

    float diff = max(dot(norm, lightDir), 0.0);
    vec3 diffuse = diff * lightColor;

如果两个向量之间的角度大于90度，点乘的结果就会变成负数，这样会导致漫反射分量变为负数。为此，我们使用max函数返回两个参数之间较大的参数，从而保证漫反射分量不会变成负数。现在我们有了环境光分量和漫反射分量，我们把它们相加，然后把结果乘以物体的颜色，来获得片段最后的输出颜色。

  vec3 diffuse = diff * lightColor;
    gl_FragColor =vec4(diffuse,1.0) * vec4( vary_vertexColor,1.0);;

现在我们已经把法向量从顶点着色器传到了片段着色器。可是，目前片段着色器里的计算都是在世界空间坐标中进行的。所以，我们是不是应该把法向量也转换为世界空间坐标？基本正确，但是这不是简单地把它乘以一个模型矩阵就能搞定的。
首先，法向量只是一个方向向量，不能表达空间中的特定位置。同时，法向量没有齐次坐标（顶点位置中的w分量）。这意味着，位移不应该影响到法向量。因此，如果我们打算把法向量乘以一个模型矩阵，我们就要从矩阵中移除位移部分，只选用模型矩阵左上角3×3的矩阵（注意，我们也可以把法向量的w分量设置为0，再乘以4×4矩阵；这同样可以移除位移）。对于法向量，我们只希望对它实施缩放和旋转变换。
其次，如果模型矩阵执行了不等比缩放，顶点的改变会导致法向量不再垂直于表面了。因此，我们不能用这样的模型矩阵来变换法向量。下面的图展示了应用了不等比缩放的模型矩阵对法向量的影响：

每当我们应用一个不等比缩放时（注意：等比缩放不会破坏法线，因为法线的方向没被改变，仅仅改变了法线的长度，而这很容易通过标准化来修复），法向量就不会再垂直于对应的表面了，这样光照就会被破坏。

修复这个行为的诀窍是使用一个为法向量专门定制的模型矩阵。这个矩阵称之为法线矩阵(Normal Matrix)，「模型矩阵左上角的逆矩阵的转置矩阵」。

在顶点着色器中，我们可以使用inverse和transpose函数自己生成这个法线矩阵，这两个函数对所有类型矩阵都有效。注意我们还要把被处理过的矩阵强制转换为3×3矩阵，来保证它失去了位移属性以及能够乘以vec3的法向量。

uniform mat4  u_inverModel;
void main(){
    normal =  mat3(u_inverModel) * aNormal;;
}

给顶点传值代码

    bool isSuccess = YES;
    mode = GLKMatrix4InvertAndTranspose(mode,&isSuccess);
    glUniformMatrix4fv(self.bindObject->uniforms[CubeDiffuseLightingUniformLocationInvermodel], 1, 0,mode.m);

如果你进行了不等比缩放，使用法线矩阵去乘以法向量就是必不可少的了。即使是对于着色器来说，逆矩阵也是一个开销比较大的运算，因此，对于一个对效率有要求的应用来说，在绘制之前你最好用CPU计算出法线矩阵，然后通过uniform把值传递给着色器（像模型矩阵一样）

完整shader 代码
顶点着色器

precision lowp float;
uniform vec3 lightPos; ///光源位置
uniform vec3 lightColor; ///光源位置

varying lowp vec3 normal;
varying lowp vec3 FragPos;
varying lowp vec3 vary_vertexColor;

void main()
{
    vec3 norm = normalize(normal);
    vec3 lightDir = normalize(lightPos - FragPos);
    float diff = max(dot(norm, lightDir), 0.0);
    vec3 diffuse = diff * lightColor;
    ///环境光的使用
    gl_FragColor =vec4(diffuse,1.0) * vec4( vary_vertexColor,1.0);;
}

片段着色器

attribute vec3 beginPostion; ///开始位置
attribute vec3 vertexColor;
attribute vec3 aNormal; //法向量

uniform mat4 u_mvpMatrix;
uniform mat4 u_model;
uniform mat4  u_inverModel;

varying lowp vec3 normal;
varying lowp vec3 FragPos;


varying lowp vec3 vary_vertexColor;

void main(){
    gl_Position =u_mvpMatrix *u_model* vec4(beginPostion, 1.0);
    vary_vertexColor  = vertexColor;
    FragPos = vec3(u_model * vec4(beginPostion, 1.0));
    normal =  mat3(u_inverModel) * aNormal;;
}

这里没有探讨具体求解法线矩阵

镜面光照

[图片上传失败...(image-f7117c-1564974772611)]

和漫反射光照一样，镜面光照也是依据光的方向向量和物体的法向量来决定的，但是它也依赖于观察方向，例如玩家是从什么方向看着这个片段的。镜面光照是基于光的反射特性。如果我们想象物体表面像一面镜子一样，那么，无论我们从哪里去看那个表面所反射的光，镜面光照都会达到最大化。你可以从下面的图片看到效果：

镜面光照

从上图中我们知道求镜面光照需要的参数有

光源位置
法向量
眼睛的位置

我们通过反射法向量周围光的方向来计算反射向量。然后我们计算反射向量和视线方向的角度差，如果夹角越小，那么镜面光的影响就会越大。它的作用效果就是，当我们去看光被物体所反射的那个方向的时候，我们会看到一个高光。

观察向量是镜面光照附加的一个变量，我们可以使用观察者世界空间位置和片段的位置来计算它。之后，我们计算镜面光强度，用它乘以光源的颜色，再将它加上环境光和漫反射分量。

为了得到观察者的世界空间坐标，我们简单地使用摄像机对象的位置坐标代替（它当然就是观察者）。所以我们把另一个uniform添加到片段着色器，把相应的摄像机位置坐标传给片段着色器：

uniform vec3 viewPos;

现在我们已经获得所有需要的变量，可以计算高光强度了。首先，我们定义一个镜面强度(Specular Intensity)变量，给镜面高光一个中等亮度颜色，让它不要产生过度的影响。

float specularStrength = 0.5;

下一步，我们计算视线方向向量，和对应的沿着法线轴的反射向量：


vec3 viewDir = normalize(viewPos - FragPos);
vec3 reflectDir = reflect(-lightDir, norm);

需要注意的是我们对lightDir向量进行了取反。reflect函数要求第一个向量是从光源指向片段位置的向量，但是lightDir当前正好相反，是从片段指向光源（由先前我们计算lightDir向量时，减法的顺序决定）。为了保证我们得到正确的reflect向量，我们通过对lightDir向量取反来获得相反的方向。第二个参数要求是一个法向量，所以我们提供的是已标准化的norm向量。
剩下要做的是计算镜面分量。下面的代码完成了这件事：

float spec = pow(max(dot(viewDir, reflectDir), 0.0), 32);
vec3 specular = specularStrength * spec * lightColor;

我们先计算视线方向与反射方向的点乘（并确保它不是负值），然后取它的32次幂。这个32是高光的反光度(Shininess)。一个物体的反光度越高，反射光的能力越强，散射得越少，高光点就会越小。

shader 代码

attribute vec3 beginPostion; ///开始位置
attribute vec3 vertexColor;
attribute vec3 aNormal; //法向量

uniform mat4 u_mvpMatrix;
uniform mat4 u_model;
uniform mat4  u_inverModel;

varying lowp vec3 normal;
varying lowp vec3 FragPos;


varying lowp vec3 vary_vertexColor;

void main(){
    gl_Position =u_mvpMatrix *u_model* vec4(beginPostion, 1.0);
    vary_vertexColor  = vertexColor;
    FragPos = vec3(u_model * vec4(beginPostion, 1.0));
    normal =  mat3(u_inverModel) * aNormal;;
}

precision lowp float;
uniform vec3 lightPos; ///光源位置
uniform vec3 lightColor; ///光源位置

uniform vec3 viewPos;

varying lowp vec3 normal;
varying lowp vec3 FragPos;
varying lowp vec3 vary_vertexColor;

void main()
{
    float specularStrength = 0.5;
    vec3 norm = normalize(normal);
    vec3 lightDir = normalize(lightPos - FragPos);
    vec3 viewDir = normalize(viewPos - FragPos);
    vec3 reflectDir = reflect(-lightDir, norm);
    float spec = pow(max(dot(viewDir, reflectDir), 0.0), 256.0);
    vec3 specular = specularStrength * spec * lightColor;
    ///环境光的使用

    gl_FragColor =vec4(specular,1.0) * vec4( vary_vertexColor,1.0);;
}

非常好的学习opengl的网址
 参考

重新自学学习openGL 之颜色和光照

颜色

基础光照

光照公式

环境光照

漫反射光照

镜面光照

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读