原文: CC老師
著作所屬權歸該作者所有,任何形式轉載請聯系作者并注明原文出處.
片元著色器
varying vec2 TexCoord;
uniform sampler2D ourTexture;
void main()
{
gl_FragColor = texture(ourTexture, TexCoord);
}
-
TexCoord紋理坐標,通過頂點著色器傳遞 -
ourTexture,紋理采樣器
片元著色器,是如何訪問紋理對象
首先,思考我們是如何將紋理對象傳遞給片元著色器? GLSL 中提供一個共紋理對象使用的內建數據類型,叫做采樣器(sampler).
例如,sampler1D,sampler2D,sampler3D 表示不同維度的紋理類型.
那么我們在片元著色器是如何獲取一個紋理的? 我們簡單聲明一個紋理對象. uniform sampler2D,將一個紋理添加片元著色器中.
//聲明一個紋理對象
uniform sampler2D ourTexture;
如何獲取紋理對應像素點的顏色值
我們可以使用GLSL內建的texture函數來采樣紋理的顏色值.
gl_FragColor = texture(ourTexture, TexCoord);
//參數1: 紋理采樣器對象
//參數2: 紋理坐標
紋理單元
你可能會奇怪為什么sampler2D變量是個uniform，我們卻不用glUniform給它賦值.
使用glUniform1i，我們可以給紋理采樣器分配一個位置值，這樣的話我們能夠在一個片段著色器中設置多個紋理。
一個紋理的位置值通常稱為一個紋理單元(Texture Unit)。一個紋理的默認紋理單元是0，它是默認的激活紋理單元.
紋理單元的主要目的是讓我們在著色器中可以使用多于一個的紋理。
通過把紋理單元賦值給采樣器，我們可以一次綁定多個紋理，只要我們首先激活對應的紋理單元。就像glBindTexture一樣，我們可以使用glActiveTexture激活紋理單元，傳入我們需要使用的紋理單元：
//在綁定紋理之前先激活紋理單元
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, texture);
激活紋理單元之后，接下來的glBindTexture函數調用會綁定這個紋理到當前激活的紋理單元，紋理單元GL_TEXTURE0默認總是被激活.
OpenGL至少保證有16個紋理單元供你使用，也就是說你可以激活從GL_TEXTURE0到GL_TEXTRUE15。它們都是按順序定義的，所以我們也可以通過GL_TEXTURE0 + 8的方式獲得GL_TEXTURE8，這在當我們需要循環(huán)一些紋理單元的時候會很有用。
varying vec2 TexCoord;
uniform sampler2D ourTexture1;
uniform sampler2D ourTexture2;
void main()
{
gl_FragColor = mix(texture(ourTexture1, TexCoord), texture(ourTexture2, TexCoord), 0.2);
}
最終輸出顏色是兩個紋理的結合。
GLSL內建的mix函數需要接受兩個值作為參數，并對它們根據第三個參數進行線性插值。
如果第三個值是0.0，它會返回第一個輸入；如果是1.0，會返回第二個輸入值。輸入0.2則會返回80%的第一個輸入顏色和20%的第二個輸入顏色，即返回兩個紋理的混合色。
為了使用第二個紋理（以及第一個），我們必須改變一點渲染流程，先綁定兩個紋理到對應的紋理單元，然后定義哪個uniform采樣器對應哪個紋理單元：
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設置uniform采樣器的位置值，或者說紋理單元。通過glUniform1i的設置，我們保證每個uniform采樣器對應著正確的紋理單元
關于紋理翻轉
OpenGL要求y軸0.0坐標是在圖片的底部的，但是圖片的y軸0.0坐標通常在頂部
- 我們可以改變頂點數據的紋理坐標，翻轉
y值（用1減去y坐標）。 - 我們可以編輯頂點著色器來自動翻轉y坐標，替換
TexCoord的值為TexCoord = vec2(texCoord.x, 1.0f - texCoord.y);。
iOS紋理翻轉解決策略
第1種: 旋轉矩陣翻轉圖形,不翻轉紋理
- 讓圖形頂點坐標旋轉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種: 解壓圖片時,將圖片源文件翻轉
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種: 修改片元著色器,紋理坐標
varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;
void main()
{
gl_FragColor = texture2D(colorMap, vec2(varyTextCoord.x,1.0-varyTextCoord.y));
}
第4種: 修改頂點著色器,紋理坐標
attribute vec4 position;
attribute vec2 textCoordinate;
varying lowp vec2 varyTextCoord;
void main()
{
varyTextCoord = vec2(textCoordinate.x,1.0-textCoordinate.y);
gl_Position = position;
}
第5種:直接從源紋理坐標數據修改
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, // 右下
};
*/
