学习并使用GLSL.分别实现置灰,翻转,正方形马赛克,六边形马赛克,三角形马赛克,以及缩放,灵魂出窍,抖动,闪白,毛刺.幻觉效果!

置灰效果

核心思路:在片元着色器中.将原图中的所有颜色值与我们设定的灰色变换因子相乘获取新的灰色颜色值

原图.jpg

置灰效果.jpg

相关代码如下:

precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
const highp vec3 W = vec3(0.2125, 0.7154, 0.0721);

void main (void) {
    
    vec4 mask = texture2D(Texture, TextureCoordsVarying);
    //dot内建函数.将颜色值与变换因子相乘得到新的颜色值
    float luminance = dot(mask.rgb, W);
    gl_FragColor = vec4(vec3(luminance), 1.0);
}

颠倒滤镜

核心思路:在片元着色器中.翻转纹理坐标y值.

颠倒图.jpg

相关代码如下:

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

void main (void) {
    
    vec4 color = texture2D(Texture, vec2(TextureCoordsVarying.x, 1.0-TextureCoordsVarying.y));
    gl_FragColor = color;
}

正方形马赛克

核心思路:将整个纹理.分成多个小正方形.随后将小正方形内的所有纹理颜色值均取右上角的颜色值.

方便理解.jpg

正方形马赛克.jpg

相关代码如下:

precision highp float;
//纹理坐标
uniform sampler2D Texture;
//纹理采样器
varying vec2 TextureCoordsVarying;
//纹理图片size
const vec2 TexSize = vec2(400.0, 400.0);
//马赛克size
const vec2 MosaicSize = vec2(16.0, 16.0);

void main(){
//计算实际图像位置
vec2 intXY = vec2(TextureCoordsVarying.x * TexSize.x, TextureCoordsVarying.y * TexSize.y);

//floor(x) 内建函数，返回小于/等于x最大的整数，即向下取整
//floor(intXY.x/mosaicSize.x)*mosaicSize.x 计算出一个小马赛克的坐标
vec2 XYMosaic = vec2(floor(intXY.x/MosaicSize.x)*MosaicSize.x, floor(intXY.y/MosaicSize.y)*MosaicSize.y);

//换算回纹理坐标，此时的纹理坐标是小马赛克的部分的纹理坐标，即某一个色块
vec2 UVMosaic = vec2(XYMosaic.x/TexSize.x, XYMosaic.y/TexSize.y);
//获取到马赛克后的纹理坐标的颜色值
vec4 color = texture2D(Texture, UVMosaic);
//将马赛克颜色值赋值给gl_FragColor
gl_FragColor = color;
}

六边形马赛克

核心思路:将整个纹理.分成多个正六边形,根据行列的奇偶情况.可以对应下图中的两种情况.即中心点为(0,0)(1,1),以及中心点为(0,1)(1,0),找到该规律以后将当前纹理坐标计算最近的中心点.该中心点颜色值即为该纹理坐标的颜色值.

方便理解.jpg

正六边形.jpg

相关代码如下:

precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
//六边形的边长
const float mosaicSize = 0.03;

void main(){

float length = mosaicSize;
//矩形的高的比例为√3，取值 √3/2 ，也可以直接取√3
float TR = 0.866025;
//矩形的长的比例为3，取值 3/2 = 1.5，也可以直接取3
float TB = 1.5;

//取出纹理坐标
float x = TextureCoordsVarying.x;
float y = TextureCoordsVarying.y;

//根据纹理坐标计算出对应的矩阵坐标 
//即 矩阵坐标wx = int（纹理坐标x/ 矩阵长），矩阵长 = TB*len
//即 矩阵坐标wy = int（纹理坐标y/ 矩阵宽），矩阵宽 = TR*len
int wx = int(x / TB / length);
int wy = int(y / TR / length);
vec2 v1, v2, vn;

//判断wx是否为偶数，等价于 wx % 2 == 0
if (wx/2 * 2 == wx) {
    if (wy/2 * 2 == wy) {//偶行偶列
        //(0,0),(1,1)
        v1 = vec2(length * TB * float(wx), length * TR * float(wy));
        v2 = vec2(length * TB * float(wx+1), length * TR * float(wy+1));
    }else{//偶行奇列
        //(0,1),(1,0)
        v1 = vec2(length * TB * float(wx), length * TR * float(wy+1));
        v2 = vec2(length * TB * float(wx+1), length * TR * float(wy));
    }
}else{
    if (wy/2 * 2 == wy) {//奇行偶列
        //(0,1),(1,0)
        v1 = vec2(length * TB * float(wx), length * TR * float(wy+1));
        v2 = vec2(length * TB * float(wx+1), length * TR * float(wy));
    }else{//奇行奇列
        //(0,0),(1,1)
        v1 = vec2(length * TB * float(wx), length * TR * float(wy));
        v2 = vec2(length * TB * float(wx+1), length * TR * float(wy+1));
    }
}
//利用距离公式，计算中心点与当前像素点的距离
float s1 = sqrt(pow(v1.x-x, 2.0) + pow(v1.y-y, 2.0));
float s2 = sqrt(pow(v2.x-x, 2.0) + pow(v2.y-y, 2.0));

//选择距离小的则为六边形的中心点，且获取它的颜色
vn = (s1 < s2) ? v1 : v2;
//获取六边形中心点的颜色值
vec4 color = texture2D(Texture, vn);
gl_FragColor = color;
}

