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

1.直接上代码，原理与上一篇图片的是完全一致的，只不过视频的是Y和UV两个纹理，preferredRotation这个是纹理旋转的角度，Time依然是CADisplayLink的时间差，本来想获取视频解码后的CMTime，但是，没有取到值，都是0或者1

2.缩放

1.顶点着色器代码

attribute vec4 position;
attribute vec2 texCoord;
varying vec2 varyingTextureCoordinate;
uniform float preferredRotation;

void main () {
    mat4 rotationMatrix = mat4(cos(preferredRotation), -sin(preferredRotation),
                               0.0, 0.0,
                               sin(preferredRotation), cos(preferredRotation),
                               0.0, 0.0,
                               0.0, 0.0, 1.0,0.0,
                               0.0, 0.0, 0.0, 1.0);
    gl_Position = position * rotationMatrix;
    varyingTextureCoordinate = texCoord;
}

2.片元着色器代码


uniform sampler2D SamplerY;
uniform sampler2D SamplerUV;
uniform mat3 colorConversionMatrix;
varying vec2 varyingTextureCoordinate;

uniform float Time;
const float PI = 3.1415926;

void main() {
    mediump vec3 yuv;
    lowp vec3 rgb;

    vec2 changeTextureCoordinate = varyingTextureCoordinate;

    float duration = 0.6;
    float maxAmplitude = 0.3;

    float time = mod(Time, duration);
    float amplitude = 1.0 - maxAmplitude * abs(sin(time * (PI / duration)));

    changeTextureCoordinate = vec2(changeTextureCoordinate.x * amplitude, changeTextureCoordinate.y * amplitude);

    yuv.x = texture2D(SamplerY, changeTextureCoordinate).r - (16.0 / 255.0);
    yuv.yz = texture2D(SamplerUV, changeTextureCoordinate).rg - vec2(0.5, 0.5);
    rgb = colorConversionMatrix * yuv;
    gl_FragColor = vec4(rgb, 1.0);
}

3.闪白

1.顶点着色器代码

attribute vec4 position;
attribute vec2 texCoord;
varying vec2 varyingTextureCoordinate;
uniform float preferredRotation;

void main () {
    mat4 rotationMatrix = mat4(cos(preferredRotation), -sin(preferredRotation),
                               0.0, 0.0,
                               sin(preferredRotation), cos(preferredRotation),
                               0.0, 0.0,
                               0.0, 0.0, 1.0,0.0,
                               0.0, 0.0, 0.0, 1.0);
    gl_Position = position * rotationMatrix;
    varyingTextureCoordinate = texCoord;
}

2.片元着色器代码


precision highp float;

uniform sampler2D SamplerY;
uniform sampler2D SamplerUV;
uniform mat3 colorConversionMatrix;
varying vec2 varyingTextureCoordinate;

uniform float Time;
const float PI = 3.1415926;

void main() {
    highp vec3 yuv;
    highp vec3 rgb;
    yuv.x = texture2D(SamplerY, varyingTextureCoordinate).r - (16.0 / 255.0);
    yuv.yz = texture2D(SamplerUV, varyingTextureCoordinate).rg - vec2(0.5, 0.5);
    rgb = colorConversionMatrix * yuv;

    float duration = 0.6;
    float time = mod(Time, duration);
    vec3 whiteMask = vec3(1.0, 1.0, 1.0);
    float amplitude = abs(sin(time * (PI / duration)));

    rgb = rgb * (1.0 - amplitude) + whiteMask * amplitude;

    gl_FragColor = vec4(rgb, 1.0);
}

3.抖动

1.顶点着色器代码

attribute vec4 position;
attribute vec2 texCoord;
varying vec2 varyingTextureCoordinate;
uniform float preferredRotation;

void main () {
    mat4 rotationMatrix = mat4(cos(preferredRotation), -sin(preferredRotation),
                               0.0, 0.0,
                               sin(preferredRotation), cos(preferredRotation),
                               0.0, 0.0,
                               0.0, 0.0, 1.0,0.0,
                               0.0, 0.0, 0.0, 1.0);
    gl_Position = position * rotationMatrix;
    varyingTextureCoordinate = texCoord;
}

2.片元着色器代码


precision highp float;
uniform sampler2D SamplerY;
uniform sampler2D SamplerUV;
uniform mat3 colorConversionMatrix;
varying vec2 varyingTextureCoordinate;

uniform float Time;

