iOS OpenGL ES 图片 shader模仿抖音缩放、灵魂出窍、抖动、闪白、毛刺、幻觉

1. iOS端实现的模仿抖音的几种效果，只列出vertexShader 和 fragmentShader关键代码，具体OpenGL ES渲染图片或视频的代码暂时先不列在此文章里面

2.以下fragmentShader里面的time，都是CADisplayLink的时间差值

// 开始一个滤镜动画
- (void)startFilerAnimation {
    //1.判断displayLink 是否为空
    //CADisplayLink 定时器
    if (self.displayLink) {
        [self.displayLink invalidate];
        self.displayLink = nil;
    }
    //2. 设置displayLink 的方法
    self.startTimeInterval = 0;
    self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(timeAction)];
    
    //3.将displayLink 添加到runloop 运行循环
    [self.displayLink addToRunLoop:[NSRunLoop mainRunLoop]
                           forMode:NSRunLoopCommonModes];
}

//2. 动画
- (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];
}

3.缩放

1.顶点着色器代码

//顶点坐标/纹理坐标映射关系.放大?
//放大过程. 顶点着色器完成.

//顶点坐标
attribute vec4 Position;
//纹理坐标
attribute vec2 TextureCoords;
//纹理坐标
varying vec2 TextureCoordsVarying;
//时间撮(及时更新)
uniform float Time;
//PI
const float PI = 3.1415926;

void main (void) {
   
    //一次缩放效果时长 0.6
    float duration = 0.6;
    //最大缩放幅度
    float maxAmplitude = 0.3;
    
    //表示时间周期.范围[0.0~0.6];
    float time = mod(Time, duration);
    
    //amplitude [1.0,1.3]
    float amplitude = 1.0 + maxAmplitude * abs(sin(time * (PI / duration)));
    
    // 顶点坐标x/y 分别乘以放大系数[1.0,1.3]
    gl_Position = vec4(Position.x * amplitude, Position.y * amplitude, Position.zw);
   
    // 纹理坐标
    TextureCoordsVarying = TextureCoords;
}

2.片元着色器代码

precision highp float;

uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

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

3.缩放效果图

缩放.gif

4.闪白

1.顶点着色器代码

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

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

2.片元着色器代码

//闪白滤镜: 添加白色图层 ,白色图层的透明度随着时间变化
precision highp float;
//纹理采样器
uniform sampler2D Texture;
//纹理坐标
varying vec2 TextureCoordsVarying;
//时间撮
uniform float Time;
//PI 常量
const float PI = 3.1415926;

void main (void) {
    
    //一次闪白滤镜的时长 0.6
    float duration = 0.6;
    //表示时间周期[0.0,0.6]
    float time = mod(Time, duration);
    //白色颜色遮罩层
    vec4 whiteMask = vec4(1.0, 1.0, 1.0, 1.0);
    //振幅: (0.0,1.0)
    float amplitude = abs(sin(time * (PI / duration)));
    //纹理坐标对应的纹素(RGBA)
    vec4 mask = texture2D(Texture, TextureCoordsVarying);
    
    //利用混合方程式; 白色图层 + 原始纹理图片颜色 来进行混合
    gl_FragColor = mask * (1.0 - amplitude) + whiteMask * amplitude;
}

3.闪白效果图

闪白.gif

5.抖动

1.顶点着色器代码

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

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

2.片元着色器代码

//抖动滤镜: 颜色偏移 + 微弱的放大效果
precision highp float;
//纹理
uniform sampler2D Texture;
//纹理坐标
varying vec2 TextureCoordsVarying;
//时间撮
uniform float Time;

void main (void) {
    
    //一次抖动滤镜的时长 0.7
    float duration = 0.7;
    //放大图片上限
    float maxScale = 1.1;
    //颜色偏移步长
    float offset = 0.02;
    
    //进度[0,1]
    float progress = mod(Time, duration) / duration; // 0~1
    //颜色偏移值范围[0,0.02]
    vec2 offsetCoords = vec2(offset, offset) * progress;
    //缩放范围[1.0-1.1];
    float scale = 1.0 + (maxScale - 1.0) * progress;
    
    //放大纹理坐标.
    vec2 ScaleTextureCoords = vec2(0.5, 0.5) + (TextureCoordsVarying - vec2(0.5, 0.5)) / scale;
    
    //获取3组颜色rgb
    //原始颜色+offsetCoords
    vec4 maskR = texture2D(Texture, ScaleTextureCoords + offsetCoords);
    //原始颜色-offsetCoords
    vec4 maskB = texture2D(Texture, ScaleTextureCoords - offsetCoords);
    //原始颜色
    vec4 mask = texture2D(Texture, ScaleTextureCoords);
    
    //从3组来获取颜色:
    //maskR.r,mask.g,maskB.b 注意这3种颜色取值可以打乱或者随意发挥.不一定写死.只是效果会有不一样.大家可以试试.
    //mask.a 获取原图的透明度
    gl_FragColor = vec4(maskR.r, mask.g, maskB.b, mask.a);
   
}

3.抖动效果图

抖动.gif

6.灵魂出窍

1.顶点着色器代码

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

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

2.片元着色器代码

//灵魂出窍滤镜: 是两个层的叠加，并且上面的那层随着时间的推移，会逐渐放大且不透明度逐渐降低。这里也用到了放大的效果，我们这次用片段着色器来实现

precision highp float;
//纹理采样器
uniform sampler2D Texture;
//纹理坐标
varying vec2 TextureCoordsVarying;
//时间撮
uniform float Time;

