This case is in OpenGL ES case 05: GLSL use index drawing case on the basis of the new texture and color mixed fill function

The overall effect is as follows:

The idea of this case is very simple, mainly is OpenGL ES case 04: GLSL loading pictures and OpenGL ES case 05: GLSL use index drawing case function combination of a comprehensive case, the following mainly for the new function for a description

As shown in the figure, the following modifications have been made on the basis of case 05. Note: The standard (!!! This is where the code needs to be modified or added

Two main parts need to be modified and added

  • Custom shaders
  • RenderLayer function

Custom shaders

Add texture-related variables and source code to vertex shaders and slice shaders, as shown below

Vertex shader

  • newattributeDecorated texture coordinates
  • newvaryingModified to bridge texture coordinates
  • In the main function, assign the texture coordinates to the bridge texture coordinates

Chip shader

  • Added bridge texture coordinates consistent with vertices
  • newuniformModified texture sampler
  • In the main function, the stripper of each pixel is calculated and mixed with the vertex color, and the final color value is assigned togl_FragColor

In the slice shader, there are two ways to mix colors

  • Use GLSL’s built-in functions directlymix(x, y, alpha), returns avec4The color value of type, internally evaluated tox(1-alpha) +y*alpha
vec4 weakMask = texture2D(colorMap, varyTextCoord); vec4 mask = varyColor; // mix(x,y,a) return x(1-a) +y*a gl_FragColor = mix(mask, weakMask, 0.3); // Mix (x,y,a) return x(1-a) +y*a gl_FragColor = mix(mask, weakMask, 0.3);Copy the code
  • Color blending formula, in six, OpenGL rendering techniques: depth testing, polygon offset, blending, slightly mentioned
vec4 weakMask = texture2D(colorMap, varyTextCoord); vec4 mask = varyColor; Float alpha = 0.3; Vec4 tempColor = mask * (1.0-alpha) + weakMask * alpha; gl_FragColor = tempColor;Copy the code

RenderLayer function

The main function of the render function is rendering, due to the new texture color mixing, the main modification is to set the vertex data part, need to add texture related data, loading, etc

Modifying the vertex array

Adds texture coordinates for vertices

// The first three elements are vertex data; The middle three elements are vertex colors, Last 2 is texture coordinates GLfloat attrArr [] = {0.5 f, f 0.5, 0.0 f, f 1.0, 0.0 f, f 1.0, 0.0 f, 1.0 f, / / upper left 0.5 f, f 0.5, 0.0 f, 1.0 f, 0.0 f, 1.0 f, f 1.0, 1.0, f / / upper right - 0.5 f, 0.5 f, f, 0.0 1.0 f, f 1.0, 1.0 f, f 0.0, 0.0, f / / lower left 0.5 f to 0.5 f, f 0.0, 1.0, f 1.0 f, f 1.0, 1.0, f 0.0 0.0 f, / / lower 0.0 f, f, f 1.0, 0.0 f, f 1.0, 0.0 f, f 0.5, 0.5, f / / vertex};Copy the code

Added texture related operations

  • Process texture data and pass texture coordinates to the vertex shader
  • New setupTexture function for loading textures
  • Set the texture sampler to capture the color of the corresponding pixel of the texture and pass it into the slice shader to mix with the vertex color

Add the following texture code to the RenderLayer function

// --------- Handle texture data GLuint textCoord = glGetAttribLocation(self.myprograme, "textCoordinate"); glEnableVertexAttribArray(textCoord); glVertexAttribPointer(textCoord, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*8, (float*)NULL+6); // ------ load texture [self setupTexture:@"mouse"]; // ------ Set the texture sampler glUniform1i(glGetUniformLocation(self.myame, "colorMap"), 0);Copy the code

The setupTexture function unpacks a PNG/JPG image into a bitmap and then binds and loads it

- (GLuint)setupTexture: // Convert UIImage to CGImageRef CGImageRef image = [UIImage imageNamed:fileName].CGImage; if (! image) { NSLog(@"failed to load image %@", fileName); exit(1); Size_t width = CGImageGetWidth(image); size_t height = CGImageGetHeight(image); GLubyte *imageData = (GLubyte *)calloc(width*height*4, sizeof(GLubyte)); // Create context & use the default way to draw an image, CGContextRef Context = CGBitmapContextCreate(imageData, width, height, 8, width*4, CGImageGetColorSpace(image), kCGImageAlphaPremultipliedLast); CGRect rect = CGRectMake(0, 0, width, height); CGContextDrawImage(context, rect, image); CGContextRelease(context); GlBindTexture (GL_TEXTURE_2D, 0); glBindTexture(GL_TEXTURE_2D, 0); // Set texture parameters (filter mode, surround mode) 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; // Load texture glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, fw, fH, 0, GL_RGBA, GL_UNSIGNED_BYTE, imageData); return 0; }Copy the code

See Github-11_02_GLSL Triangle Transform + Texture & Color Blending _OC, 11_02_GLSL Triangle Transform + Texture & Color Blending _Swift for the complete code