OpenGLES(七)GLSLを用いてフィルタ効果を実現するダイナミックフィルタ

通常のピクチャでロードされる頂点シェーダとシェーダのコードは、次のとおりです.頂点シェーダ:

//    
attribute vec4 Position;
//    
attribute vec2 TextureCoords;
//              
varying vec2 TextureCoordsVarying;

void main (void) {
    gl_Position = Position;
    TextureCoordsVarying = TextureCoords;
}

シェーダ:

//     float
precision highp float;
//  
uniform sampler2D Texture;
//    
varying vec2 TextureCoordsVarying;

void main (void) {
    vec4 mask = texture2D(Texture, TextureCoordsVarying);
    gl_FragColor = vec4(mask.rgb, 1.0);
}

1.ズーム効果
解析:ピクチャには拡大プロセスがあり、次にバウンドすると、頂点座標とテクスチャ座標の対応関係を修正することで実現できます.頂点の座標とテクスチャの座標を変更すると、頂点シェーダ(Vertex Shader)でも、シェーダ(Shader)でも、頂点シェーダ(Vertex Shader)でも実行できます.頂点シェーダ:

//    
 attribute vec4 Position; 
//    
 attribute vec2 TextureCoords; 
 //     
 varying vec2 TextureCoordsVarying; 
 //   (    )
  uniform float Time;
   //PI 
   const float PI = 3.1415926; 
   void main (void) {
    //         = 0.6ms 
    float duration = 0.6; 
    //       
    float maxAmplitude = 0.3; 
    //         . time       [0.0~0.6]; //mod(a,b),    . a%b
 float time = mod(Time, duration); 
 //amplitude     ，   PI          sin   ，  amplitude        1.0 ~ 1.3   ，        
 float amplitude = 1.0 + maxAmplitude * abs(sin(time * (PI / duration))); 
 //    :        x   y           ，           ，          。//x,y   ; z w     
 gl_Position = vec4(Position.x * amplitude, Position.y * amplitude, Position.zw);
         TextureCoordsVarying 
  TextureCoordsVarying = TextureCoords;

2.魂の効果
解析:この効果には複数のレイヤーがあり、一番下のレイヤーは動かず、上のレイヤーは時間とともに大きくなり、透明度が透明になるまで透明度が低くなります.この効果は複数のレイヤで構成されているため、カラーブレンドが必要になります.この効果は、頂点シェーダが変化しないように、シェーダで実現する必要があります.シェーダ:

precision highp float;

uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

uniform float Time;

void main (void) {
	//      
    float duration = 0.7;
    //     
    float maxAlpha = 0.4;
    //       
    float maxScale = 1.8;
    
    //        0-1
    float progress = mod(Time, duration) / duration; 
    //       0.4 - 0
    float alpha = maxAlpha * (1.0 - progress);
    //        1 - 1.8
    float scale = 1.0 + (maxScale - 1.0) * progress;
    
    //    x  0.5    ，       
    float weakX = 0.5 + (TextureCoordsVarying.x - 0.5) / scale;
    //    x  0.5    ，       
    float weakY = 0.5 + (TextureCoordsVarying.y - 0.5) / scale;
    //        
    vec2 weakTextureCoords = vec2(weakX, weakY);
    //        
    vec4 weakMask = texture2D(Texture, weakTextureCoords);
    //       
    vec4 mask = texture2D(Texture, TextureCoordsVarying);
    //  
    gl_FragColor = mask * (1.0 - alpha) + weakMask * alpha;
}

3.ジッタ効果
解析:レイヤーが大きくなり、色がずれて元の効果に戻ります.この効果は、シェーダを修正します.

precision highp float;

uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

uniform float Time;

void main (void) {
//    
    float duration = 0.7;
    //    
    float maxScale = 1.1;
    //      
    float offset = 0.02;
    //        0-1
    float progress = mod(Time, duration) / duration; // 0~1
    //       
    vec2 offsetCoords = vec2(offset, offset) * progress;
    //     
    float scale = 1.0 + (maxScale - 1.0) * progress;
    
    //        
    vec2 ScaleTextureCoords = vec2(0.5, 0.5) + (TextureCoordsVarying - vec2(0.5, 0.5)) / scale;
    //R     
    vec4 maskR = texture2D(Texture, ScaleTextureCoords + offsetCoords);
     //B     
    vec4 maskB = texture2D(Texture, ScaleTextureCoords - offsetCoords);
     //      
    vec4 mask = texture2D(Texture, ScaleTextureCoords);
    
    gl_FragColor = vec4(maskR.r, mask.g, maskB.b, mask.a);
}

4.フラッシュ効果
解析:オリジナルレイヤに白いレイヤを追加し、タイムスタンプに基づいて透明度が変化します.シェーダ:

precision highp float;

uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

uniform float Time;

const float PI = 3.1415926;

void main (void) {
    float duration = 0.6;
    
    float time = mod(Time, duration);
    //    
    vec4 whiteMask = vec4(1.0, 1.0, 1.0, 1.0);
    float amplitude = abs(sin(time * (PI / duration)));
    
    vec4 mask = texture2D(Texture, TextureCoordsVarying);
    //  
    gl_FragColor = mask * (1.0 - amplitude) + whiteMask * amplitude;
}

5.バリ効果
分析:画像は引き裂かれた感じがして、色がずれています.各画素をランダムに−1~1の距離だけずらす(この‘−1~1’はテクスチャ座標にとってのものである)が、全体の画12207;が⽐の大きい値をずらすと、元の画像のサンプルが見えない可能性がある.したがって、我々の論理は、1つの閾値を設定し、この閾値を越えてオフセットし、この閾値を超えると1つの縮⼦係数を乗じる.
最終的に現れる効果は、大部分のシェーダ:

precision highp float;

uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

uniform float Time;

const float PI = 3.1415926;
//         
float rand(float n) {
//fract(x),  x        : sin(n) * 43758.5453123
    return fract(sin(n) * 43758.5453123);
}

void main (void) {
	//    
    float maxJitter = 0.06;
    //         
    float duration = 0.3;
    //      
    float colorROffset = 0.01;
    //      
    float colorBOffset = -0.025;
    //                ，  time      0 ~ 0.6
    float time = mod(Time, duration * 2.0);
    //amplitude     ，   PI          sin   ，  amplitude        1.0 ~ 1.3   ，       
    float amplitude = max(sin(time * (PI / duration)), 0.0);
    // -1~1         (-1,1)
    float jitter = rand(TextureCoordsVarying.y) * 2.0 - 1.0; //        ,  jtter  <     *  
    bool needOffset = abs(jitter) < maxJitter * amplitude;
    //    x   ,  needOffset,     X  ,   needOffset = yes     ;   needOffset = no     ;
    float textureX = TextureCoordsVarying.x + (needOffset ? jitter : (jitter * amplitude * 0.006));
    //        x,y  
    vec2 textureCoords = vec2(textureX, TextureCoordsVarying.y);
   //  3   :             ,       
    vec4 mask = texture2D(Texture, textureCoords);
    vec4 maskR = texture2D(Texture, textureCoords + vec2(colorROffset * amplitude, 0.0));
    vec4 maskB = texture2D(Texture, textureCoords + vec2(colorBOffset * amplitude, 0.0));
    //      :        .       
    gl_FragColor = vec4(maskR.r, mask.g, maskB.b, mask.a);
}

6.幻覚効果
まだ分析中なので、コードを添付して、後で考えを補充します.シェーダ:

precision highp float;

uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

uniform float Time;

const float PI = 3.1415926;
const float duration = 2.0;

vec4 getMask(float time, vec2 textureCoords, float padding) {
   
    vec2 translation = vec2(sin(time * (PI * 2.0 / duration)),
                            cos(time * (PI * 2.0 / duration)));
    
    vec2 translationTextureCoords = textureCoords + padding * translation;
    vec4 mask = texture2D(Texture, translationTextureCoords);
    
    return mask;
}

float maskAlphaProgress(float currentTime, float hideTime, float startTime) {
    float time = mod(duration + currentTime - startTime, duration);
    return min(time, hideTime);
}

void main (void) {
    float time = mod(Time, duration);
    float scale = 1.2;
    float padding = 0.5 * (1.0 - 1.0 / scale);
    vec2 textureCoords = vec2(0.5, 0.5) + (TextureCoordsVarying - vec2(0.5, 0.5)) / scale;
    
    float hideTime = 0.9;
    float timeGap = 0.2;
    
    float maxAlphaR = 0.5; // max R
    float maxAlphaG = 0.05; // max G
    float maxAlphaB = 0.05; // max B
    
    vec4 mask = getMask(time, textureCoords, padding);
    float alphaR = 1.0; // R
    float alphaG = 1.0; // G
    float alphaB = 1.0; // B
    
    vec4 resultMask = vec4(0, 0, 0, 0);
    
    for (float f = 0.0; f < duration; f += timeGap) {
        float tmpTime = f;
        vec4 tmpMask = getMask(tmpTime, textureCoords, padding);
        
        //
        float tmpAlphaR = maxAlphaR - maxAlphaR * maskAlphaProgress(time, hideTime, tmpTime) / hideTime;
        float tmpAlphaG = maxAlphaG - maxAlphaG * maskAlphaProgress(time, hideTime, tmpTime) / hideTime;
        float tmpAlphaB = maxAlphaB - maxAlphaB * maskAlphaProgress(time, hideTime, tmpTime) / hideTime;
     
        resultMask += vec4(tmpMask.r * tmpAlphaR,
                           tmpMask.g * tmpAlphaG,
                           tmpMask.b * tmpAlphaB,
                           1.0);
        alphaR -= tmpAlphaR;
        alphaG -= tmpAlphaG;
        alphaB -= tmpAlphaB;
    }
    resultMask += vec4(mask.r * alphaR, mask.g * alphaG, mask.b * alphaB, 1.0);

    gl_FragColor = resultMask;
}