音视频开发之旅（43)-光照基础(二)

2021-04-25 10:55:28 浏览数 (1)

目录

  1. 实践（环境光、漫反射光、镜面反射光）
  2. 资料
  3. 收获

上一篇我们学习实践了关照基础的基本概念和立方体的实现。有不清楚的可以先进行回看。 这篇我们来光照基础的具体实践

一、光照基础实践

原始立方体效果

1.1、环境光（Ambient Lightiing）

代码语言：javascript复制
//顶点着色器
uniform vec3 lightColor;
void main()
{
...
    // 环境光
    //光照强度
    float ambientStrength = 0.3;
    ambient = ambientStrength * lightColor;
...
}
代码语言：javascript复制
//片源着色器
varying vec3 ambient;

void main()
{
    vec4 color = texture2D(uTexture, v_texCoord);
    vec3 finalColor = ambient * vec3(color);
    gl_FragColor = min(vec4(finalColor, color.a),vec4(1.0));

}

在Render中传入lightcolor即可

代码语言：javascript复制
        GLES20.glEnableVertexAttribArray(ulightcolorLoc)
        //环境光，xyz坐标上的值
        GLES20.glUniform3f(ulightcolorLoc,1.0f,1.0f,1.0f)

加入环境光后效果如下

1.2 漫反射光(Diffuse Lighting)

代码语言：javascript复制
//顶点的法向量
attribute vec3 aNormal;
//模型矩阵
uniform mat4 uModelMatrix;
//光源位置
uniform vec3 lightPos;

void main()
{  
...
  // 漫反射
    float diffuseStrength = 0.8;
    //顶点的单位法线
    vec3 unitNormal = normalize(vec3(uModelMatrix * vec4(aNormal, 1.0)));
    //从顶点到光源的单位向量
    vec3 lightDir = normalize(lightPos - fragPos);
    //上面来两个向量进行点乘
    float diff = max(dot(unitNormal, lightDir), 0.0);
    diffuse = diffuseStrength * diff * lightColor;
...
}

Render中修改如下

代码语言：javascript复制
   //设置每个顶点的法向量    
    GLES20.glEnableVertexAttribArray(aNormalCoorLoc)
        cubeLight.vertexArrayBuffer.position(CubeLight.POSITION_COMPONENT_COUNT CubeLight.POSITION_TEXTURE_COUNT)
        GLES20.glVertexAttribPointer(aNormalCoorLoc,CubeLight.POSITION_NORMAL_COUNT,GLES20.GL_FLOAT,false,CubeLight.STRIDE, cubeLight.vertexArrayBuffer)


   //设置光照点
   GLES20.glEnableVertexAttribArray(ulightPosLoc)
   GLES20.glUniform3f(ulightPosLoc,3.0f,0.0f,1.0f)

顶点数据在上一篇的基础上加入法向量

