OpenGL 2D紋理單元&紋理翻轉(zhuǎn)解決策略

原文: CC老師
著作所屬權(quán)歸該作者所有,任何形式轉(zhuǎn)載請聯(lián)系作者并注明原文出處.

片元著色器

varying vec2 TexCoord;
uniform sampler2D ourTexture;

void main()
{
    gl_FragColor = texture(ourTexture, TexCoord);
}

TexCoord 紋理坐標(biāo),通過頂點(diǎn)著色器傳遞
ourTexture,紋理采樣器

片元著色器,是如何訪問紋理對象

首先,思考我們是如何將紋理對象傳遞給片元著色器? GLSL 中提供一個共紋理對象使用的內(nèi)建數(shù)據(jù)類型,叫做采樣器(sampler).

例如,sampler1D,sampler2D,sampler3D 表示不同維度的紋理類型.

那么我們在片元著色器是如何獲取一個紋理的? 我們簡單聲明一個紋理對象. uniform sampler2D,將一個紋理添加片元著色器中.

//聲明一個紋理對象
uniform sampler2D ourTexture;

如何獲取紋理對應(yīng)像素點(diǎn)的顏色值

我們可以使用GLSL內(nèi)建的texture函數(shù)來采樣紋理的顏色值.

gl_FragColor = texture(ourTexture, TexCoord);
//參數(shù)1: 紋理采樣器對象
//參數(shù)2: 紋理坐標(biāo)

紋理單元

你可能會奇怪為什么sampler2D變量是個uniform旭愧，我們卻不用glUniform給它賦值.

使用glUniform1i抵赢，我們可以給紋理采樣器分配一個位置值健芭，這樣的話我們能夠在一個片段著色器中設(shè)置多個紋理耘斩。

一個紋理的位置值通常稱為一個紋理單元(Texture Unit)。一個紋理的默認(rèn)紋理單元是0烛缔，它是默認(rèn)的激活紋理單元.

紋理單元的主要目的是讓我們在著色器中可以使用多于一個的紋理荧库。

通過把紋理單元賦值給采樣器汁果，我們可以一次綁定多個紋理拣帽，只要我們首先激活對應(yīng)的紋理單元疼电。就像glBindTexture一樣，我們可以使用glActiveTexture激活紋理單元减拭，傳入我們需要使用的紋理單元：

//在綁定紋理之前先激活紋理單元
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, texture);

激活紋理單元之后澜沟，接下來的glBindTexture函數(shù)調(diào)用會綁定這個紋理到當(dāng)前激活的紋理單元，紋理單元GL_TEXTURE0默認(rèn)總是被激活.

OpenGL至少保證有16個紋理單元供你使用峡谊，也就是說你可以激活從GL_TEXTURE0到GL_TEXTRUE15。它們都是按順序定義的，所以我們也可以通過GL_TEXTURE0 + 8的方式獲得GL_TEXTURE8既们，這在當(dāng)我們需要循環(huán)一些紋理單元的時候會很有用濒析。

varying vec2 TexCoord;
uniform sampler2D ourTexture1;
uniform sampler2D ourTexture2;

void main()
{
    gl_FragColor = mix(texture(ourTexture1, TexCoord), texture(ourTexture2, TexCoord), 0.2);
}

最終輸出顏色是兩個紋理的結(jié)合。

GLSL內(nèi)建的mix函數(shù)需要接受兩個值作為參數(shù)啥纸，并對它們根據(jù)第三個參數(shù)進(jìn)行線性插值号杏。

如果第三個值是0.0，它會返回第一個輸入斯棒；如果是1.0盾致，會返回第二個輸入值。輸入0.2則會返回80%的第一個輸入顏色和20%的第二個輸入顏色荣暮，即返回兩個紋理的混合色庭惜。

為了使用第二個紋理（以及第一個），我們必須改變一點(diǎn)渲染流程穗酥，先綁定兩個紋理到對應(yīng)的紋理單元护赊，然后定義哪個uniform采樣器對應(yīng)哪個紋理單元：

glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, texture1);
glUniform1i(glGetUniformLocation(ourShader.Program, "ourTexture1"), 0);

glActiveTexture(GL_TEXTURE1);
glBindTexture(GL_TEXTURE_2D, texture2);
glUniform1i(glGetUniformLocation(ourShader.Program, "ourTexture2"), 1);

