OpenGL ES的滤镜效果 -- 动效

2020-08-18 本文已影响0人黑眼豆豆_

今天，我们用OpenGL ES分别来实现以下效果:缩放，灵魂出窍，抖动，闪白，毛刺，幻觉。

准备工作

因为涉及到动态效果，所以我们对时间进行操作，所以我们在外部定义一个CADisplayLink来对时间进行操作，

    self.startTimeInterval = 0;
    //定义CADisplayLink来对时间进行操作，
    self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(timeAction)];
    [self.displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];

而timeAction里面方法如下:

-(void)timeAction{
    //DisplayLink 的当前时间撮
    if (self.startTimeInterval == 0) {
        self.startTimeInterval = self.displayLink.timestamp;
    }
    //使用program(有可能切换到其他特效)
    glUseProgram(self.program);
    //绑定buffer
    glBindBuffer(GL_ARRAY_BUFFER, self.vertexBuffer);
    
    // 传入时间
    CGFloat currentTime = self.displayLink.timestamp - self.startTimeInterval;
    GLuint time = glGetUniformLocation(self.program, "Time");
    glUniform1f(time, currentTime);
    
    // 清除画布
    glClear(GL_COLOR_BUFFER_BIT);
    glClearColor(1, 1, 1, 1);
    
    // 重绘
    glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
    //渲染到屏幕上
    [self.context presentRenderbuffer:GL_RENDERBUFFER];
}

通过Uniform的方式将时间传递到着色器中
presentRenderbuffer每次操作都会进行一次重绘，由于着色器调用的是GPU，所以性能不会损耗太多

缩放

缩放效果图如下:

缩放效果.gif

原理

缩放的原理就是图片在一个周期内放大，然后到达顶点后缩小，然后对此操作进行循环执行。我们理解为在X,Y轴坐标上同时放大，同时缩小

具体实现

首先定义缩放的周期和最大幅度

    // duration越小表示动的越快
    float duration = 0.6;
    // maxAmplitude越大表示动的幅度越大
    float maxAmplitude = 0.3;

进行模运算,mod运算是glsl的内建函数，表示取余，所以下面的运算结果在[0.0,0.6]之间循环。

    float time = mod(Time, duration);

接下来求出缩放大小系数

//求出缩放系数
float amplitude = 1.0 + maxAmplitude * abs(sin(time * (PI / duration)));

1.time * (PI / duration)可以得出一个角度α。
2.sin(α)是一个正弦函数，正弦函数会在[-1,1]的范围内取值

正弦函数.png
3.abs(sin(time * (PI / duration)))表示取绝对值，则会在[0,1]的范围内取值。
4.1.0 + maxAmplitude * abs(sin(time * (PI / duration)));的取值范围为[1.0,1.3],最终会呈现出现有规律的缩放情况。
完整代码如下：
由于我们是修改的顶点坐标，所以我们只需要在顶点着色器中进行操作即可。

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

uniform float Time;

const float PI = 3.1415926;

void main (void) {
    float duration = 0.6;
    float maxAmplitude = 0.3;
    
    float time = mod(Time, duration);
    float amplitude = 1.0 + maxAmplitude * abs(sin(time * (PI / duration)));
    
    gl_Position = vec4(Position.x * amplitude, Position.y * amplitude, Position.zw);
    TextureCoordsVarying = TextureCoords;
}

灵魂出窍

灵魂出窍效果图如下:

灵魂出窍.gif

原理

灵魂出窍的效果，我们可以拆开来看，有2个图层进行叠加，其中下面图层保持原样不动，上面一个图层展现出放大并渐渐透明的效果。

具体实现

首先设置一些参数

    //动画持续时间
    float duration = 0.7;
    //最大透明度
    float maxAlpha = 0.4;
    //最大缩放程度
    float maxScale = 1.8;

计算出progress

 // progress在[0,1]的范围内取值，表示现在动画进行到哪个程度
 float progress = mod(Time, duration) / duration;

计算出当前progress的透明度和缩放程度

    //计算透明度
    float alpha = maxAlpha * (1.0 - progress);
    //计算缩放大小
    float scale = 1.0 + (maxScale - 1.0) * progress;

计算上面图层纹理的位置

    //计算X轴坐标
    float weakX = 0.5 + (TextureCoordsVarying.x - 0.5)/scale;
    //计算Y轴坐标   
    float weakY = 0.5 + (TextureCoordsVarying.y - 0.5)/scale;
    vec2 weakTextureCoords = vec2(weakX,weakY);

