第一篇筆記 iOS OpenGL ES菜鳥學習筆記（1）——畫一個簡單的三角形 其實已經寫了很久了，其實研究OpenGL ES是為了在iOS原生App中使用AR。最近一直比較忙，也沒有那么時間去鼓搗這個筆記，終于研究得差不多了，也就回來這里繼續行騙了。（ps：菜鳥學習筆記，如有不對，大神請指教）

一、準備

從我們第一篇筆記上進行更改
準備一張圖，什么圖都可以（不要是白色，白色的東西在白色的背景下還能看見嗎）
我這里用的一個郁金香的圖片

tulip.png

什么是紋理這個我在文章末尾稍微介紹一下，有興趣的可以看看。

二、修改vertices

因為要繪制紋理上去，所以我們必須在vertices上加上紋理坐標

// 這個數據類型用于存儲每一個頂點數據
typedef struct {
    GLKVector3 positionCoords;  // 頂點數據
    GLKVector2 textureCoords;   // 紋理坐標
} SceneVertex;


// 創建本例中要用到的三角形頂點數據
// 這里的數據比上一個例子新增了紋理數據
static const SceneVertex vertices[] =
{
    {{-0.5, -0.5, 0.0}, {0.0, 0.0}},  // 左下
    {{ 0.5, -0.5, 0.0}, {1.0, 0.0}},  // 右下
    {{-0.5,  0.5, 0.0}, {0.0, 1.0}}  // 左上
};

三、- (void)viewDidLoad()

在這里我們要將圖片實現讀入到緩存中（如果在- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect中讀入，那么將會浪費很多資源，畢竟繪制一次讀入一次）

在第一篇文章的- (void)viewDidLoad()的末尾追加

    // 讀入需要繪制的圖片的CGImageRef內容
    // 畢竟OpenGL是基于C++的嘛，你直接給一個UIImage人怎么識別
    CGImageRef imageRefTulip = [UIImage imageNamed:@"tulip"].CGImage;
    
    // 使用GLKTextureLoader（紋理讀取）從上邊得到的imageRefTulip讀取紋理信息
    GLKTextureInfo *textureInfoTulip = [GLKTextureLoader textureWithCGImage:imageRefTulip
                                                               options:nil
                                                                 error:nil];
    
    // 將讀取到的紋理信息緩存到baseEffec的texture2d0中
    self.baseEffect.texture2d0.name = textureInfoTulip.name;
    self.baseEffect.texture2d0.target = textureInfoTulip.target;

從代碼備注中直接可以看書每句代碼干的事情。

GLKTextureInfo封裝了剛創建的紋理緩存相關的信息，包括他的尺寸以及是否包含MIP貼圖。我們這里只需要OpenGL ES標識符、名字和用于紋理的OpenGL ES目標。

GLKTextureLoader會自動調用glTexParameteri()方法來為創建的紋理緩存設置OpenGL ES取樣模式和循環模式。其實就是告訴OpenGL ES怎么處理可用紋素的數量與需要被著色的片源的數量不匹配的情況（基本不存在兩者相同的情況）。我們將在本文最后對此稍微介紹一下。

四、- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect

這里做的事情跟第一篇筆記其實沒什么差別，只是多了一個紋理的繪制。

在執行繪制操作之前加入如下代碼

    // 繪制紋理數據準備
    glEnableVertexAttribArray(GLKVertexAttribTexCoord0);     // 啟用紋理
    glVertexAttribPointer(GLKVertexAttribTexCoord0,
                          2,
                          GL_FLOAT,
                          GL_FALSE,
                          sizeof(SceneVertex),
                          NULL + offsetof(SceneVertex, textureCoords));

其實到這里代碼就沒了，是不是很少。

五、運行

沒有源碼的博客不是好的示例
https://github.com/JunesYin/LyOpenGLES/tree/master/LyOpenGLES_02

六、一點紋理知識

說了要介紹就要介紹，一個字都不能少。

1、什么是紋理

紋理是一個用來保存圖像的顏色元素值的OpenGL ES緩存。簡單來說，渲染場景其實渲染很多個像素點，這些像素點都有各自的顏色。如果我們在渲染時針對每一個像素點指定顏色，這將會是一個非常龐大的工程量，試想一個像素點有多大，而iPhone的屏幕又有多少像素點，就算我們渲染10x10的一個正方形圖像，這都需要指定100個像素點了。所以需要紋理貼圖，使用紋理貼圖使我們只需要關注渲染多大的場景，然后將需要呈現的圖像繪制進這個場景就可以了（以上觀點僅個人理解，如有錯誤，歡迎評論指正）。上邊的例子就是將郁金香作為紋理貼圖貼在我們繪制的三角形中。

2、紋理坐標系

紋理坐標系有一個命名為S和T的2D軸。如下圖，一個紋理中無論有多少個紋素，紋理的尺寸永遠在S軸上從0.0到1.0，T軸也是從0.0到1.0。從一個寬為2像素寬為16像素的圖像初始化來的紋理，整個S軸有2像素，T軸有16像素。

3、如何對齊紋理

雖然我們給OpenGL ES提供了一個紋理貼圖，但是它還是不知道要怎么利用我們給定的紋理對幾何圖形進行著色。咱們先來看幾個名詞：

