Android picture transitions and carousel effects, everything you want is here

Using OpenGL as an image transition effect or a picture carousel, you can achieve many amazing effects.

GLTransitions

Friends who are familiar with OpenGL development already know the GLTransitions project very well. This project is mainly used to collect various GL transition effects and their GLSL implementation codes, and developers can easily transplant them into their own projects.

GLTransitions project website address: gl-transitions.com/gallery

The GLTransitions project has nearly 100 transition effects, which can be easily used in video processing. Most of the transition effects include common image processing methods such as blending, edge detection, erosion and expansion, from easy to difficult. **

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

In addition, GLTransitions also supports online editing and real-time running of GLSL scripts, which is very convenient for learning and practice.

Android OpenGL how to transplant transition effects

Since GLSL scripts are basically universal, GLTransitions effects can be easily ported to various platforms. This article uses the HelloWorld project of GLTransitions to introduce several points that need to be paid attention to when porting effects.

The HelloWorld project of GLTransitions is a blend gradient effect:

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

复制代码

transition is a transition function, similar in function to a texture sampling function, outputs rgba according to texture coordinates uv, getFromColor(uv) means sampling the source texture, getToColor(uv) means sampling the target texture, output rgba, progress is a 0.0~ 1.0 The amount of gradient between values, mix is ​​the glsl built-in mixing function, which mixes 2 colors according to the third parameter.

According to the above information, we only need to prepare 2 textures in the shader, a (uniform) gradient value with a value of 0.0~1.0, 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;//一个取值在 0.0~1.0 的（uniform）渐变量

vec4 transition(vec2 uv) {
  return mix(
    texture(u_texture0, uv);,
    texture(u_texture1, uv);,
    u_offset
  );
}

void main()
{
	outColor = transition(v_texCoord);
}

复制代码

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);
复制代码

The demo in this article implements an image carousel page-turning effect. For the Android implementation code, see the project:

github.com/githubhaoha…

Transition effect transplantation is not very simple, try it.