• The premise of the previous article said that FFMPEG synthesis transition effect, later found that such a scheme is not feasible, one is the synthesis time is too slow, but need to view the effect of the transition in real time, so it should be dynamic view transition effect. So with OpengL transition scheme is the most appropriate

  • To switch between two images, pass the previous and current image textures to the transitionFilter, and display the video transitionFilter during the image transition: Truncate the first frame of the current video and the last frame of the previous video, also assign a value to the transitionFilter, and display the transitionFilter during video switching

  • Note that because of the use of OpengL, so you have to use GlSURfaView to load the rendering, for video, according to the camera using GlSurfaView to display the same reason

SurfaceTexture surfaceTexture = mOpenglDrawer.getSurfaceTexture();
surfaceTexture.setOnFrameAvailableListener(new SurfaceTexture.
OnFrameAvailableListener() { @Override public void onFrameAvailable(SurfaceTexture surfaceTexture) { requestRender(); }}); Surface surface = new Surface(surfaceTexture); mMediaPlayer.setSurface(surface);if (isCurrentVideo()) {
	mMediaPlayer.prepare();
	mOpenglDrawer.setInputTextureVideo();
}
Copy the code

For an image, you push it manually, 25 frames per second is the default, so it’s 40ms to push the render and then it’s just a matter of writing a fragment of opengl, but for video frame transitions, you need to do a texture transformation, The fragment object is uniform samplerExternalOES vTexture. So create a layer of FBO:

   GLES20.glTexImage2D(GLES20.GL_TEXTURE_2D, 0, GLES20.GL_RGBA, width, height,
                    0, GLES20.GL_RGBA, GLES20.GL_UNSIGNED_BYTE, null);
Copy the code

Then the texture refreshed from FBO is sampler2D, which is used to transition the transitionFilter

  • Put the simplest fragment for moving a switch:
varying vec2 textureCoordinate; uniform float progress; uniform sampler2D vTexture; uniform sampler2D vTexture1; uniform vec2 direction; void main(){ vec2 p = textureCoordinate + progress*sign(direction); Float m = step (0.0, p.y) * step step (p.y, 1.0) * (0.0, p.x) * step (p.x, 1.0); vec4 color = mix(texture2D(vTexture, textureCoordinate), texture2D(vTexture1, textureCoordinate), m); gl_FragColor = vec4(color); }Copy the code

Rich transition examples can be found here: gl-transitions.com/gallery in this site, UV is converted to its own texture coordinates and getFromColor(uv) is converted to its own texture: For example, above my first texture is texture2D(vTexture, textureCoordinate) getToColor(UV) change to the second texture: my own texture is texture2D(vTexture1, textureCoordinate)

The next article introduces multi-video and multi-picture video composition with transition effects and filters