Using OpenGL as an image transition effect or a picture rower, you can achieve a lot of amazing effects.

GLTransitions

People familiar with OpenGL development are already familiar with the GLTransitions project, which collects various GL transitions and GLSL implementation code that developers can easily port to their own projects.

GLTransitions project website: gl-transitions.com/gallery

GLTransitions projects already have nearly 100 transitions that can be easily used for video processing. Many transitions include mixing, edge detection, corrosion expansion, and other common image processing methods, from easy to difficult. 台湾国

For students who want to learn GLSL, they can not only get started quickly, but also learn some advanced image processing methods to achieve GLSL, which is highly recommended.

GLTransitions also supports online editing and real-time running of GLSL scripts, which is very easy to learn and practice.

How to port transition effects on Android OpenGL

Since GLSL scripts are generally generic, GLTransitions effects can be easily ported to various platforms. This article uses the HelloWorld project for GLTransitions to explain some of the points that need to be taken care of when porting effects.

GLTransitions’ HelloWorld project is a blend gradient effect:

// transition of a simple fade.
vec4 transition (vec2 uv) {
  return mix(
    getFromColor(uv),
    getToColor(uv),
    progress
  );
}

Copy the code

The transition function is similar to the texture sampling function. It outputs rGBA based on the texture coordinates. GetFromColor (UV) means sampling the source texture. GetToColor (UV) means sampling the target texture. Progress is a gradual variable between 0.0 and 1.0, and mix is a built-in GLSL blending function that mixes 2 colors based on the third parameter.

Based on the above information, we only need to prepare two shader textures, one with a value of 0.0~1.0 (uniform) gradual variable, and the corresponding shader script can be written as:

#version 300 es
precision mediump float;
in vec2 v_texCoord;
layout(location = 0) out vec4 outColor;
uniform sampler2D u_texture0;
uniform sampler2D u_texture1;
uniform float u_offset;// A (uniform) gradual variable with a value between 0.0 and 1.0

vec4 transition(vec2 uv) {
  return mix(
    texture(u_texture0, uv); .texture(u_texture1, uv); , u_offset ); }void main()
{
	outColor = transition(v_texCoord);
}

Copy the code

Set textures and variables in code:

glUseProgram (m_ProgramObj);

glBindVertexArray(m_VaoId);

glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, m_TextureIds[0]);
GLUtils::setInt(m_ProgramObj, "u_texture0".0);

glActiveTexture(GL_TEXTURE1);
glBindTexture(GL_TEXTURE_2D, m_TextureIds[1]);
GLUtils::setInt(m_ProgramObj, "u_texture1".1);

GLUtils::setFloat(m_ProgramObj, "u_offset", offset);

glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, (const void *)0);
Copy the code

Demo of this article is to achieve an image rotation page turning effect, Android implementation code see the project:

Github.com/githubhaoha…

Transfer effects transplant is not very simple, try it.