最新在做使用opengl 来实现图片的液化效果,从而为静态图片添加动态的效果。
可以通过一句话来总结一下实现的原理:通过片段着色器来来计算每一个像素点应该显示的颜色在纹理上的位置,从而实现修改渲染像素颜色的功能。
实现可以看下面的函数:
vec2 curveStretchFun(vec2 curCoord, vec2 originPosition, float radius)
{
float currentDistance = distance(curCoord, originPosition);
if (currentDistance < radius) {
vec2 currentDirection = (curCoord - originPosition) / length(curCoord - originPosition);
float angle = dot(currentDirection, vec2(1, 0));
float value45 = sin(-90.0);
float value135 = sin(90.0);
if (angle > value45 && angle < value135 && currentDirection.y > 0.0) {
curCoord = originPosition;
return curCoord ;
} else {
return curCoord - vec2(0, 0);
}
} else {
return curCoord - vec2(0, 0);
}
这里传进来的curCoord 实际上是当前像素点的坐标,我们通过计算originPosition(液化作用的起始点)和当前坐标的距离判断当前像素点是否在作用范围之内,如果不在,那么就不会修改当前像素的坐标,(通过修改坐标来影响在纹理上取像素最终修改当前坐标显示的颜色)。在这个简单的方法中,我们通过吧一个范围的所有颜色全部显示为originPosition 在纹理上对应的颜色。