进行2个图层的混合

    //缩放后的图层
    vec4 weakMask = texture2D(Texture, weakTextureCoords);
    //静止不动的图层
    vec4 mask = texture2D(Texture, TextureCoordsVarying);  
    //图层混合，使用混合公式
    gl_FragColor = mask * (1.0 - alpha) + weakMask * alpha;

完整代码如下，由于使用我们是对纹理进行操作，所以这个项目中，我们修改片元着色器

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;
    
    float progress = mod(Time, duration) / duration;  //0~1
    float alpha = maxAlpha * (1.0 - progress);
    float scale = 1.0 + (maxScale - 1.0) * progress;
    
    float weakX = 0.5 + (TextureCoordsVarying.x - 0.5)/scale;
    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;
}

抖动

抖动效果图如下:

抖动效果.gif

原理

抖动的原理类似于灵魂出窍的原理，但是有些许不同

首先缩放幅度会小一些
透明度没有变化
颜色便宜，放大后的颜色会出现绿、蓝色的出现

具体实现

参数定义

    //动画时长
    float duration = 0.7;
    //最大幅度
    float maxScale = 1.1;
    //最大偏移幅度
    float offset = 0.02;

计算缩放后的图层

    //图层放大进度
    float progress = mod(Time, duration) / duration;  //0~1
    //图层放大程度
    float scale = 1.0 + (maxScale - 1.0) * progress;
    //X轴坐标
    float weakX = 0.5 + (TextureCoordsVarying.x - 0.5)/scale;
    //Y轴坐标
    float weakY = 0.5 + (TextureCoordsVarying.y - 0.5)/scale;
    vec2 ScaleTextureCoords = vec2(weakX,weakY);

计算颜色偏移

    // 偏移后的红色(Red)，4维向量最后取红色
    vec4 maskR = texture2D(Texture, ScaleTextureCoords + offsetCoords);
    // 偏移后的蓝色(Blue)，4维向量最后取蓝色
    vec4 maskB = texture2D(Texture, ScaleTextureCoords - offsetCoords);
    //原始纹素
    vec4 mask = texture2D(Texture, TextureCoordsVarying);

得到最终结果

    gl_FragColor = vec4(maskR.r, mask.g, maskB.b, mask.a);

最终代码如下

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;
    
    float progress = mod(Time, duration) / duration;  //0~1
    float scale = 1.0 + (maxScale - 1.0) * progress;
    
    float weakX = 0.5 + (TextureCoordsVarying.x - 0.5)/scale;
    float weakY = 0.5 + (TextureCoordsVarying.y - 0.5)/scale;
    vec2 ScaleTextureCoords = vec2(weakX,weakY);
    
    vec2 offsetCoords = vec2(offset,offset) * progress;

    vec4 maskR = texture2D(Texture, ScaleTextureCoords + offsetCoords);
    vec4 maskB = texture2D(Texture, ScaleTextureCoords - offsetCoords);
    vec4 mask = texture2D(Texture, TextureCoordsVarying);
    gl_FragColor = vec4(maskR.r, mask.g, maskB.b, mask.a);
}

闪白

闪白效果如下:

闪白.gif

原理

闪白的原理就是2个图层进行叠加，底下的图层是纹理，上面的图层是一个白色的图进行覆盖，然后随着时间的修改透明度，最后2个图层进行叠加

具体实现

设置透明度

     //设置市场
    float duration = 0.6;
    //模运算获取进度
    float time = mod(Time, duration);
    //设置透明度
    float alpha = abs(sin(time * (PI / duration)));

设置白色的纹素

    //白色
    vec4 whiteMask = vec4(1.0, 1.0, 1.0, 1.0);

计算后得出最终结果

  //原始纹素
  vec4 mask = texture2D(Texture, TextureCoordsVarying);
  gl_FragColor = mask * (1.0 - alpha) + whiteMask * alpha;

最终代码如下

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);
    float alpha = abs(sin(time * (PI / duration)));
    vec4 whiteMask = vec4(1.0, 1.0, 1.0, 1.0);
    vec4 mask = texture2D(Texture, TextureCoordsVarying);
    gl_FragColor = mask * (1.0 - alpha) + whiteMask * alpha;
}

毛刺

毛刺效果图如下:

毛刺效果.gif

原理

实现毛刺的具体思路是:让每一行航速随机的便宜[-1,1]的距离，同时，设定一个阈值，大于阈值需要乘以一个缩小系数，小于阈值进行偏移，偏移的同时增加微弱的颜色偏移。

具体实现

首先设定一些参数

    //最大偏移量
    float maxJitter = 0.06;
    //一次偏移的周期
    float duration = 0.3;
    //红色方向上的颜色偏移
    float colorROffset = 0.01;
    //蓝色方向上的颜色偏移
    float colorBOffset = -0.025;