• 視口（viewport）：幀緩存中的像素位置叫做視口。渲染時，GPU會轉換純數學的OpenGL ES坐標系中的X、Y、Z坐標為幀緩存中所對應真實的像素位置。
• 點陣化（rasterizing）：轉換幾何形狀數據為幀緩存中的顏色像素的渲染步驟叫做點陣化。
• 片元（fragment）：每個顏色像素叫做片元。
  映射（mapping）：指定怎么對其紋理和頂點，以便讓GPU知道每個片元的顏色由哪些紋素決定。這通過擴展為每個頂點保存的數據來實現：除了X、Y、Z坐標，每個頂點還給出了U和V坐標值。U坐標映射到S軸的位置，V坐標映射到T軸。不同的是{U，V}坐標可能會超出0.0到1.0的這個范圍。

在每個頂點的X、Y、Z坐標被轉換為視口坐標后，GPU會設置轉換生成的三角形內的每個像素的顏色。當OpenGL ES沒有使用紋理時，GPU會根據包含該片元的對象的頂點的顏色來計算每個片元的顏色。使用紋理時，GPU會根據當前綁定的紋理緩存中的紋素來計算每個片元的顏色。

Note：我們在上述例子中使用{-0.5, -0.5, 0.0}、{ 0.5, -0.5, 0.0}、{-0.5, 0.5, 0.0}這三個坐標點指定了一個三角形的三個頂點，這個三角形的寬度和高度在純數學的OpenGL ES坐標系中是相等的。但是我們在繪制三角形時，幀緩存是按照像素來匹配屏幕坐標的。將坐標點轉換為視口坐標，這使得所有繪制的幾何圖形都被拉伸以適合屏幕大小，iPhone屏幕的比例均為高大于寬，所以我們的例子中看起來高都大于寬。如果要控制這個轉換，需要做一點操作，這個我們在后續文章會慢慢了解的。

4、取樣模式

每個頂點的U和V坐標會附加到每個頂點在視口坐標中的最終位置。GPU會根據計算出來的每個片元的U、V位置從綁定的紋理中選擇紋素，這個過程叫做取樣。取樣會把紋理的S和T坐標系與每個渲染的三角形的頂點的U、V坐標匹配起來。

如上圖所示，在S和T坐標系中與{0.0，0.0}位置最近的紋素會被映射到擁有{0.0， 0.0}的頂點U、V坐標的頂點所對應的片元上。每個隨后的片元位置對應于一個沿著S和T軸的與該片元在U、V坐標中的位置等比例的位置。例如，一個U、V坐標為{0.5， 0.5}的片元會被當前綁定的紋理中最接近中間位置的紋素所著色。

OpenGL ES支持多個不同的取樣模式。當一個三角形生成的片元少于綁定的紋理的可用紋素時會發生什么。一個含有大量紋素的紋理被映射到幀緩存內一個只覆蓋幾個像素的三角形中，這種情況是很常見的，相反的情況也很常見。到底是怎么才能比較好的將片元與紋素對應起來呢？

先看看如下幾個函數調用

    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
    
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

4.1 GL_TEXTURE_MIN_FILTER

GL_TEXTURE_MIN_FILTER 參數適用于紋素過多的情況

• 使用GL_LINEAR 指定這種情況時，出現多個紋素對應一個片元時，從相配的多個紋素中取樣顏色，使用線性內插法來混著這些顏色從而得到這個片元的顏色，簡
  單來說就是混合與當前片元相配的所有紋素的顏色。這很可能出現一個紋理中不存在的顏色。
• 使用GL_NEAREST指定時，與該片元的U、V坐標最接近的紋素的顏色將被作為片元的顏色。例如，一個紋理是由交替的黑色紋素和白色紋素組成，GL_NEAREST會拾取與相近的一個紋素或另一個紋素，此時最終片元的顏色要么是黑色，要么是白色。

4.2 GL_TEXTURE_MAG_FILTER

GL_TEXTURE_MAG_FILTER 參數適用于紋素不足的情況，此時將唯一地映射一個或多個紋素到每個片元上時配置取樣。

• 使用GL_LINEAR指定這種情況時，OpenGL ES將混合附近紋素的顏色來計算片元的顏色。GL_LINEAR有一個放大紋理的效果并將其模糊地出現在渲染的三角形片元上。
• 使用GL_NEAREST指定時，OpenGL ES僅僅拾取與片元的U、V位置接近的紋素的顏色，并放大紋理，這讓紋素像素化地出現在渲染的三角形片元上。

Note：GLKTextureLoader會自動設置GL_TEXTURE_MIN_FILTER為GL_LINEAR。

5、循環模式

除了減小和放大過濾選項，當U、V坐標的值小于0或者大于1時，程序會指定發生什么。這里有兩個選擇：

· 盡可能多地重復紋理以填滿映射到整個結合圖形的U、V坐標區域；
· 每當片元的U、V坐標值超出紋理的S、T坐標系范圍時，從紋理邊緣取樣紋素。

紋理的循環模式需要為S軸與T軸分開設置，來看看這幾句代碼

    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
    
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);

第一句代碼：S軸，若片元的U坐標超出紋理的S坐標系范圍，取樣紋理邊緣的紋素；
第二句代碼：S軸，若片元的U坐標超出紋理的S坐標系范圍，重復紋理；
第三局代碼：T軸，若片元的V坐標超出紋理的T坐標系范圍，取樣紋理邊緣的紋素；
第四局代碼：T軸，若片元的V坐標超出紋理的T坐標系范圍，重復紋理。

Note：GL_TEXTURE_WRAP_S和GL_TEXTURE_WRAP_T都會自動被設置為GL_CLAMP_TO_EDGE。

系列源碼傳送門：https://github.com/JunesYin/LyOpenGLES