音視頻開發之旅（42)-光照基礎(一)

一、光照相關基本知識

經典光照模型通過單獨計算光源成分得到綜合光照效果，然後添加到材質表面上特定點。這些成分包括環境光(Ambient Lighting)、漫反射光(Diffuse Lighting)和鏡面反射光(Specular Lighting)。

圖片來自：基礎光照

1.1 環境光（Ambient Lightiing）

環境光（Ambient Lightiing）不來自任何特定方向的光，在經典光照模型中會用一個常量來表示
使用時只需要對其片源着色器添加一個環境光常量，作爲gl_Fragcolor的調製即可_

uniform vec4 ambient;
varying vec4 color;

void main{
    vec3 ambientLight = vec3(ambient);
    vec3 rgb = min(color.rgb * ambientLight,vec3(1.0));
    gl_FragColor = vec4(rgb,color.a);
}

1.2 漫反射光(Diffuse Lighting)

漫反射光(Diffuse Lighting)和鏡面反射光都涉及到光源方向和眼睛觀察方向。爲此引入法向量的概念。

法向量是垂直於頂點表面的單位向量。

由於頂點本身並沒有表面，它只是一個獨立的點，我們可以利用它周圍的頂點來計算出這個頂點的表面
就像頂點座標一樣，頂點方向量也作爲一個location傳給着色器使用。

漫反射光照是一種簡單的光照模型，它的公式是：

N是頂點的單位法線，L是表示從頂點到光源的單位向量方向。Cmat是表面材料的顏色，Cli是光線的顏色，Cdiff是最終的散射顏色。

對應簡化的着色器代碼如下

    // Diffuse
    float diffuseStrength = 0.5; //漫反射強度
    vec3 unitNormal = normalize(vec3(u_ModelMatrix * vec4(a_normal, 1.0)));//頂點的單位法線
    vec3 lightDir = normalize(lightPos - fragPos);//從頂點到光源的單位向量方向
    float diff = max(dot(unitNormal, lightDir), 0.0);
    diffuse = diffuseStrength * diff * lightColor;

1.3 鏡面反射

只有漫反射，再漂亮的模型也會失去光澤，我們必須找出一個方法來顯示模型的高光，這時應採用鏡面反射光照模型。鏡面反射光照模型的公式是：

H表示光線向量和視圖向量（可通過視圖矩陣轉換）之間的夾角正中的方向。稱爲半角向量。Sexp是最終產生的鏡面顏色。N、L、Cmat和Cli的值與散射光方程式相同

圖片來自：基礎光照

對應簡化的着色器代碼如下：

    // Specular
    float specularStrength = 0.9;//鏡面反射強度
    vec3 viewDir = normalize(viewPos - fragPos);//歸一化的
    vec3 reflectDir = reflect(-lightDir, unitNormal);//光線向量和視圖向量（可通過視圖矩陣轉換）之間的夾角正中的方向。稱爲半角向量
    float spec = pow(max(dot(unitNormal, reflectDir), 0.0), 16.0);
    specular = specularStrength * spec * lightColor;

二、實踐

爲了更好的展示效果，我們立方體的基礎上進行環境光照、漫反射光照、鏡面反射光照。下面我們依次進行實踐。

畫一個立方體加上圖片紋理
加上環境光
加上漫反射光
加上鏡面反射光

2.1 畫個立方體並且渲染圖片紋理

立方體的繪畫我們可以採用畫六個面的方式，也可以採用畫一個面然後採用投影的方式。本篇我們纔有後者實現

先來看下着色器, 比較簡單，傳入頂點座標、紋理座標、MVP矩陣以及紋理

//cube_vertex.glsl
precision mediump float;
attribute vec3 aPosition;
attribute vec2 aTexCoord;

uniform mat4 uMatrix;
varying vec2 v_texCoord;

void main()
{
    gl_Position = uMatrix * vec4(aPosition,1.0);
    v_texCoord = aTexCoord;
}

//cube_fragment.glsl

precision mediump float;
varying vec2 v_texCoord;
uniform sampler2D uTexture;
void main()
{
    gl_FragColor = texture2D(uTexture, v_texCoord);
}

接着可以先畫一個面，設置每個面上的頂點座標和紋理座標，然後根據透視投影變換投影出每個面上的畫面。
關鍵代碼如下：
首先確定每個面的頂點座標和紋理座標

 val vertexData = floatArrayOf(
                //position            //texture coord   
                -0.5f, -0.5f, -0.5f,   0.0f, 0.0f,
                0.5f, -0.5f, -0.5f,   1.0f, 0.0f,
                0.5f,  0.5f, -0.5f,   1.0f, 1.0f,
                0.5f,  0.5f, -0.5f,   1.0f, 1.0f,
                -0.5f,  0.5f, -0.5f,   0.0f, 1.0f, 
                -0.5f, -0.5f, -0.5f,   0.0f, 0.0f,

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

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

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

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

                -0.5f, 0.5f, -0.5f,    0.0f, 1.0f,
                0.5f, 0.5f, -0.5f,    1.0f, 1.0f,
                0.5f, 0.5f,  0.5f,    1.0f, 0.0f,
                0.5f, 0.5f,  0.5f,    1.0f, 0.0f,
                -0.5f, 0.5f,  0.5f,    0.0f, 0.0f,
                -0.5f, 0.5f, -0.5f,    0.0f, 1.0f
        )
      var vertexArrayBuffer = ByteBuffer
                .allocateDirect(vertexData.size * BYTES_PER_FLOAT)
                .order(ByteOrder.nativeOrder())
                .asFloatBuffer()
                .put(vertexData)
        vertexArrayBuffer.position(0)

