通俗易懂的 OpenGL ES 3.0(一)入門必備知識!!

前言

opengl的入門是個難點,因爲在繪製出圖形之前,你必須要學習一大堆的概念,以及部分圖形知識。以至於在代碼中不迷路-v-!!.接下來就通俗的講解下部分概念知識。希望大家取其精華去其糟粕

溫馨提示: blog閱讀體驗會好點
https://laishujie.coding.me/2018/09/23/通俗易懂的 OpenGL ES (一)入門必備知識/

頂點(Vertex)

     opengl物體圖形都由點、線和多邊形組成。而組成他們的關鍵就在於我們的頂點數據。就像畫畫在開始前會先畫出大概的位置,opengl在繪製的時候也需要準備繪製的位置,而這些位置就是頂點,當頂點組合起來就是頂點座標

舉個例子:看下面的的藍色小球就是我們說的頂點,而這些小球組合起來就是一組頂點座標,從而組成我們的圖形物體

在這裏插入圖片描述

座標系

     opengl是一個3d的世界,由 x,y,z 座標組成頂點座標。畫了一張圖,應該會就比較好理解了

在這裏插入圖片描述

上面的圖片也說的比較詳細。就不詳細解釋了

着色器

     OpenGL編程語言是GLSL,就是我們說的着色器語言。語法上比較像c/c++。但是在這一基礎上加上了許多適合圖形處理的一些東西,比如一些針對向量和矩陣操作等。我們要圖形渲染,就一定需要頂點着色器和一個簡單的片元着色器

渲染基本過程

圖片來自https://learnopengl-cn.github.io/
圖片來自: https://learnopengl-cn.github.io/

對於上面的圖形渲染管線的每個階段。我們只需要編寫這個頂點着色器和片段着色器。

確定位置與渲染的顏色

1.頂點着色器

     這個東西的主要作用是接受頂點數據,也是說通常是用來接受定義的頂點座標,或者是一些關於矩陣變換,紋理生成和座標變換等…。總的來說就是處理頂點數據

     簡單的頂點着色器

#version 300 es

layout (location = 0) in vec3 aPos;

 // 爲片段着色器指定一個顏色輸出
out vec4 color;
void main()
{
    gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);
    color = vec4(0.5, 0.0, 0.0, 1.0);
}

aPos確定了位置之後,通過out字段輸出渲染顏色了。這就要說到片段着色器

2.片段着色器

     最主要是確定渲染的顏色。就像畫家調色板。

很多濾鏡、美顏、圖片處理。或者說抖音的一些特效,都可以用片元着色器編寫。

最簡單的片元着色器

//指定版本號和精度
#version 300 es
precision mediump float;
out vec4 fragColor;

//從頂點着色器傳來的輸入變量(名稱相同、類型相同)
in vec4 color;
void main()
{
    //在通過out字段將顏色輸出
    fragColor = color;
}

這樣就可以通過頂點着色器爲中介,接受顏色值在通過片段着色器輸出了

實踐的話,可以看看這篇文章,不過是用opengl2.0寫的,與3.0差別不算很大,改改就好了

手把手帶你實現抖音短視頻特效

最後在說下2.0和3.0的不同的之處 (-V-!!

1. VAO (頂點數組對象:Vertex Array Object)

不知道你們2.0有沒有用過這個vbo的東西,就是這個把頂點數據保存在顯存中,繪製時直接從顯存中取數據,減少了數據傳輸的開銷,因爲頂點數據多了,就是座標的數據多了很多的很多組,切換的時候很麻煩,就出現了這個VAO,綁定對應的頂點數據

有空會出個文章說說這個vao和vbo是啥0v0.

2.語法方面的不同
  1. attribute和varying。 取而代之的是 in和out
  2. 頭文件多了個#version 300 es
  3. 還有紋理 texture2D和texture3D統統改爲 texture
  4. 內置函數gl_FragColor和gl_FragData刪除,如果片段着色器要輸出用out聲明字段輸出。不過保留了gl_Position
  5. 還有的是layout的作用:可以直接指定位置
opengl 2.0
uniform  float intensity;
 // 代碼 賦值
GLES20.glUniform1f(GLES20.glGetAttribLocation(program, "intensity"), 1f)

opengl 3.0
layout (location = 1) uniform  float intensity;

//直接寫上對應的layout的值就可以賦值
GLES30.glUniform1f(1,1f) 

暫時就這些,有遺漏的可以補充!!-v-!

參考資料:
https://learnopengl-cn.github.io/
https://blog.csdn.net/junzia/article/details/52793354
https://blog.csdn.net/yanyan19880509/article/details/58325322

感謝閱讀!!

知道了上面這這幾個知識算是入門。當然還有許多都沒有涉及到,比如,:矩陣變換、投影、光照、紋理…等等。有時間會像大家介紹更多的知識,希望大家看完有所收穫吧!【完】

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章