First of all, we know that the iOS device coordinate system (0,0) represents the upper left corner, while in the texture coordinate system (0,0) represents the lower left corner, so the texture display image we load will actually be inverted

Scheme 1: The vertex of the graph is flipped 180° and the texture remains unchanged

In the vertex shader we add the rotation matrix shaderv.vsh as follows

Gl_Position is the vertex matrix * rotation matrix;

We add the rotation matrix through the rotateTextureImage function before rendering

-(void)rotateTextureImage {CGFloat PI = 3.14159f; // If you want to get variables in the shader, remember to go after glLinkProgram! Rotate = uniform property in shaderv. VSH, rotateMatrix GLuint rotate = glGetUniformLocation(self.myame, "rotateMatrix"); Float radians = PI; float radians = PI; Float s = sine (radians); float s = sine (radians); float c = cos(radians); GLfloat zRotation[16] = {c,-s,0,0, s,c,0,0, 1, 0,0, 0,0,1}; /* glUniformMatrix4fv (GLint location, GLsizei count, GLboolean transpose, const GLfloat* value) location: Transpose: transpose value: pointer */ glUniformMatrix4fv(rotate, 1, GL_FALSE, zRotation); }Copy the code

Scheme 2: When decompressing the image, flip the source file of the image

After loading the setupTexture function in step 6 to draw using the default method, and flipping the image drawn by the context, the main code is as follows

// Move CGContextTranslateCTM(spriteContext, rect.origin. X, rect.Origin. Y) around x and y; // Move CGContextTranslateCTM around y (spriteContext, 0, rect.sie.height); // Render CGContextScaleCTM(spriteContext, 1.0, -1.0) along the y axis of the canvas's own coordinate system; CGContextTranslateCTM(spriteContext, -rect.Origin. X, -rect.Origin. Y); CGContextDrawImage(spriteContext, rect, spriteImage);Copy the code

The flipping process is illustrated belowFor the above part of the code, actually can be simplified as

CGContextTranslateCTM(spriteContext, 0, rect.size.height); // Render CGContextScaleCTM(spriteContext, 1.0, -1.0) along the y axis of the canvas's own coordinate system; // flip CGContextDrawImage(spriteContext, rect, spriteImage);Copy the code

The simplified flip is shown below

Scheme 3: Modify the slice shader, texture coordinates flipped around the Y axis

Set gl_FragColor = texture2D(colorMap, varyTextCoord) in shaderf.fsh; Change to gl_FragColor = texture2D(colorMap, vec2(varyTextCoord.x, 1.0-VaryTextCoord.y)); , the texture coordinates are flipped around the Y-axis, and the mapping Y value is changed during drawing

Option 4: Modify the vertex shader, texture coordinates flipped around the Y axis

VaryTextCoord = textCoordinate in shaderv.vsh; VaryTextCoord = vec2(textCoordinate. X, 1.0-textcoordinate. Y); In fact, scheme 4 and Scheme 3 are the same principle, except to modify texture coordinates in different shaders and change the mapping Y value during drawing, which is consistent with scheme 3

Scheme 5: Directly modify the texture coordinates in the vertex array

Consistent with principle 3 and 4 of scheme, change texture coordinates corresponding to vertices

  • Original vertex data array
GLfloat attrArr [] = {0.5 f to 0.5 f to 1.0 f to 1.0 f to 0.0 f to 0.5 f to 0.5 f to 1.0 f to 0.0 f to 1.0 f to 0.5 f to 0.5 f to 1.0 f to 0.0 f to 0.0 f, 0.5 f, f, 0.5-1.0 f, f 1.0, 1.0 f to 0.5 f, 0.5 f to 1.0 f, 0.0 f, f 1.0, 0.5, f - 0.5 f to 1.0 f, f 1.0, 0.0, f};Copy the code
  • A modified array of vertices
GLfloat attrArr [] = {0.5 f to 0.5 f to 1.0 f to 1.0 f to 1.0 f to 0.5 f to 0.5 f to 1.0 f to 0.0 f to 0.0 f to 0.5 f to 0.5 f to 1.0 f to 0.0 f to 1.0 f, 0.5 f, f, 0.5-1.0 f, f 1.0, 0.0 f to 0.5 f, 0.5 f to 1.0 f, 0.0 f, f 0.0, 0.5, f - 0.5 f to 1.0 f, f 1.0, 1.0, f};Copy the code

Scheme 6: Flip vertices directly in the vertex shader

When we flip the vertices, instead of just subtracting the Y value by 1, because the vertices are in the range [-1, 1], we just flip the minus sign

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

void main(){
    varyTextCoord = textCoordinate;
    gl_Position = vec4(position.x, -position.y, position.z, 1);
}
Copy the code

conclusion

According to the 6 schemes mentioned in this paper, the following three inversion ideas can be simply summarized

Can flip texture coordinates (in the vertex shader, the fragment shader, even the vertices in the array) : plan three, four, five flip vertex coordinates (through the rotation matrix, or designated modified vertex coordinates of the shader) : plan a, six image source file rollover (is also through the context through the matrix transformation to flip) : 2