OpenGL / OpenGL ES Getting Started: iOS texture flip policy resolution

Series Recommended Reading:
OpenGL / OpenGL ES Getting Started: graphics API and professional terms to resolve
OpenGL / OpenGL ES entry: the rendering process and fixed storage shader
OpenGL / OpenGL ES Getting Started: image rendering implementation and rendering problems
OpenGL / OpenGL ES Getting Started: Basic transformation - acquaintance vectors / matrices
OpenGL / OpenGL ES entry: Probe texture - analytical common API
OpenGL / OpenGL ES entry: textures - case analysis and texture coordinates (pyramid)
OpenGL / OpenGL ES entry: vertex shader and fragment shader (OpenGL transition OpenGL ES)
OpenGL / OpenGL ES entry: GLKit and API Introduction to
OpenGL / OpenGL ES entry: GLKit use and case
OpenGL / OpenGL ES Start: OpenGL ES rendering picture
OpenGL / OpenGL ES Getting Started: iOS texture flip policy resolution
OpenGL ES Getting Started: render pyramid - color, texture, texture and color mixing and filling to achieve GLKit

In the previous article OpenGL / OpenGL ES Start: OpenGL ES rendering picture case when the two rendered images, CGContextDrawImage using the Core Graphics framework and UIKit coordinate system is not the same. UIKit framework of origin at the origin of the upper left corner of the screen, Core Graphics framework in the lower left corner of the screen, resulting in problems image flip, but also presents a solution to this article, we summarize the policy on the settlement of the picture flipped .

Texture Flip Strategy

The first: when extracting the picture, the picture source file rollover

    CGRect rect = CGRectMake(0, 0, width, height);
    CGContextTranslateCTM(spriteContext, 0, rect.size.height);
    CGContextScaleCTM(spriteContext, 1.0, -1.0);
    CGContextDrawImage(spriteContext, rect, spriteImage);
复制代码

The first and last article in OpenGL / OpenGL ES Start: OpenGL ES rendering images used in the schemes, to achieve specific flip has a detailed description, need to understand the small partners can go see.

The second: Flip rotation matrix graphics, do not flip the texture

Idea: let all the vertices of the graphics are rotated 180 degrees, without changing the texture coordinates
declared in the vertex shader in a uniform, passing a rotation matrix, so that each vertex rotation

attribute vec4 position;
uniform mat4 rotationMatrix;

void main() {
    vec4 vPos;
    vPos = position * rotationMatrix;
    gl_Position = vPos;
}
复制代码

The inlet channel then acquires the rotation matrix, assign:

// rotate等于shaderv.vsh中的uniform属性，rotateMatrix
GLuint rotate = glGetUniformLocation(self.myProgram, "rotationMatrix");
// 获取渲旋转的弧度
float radians = 180 * 3.14159f / 180.0f;
// 求得弧度对于的sin\cos值
float s = sin(radians);
float c = cos(radians);

// z轴旋转矩阵
GLfloat zRotation[16] = {
    c, -s, 0, 0,
    s, c, 0, 0,
    0, 0, 1.0, 0,
    0.0, 0, 0, 1.0
};
// 设置旋转矩阵
    /*
     glUniformMatrix4fv (GLint location, GLsizei count, GLboolean transpose, const GLfloat* value)
     location : 对于shader 中的ID
     count : 个数
     transpose : 转置
     value : 指针
     */
glUniformMatrix4fv(rotate, 1, GL_FALSE, (GLfloat *)&zRotation[0]);
复制代码

Apple documentation on cell matrix, pan, zoom, around the x, y, z-axis rotation matrix

Third: Modify fragment shader, texture coordinates

Thinking: change the texture coordinates of the vertices data, inversion value y (1 minus y-coordinate)

varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;

void main()
{ 
    gl_FragColor = texture2D(colorMap, vec2(varyTextCoord.x, 1.0 - varyTextCoord.y));
}
复制代码

Fourth: the modified vertex shader, texture coordinates

Idea, as with the third, but modify the texture coordinates, in the vertex shader

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

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

Fifth: modifying the texture coordinate data directly from the source

Ideas: The last method is generated when the vertex arrays, direct way to change the texture mapping coordinates

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, // 右下
     };
复制代码

Personal feeling this way is the most realistic way, at the outset put an end to the problem of picture flipped.

Summary : more than 5 ways, can solve the problems we encounter picture flip, in which the actual development, the specific use of which way to see everyone's mood.

In OpenGL / OpenGL ES entry: GLKit use cases and articles, the use of rendered images GLKit process, in fact, we also encountered problems image flip, but because of GLKit package, we use a piece of code to set the texture attributes of the process will be able to solve the problem flipping the picture, little interested partners can also check area.

NSDictionary *options = [NSDictionary dictionaryWithObjectsAndKeys:@(1),GLKTextureLoaderOriginBottomLeft, nil];    
GLKTextureInfo *textureInfo = [GLKTextureLoader textureWithContentsOfFile:filePath options:options error:nil];
复制代码

Reproduced in: https: //juejin.im/post/5d025c616fb9a07ec42b5694