三边形马赛克

核心思路:前面准备工作与六边形马赛克相似.需要将六边形细分为6个三角形.如下图.然后根据纹理坐标找到所在三角形.并设定其纹理颜色为三角形的中心颜色

方便理解.jpg

三角形.jpg

相关代码如下:

/...接上六边形纹理相关代码..../

vn = (s1 < s2) ? v1 : v2;
//获取像素点与中心点的角度
float a = atan((x-vn.x)/(y-vn.y));

//判断夹角，属于哪个三角形，则获取哪个三角形的中心点坐标
vec2 area1 = vec2(vn.x, vn.y - mosaicSize * TR / 2.0);
vec2 area2 = vec2(vn.x + mosaicSize / 2.0, vn.y - mosaicSize * TR / 2.0);
vec2 area3 = vec2(vn.x + mosaicSize / 2.0, vn.y + mosaicSize * TR / 2.0);
vec2 area4 = vec2(vn.x, vn.y + mosaicSize * TR / 2.0);
vec2 area5 = vec2(vn.x - mosaicSize / 2.0, vn.y + mosaicSize * TR / 2.0);
vec2 area6 = vec2(vn.x - mosaicSize / 2.0, vn.y - mosaicSize * TR / 2.0);

if (a >= PI6 && a < PI6 * 3.0) {
    vn = area1;
}else if (a >= PI6 * 3.0 && a < PI6 * 5.0){
    vn = area2;
}else if ((a >= PI6 * 5.0 && a <= PI6 * 6.0) || (a < -PI6 * 5.0 && a > -PI6 * 6.0)){
    vn = area3;
}else if (a < -PI6 * 3.0 && a >= -PI6 * 5.0){
    vn = area4;
}else if (a <= -PI6 && a > -PI6 * 3.0){
    vn = area5;
}else if (a > -PI6 && a < PI6){
    vn = area6;
}
//获取对应三角形重心的颜色值
vec4 color = texture2D(Texture, vn);
// 将颜色值填充到片元着色器内置变量gl_FragColor
gl_FragColor = color;
}

缩放效果

核心思路:在顶点着色器中.随着时间的推移.让顶点着色器的顶点呈现正弦振幅逐渐放大以及缩小.

方便理解.jpg

缩放.2021-02-24 17_23_39.gif

相关代码如下:

attribute vec4 Position;
attribute vec2 TextureCoords;
varying vec2 TextureCoordsVarying;
//时间戳（随着定时器的方法调用及时更新）:从0开始一直递增
uniform float Time;
const float PI = 3.1415926;

void main(){
//一次缩放效果的时长
float duration = 0.6;
//最大缩放幅度
float maxAmplitude = 0.3;

//表示传入的事件周期，即time的范围被控制在0.0~0.6
//mod(a, b)，求模运算 等价于 a%b，GLSL中不支持%求模
float time = mod(Time,duration);

//amplitude表示振幅，引入PI的目的是为了使用sin函数，将amplitude的范围控制在1.0 ~ 1.3之间，并随着时间变化
//这里可以不用取绝对值，因为角度的范围是【0，π】，不会出现负数的情况
float amplitude = 1.0 + maxAmplitude * abs(sin(time * (PI / duration)));

//放大关键代码：将顶点坐标的x和y分别乘以一个放大系数，即振幅，在纹理坐标不变的情况下，就达到了拉伸的效果
//xy放大，zw保持不变
gl_Position = vec4(Position.x * amplitude, Position.y * amplitude, Position.zw);

//纹理坐标传递给TextureCoordsVarying
TextureCoordsVarying = TextureCoords;
}

