OpenGL ES /OpenGL ES /OpenGL ES /OpenGL ES /OpenGL ES Image rendering implementation and rendering problems OpenGL/OpenGL ES introduction: basic transformation – beginning vector/matrix OpenGL/OpenGL ES introduction: texture exploration – common API parsing OpenGL/OpenGL ES introduction: OpenGL/OpenGL ES: Vertex shaders and slice shaders (OpenGL transition OpenGL ES) OpenGL/OpenGL ES 介 绍 : Using OpenGL/OpenGL ES to render images IOS Texture Flip Strategy Parsing OpenGL ES Primer: Render pyramid – Color, texture, texture and color blending fill and GLKit implementation

In case 2 of rendering images using OpenGL ES, CGContextDrawImage uses the Core Graphics framework, which is different from UIKit. The origin of UIKit frame is in the upper left corner of the screen, while the origin of Core Graphics frame is in the lower left corner of the screen, which leads to the problem of image flipping, and also proposes a solution. In this article, we summarize the strategies to solve the problem of image flipping.

Texture flip strategy

The first: when unzipping the image, flip the source file

    CGRect rect = CGRectMake(0, 0, width, height);
    CGContextTranslateCTM(spriteContext, 0, rect.size.height);
    CGContextScaleCTM(spriteContext, 1.0, -1.0);
    CGContextDrawImage(spriteContext, rect, spriteImage);
Copy the code

The first kind is also in the previous article OpenGL/OpenGL ES introduction: using OpenGL ES rendering pictures used in the scheme, the specific flip implementation has a detailed description, need to understand the partner can go to check.

The second kind: the rotation matrix flips the graph, not the texture

Declare a UNIFORM rotation matrix in the vertex shader, pass in a rotation matrix, and make every vertex rotate

attribute vec4 position;
uniform mat4 rotationMatrix;

void main() {
    vec4 vPos;
    vPos = position * rotationMatrix;
    gl_Position = vPos;
}
Copy the code

Then get the entryway of the rotation matrix and assign:

Rotate equals uniform properties in shaderv. VSH. RotateMatrix GLuint rotate = glGetUniformLocation(self.myProgram,"rotationMatrix"); // Get the degree of shading rotationfloatRadians = 180 * 3.14159f / 180.0f; // Find the sine \ cosine of PI radiansfloat s = sin(radians);
floatc = cos(radians); // Z-axis rotation matrix 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 GLfloatTranspose: transpose value: pointer */ glUniformMatrix4fv(Rotate, 1, GL_FALSE, (GL)float *)&zRotation[0]);
Copy the code

Apple documentation on element matrices, translation, scaling, matrices that rotate around the x,y, and z axes

Third: modify slice shaders, texture coordinates

Change the texture coordinates of the vertex data, invert the y value (subtract y coordinates from 1)

varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;

void main() {gl_FragColor = texture2D(colorMap, vec2(varyTextCoord.x, 1.0-varyTextCoord.y)); }Copy the code

Fourth: modify vertex shaders, texture coordinates

The idea is the same as the third one, except that the texture coordinates are changed 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; }Copy the code

Fifth: modify directly from the source texture coordinate data

The final method is to directly change the texture coordinate mapping when generating the vertex array

GLfloatAttrArr [] = {0.5 f to 0.5 f to 0.0 f to 1.0 f to 1.0 f, / / right - 0.5 f, 0.5 f to 0.0 f, f 0.0, 0.0, f / / upper left - 0.5 f, 0.5 f, f 0.0, 0.0 f, 1.0 f, / / lower left 0.5 f, f 0.5, 0.0 f, f 1.0, 0.0, f / / upper right - 0.5 f, f 0.5, 0.0 f, f 0.0, 0.0, f / / upper left 0.5 f to 0.5 f, 0.0 f, f 1.0, 1.0, f / / lower};Copy the code

Personally, I think this way is the most realistic way to eliminate the problem of picture flipping in the beginning.

Conclusion: The above five methods can solve the problem of picture flipping. In the actual development, which method to use depends on your mood.

Getting started in OpenGL/OpenGL ES: GLKit use and case article, in the process of using GLKit to render pictures, in fact, we have also encountered the problem of image flipping, but because of the reason of GLKit packaging, we can use a code to set texture properties in the process of solving the problem of image flipping, interested partners can also view.

NSDictionary *options = [NSDictionary dictionaryWithObjectsAndKeys:@(1),GLKTextureLoaderOriginBottomLeft, nil];    
GLKTextureInfo *textureInfo = [GLKTextureLoader textureWithContentsOfFile:filePath options:options error:nil];
Copy the code