OpenGL/OpenGL ES introduction: Graphics API and professional term parsing OpenGL/OpenGL ES introduction: Rendering process and fixed storage shader OpenGL/OpenGL ES introduction: Image rendering implementation and rendering problems OpenGL/OpenGL ES introduction: basic transformation – beginning vector/matrix OpenGL/OpenGL ES introduction: texture exploration – common API parsing OpenGL/OpenGL ES introduction: OpenGL/OpenGL ES: Vertex shaders and slice shaders (OpenGL transition OpenGL ES) OpenGL/OpenGL ES 介 绍 : Using OpenGL/OpenGL ES to render images IOS Texture Flip Strategy Parsing OpenGL ES Primer: Render pyramid – Color, texture, texture and color blending fill and GLKit implementation

Today, I would like to share with you about using OpenGL ES to write a picture filter, the main premise of realizing the picture filter, is to be able to draw the original image, if this part of the content is not very familiar with the friends, I suggest to read my previous blog, familiar with it, so that it is easier to understand the following article.

This article mainly introduces the split screen filter, from simple into difficult, the following chapter is more wonderful oh ~ below directly into the dry goods!!

Rendering of the original image

OpenGL ES: Using OpenGL ES to render images, here ideas and code are basically the same, the article will give a demo at the end, so here is no more description.

Double screen filter

Double screen, as the name implies, the original rendered image is displayed in two screens (horizontal or vertical), the effect picture is as follows

From the above figure, we take the pixel of the position we want to display of the picture, and then obtain the pixel for drawing

Assuming that the picture shown here is 0.25 ~ 0.75, it is necessary to obtain the striatum in the red box above. From the previous tutorial, it’s easy to imagine passing the texture to the pixel shader, extracting the texture pixels, and rendering. Here’s the code:

// Precision highpfloat; Uniform sampler2D Texture; // Texture coordinates varying highp VEC2 varyTextureCoord; voidmain() {
    
    vec2 uv = varyTextureCoord.xy;
    floaty; // Displays 0.25 to 0.75 pixels in the range of 0.0 to 0.5if(uv.y >= 0.0&&uv. y <= 0.5) {y = uv.y + 0.25; }else{// Display pixels in the range of 0.25-0.75 y = uv.y-0.25; } // Get the Texture pixel to show gl_FragColor = texture2D(Texture, vec2(uv.x, y)); }Copy the code

The above code can achieve double screen display – horizontal screen, if there is a need to display vertical screen, can change the y value in the chip shader, rewrite into x value can be.

The four panel filter

Four screens, the way we use is to reduce the original picture to 1/4 of the original picture, respectively placed on the upper left, lower left, lower right and upper right, look at the following renderings

The idea is also very simple, change texture mapping, according to a piece of artwork, the mapping is (0.0, 0.0), (0.0, 1.0), (1.0, 1.0), (1.0, 0.0), now change to (0.0, 0.0), (0.0, 0.5), (0.5, 0.5), (0.5, 0.0), the truth, Change the fragment shader code:

precision highp float;

uniform sampler2D Texture;
varying highp vec2 varyTextureCoord;

void main() {
    
    vec2 uv = varyTextureCoord.xy;
    
    if(uv.x <= 0.5) {uv.x = uv.x * 2.0; }else{uv.x = (uv.x -0.5) * 2.0; }if(uv.y <= 0.5) {uv.y = uv.y * 2.0; }else{uv.y = (uV. y-0.5) * 2.0; } gl_FragColor = texture2D(Texture, uv); }Copy the code

* 2.0 in pixel shaders is not easy to understand, so here is the analysis

That is, if we want to achieve the ideal four-screen rendering, we need to fill each area with a full texture, i.e. (0.0,0.0), (0.0,1.0), (1.0,1.0), (1.0,0.0), Without changing the mapping is (0.0,0.0), (0.0,0.5), (0.5,0.5), (0.5,0.0), which is the effect of the image above, so * 2.0 is required to achieve this effect

Nine screen filter

Same thing, no repetition, go straight to the code

precision highp float;

uniform sampler2D Texture;
varying highp vec2 varyTextureCoord;

void main() {
    
    vec2 uv = varyTextureCoord.xy;
    
    if(uv.x <= 1.0/3.0) {uv.x = uv.x * 3.0; }else if(uv) x < = 2.0/3.0) {uv. X = (uv) x - 1.0/3.0) * 3.0; }else{uv.x = (uv.x - 2.0/3.0) * 3.0; }if(uv.y <= 1.0/3.0) {uv.y = uV. y * 3.0; }else if(uv) < = 2.0/3.0) {y uv. Y = (uv) y - 1.0/3.0) * 3.0; }else{uv.y = (uV. y - 2.0/3.0) * 3.0; } gl_FragColor = texture2D(Texture, uv); }Copy the code

Effect:

Demo Portal: Split screen filter Demo

Next filter:

  • Upside down
  • gray
  • whirlpool
  • Mosaic