设置振幅

    //表示在周期为0.6s的时间里取值
    float time = mod(Time, duration * 2.0);  
    //表示振幅在[0,1.0]区间内取值
    float amplitude = max(sin(time * (PI / duration)), 0.0);

计算偏移量
由于我们的便宜量需要在[-1,1]之间进行变化，所以我们获取一份随机数,而GLSL没有随机数函数，所以用以下方法

float rand(float n) {
    //fract(x)函数，返回x的小数部分
    //返回sin(n) * 极大值可以尽量让rand(x)的结果不一样。
    return fract(sin(n) * 43758.5453123);
}

接下来调用，返回一个[-1,1]区间内的随机值

//返回一个[-1,1]区间内的随机值
float jitter = rand(TextureCoordsVarying.y) * 2.0 - 1.0; // -1~1

判断是否大于最大的偏移*amplitude，如果大于则不能偏移

    //判断是否大于最大偏移量(maxJitter)*振幅(amplitude)
    bool needOffset = abs(jitter) < maxJitter * amplitude;
    //如果大于最大偏移量，则我们让偏移量变小(让撕裂不会太大产生错误效果)。
    float textureX = TextureCoordsVarying.x + (needOffset ? jitter : (jitter * amplitude * 0.006));
    //撕裂后的纹理坐标
    vec2 textureCoords = vec2(textureX, TextureCoordsVarying.y);

颜色偏移并得到最终结果

    //撕裂后原图颜色
    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);

完整代码如下:

precision highp float;

uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

uniform float Time;

const float PI = 3.1415926;

float rand(float n) {
    return fract(sin(n) * 43758.5453123);
}

void main(){
    float maxJitter = 0.06;
    float duration = 0.3;
    float colorROffset = 0.01;
    float colorBOffset = -0.025;

    float time = mod(Time, duration * 2.0);
    float amplitude = max(sin(time * (PI / duration)), 0.0);

    float jitter = rand(TextureCoordsVarying.y) * 2.0 - 1.0; // -1~1
    bool needOffset = abs(jitter) < maxJitter * amplitude;

    float textureX = TextureCoordsVarying.x + (needOffset ? jitter : (jitter * amplitude * 0.006));
    vec2 textureCoords = vec2(textureX, TextureCoordsVarying.y);
    
    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);
}

幻觉效果

由于幻觉效果设计到大量的计算，而在模拟器上运行的时候，调用的其实是电脑的CPU，所以会导致卡死，所以幻觉效果尽量真机运行，效果如下:

幻觉效果.gif

原理

幻觉的原理还是图层的叠加，但是这里图层不单单是2层，我们会用for循环每隔一段时间创建图层，然后让图片做圆周运动，同时加上颜色偏移，就回造成残影的效果，类似于产生幻觉。

代码实现

设置参数

    //设置周期
    const float duration = 2.0;
    //获取当前时间[0,2.0]
    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;
    //设置颜色的偏移量(maxAlphaR数值较大，表示红色较重)
    float maxAlphaR = 0.5; // max R
    float maxAlphaG = 0.05; // max G
    float maxAlphaB = 0.05; // max B

获得新图层的坐标

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

设置透明度及存放结果的mask

    //设置原始透明度
    float alphaR = 1.0; // R
    float alphaG = 1.0; // G
    float alphaB = 1.0; // B
    //设置resultMask,以保存结果
    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;
        //多个图层进行叠加2
        resultMask += vec4(tmpMask.r * tmpAlphaR,
                           tmpMask.g * tmpAlphaG,
                           tmpMask.b * tmpAlphaB,
                           1.0);
        alphaR -= tmpAlphaR;
        alphaG -= tmpAlphaG;
        alphaB -= tmpAlphaB;
    }

在这个函数中调用了以下方法:

float maskAlphaProgress(float currentTime, float hideTime, float startTime) {
    //返回一个周期内当前的时间
    float time = mod(duration + currentTime - startTime, duration);  
    //返回当前时间和0.9s中小的一个
    return min(time, hideTime);
}

加上最上面一层图层,并将结果给gl_FragColor

    //添加最上面的一层图层
    resultMask += vec4(mask.r * alphaR, mask.g * alphaG, mask.b * alphaB, 1.0);
 gl_FragColor = resultMask;

完整代码如下:

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

OpenGL ES的滤镜效果 -- 动效

准备工作

缩放

原理

具体实现

灵魂出窍

原理

具体实现

抖动

原理

具体实现

闪白

原理

具体实现

毛刺

原理

具体实现

幻觉效果

原理

代码实现

猜你喜欢

热点阅读