OpenGL ES series

  • GLKit que
  • Introduction and rendering process
  • GLKit app loads images
  • Filter 1- Split screen filter
  • Filter 2- Grayscale, Reverse, Vortex, Mosaic
  • Filter 3- Zoom, out-of-body, flash white, burr

Premise: The premise of using GLSL filter is to be able to display normal images with GLSL

Gray filter

algorithm

  • Floating point algorithm: Gray = R * 0.3 + G * 0.59 + B * 0.11
  • Integer algorithm: Gray = (R * 30 + G * 59 + B * 11) / 100
  • Shift algorithm: Gray = (R * 76 + G * 151 + B * 28) >> 8
  • Gray = (R + G + B) / 3;
  • Take only green: Gray = G

Chip shader code implementation:

precision highp float; uniform sampler2D Texture; varying vec2 TextureCoordsVarying; Const highp vec3 ratio = VEC3 (0.2125, 0.7154, 0.0721); // Const highp vec3 ratio = VEC3 (0.2125, 0.7154, 0.0721); void main (void) { vec4 mask = texture2D(Texture, TextureCoordsVarying); / / Gray valuefloatluminance = dot(mask.rgb, ratio); Gl_FragColor = vec4 (vec3 (luminance), 1.0); }Copy the code

Inverted filter

Chip shader code implementation:

precision highp float; uniform sampler2D Texture; varying vec2 TextureCoordsVarying; Vec4 color = texture2D(Texture, VEC2 (TextureCoordsVarying. X, 1.0-Texturecoordsvarying.  gl_FragColor = color; }Copy the code

Spiral filter

Chip shader code implementation:

precision mediump float; uniform sampler2D Texture; // Vortex rotation Angle constfloatUD = 80.0; // Vortex radius, 0 ~ 0.5 constfloatUR = 0.5; TextureCoordsVarying; // Texture coordinates varying VEC2 TextureCoordsVarying; voidmain() {// Vortex radiusfloatRadius = uR; // The current texture coordinate vec2xy = TextureCoordsVarying; Vec2 dxy = xy-vec2 (0.5, 0.5); vec2 dxy = xy-vec2 (0.5, 0.5); // Distance from current texture to center pointfloatr = length(dxy); // The rotation Angle changesfloatBeta = atan (knocking. J y, knocking. X) + radians (uD) * 2.0 * 1.0 / Radius (r) (* / Radius (r)); // Coordinate changes within the vortex rangeif(r<=Radius) {xy = 0.5 + r * vec2(cos(beta), sin(beta)); Vec3 irGB = texture2D(Texture, xy).rgb; // Replace the rotated Texture coordinates with the original TextureCoordsVarying to obtain the color of the corresponding pixel. Gl_FragColor gl_FragColor = vec4(irGB, 1.0); }Copy the code

Mosaic filter

  • 1. Rectangular Mosaic

Chip shader code implementation:

precision mediump float; varying vec2 TextureCoordsVarying; uniform sampler2D Texture; // Const vec2 mosaicSizeRatio = vec2(0.05, 0.05); voidmainVec2 totalXY = vec2(floor(1.0 / mosaicSizeRatio. X), floor(1.0 / mosaicSizeRatio. Y)); Vec2 eachXY = vec2(Floor (TextureCoordsVarying. X/mosaicSizeRatio. X), floor(TextureCoordsVarying.y / mosaicSizeRatio.y)); Vec2 UVMosaic = vec2(eachxy.x/totalxy.x, eachxy.y/totalxy.y); vec4 color = texture2D(Texture, UVMosaic); gl_FragColor = color; }Copy the code
  • 2. Hexagonal Mosaic

LEN : b
LEN)), int(y/ (b

(wx, wy) represents the texture coordinates in the corresponding matrix coordinates:

wx = int(x/(a * length))

wy = int(y/(b * length))

According to the odd and even arrangement rules of rows and columns, calculate the short distance between any point in a rectangular block and the hexagon, then it belongs to the hexagon.

Chip shader code implementation:

precision highp float; uniform sampler2D Texture; varying vec2 TextureCoordsVarying; /// Mosaic size ratio constfloatMosaicSize = 0.05; Void main (void) {// Mosaic size ratiofloatlength = mosaicSize; B / / rectanglefloatTR = 0.866025; // Current texture coordinatesfloat x = TextureCoordsVarying.x;
    floaty = TextureCoordsVarying.y; Int wx = int(x / 1.5 / length); int wy = int(y / TR / length); //v1, v2 are the texture coordinates of the rectangular vertex (the center point of the hexagon) vec2 v1, v2, vn; // Arrange the rows and determine the odd and even values of the columnsif (wx/2 * 2 == wx) {
        if(wy / 2 * 2 = = wy) {/ / (0, 0), (1, 1) v1 = vec2 (length * 1.5 *float(wx), length * TR * float(wy));
            v2 = vec2(length * 1.5 * float(wx + 1), length * TR * float(wy + 1));
        } else{//(0,1),(1,0) v1 = vec2(length * 1.5 *float(wx), length * TR * float(wy + 1));
            v2 = vec2(length * 1.5 * float(wx + 1), length * TR * float(wy)); }}else {
        if(wy / 2 * 2 = = wy) {/ / (0, 1), (1, 0) v1 = vec2 (length * 1.5 *float(wx), length * TR * float(wy + 1));
            v2 = vec2(length * 1.5 * float(wx + 1), length * TR * float(wy));
        } else{//(0,0),(1,1) v1 = vec2(length * 1.5 *)float(wx), length * TR * float(wy));
            v2 = vec2(length * 1.5 * float(wx + 1), length * TR * float(wy + 1)); }} // The distance to the current pointfloatS1 = SQRT (pow (v1. X - x 2.0) + pow (2.0) v1. - y, y);floatS2 = SQRT (pow (v2. X x 2.0) + pow (2.0) v2. - y, y); // Get the corresponding texture coordinatesif (s1 < s2) {
        vn = v1;
    } else {
        vn = v2;
    }
    vec4 color = texture2D(Texture, vn);
    
    gl_FragColor = color;
    
}
Copy the code