美文网首页
音视频开发之旅(43)-光照基础(二)

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

作者: yabin小站 | 来源:发表于2021-04-24 08:47 被阅读0次

    目录

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

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

    一、光照基础实践

    原始立方体效果


    1.1、环境光(Ambient Lightiing)

    //顶点着色器
    uniform vec3 lightColor;
    void main()
    {
    ...
        // 环境光
        //光照强度
        float ambientStrength = 0.3;
        ambient = ambientStrength * lightColor;
    ...
    }
    
    //片源着色器
    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即可

            GLES20.glEnableVertexAttribArray(ulightcolorLoc)
            //环境光,xyz坐标上的值
            GLES20.glUniform3f(ulightcolorLoc,1.0f,1.0f,1.0f)
    

    加入环境光后效果如下


    1.2 漫反射光(Diffuse Lighting)

    //顶点的法向量
    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中修改如下

       //设置每个顶点的法向量    
        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)
    

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

    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)

    //顶点着色器代码添加镜面反射
       
      //镜面反射
        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;
    
            //设置光照点
            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绘制立方体+旋转

    三、收获

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

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

    欢迎交流

    相关文章

      网友评论

          本文标题:音视频开发之旅(43)-光照基础(二)

          本文链接:https://www.haomeiwen.com/subject/pjekrltx.html