void main (void) {
    
    //一次灵魂出窍效果的时长 0.7
    float duration = 0.7;
    //透明度上限
    float maxAlpha = 0.4;
    //放大图片上限
    float maxScale = 1.8;
    
    //进度值[0,1]
    float progress = mod(Time, duration) / duration; // 0~1
    //透明度[0,0.4]
    float alpha = maxAlpha * (1.0 - progress);
    //缩放比例[1.0,1.8]
    float scale = 1.0 + (maxScale - 1.0) * progress;
    
    //1.放大纹理坐标
    //根据放大笔记.得到放大纹理坐标 [0,0],[0,1],[1,1],[1,0]
    float weakX = 0.5 + (TextureCoordsVarying.x - 0.5) / scale;
    float weakY = 0.5 + (TextureCoordsVarying.y - 0.5) / scale;
    //放大纹理坐标
    vec2 weakTextureCoords = vec2(weakX, weakY);
    
    //获取对应放大纹理坐标下的纹素(颜色值rgba)
    vec4 weakMask = texture2D(Texture, weakTextureCoords);
   
    //原始的纹理坐标下的纹素(颜色值rgba)
    vec4 mask = texture2D(Texture, TextureCoordsVarying);
    
    //颜色混合 默认颜色混合方程式 = mask * (1.0-alpha) + weakMask * alpha;
    gl_FragColor = mask * (1.0 - alpha) + weakMask * alpha;

}

3.灵魂出窍效果图

灵魂出窍.gif

7.毛刺

1.顶点着色器代码

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

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

2.片元着色器代码

//毛刺滤镜: 撕裂 + 微弱的颜色偏移
//具体的思路是，我们让每一行像素随机偏移 -1 ~ 1 的距离（这里的 -1 ~ 1 是对于纹理坐标来说的），但是如果整个画面都偏移比较大的值，那我们可能都看不出原来图像的样子。所以我们的逻辑是，设定一个阈值，小于这个阈值才进行偏移，超过这个阈值则乘上一个缩小系数。则最终呈现的效果是：绝大部分的行都会进行微小的偏移，只有少量的行会进行较大偏移
precision highp float;
//纹理
uniform sampler2D Texture;
//纹理坐标
varying vec2 TextureCoordsVarying;
//时间撮
uniform float Time;
//PI
const float PI = 3.1415926;

//随机数
float rand(float n) {
    //fract(x),返回x的小数部分数据
    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;
    
    //时间周期[0.0,0.6];
    float time = mod(Time, duration * 2.0);
    //振幅:[0,1];
    float amplitude = max(sin(time * (PI / duration)), 0.0);
    
    //像素随机偏移[-1,1]
    float jitter = rand(TextureCoordsVarying.y) * 2.0 - 1.0; // -1~1
    
    //是否要做偏移.
    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);
}

3.毛刺效果图

毛刺.gif

8.幻觉

1.顶点着色器代码

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

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

2.片元着色器代码

核心思想是通过时间计算出角度，不同的角度生成不同的纹理，然后通过遍历时间间隔，创建出不同角度，不同透明度的其他纹理（这里生成的透明度都很小），同时原图的透明度随着时间减少，这样就达到了原图与不同角度不同透明度的纹理的叠加，产生残影效果，

同时里面也有放大的部分，否则看起来的圆周运动就是在图片上下左右四个边缘内做运动了

随着time，产生不同位置的原来的纹理，此时每一种这样的纹理都会叠加4个有效的绿色和蓝色透明度很低的纹理，红色的纹理透明度逐渐增加的纹理，这里周期是2秒，时间间隔是0.2秒，也就是说理论上产生10个可以叠加的纹理，但是，前5个透明度为0，最后一个透明度也为0，所以，叠加也没有效果

总结：
实现的效果是 随着时间原图做周期运动，每一个原图运动的节点都生成4个有效纹理进行颜色叠加且这四个纹理角度和透明度都不一样同时也是放大的，一个原图+4个新产生的纹理（透明度和位置不同，颜色叠加产生残影）

下面列出4个有效的纹理透明度的值，6-9是有效的
每一行都是新产生纹理的RGB透明度

第6个纹理 因子 float R = (0.8/0.9)=0.88
 0.5-0.5*R = 0.06  0.05-0.05*R= 0.066  0.05-0.05*R= 0.066

第7个纹理 因子 float R = (0.6/0.9)=0.66
 0.5-0.5* R = 0.17  0.05-0.05* R= 0.017  0.05-0.05* R= 0.017

第8个纹理 因子 float R = (0.4/0.9)=0.44
 0.5-0.5* R = 0.28  0.05-0.05* R= 0.028  0.05-0.05* R= 0.028

第9个纹理 因子 float R = (0.2/0.9)=0.22
 0.5-0.5* R = 0.39  0.05-0.05* R= 0.039  0.05-0.05* R= 0.039

颜色叠加明显红色占据主要的成分，所以，虚影看起是红色的

红色为主，绿色蓝色为次，看起来残影偏红色

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

产生不同的透明，这个透明度应用在新生产的透明度很小的纹理上面，同时也使得原图的透明度随着减少，可以纹理叠加

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

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

3.幻觉效果图

幻觉.gif

iOS OpenGL ES 图片 shader模仿抖音缩放、灵魂出窍、抖动、闪白、毛刺、幻觉

1. iOS端实现的模仿抖音的几种效果，只列出vertexShader 和 fragmentShader关键代码，具体OpenGL ES渲染图片或视频的代码暂时先不列在此文章里面

2.以下fragmentShader里面的time，都是CADisplayLink的时间差值

3.缩放

4.闪白

5.抖动

6.灵魂出窍

7.毛刺

8.幻觉

你可能感兴趣的:(iOS OpenGL ES 图片 shader模仿抖音缩放、灵魂出窍、抖动、闪白、毛刺、幻觉)