灵魂出窍

核心思路:在纹理上叠加一个放大的纹理.将两个纹理的颜色混合实现.并且放大的纹理层随着时间的推移透明度逐步降低至0.以此反复.

灵魂出窍.gif

相关代码如下:

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;

//当前进度（时间戳与时长使用mod取模）,再除以时长 得到【0， 1】，即百分比
float progress = mod(Time, duration) / duration; // 0~1
//当前透明度 【0.4， 0】
float alpha = maxAlpha * (1.0 - progress);
//当前缩放比例 【1.0， 1.8】
float scale = 1.0 + (maxScale - 1.0) * progress;

//获取放大后的纹理坐标
//将顶点坐标对应的纹理坐标的x/y值到中心点的距离，缩小一定的比例，仅仅只是改变了纹理坐标，而保持顶点坐标不变，从而达到拉伸效果.即中心点左边的往左偏移.右边的往右偏移
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);
//2、颜色混合 内建函数mix / 混合方程式
gl_FragColor = mask * (1.0 - alpha) + weakMask * alpha;
}

抖动效果

核心思路:在纹理上叠加两个放大的颜色偏移的纹理.将包含原始纹理在内的颜色混合实现.并且放大的纹理层随着时间的推移.以此反复.

抖动.gif

相关代码如下:

void main(){
 //一次抖动效果的时长
float duration = 0.7;
//放大图片的上限
float maxScale = 1.1;
//颜色偏移的步长
float offset = 0.02;

//进度 0 ~ 1
float progress = mod(Time, duration) / duration;
//颜色偏移值0 ~ 0.02
vec2 offsetCoords = vec2(offset, offset) * progress;
//缩放比例 1.0 ~ 1.1
float scale = 1.0 + (maxScale - 1.0) * progress;

//放大后的纹理坐标 
//下面这种向量相加减的方式 等价于 灵魂出窍滤镜中的单个计算x、y坐标再组合的为纹理坐标的方式
vec2 ScaleTextureCoords = vec2(0.5, 0.5) + (TextureCoordsVarying - vec2(0.5, 0.5)) / scale;

//获取三组颜色：颜色偏移计算可以随意，只要偏移量很小即可
//原始颜色 + offset
vec4 maskR = texture2D(Texture, ScaleTextureCoords + offsetCoords);
//原始颜色 - offset
vec4 maskB = texture2D(Texture, ScaleTextureCoords - offsetCoords);
//原始颜色
vec4 mask = texture2D(Texture, ScaleTextureCoords);

//从3组颜色中分别取出 红色R，绿色G，蓝色B，透明度A填充到内置变量gl_FragColor内
gl_FragColor = vec4(maskR.r, maskB.g, mask.b, mask.a);
}

闪白效果

核心思路:在原纹理上添加一个白色遮罩.且白色遮罩的透明度随着时间的推移而变化.然后将白色遮罩与原纹理颜色混合

闪白.gif

相关代码如下:

void main(){
//一次闪白的时长
float duration = 0.6;
//将时间戳转换到一个周期内，范围是0 ~ 0.6
float time = mod(Time, duration);
//白色遮罩
vec4 whiteMask = vec4(1.0, 1.0, 1.0, 1.0);
// 振幅，范围是0 ~ 1
//float amplitude = abs(sin(time * (PI / duration)));
float amplitude = sin(time * (PI / duration));

//获取纹理坐标对应的纹素颜色值
vec4 mask = texture2D(Texture, TextureCoordsVarying);
//利用mix内置函数进行颜色混合，属于线性混合
gl_FragColor = mix(mask, whiteMask, amplitude);
}

毛刺效果

核心思路:在原纹理中.当像素点的偏移值小于一个设定值时.才进行偏移.否则乘以一个极小值.让其还原.这样随着时间的推移.以此反复.

毛刺.gif