void main() {
    highp vec3 yuv;
    highp vec3 rgb;

    highp vec3 yuvR;
    highp vec3 rgbR;

    highp vec3 yuvB;
    highp vec3 rgbB;

    //一次抖动滤镜的时长 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) + (varyingTextureCoordinate - vec2(0.5, 0.5)) / scale;

    //获取3组颜色rgb


    //从3组来获取颜色:
    //maskR.r,mask.g,maskB.b 注意这3种颜色取值可以打乱或者随意发挥.不一定写死.只是效果会有不一样.大家可以试试.
    //mask.a 获取原图的透明度

    //原始颜色+offsetCoords
    yuvR.x = texture2D(SamplerY, ScaleTextureCoords + offsetCoords).r - (16.0 / 255.0);
    yuvR.yz = texture2D(SamplerUV, ScaleTextureCoords + offsetCoords).rg - vec2(0.5, 0.5);
    rgbR = colorConversionMatrix * yuvR;

    //原始颜色
    yuv.x = texture2D(SamplerY, ScaleTextureCoords).r - (16.0 / 255.0);
    yuv.yz = texture2D(SamplerUV, ScaleTextureCoords).rg - vec2(0.5, 0.5);
    rgb = colorConversionMatrix * yuv;

    //原始颜色-offsetCoords
    yuvB.x = texture2D(SamplerY, ScaleTextureCoords - offsetCoords).r - (16.0 / 255.0);
    yuvB.yz = texture2D(SamplerUV, ScaleTextureCoords - offsetCoords).rg - vec2(0.5, 0.5);
    rgbB = colorConversionMatrix * yuvB;

    gl_FragColor = vec4(rgbR.r, rgb.g, rgbB.b, 1.0);
}

4.毛刺

1.顶点着色器代码

attribute vec4 position;
attribute vec2 texCoord;
varying vec2 varyingTextureCoordinate;
uniform float preferredRotation;

void main () {
    mat4 rotationMatrix = mat4(cos(preferredRotation), -sin(preferredRotation),
                               0.0, 0.0,
                               sin(preferredRotation), cos(preferredRotation),
                               0.0, 0.0,
                               0.0, 0.0, 1.0,0.0,
                               0.0, 0.0, 0.0, 1.0);
    gl_Position = position * rotationMatrix;
    varyingTextureCoordinate = texCoord;
}

2.片元着色器代码

precision highp float;
uniform sampler2D SamplerY;
uniform sampler2D SamplerUV;
uniform mat3 colorConversionMatrix;
varying vec2 varyingTextureCoordinate;

uniform float Time;
const float PI = 3.1415926;

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

void main() {
    highp vec3 yuv;
    highp vec3 rgb;
    
    highp vec3 yuvR;
    highp vec3 rgbR;
    
    highp vec3 yuvB;
    highp vec3 rgbB;
    
    //最大抖动
    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(varyingTextureCoordinate.y) * 2.0 - 1.0; // -1~1
    
    //是否要做偏移.
    bool needOffset = abs(jitter) < maxJitter * amplitude;
    
    //获取纹理X值.根据needOffset,来计算它X撕裂.
    //needOffset = YES ,撕裂较大;
    //needOffset = NO,撕裂较小.
    float textureX = varyingTextureCoordinate.x + (needOffset ? jitter : (jitter * amplitude * 0.006));
    
    //撕裂后的纹理坐标x,y
    vec2 textureCoords = vec2(textureX, varyingTextureCoordinate.y);
    
    
    
    //撕裂后的纹理颜色偏移
    yuvR.x = texture2D(SamplerY, textureCoords + vec2(colorROffset * amplitude, 0.0)).r - (16.0 / 255.0);
    yuvR.yz = texture2D(SamplerUV, textureCoords + vec2(colorROffset * amplitude, 0.0)).rg - vec2(0.5, 0.5);
    rgbR = colorConversionMatrix * yuvR;
    
    //根据撕裂后获取的纹理颜色值
    yuv.x = texture2D(SamplerY, textureCoords).r - (16.0 / 255.0);
    yuv.yz = texture2D(SamplerUV, textureCoords).rg - vec2(0.5, 0.5);
    rgb = colorConversionMatrix * yuv;
    
    //撕裂后的纹理颜色偏移
    yuvB.x = texture2D(SamplerY, textureCoords + vec2(colorBOffset * amplitude, 0.0)).r - (16.0 / 255.0);
    yuvB.yz = texture2D(SamplerUV, textureCoords + vec2(colorBOffset * amplitude, 0.0)).rg - vec2(0.5, 0.5);
    rgbB = colorConversionMatrix * yuvB;
    
    //红色/蓝色部分发生撕裂.
    gl_FragColor = vec4(rgbR.r, rgb.g, rgbB.b, 1.0);
}

5.灵魂出窍

1.顶点着色器代码

attribute vec4 position;
attribute vec2 texCoord;
varying vec2 varyingTextureCoordinate;
uniform float preferredRotation;