代码语言：javascript复制
val vertexData = floatArrayOf(
                //position            //texture coord    //normal
                -0.5f, -0.5f, -0.5f,   0.0f, 0.0f,      0.0f,  0.0f, -1.0f,
                0.5f, -0.5f, -0.5f,   1.0f, 0.0f,      0.0f,  0.0f, -1.0f,
                0.5f,  0.5f, -0.5f,   1.0f, 1.0f,      0.0f,  0.0f, -1.0f,
                0.5f,  0.5f, -0.5f,   1.0f, 1.0f,      0.0f,  0.0f, -1.0f,
                -0.5f,  0.5f, -0.5f,   0.0f, 1.0f,      0.0f,  0.0f, -1.0f,
                -0.5f, -0.5f, -0.5f,   0.0f, 0.0f,      0.0f,  0.0f, -1.0f,

                -0.5f, -0.5f, 0.5f,    0.0f, 0.0f,      0.0f,  0.0f,  1.0f,
                0.5f, -0.5f, 0.5f,    1.0f, 0.0f,      0.0f,  0.0f,  1.0f,
                0.5f,  0.5f, 0.5f,    1.0f, 1.0f,      0.0f,  0.0f,  1.0f,
                0.5f,  0.5f, 0.5f,    1.0f, 1.0f,      0.0f,  0.0f,  1.0f,
                -0.5f,  0.5f, 0.5f,    0.0f, 1.0f,      0.0f,  0.0f,  1.0f,
                -0.5f, -0.5f, 0.5f,    0.0f, 0.0f,      0.0f,  0.0f,  1.0f,

                -0.5f,  0.5f,  0.5f,   1.0f, 0.0f,     -1.0f,  0.0f,  0.0f,
                -0.5f,  0.5f, -0.5f,   1.0f, 1.0f,     -1.0f,  0.0f,  0.0f,
                -0.5f, -0.5f, -0.5f,   0.0f, 1.0f,     -1.0f,  0.0f,  0.0f,
                -0.5f, -0.5f, -0.5f,   0.0f, 1.0f,     -1.0f,  0.0f,  0.0f,
                -0.5f, -0.5f,  0.5f,   0.0f, 0.0f,     -1.0f,  0.0f,  0.0f,
                -0.5f,  0.5f,  0.5f,   1.0f, 0.0f,     -1.0f,  0.0f,  0.0f,

                0.5f,  0.5f,  0.5f,   1.0f, 0.0f,      1.0f,  0.0f,  0.0f,
                0.5f,  0.5f, -0.5f,   1.0f, 1.0f,      1.0f,  0.0f,  0.0f,
                0.5f, -0.5f, -0.5f,   0.0f, 1.0f,      1.0f,  0.0f,  0.0f,
                0.5f, -0.5f, -0.5f,   0.0f, 1.0f,      1.0f,  0.0f,  0.0f,
                0.5f, -0.5f,  0.5f,   0.0f, 0.0f,      1.0f,  0.0f,  0.0f,
                0.5f,  0.5f,  0.5f,   1.0f, 0.0f,      1.0f,  0.0f,  0.0f,

                -0.5f, -0.5f, -0.5f,   0.0f, 1.0f,      0.0f, -1.0f,  0.0f,
                0.5f, -0.5f, -0.5f,   1.0f, 1.0f,      0.0f, -1.0f,  0.0f,
                0.5f, -0.5f,  0.5f,   1.0f, 0.0f,      0.0f, -1.0f,  0.0f,
                0.5f, -0.5f,  0.5f,   1.0f, 0.0f,      0.0f, -1.0f,  0.0f,
                -0.5f, -0.5f,  0.5f,   0.0f, 0.0f,      0.0f, -1.0f,  0.0f,
                -0.5f, -0.5f, -0.5f,   0.0f, 1.0f,      0.0f, -1.0f,  0.0f,

                -0.5f, 0.5f, -0.5f,    0.0f, 1.0f,      0.0f,  1.0f,  0.0f,
                0.5f, 0.5f, -0.5f,    1.0f, 1.0f,      0.0f,  1.0f,  0.0f,
                0.5f, 0.5f,  0.5f,    1.0f, 0.0f,      0.0f,  1.0f,  0.0f,
                0.5f, 0.5f,  0.5f,    1.0f, 0.0f,      0.0f,  1.0f,  0.0f,
                -0.5f, 0.5f,  0.5f,    0.0f, 0.0f,      0.0f,  1.0f,  0.0f,
                -0.5f, 0.5f, -0.5f,    0.0f, 1.0f,      0.0f,  1.0f,  0.0f
        )

环境光 漫反射光后效果如下

我们设置的光源位置在x轴的正3和y轴的正1位置，所以看到的立方体右侧的平面会有光照效果，而其他面影响很小。

1.3、镜面反射光(Specular Lighting)

代码语言：javascript复制
//顶点着色器代码添加镜面反射
   
  //镜面反射
    float specularStrength = 0.9;
    //视角和顶点的单位向量
    vec3 viewDir = normalize(viewPos - fragPos);
    //调用reflect反射内置函数
    vec3 reflectDir = reflect(-lightDir, unitNormal);
    float spec = pow(max(dot(unitNormal, reflectDir), 0.0), 16.0);
    specular = specularStrength * spec * lightColor;
代码语言：javascript复制
        //设置光照点
        GLES20.glEnableVertexAttribArray(ulightPosLoc)
        GLES20.glUniform3f(ulightPosLoc,3.0f,0.0f,2.0f)

        //设置镜面反射 视点位置
        GLES20.glEnableVertexAttribArray(uViewPosLoc)
        GLES20.glUniform3f(uViewPosLoc,-1.0f, 0.0f, 3.0f)

环境光 镜面反射光后效果如下

最后看下 三种光照同时作用于立方体的效果

完整代码已上传至 github https://github.com/ayyb1988/mediajourney

二、资料

《OpenGL编程指南》

基础光照 探究OpenGL光照模型的着色器实现 OpenGL_ES-光照(光照基础,漫反射,镜面反射) NDK OpenGL ES 3.0 开发（九）：光照基础 OPENGL ES 案例03：COREANIMATION绘制立方体 旋转

三、收获

在上一篇的基础上，实践环境光、漫反射、镜面反射

感谢你的阅读 下一篇我们学习实践流体，欢迎关注公众号“音视频开发之旅”，一起学习成长。

欢迎交流

短视频

0 人点赞