From the previous example, we can see that the image loaded by GLSL is inverted, so how do we make it inverted?

Normally in OpenGL, the origin of an image is in the lower left corner, but actually the origin of an image is in the upper left corner of the image.

1. Rotate matrix to flip graph, not texture

  • Rotate the vertex coordinates of the graph 180°. Leave the texture unchanged

This approach is not recommended, not only the amount of code, but also to calculate, and then passed in the vertex shader to use

GLuint rotate = glGetUniformLocation(self.myPrograme, "rotateMatrix"); Float radians = 180 * 3.1415f / 180.0f; float radians = 180 * 3.1415f / 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]);Copy the code

2. When decompressing the image, flip the source file

  • Directly in the decompression of the picture to redraw, flip and pan operation, the picture in reverse

This code is actually generic, so it’s recommended. Copy directly

[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 = CGRectMake(0, 0, width, height); CGContextDrawImage(spriteContext, rect, spriteImage); / /, / / 4 = = = = = = = = = = = = = = = = = = = = = turn code = = = = = = = = = = = = = = = = = = = = = CGContextTranslateCTM (spriteContext, the 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); / / = = = = = = = = = = = = = = = = = = = = = turn code = = = = = = = = = = = = = = = = = = = = = / draw / 5, to complete the release of the context CGContextRelease (spriteContext); GlBindTexture (GL_TEXTURE_2D, 0); glBindTexture(GL_TEXTURE_2D, 0); GlTexParameteri (GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE); Float fw = width,fh = height; glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, fw, fh, 0, GL_RGBA, GL_UNSIGNED_BYTE, spriteData); //9, spriteData free(spriteData);Copy the code

Let’s look at what these lines of code do.

3, modify slice shader, texture coordinates

  • Change the texture coordinates in the slice shader by flipping the y value (minus the y coordinate by 1).

This is not recommended, 1000 pixels will call the pixel shader 1000 times. To avoid trouble

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

4, modify vertex shaders, texture coordinates

  • First in the vertex shader, the texture coordinates are flipped, then passed into the slice shader to use

This is also not recommended, there are 100 vertices, vertex shader will execute 100 times, also avoid trouble

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

5. Modify directly from source texture coordinate data

  • Perform the correct calculation directly when setting up the mapping

Also not recommended, if you have a lot of vertices, it burns brain cells.

GLfloat attrArr [] = {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, f - 0.5, 0.0, f F 0.0, 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, f 0.0, 1.0, f 1.0f, // lower right};Copy the code