OpenGL 2D テクスチャ・ユニットとテクスチャ・フリップの解決策

コンパイルリンクカスタムシェーダーフロー

iosテクスチャフリップ戦略

マトリックスを回転させ、テクスチャを反転させずにグラフィックを反転させます。

• 頂点シェーダプログラム

attribute vec4 position;
attribute vec2 textCoordinate;
uniform mat4 rotateMatrix;
uniform mat4 scaleMatrix;
varying lowp vec2 varyTextCoord;
void main(){
 varyTextCoord = textCoordinate;
 vec4 vPos = position;
 gl_Position = vPos * rotateMatrix * scaleMatrix;
}

• 回転行列の設定

//glLinkProgramこの後、shaderv.vshrotateMatrixのuniformアトリビュート
	GLuint rotate = glGetUniformLocation(self.myPrograme, "rotateMatrix");
 GLuint scale = glGetUniformLocation(self.myPrograme, "scaleMatrix");
 float radians = 159f / 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
 };
 GLfloat scaleMartix[16] = {
 -1, 0, 0, 0,
 0, 1, 0, 0,
 0, 0, 1, 0,
 0, 0, 0, 1,
 };
 
 glUniformMatrix4fv(rotate, 1, GL_FALSE, (GLfloat *)&zRotation[0]);
 glUniformMatrix4fv(scale, 1, GL_FALSE, (GLfloat *)&scaleMartix[0]);

イメージを解凍するときは、ソースファイルを裏返します。

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);
//xとyに沿った平行移動
CGContextTranslateCTM(spriteContext, rect.origin.x, rect.origin.y);
//Yに沿って平行移動する
CGContextTranslateCTM(spriteContext, 0, rect.size.height);
//y 
CGContextScaleCTM(spriteContext, 1.0, -1.0);
//xとyに沿った平行移動
CGContextTranslateCTM(spriteContext, -rect.origin.x, -rect.origin.y);
CGContextDrawImage(spriteContext, rect, spriteImage); 
CGContextRelease(spriteContext);
glBindTexture(GL_TEXTURE_2D, 0);

スライスシェーダとテクスチャ座標を修正します。

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

頂点シェーダとテクスチャ座標を修正します。

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

テクスチャ座標データのマッピングから直接修正

• 元の頂点データ配列

GLfloat attrArr[] =
 {
 0.5f, -0.5f, -1.0f, 1.0f, 0.0f,
 -0.5f, 0.5f, -1.0f, 0.0f, 1.0f,
 -0.5f, -0.5f, -1.0f, 0.0f, 0.0f,
 0.5f, 0.5f, -1.0f, 1.0f, 1.0f,
 -0.5f, 0.5f, -1.0f, 0.0f, 1.0f,
 0.5f, -0.5f, -1.0f, 1.0f, 0.0f,
 };

• 修正された頂点配列

GLfloat attrArr[] =
 {
 0.5f, -0.5f, -1.0f, 1.0f, 0.0f,
 -0.5f, 0.5f, -1.0f, 0.0f, 1.0f,
 -0.5f, -0.5f, -1.0f, 0.0f, 0.0f,
 0.5f, 0.5f, -1.0f, 1.0f, 1.0f,
 -0.5f, 0.5f, -1.0f, 0.0f, 1.0f,
 0.5f, -0.5f, -1.0f, 1.0f, 0.0f,
 };

頂点シェーダでの頂点の直接反転

頂点の値の範囲は[-1 1]なので、頂点を反転させるときは、Y値から1を引くだけではありません。

attribute vec4 position;
attribute vec2 textCoordinate;
varying lowp vec2 varyTextCoord;
void main(){
 varyTextCoord = textCoordinate;
 gl_Position = vec4(position.x, -position.y, position.z, 1);
}