相关代码如下:

   //随机数
    float rand(float n){
    //fract(x)返回x的小数部分
    //返回 sin(n) * 43758.5453123
    //sin(n) * 极大值，带小数点，想要随机数算的比较低，乘的数就必须较大，噪声随机
    //如果想得到【0，1】范围的小数值，可以将sin * 1
    //如果只保留小数部分，乘以一个极大值
    return fract(sin(n) * 43758.5453123);
    }

    void main(){
    //最大抖动上限
    float maxJitter = 0.06;
    //一次毛刺效果的时长
    float duration = 0.3;
    //红色颜色偏移
    float colorROffset = 0.01;
    //绿色颜色偏移
    float colorBOffset = -0.025;
    
    //表示将传入的事件转换到一个周期内，范围是 0 ~ 0.6，抖动时长变成0.6
    float time = mod(Time, duration * 2.0);
    //振幅，随着时间变化，范围是[0, 1]                                                                             
    float amplitude = max(sin(time * (PI / duration)), 0.0);
    
    //像素随机偏移范围 -1 ~ 1，* 2.0 - 1.0是为了得到【-1，1】范围内的随机值
    float jitter = rand(TextureCoordsVarying.y) * 2.0 - 1.0;
    //判断是否需要偏移，如果jitter范围 < 最大范围*振幅
    // abs(jitter) 范围【0，1】
    // maxJitter * amplitude 范围【0， 0.06】
    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);
    }

幻觉效果

核心思路:做残影效果.并且将颜色做红色偏移.随着时间的递进.做圆周运动.也是多个纹理叠加产生效果

幻觉.gif

相关代码如下:

uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

uniform float Time;

const float PI = 3.1415926;
//一次幻觉效果的时长，即周期
const float duration = 2.0;

//这个函数可以计算出，在某个时刻图片的具体位置，通过它可以每经过一段时间，去生成一个新的mask
//转圈产生幻影的单个像素点的颜色值
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) {
//mod（时长+持续时间 - 开始时间，时长）得到一个周期内的time
    float time = mod(duration + currentTime - startTime, duration);
    //如果小于0.9，返回time，反之，返回0.9
    return min(time, hideTime);
}

void main(){
    //将传入的时间戳转换到一个周期内，time的范围是【0，2】
    //获得时间周期
    float time = mod(Time, duration);
    //放大后的倍数
    float scale = 1.2;
    //偏移量 = 0.083
    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;
    //时间间隔：隔0.2s创建一个新层
    float timeGap = 0.2;
    
    //注意：只保留了红色的透明的通道值，因为幻觉效果残留红色
    //幻影残留数据
    //max RGB alpha
    //新图层的 R透明度
    float maxAlphaR = 0.5;
    //新图层的 G透明度
    float maxAlphaG = 0.05;
    //新图层的 B透明度
    float maxAlphaB = 0.05;
    
    //获取新的图层的坐标，需要传入时间、纹理坐标、偏移量
    vec4 mask = getMask(time, textureCoords, padding);
    //RGB ：for循环中使用
    float alphaR = 1.0;
    float alphaG = 1.0;
    float alphaB = 1.0;
    
    //最终图层颜色：初始化
    vec4 resultMask = vec4(0, 0, 0, 0);
    
    //循环：每一层循环都会得到新的图层的颜色，即幻影颜色
    //一次循环只是计算一个像素点的纹素，需要在真机运行。模拟器会卡，主要是模拟器上是CPU模拟GPU的
    for (float f = 0.0; f < duration; f += timeGap) {
        float tmpTime = f;
        //获取到【0，2】s内所获取的运动后的纹理坐标
        //获得幻影当前时间的颜色值
        vec4 tmpMask = getMask(tmpTime, textureCoords, padding);
        
        //某个时刻创建的层，在当前时刻的红绿蓝的透明度
        //临时的透明度 = 根据时间推移RGB的透明度发生变化
        //获得临时的红绿蓝透明度
        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;
        
        //累计每一层临时RGB * RGB的临时透明度
        //结果 += 临时颜色 * 透明度，即刚产生的图层的颜色
        resultMask += vec4(tmpMask.r * tmpAlphaR,tmpMask.g * tmpAlphaG,tmpMask.b * tmpAlphaB,1.0);
                           
        //透明度递减
        alphaR -= tmpAlphaR;
        alphaG -= tmpAlphaG;
        alphaB -= tmpAlphaB;
    }
    
    //最终颜色 += 原始纹理的RGB * 透明度
    resultMask += vec4(mask.r * alphaR, mask.g * alphaG, mask.b * alphaB, 1.0);
    
    //将最终颜色填充到像素点里
    gl_FragColor = resultMask;
}

参考文献:OpenGL ES 案例13：动效滤镜（6种）
代码地址:Demo