Androidの画像トランジションとカルーセル効果、必要なものはすべてここにあります

OpenGLを画像遷移効果または画像カルーセルとして使用すると、多くの驚くべき効果を実現できます。

ogl.gif

GLTransitions

gallery.gif

OpenGL開発に精通している友人は、GLTransitionsプロジェクトをすでによく知っています。このプロジェクトは、主にさまざまなGL遷移効果とそのGLSL実装コードを収集するために使用され、開発者はそれらを自分のプロジェクトに簡単に移植できます。

GLTransitionsプロジェクトのWebサイトアドレス:gl-transitions.com/gallery

config.gif

GLTransitionsプロジェクトには10​​0近くのトランジション効果があり、ビデオ処理で簡単に使用できます。トランジション効果のほとんどには、ブレンド、エッジ検出、侵食、拡張などの一般的な画像処理方法が含まれ、簡単なものから難しいものまであります。****

GLSLを学びたい学生にとっては、すぐに始めることができるだけでなく、いくつかの高レベルの画像処理方法GLSLの実装を学ぶこともできます。これは強くお勧めします。

edit.png

さらに、GLTransitionsは、GLSLスクリプトのオンライン編集とリアルタイム実行もサポートしており、学習と練習に非常に便利です。

AndroidOpenGL遷移効果を移植する方法

github.gif github2.gif github3.gif

GLSLスクリプトは基本的にユニバーサルであるため、GLTransitionsエフェクトはさまざまなプラットフォームに簡単に移植できます。この記事では、GLTransitionsのHelloWorldプロジェクトを使用して、エフェクトを移植するときに注意が必要ないくつかのポイントを紹介します。

GLTransitionsのHelloWorldプロジェクトは、ブレンドグラデーション効果です。

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

复制代码

遷移は遷移関数であり、関数はテクスチャサンプリング関数に似ており、テクスチャ座標uvに従ってrgbaを出力します。getFromColor(uv)はソーステクスチャをサンプリングすることを意味し、getToColor(uv)はターゲットテクスチャをサンプリングすることを意味し、rgbaを出力します。進行状況は0.0です。 〜1.0値間のグラデーションの量、mixはglsl組み込みのミキシング関数であり、3番目のパラメーターに従って2つの色をミキシングします。

上記の情報によると、シェーダーに2つのテクスチャ、0.0〜1.0の値を持つ(均一な)グラデーション値を準備するだけで済みます。対応するシェーダースクリプトは次のように記述できます。

#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);
}

复制代码

コードでテクスチャと変数を設定します。

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

この記事のデモでは、画像カルーセルのページめくり効果を実装しています。Androidの実装コードについては、次のプロジェクトを参照してください。

github.com/githubhaoha…

移行効果移植はそれほど単純ではありません。試してみてください。

おすすめ

転載: juejin.im/post/6992821712173678629