注意，我們使用glUniform1i設(shè)置uniform采樣器的位置值砾跃，或者說紋理單元骏啰。通過glUniform1i的設(shè)置，我們保證每個uniform采樣器對應(yīng)著正確的紋理單元

關(guān)于紋理翻轉(zhuǎn)

OpenGL要求y軸0.0坐標(biāo)是在圖片的底部的抽高，但是圖片的y軸0.0坐標(biāo)通常在頂部

我們可以改變頂點(diǎn)數(shù)據(jù)的紋理坐標(biāo)判耕，翻轉(zhuǎn)y值（用1減去y坐標(biāo)）。
我們可以編輯頂點(diǎn)著色器來自動翻轉(zhuǎn)y坐標(biāo)翘骂，替換TexCoord的值為TexCoord = vec2(texCoord.x, 1.0f - texCoord.y);壁熄。

iOS紋理翻轉(zhuǎn)解決策略

第1種: 旋轉(zhuǎn)矩陣翻轉(zhuǎn)圖形,不翻轉(zhuǎn)紋理

讓圖形頂點(diǎn)坐標(biāo)旋轉(zhuǎn)180°. 而紋理保持原狀.

    GLuint rotate = glGetUniformLocation(self.myPrograme, "rotateMatrix");
    float radians = 180 * 3.14159f / 180.0f;
    float s = sin(radians);
    float c = cos(radians);
    
  
    GLfloat zRotation[16] = {
        c, -s, 0, 0,
        s, c, 0, 0,
        0, 0, 1.0, 0,
        0.0, 0, 0, 1.0
    };
    
   glUniformMatrix4fv(rotate, 1, GL_FALSE, (GLfloat *)&zRotation[0]);

第2種: 解壓圖片時,將圖片源文件翻轉(zhuǎn)

CGImageRef spriteImage = [UIImage imageNamed:fileName].CGImage;

size_t width = CGImageGetWidth(spriteImage);
size_t height = CGImageGetHeight(spriteImage);
GLubyte * spriteData = (GLubyte *) calloc(width * height * 4, sizeof(GLubyte));

CGContextRef spriteContext = CGBitmapContextCreate(spriteData, width, height, 8, width*4,CGImageGetColorSpace(spriteImage), kCGImageAlphaPremultipliedLast);
  
CGRect rect = CGRectMake(0, 0, width, height);
CGContextDrawImage(spriteContext, CGRectMake(0, 0, width, height), spriteImage);

CGContextTranslateCTM(spriteContext, rect.origin.x, rect.origin.y);
CGContextTranslateCTM(spriteContext, 0, rect.size.height);
CGContextScaleCTM(spriteContext, 1.0, -1.0);
CGContextTranslateCTM(spriteContext, -rect.origin.x, -rect.origin.y);
CGContextDrawImage(spriteContext, rect, spriteImage); 

CGContextRelease(spriteContext);
glBindTexture(GL_TEXTURE_2D, 0);

第3種: 修改片元著色器,紋理坐標(biāo)

varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;
void main()
{
    gl_FragColor = texture2D(colorMap, vec2(varyTextCoord.x,1.0-varyTextCoord.y));
}

第4種: 修改頂點(diǎn)著色器,紋理坐標(biāo)

attribute vec4 position;
attribute vec2 textCoordinate;
varying lowp vec2 varyTextCoord;

void main()
{
    varyTextCoord = vec2(textCoordinate.x,1.0-textCoordinate.y);
    gl_Position = position;
}

第5種:直接從源紋理坐標(biāo)數(shù)據(jù)修改

     GLfloat attrArr[] =
     {
     0.5f, -0.5f, 0.0f,        1.0f, 1.0f, //右下
     -0.5f, 0.5f, 0.0f,        0.0f, 0.0f, // 左上
     -0.5f, -0.5f, 0.0f,       0.0f, 1.0f, // 左下
     0.5f, 0.5f, 0.0f,         1.0f, 0.0f, // 右上
     -0.5f, 0.5f, 0.0f,        0.0f, 0.0f, // 左上
     0.5f, -0.5f, 0.0f,        1.0f, 1.0f, // 右下
     };
     */