關於UV紋理座標映(Texture Mapping)射原理

紋理座標

 

當紋理映射啓動後繪圖時,你必須爲OpenGL ES提供其他數據,即頂點數組中各頂點的 紋理座標。紋理座標定義了圖像的哪一部分將被映射到多邊形。它的工作方式有點奇怪。你有一個正方形或長方形的紋理,其左下角爲二維平面的原點,高和寬的單位爲一。像這樣:

texture_coords

 

這就是我們的“紋理座標系統”,不使用xy 來代表二維空間,我們使用 st 作爲紋理座標軸,但原理上是一樣的。

 

除了 st 軸外,被映射的紋理在多邊形同樣有兩個軸,它們稱爲 uv軸。這是源於許多3D圖像程序中的UV 映射 的術語。

uvst

 

好,我們明白了紋理座標系統,我們現在討論怎樣使用這些紋理座標。當我們指定頂點數組中的頂點時,我們需要在另一個數組中提供紋理座標,它稱爲紋理座標數組。 每個頂點,我們將傳遞兩個GLfloats (s, t) 來指定頂點在上圖所示座標系統的位置。讓我們看看一個可能是最爲簡單的例子,將整個圖像映射到一個由三角形條組成的正方形上。首先,我們創建一個由四個頂點組成的頂點數組:

trianglestrip

 

現在將兩個框圖疊在一起,所使用的座標數組的值變得很明顯:

overlay

將其轉化爲 GLfloat數組:

    static const GLfloat texCoords[] = {
        0.0, 1.0,
        1.0, 1.0,
        0.0, 0.0,
        1.0, 0.0
    };

 

下面是我使用的紋理:

texture

 

運行時的結果:

textureapp1

 

請等下:那並不正確。如果你仔細對比一下紋理圖像和上面的截屏,你就會發現它們並不完全相同。截屏中圖像的y軸(或t軸)完全顛倒了。它上下顛倒了,並不是旋轉,而是翻轉了。

 


 

更多的映射方式

 

上個例子中這個圖像都被映射到繪製的正方形上。那是因爲設定的紋理座標所決定的。我們可以改變座標數組僅使用源圖像的中心部分。讓我們看看僅使用了圖像中心部分的另一個框圖:

mapping3

 

其座標數組爲:

    static const GLfloat texCoords[] = {
        0.25, 0.75,
        0.75, 0.75,
        0.25, 0.25,
        0.75, 0.25
    };

 

運行使用了新映射到程序,屏幕上只顯示了圖像的中心部分:

middle

 

類似地,如果我們只希望顯示紋理的左下部:

lowerleft

 

座標數組爲:

    static const GLfloat texCoords[] = {
        0.0, 0.5,
        0.5, 0.5,
        0.0, 0.0,
        0.5, 0.0
    };

 

顯示結果:

lowerleft1

 

等一下,還有更多的方式

 

實際上,並不是真正還有更多的映射方式,只是說此功能在正方形到正方形的映射時並不很明顯。同樣的步驟適合於幾何體中任何三角形,而且你甚至可以通過非常規方式的映射來扭曲紋理。例如,我們可以定義一個等腰三角形:

triangle

 

但將底部頂點映射到紋理的左下角:

weirdMapping

 

運行時結果如下:

trianglesimul

 

注意到紋理正方形左下角的弧形花紋現在處於三角形的底部了嗎?總而言之,紋理上的任何一點都可以映射到多邊形的任何一點。或者換而言之,你可以對任何地點(u,v)使用任何(s,t)而OpenGL ES則爲你進行映射。

(2011-12-30,文章來源:http://www.iphone-geek.cn/%E7%BC%96%E7%A8%8B/%E4%BB%8E%E9%9B%B6%E5%BC%80%E5%A7%8B%E5%AD%A6%E4%B9%A0opengl-es%E4%B9%8B%E5%85%AD-%E7%BA%B9%E7%90%86%E5%8F%8A%E7%BA%B9%E7%90%86%E6%98%A0%E5%B0%84


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