OpenGL ES 滤镜入门：旋转、马赛克

IOS

2023-11-23 20:18:34

OpenGLES中的漩涡和马赛克滤镜：释放你的图像创意

漩涡滤镜：让你的图像旋转起来

漩涡滤镜是一种迷人的滤镜，它将你的图像扭曲成一个迷人的漩涡，仿佛被一股神秘的力量拉扯着。它的魅力在于它扭曲像素的方式，随着你从中心向外移动，图像会逐渐旋转，形成一种令人眩晕的视觉效果。

为了实现漩涡滤镜，我们需要了解其背后的数学原理。它依赖于一个扭曲函数，它根据像素到漩涡中心的距离来偏移像素位置。通过将每个像素的位置偏移一个与距离成正比的量，我们可以创造出图像中漩涡的错觉。

马赛克滤镜：像素拼贴的艺术

马赛克滤镜将你的图像分解成小方块，创造出一种马赛克或拼贴效果，就像古老的马赛克艺术作品。它通过采样每个像素并将其颜色设置为相邻像素平均值的一个近似值来实现。这个过程将图像分解成较大的色块，产生一种独特的像素化外观。

实现漩涡和马赛克滤镜：代码示例

// 漩涡滤镜片段着色器
uniform vec2 center; // 漩涡中心

vec2 distort(vec2 uv) {
    vec2 diff = uv - center; // 计算像素到中心的偏移量
    float r = length(diff); // 计算像素到中心的距离
    float angle = atan(diff.y, diff.x); // 计算像素与中心连线与 x 轴的夹角
    return center + vec2(r * cos(angle), r * sin(angle)); // 返回扭曲后的像素位置
}

void main() {
    vec2 uv = distort(v_texCoord); // 获取扭曲后的像素位置
    gl_FragColor = texture2D(u_texture, uv); // 从纹理中获取扭曲后的像素颜色
}

// 马赛克滤镜片段着色器
uniform vec2 tileSize; // 马赛克瓷砖大小

vec4 mosaic(vec2 uv) {
    vec2 uv0 = floor(uv / tileSize) * tileSize; // 计算马赛克瓷砖的左上角坐标
    return texture2D(u_texture, uv0); // 从纹理中获取马赛克瓷砖的颜色
}

void main() {
    vec2 uv = v_texCoord; // 获取原始像素位置
    gl_FragColor = mosaic(uv); // 获取马赛克瓷砖的颜色
}