圖片來自：OPENGL ES 案例03：COREANIMATION繪製立方體+旋轉，其中圖片中有個環節位移方向反了

下面來看下Render的實現

//在onSurfaceChanged 確定好透視投影矩陣和視圖投影矩陣。
   
    override fun onSurfaceChanged(gl: GL10?, width: Int, height: Int) {
        GLES20.glViewport(0, 0, width, height)
        val whRadio = width / (height * 1.0f)
        Matrix.setIdentityM(projectionMatrix, 0)
        Matrix.perspectiveM(projectionMatrix, 0, 60f, whRadio, 1f, 100f)

        Matrix.setIdentityM(viewMatrix,0);
        Matrix.setLookAtM(viewMatrix,0,
        2f,0f,3f,
        0f,0f,0f,
        0f,1f,0f)
    }

//繪製
override fun onDrawFrame(gl: GL10?) {
        //這裏由於用到深度測試需要清除GL_DEPTH_BUFFER_BIT
        GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT or GLES20.GL_DEPTH_BUFFER_BIT)

        GLES20.glClearColor(0f, 0f, 0f, 1f)

        //必須要加深度測試
        GLES20.glEnable(GLES20.GL_DEPTH_TEST)


        Matrix.setIdentityM(modeMatrix, 0)


        //採用旋轉的方式，只能採用旋轉的方式，進行實現視角變換，達到移動的效果
        Matrix.rotateM(modeMatrix, 0, xRotation, 1f, 0f, 0f)
        Matrix.rotateM(modeMatrix, 0, yRotation, 0f, 1f, 0f)

        Matrix.multiplyMM(mvpMatrix, 0, viewMatrix, 0, modeMatrix, 0)
        Matrix.multiplyMM(mvpMatrix, 0, projectionMatrix, 0, mvpMatrix, 0)

        GLES20.glUseProgram(mProgram)

        //傳mvp矩陣數據
        GLES20.glUniformMatrix4fv(uMatrixLoc, 1, false, mvpMatrix, 0)
        //傳紋理數據
        GLES20.glActiveTexture(GLES20.GL_TEXTURE0)
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, skyBoxTexture)
        GLES20.glUniform1i(uTextureLoc, 0)


        GLES20.glEnableVertexAttribArray(aPositionLoc)
        cubeLight.vertexArrayBuffer.position(0);
        GLES20.glVertexAttribPointer(aPositionLoc, CubeLight.POSITION_COMPONENT_COUNT, GLES20.GL_FLOAT, false, CubeLight.STRIDE, cubeLight.vertexArrayBuffer)

        GLES20.glEnableVertexAttribArray(aTextureCoorLoc)
        cubeLight.vertexArrayBuffer.position(CubeLight.POSITION_COMPONENT_COUNT);
        GLES20.glVertexAttribPointer(aTextureCoorLoc, CubeLight.POSITION_TEXTURE_COUNT, GLES20.GL_FLOAT, false, CubeLight.STRIDE, cubeLight.vertexArrayBuffer)

        cubeLight.vertexArrayBuffer.position(0);


        GLES20.glDrawArrays(GLES20.GL_TRIANGLES,0,36)
    }

具體介紹請看代碼註釋。完整代碼已上傳至 github https://github.com/ayyb1988/mediajourney

資料

《OpenGL編程指南》

基礎光照
 探究OpenGL光照模型的着色器實現
 OpenGL_ES-光照(光照基礎,漫反射,鏡面反射)
NDK OpenGL ES 3.0 開發（九）：光照基礎
 OPENGL ES 案例03：COREANIMATION繪製立方體+旋轉

收穫

瞭解了經典的馮氏光照模型
瞭解環境光照、漫反射光照、鏡面反射光照的原理
拆分成多個環節逐步實現
代碼先實現立方的繪製

由於在繪製立方體時，有涉及到內容較多，光照部分的具體實踐我們留在下一篇學習。在學習實踐過程中地圖非常關鍵，當不知道往哪走的時候，打開地圖，想一想目的地，很快就可以梳理清楚要走的路。一起加油。

感謝你的閱讀
下一篇我們繼續學習實踐光照部分內容，歡迎關注公衆號“音視頻開發之旅”，一起學習成長。

歡迎交流

音視頻開發之旅（42)-光照基礎(一)

目錄

一、光照相關基本知識

1.1 環境光（Ambient Lightiing）

1.2 漫反射光(Diffuse Lighting)

1.3 鏡面反射

二、實踐

2.1 畫個立方體並且渲染圖片紋理

資料

收穫

爲什麼要⽤ Foundry

【筆記】動手學深度學習-預備知識

py發送email

MySQL 分庫分表方案，總結太全了。。

Qt/C++音視頻開發71-指定mjpeg/h264格式採集本地攝像頭/存儲文件到mp4/設備推流/採集推流

WPF開源輕便、快速的桌面啓動器

公司來了個新同事，把 DDD 運用得爐火純青！

音視頻開發之旅（62) -Lottie 源碼分析之json解析

音視頻開發之旅（63) -Lottie 源碼分析之動畫與繪製

音視頻開發之旅（66) - 音頻變速不變調的原理

音視頻開發之旅（64) - 部分android手機上編碼的視頻在ios上無法播放

音視頻開發之旅（65) -帶着問題學習實踐CMake

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

音視頻開發之旅（42)-光照基礎(一)

目錄

一、光照相關基本知識

1.1 環境光（Ambient Lightiing）

1.2 漫反射光(Diffuse Lighting)

1.3 鏡面反射

二、 實踐

2.1 畫個立方體並且渲染圖片紋理

資料

收穫

二、實踐