void main () {
    mat4 rotationMatrix = mat4(cos(preferredRotation), -sin(preferredRotation),
                               0.0, 0.0,
                               sin(preferredRotation), cos(preferredRotation),
                               0.0, 0.0,
                               0.0, 0.0, 1.0,0.0,
                               0.0, 0.0, 0.0, 1.0);
    gl_Position = position * rotationMatrix;
    varyingTextureCoordinate = texCoord;
}

2.片元着色器代码


precision highp float;
uniform sampler2D SamplerY;
uniform sampler2D SamplerUV;
uniform mat3 colorConversionMatrix;
varying vec2 varyingTextureCoordinate;

uniform float Time;

void main() {
    highp vec3 yuv;
    highp vec3 rgb;

    highp vec3 yuvWeak;
    highp vec3 rgbWeak;

    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 + (varyingTextureCoordinate.x - 0.5) / scale;
    float weakY = 0.5 + (varyingTextureCoordinate.y - 0.5) / scale;
    vec2 weakTextureCoords = vec2(weakX, weakY);

    yuv.x = texture2D(SamplerY, varyingTextureCoordinate).r - (16.0 / 255.0);
    yuv.yz = texture2D(SamplerUV, varyingTextureCoordinate).rg - vec2(0.5, 0.5);
    rgb = colorConversionMatrix * yuv;

    yuvWeak.x = texture2D(SamplerY, weakTextureCoords).r - (16.0 / 255.0);
    yuvWeak.yz = texture2D(SamplerUV, weakTextureCoords).rg - vec2(0.5, 0.5);
    rgbWeak = colorConversionMatrix * yuvWeak;

    vec3 blendColor = rgb * (1.0 - alpha) + rgbWeak * rgbWeak;
    gl_FragColor = vec4(blendColor, 1.0);
}

5.幻觉

1.顶点着色器代码

attribute vec4 position;
attribute vec2 texCoord;
varying vec2 varyingTextureCoordinate;
uniform float preferredRotation;

void main () {
    mat4 rotationMatrix = mat4(cos(preferredRotation), -sin(preferredRotation),
                               0.0, 0.0,
                               sin(preferredRotation), cos(preferredRotation),
                               0.0, 0.0,
                               0.0, 0.0, 1.0,0.0,
                               0.0, 0.0, 0.0, 1.0);
    gl_Position = position * rotationMatrix;
    varyingTextureCoordinate = texCoord;
}

2.片元着色器代码


precision highp float;
uniform sampler2D SamplerY;
uniform sampler2D SamplerUV;
uniform mat3 colorConversionMatrix;
varying vec2 varyingTextureCoordinate;

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;
    
    highp vec3 yuv;
    highp vec3 rgb;
    //根据撕裂后获取的纹理颜色值
    yuv.x = texture2D(SamplerY, translationTextureCoords).r - (16.0 / 255.0);
    yuv.yz = texture2D(SamplerUV, translationTextureCoords).rg - vec2(0.5, 0.5);
    rgb = colorConversionMatrix * yuv;
    return vec4(rgb, 1.0);
}

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) + (varyingTextureCoordinate - 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;
}

6.补充

前置摄像头的时候图像是左右相反的，需要在顶点着色器里面对position.x 取反后再赋值，且不能直接对position值进行修改，且还需要一个标志位传递到顶点着色器里面去, uniform属性即可

// OK
vec4 newPosition = vec4(-position.x, position.y, position.z, position.w);
gl_Position = newPosition * rotationMatrix;

// Error
position = vec4(-position.x, position.y, position.z, position.w);
gl_Position = position * rotationMatrix;

最后编辑于：2019.07.28 16:09:05

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 159,458评论 4赞 363
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,454评论 1赞 294
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 109,171评论 0赞 243
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 44,062评论 0赞 207
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,440评论 3赞 287
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,661评论 1赞 219
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,906评论 2赞 313
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,609评论 0赞 200
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,379评论 1赞 246
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,600评论 2赞 246
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,085评论 1赞 261
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,409评论 2赞 254
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,072评论 3赞 237
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,088评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,860评论 0赞 195
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,704评论 2赞 276
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,608评论 2赞 270

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

1.直接上代码，原理与上一篇图片的是完全一致的，只不过视频的是Y和UV两个纹理，preferredRotation这个是纹理旋转的角度，Time依然是CADisplayLink的时间差，本来想获取视频解码后的CMTime，但是，没有取到值，都是0或者1

2.缩放

3.闪白

3.抖动

4.毛刺

5.灵魂出窍

5.幻觉

6.补充

推荐阅读更多精彩内容