Implementation of Camera Real-Time Filter on Android platform (7) -- Basic filter creation method (1)

Implementation of Camera Real-Time Filter on Android platform (7) -- Basic filter creation method (1)

Regarding how to make filters, zhihu's top ticket in this Q & A gave a professional answer

In addition, InstagramFilters, an open-source project of githunb, once provided some filter code of the first version of Instagram, which is less than 20 types. GPUImage also has some image processing algorithms for learning.

Next we will discuss how to create a filter:

 

1. Add a cover layer:

This border is usually seen in Instagram, which is easy to implement. First, load the image to the texture and multiply the original RGB and the RGB vertices of the image. Then, the vec vertices in the shader are multiplied by the corresponding coordinates, for example, the source image center is (1 ., 1 ., 1 .) after multiplication, the center of the source image remains unchanged, and the corner is (. 5 ,. 5 ,. 5), after multiplying the original rbg value with the pattern rgb, the original rbg value is halved, resulting in a dark effect. The final source image will overwrite a border.

This type of image is mostly seen in some filters in China. In contrast, apart from the effect to be added, the rest are black (0, 0), so it cannot be overwritten by dot multiplication. You can modify it based on the following code:

Sample Code: (if you do not understand, refer to the GPUImageAddBlendFilter code in GPUImage)

 

textureColor = 1.0 - ((1.0 - mask) * (1.0 - textureColor)); 

 

Ii. Curve adjustment:

The color curve, that is, the curve in PS, changes the value of RGB from 0 to 255 to the corresponding value based on the curve to change the image effect. The existing processing methods are basically achieved through the look-up table method. The following methods belong to the look-up table method.

1. Store curves in an array and pass the data to the texture through glTexImage2D:

The sample code is as follows:

 

redCurveValue = texture2D(curve, vec2(redCurveValue, 0.0)).r; greenCurveValue = texture2D(curve, vec2(greenCurveValue, 0.0)).g; blueCurveValue = texture2D(curve, vec2(blueCurveValue, 0.0)).b; 

 

2. Save the image to 256 in width and pass it to the texture:

 

The sample code is as follows:

 

[Plain]View plaincopy

1. Texel = vec3 (
2. Texture2D (inputImageTexture3, vec2 (texel. r,. 16666). r,
3. Texture2D (inputImageTexture3, vec2 (texel. g,. 5). g,
4. Texture2D (inputImageTexture3, vec2 (texel. B,. 83333). B );

   3. ing:

   "(Reprinted from zhihu) the color effect that the designer uses Photoshop to output to the following" lattice subgraph ". In the App, the color change rules are obtained by parsing the" lattice subgraph, then the rule is applied to the photo. Note: You can only adjust the color (curve, color balance, etc.) Here. Other effects are limited to the use of mixed mode changes between layers, such as effects such as dark corners and light leaks ."

   These images can be found in unencrypted apps, for example:

   You can refer to this article to understand

   Complete code (from GPUImageLookupFilter ):

    

   varying highp vec2 textureCoordinate;uniform sampler2D inputImageTexture;uniform sampler2D inputImageTexture2; // lookup texturevoid main(){lowp vec4 textureColor = texture2D(inputImageTexture, textureCoordinate);mediump float blueColor = textureColor.b * 63.0;mediump vec2 quad1;    quad1.y = floor(blueColor/8.0); quad1.x = floor(blueColor) - (quad1.y * 8.0);mediump vec2 quad2;quad2.y = floor(ceil(blueColor)/7.999);     quad2.x = ceil(blueColor) - (quad2.y * 8.0);highp vec2 texPos1;texPos1.x = (quad1.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);texPos1.y = (quad1.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g);highp vec2 texPos2;texPos2.x = (quad2.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);    texPos2.y = (quad2.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g);lowp vec4 newColor1 = texture2D(inputImageTexture2, texPos1);lowp vec4 newColor2 = texture2D(inputImageTexture2, texPos2);lowp vec4 newColor = mix(newColor1, newColor2, fract(blueColor));gl_FragColor = vec4(newColor.rgb, textureColor.w);}

    

    

   3. tone (H), saturation (S), brightness (V) adjustment:

   To adjust these three attributes, You can first Convert RGB to HSV format for quick adjustment and then convert them back.

    

   vec3 rgb2hsv(vec3 c) {vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0); vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g)); vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r)); float d = q.x - min(q.w, q.y); float e = 1.0e-10; return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x); } vec3 hsv2rgb(vec3 c) { vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0); vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www); return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y); }