Android基于Shader的图像处理(10)-仿抖音毛刺特效

完整代码查看# AndroidShaderDemo下的BurrRender

抖音毛刺效果由两部分组成，一个是像素值在X轴（横向）偏移一段距离，另一个是颜色偏移。这里只模仿像素在X轴偏移。并非所有的像素都要在X轴偏移，如果是所有像素都偏移，那就是整个图像横向移动了，因此实际效果是在Y轴上随机的选择某行像素横向移动。

这里就用到了随机函数，shader里可以下面的随机函数:

float nrand(in float x, in float y)
{
  return fract(sin(dot(vec2(x, y), vec2(12.9898, 78.233))) * 43758.5453);
}

至于这个函数原理是什么，可以参考这里# What's the origin of this GLSL rand() one-liner?

有了随机函数，完整的fragment shader如下：

precision mediump float;
uniform sampler2D u_TextureUnit;
varying vec2 v_TextureCoordinates;

uniform float uBurrParam;


float nrand(in float x, in float y)
{
  return fract(sin(dot(vec2(x, y), vec2(12.9898, 78.233))) * 43758.5453);
}

void main()
{
   float cx = v_TextureCoordinates.x;
   float cy = v_TextureCoordinates.y;

   float range = nrand(0, cy) * 2.0 - 1;

   float willOffset = step(0.5, abs(range));

   float offset = range * willOffset * 0.13 * uBurrParam;

   gl_FragColor = texture2D(u_TextureUnit, fract(vec2(cx + offset, cy)));
}

首先用随机函数产出依Y轴为基准的随机数range，范围在[-1, 1]之间，这样后面就可以用这个值来左右偏移。
因为只有某些Y轴整行偏移，因此用willOffset来表示此行是否偏移，就是将随机数range和0.5比较下，根据比较结果step返回0或1。
最后offset代表偏移值，uBurrParam跟之前的特效一样，和每帧索引有关，来产生动画效果。0.13可以更改，值越大，偏移越多。

最终效果如下:

burr.gif