美文网首页OpenGL (ES) - GPUImage
IOS – OpenGL ES 设置图像滤镜 GPUImageS

IOS – OpenGL ES 设置图像滤镜 GPUImageS

作者: 猿说编程 | 来源:发表于2022-05-14 08:53 被阅读0次

    目录

    零基础 OpenGL (ES) 学习路线推荐 : OpenGL (ES) 学习目录 >> OpenGL ES 基础

    零基础 OpenGL (ES) 学习路线推荐 : OpenGL (ES) 学习目录 >> OpenGL ES 转场

    零基础 OpenGL (ES) 学习路线推荐 : OpenGL (ES) 学习目录 >> OpenGL ES 特效

    零基础 OpenGL (ES) 学习路线推荐 : OpenGL (ES) 学习目录 >> OpenGL ES 函数

    零基础 OpenGL (ES) 学习路线推荐 : OpenGL (ES) 学习目录 >> OpenGL ES GPUImage 使用

    零基础 OpenGL (ES) 学习路线推荐 : OpenGL (ES) 学习目录 >> OpenGL ES GLSL 编程

    一.简介

    GPUImage 共 125 个滤镜, 分为四类

    1、Color adjustments : 31 filters , 颜色处理相关
    2、Image processing : 40 filters , 图像处理相关.
    3、Blending modes : 29 filters , 混合模式相关.
    4、Visual effects : 25 filters , 视觉效果相关.

    GPUImageSoftEleganceFilter 属于 GPUImage 颜色处理相关,用来处理图片 lookup 滤镜

    GPUImageSoftEleganceFilter 颜色重映射滤镜,类似 GPUImageLookupFilter

    shader 源码如下:

    /******************************************************************************************/
    //@Author:猿说编程
    //@Blog(个人博客地址): www.codersrc.com
    //@File:IOS – OpenGL ES 设置图像滤镜 GPUImageSoftEleganceFilter
    //@Time:2022/04/11 07:30
    //@Motto:不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
    /******************************************************************************************/
    
    #if TARGET_IPHONE_SIMULATOR || TARGET_OS_IPHONE
    NSString *const kGPUImageLookupFragmentShaderString = SHADER_STRING
    (
     varying highp vec2 textureCoordinate;
     varying highp vec2 textureCoordinate2; // TODO: This is not used
    
     uniform sampler2D inputImageTexture;
     uniform sampler2D inputImageTexture2; // lookup texture
    
     uniform lowp float intensity;
    
     void main()
     {
         highp vec4 textureColor = texture2D(inputImageTexture, textureCoordinate);
    
         highp float blueColor = textureColor.b * 63.0;
    
         highp vec2 quad1;
         quad1.y = floor(floor(blueColor) / 8.0);
         quad1.x = floor(blueColor) - (quad1.y * 8.0);
    
         highp vec2 quad2;
         quad2.y = floor(ceil(blueColor) / 8.0);
         quad2.x = ceil(blueColor) - (quad2.y * 8.0);
    
         highp vec2 texPos1;
         texPos1.x = (quad1.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);
         texPos1.y = (quad1.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g);
    
         highp vec2 texPos2;
         texPos2.x = (quad2.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);
         texPos2.y = (quad2.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g);
    
         lowp vec4 newColor1 = texture2D(inputImageTexture2, texPos1);
         lowp vec4 newColor2 = texture2D(inputImageTexture2, texPos2);
    
         lowp vec4 newColor = mix(newColor1, newColor2, fract(blueColor));
         gl_FragColor = mix(textureColor, vec4(newColor.rgb, textureColor.w), intensity);
     }
    );
    #else
    NSString *const kGPUImageLookupFragmentShaderString = SHADER_STRING
    (
     varying vec2 textureCoordinate;
     varying vec2 textureCoordinate2; // TODO: This is not used
    
     uniform sampler2D inputImageTexture;
     uniform sampler2D inputImageTexture2; // lookup texture
    
     uniform float intensity;
    
     void main()
     {
         vec4 textureColor = texture2D(inputImageTexture, textureCoordinate);
    
         float blueColor = textureColor.b * 63.0;
    
         vec2 quad1;
         quad1.y = floor(floor(blueColor) / 8.0);
         quad1.x = floor(blueColor) - (quad1.y * 8.0);
    
         vec2 quad2;
         quad2.y = floor(ceil(blueColor) / 8.0);
         quad2.x = ceil(blueColor) - (quad2.y * 8.0);
    
         vec2 texPos1;
         texPos1.x = (quad1.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);
         texPos1.y = (quad1.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g);
    
         vec2 texPos2;
         texPos2.x = (quad2.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);
         texPos2.y = (quad2.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g);
    
         vec4 newColor1 = texture2D(inputImageTexture2, texPos1);
         vec4 newColor2 = texture2D(inputImageTexture2, texPos2);
    
         vec4 newColor = mix(newColor1, newColor2, fract(blueColor));
         gl_FragColor = mix(textureColor, vec4(newColor.rgb, textureColor.w), intensity);
     }
    );
    #endif
    

    二.效果演示

    使用**GPUImageSoftEleganceFilter** 处理图片 **lookup 滤镜**,原图:

    GPUImageSoftEleganceFilter 效果图:

    三.源码下载

    OpenGL ES Demo 下载地址 : IOS – OpenGL ES 设置图像滤镜 GPUImageSoftEleganceFilter

    四.猜你喜欢

    本文由博客 - 猿说编程 猿说编程 发布!

    相关文章

      网友评论

        本文标题:IOS – OpenGL ES 设置图像滤镜 GPUImageS

        本文链接:https://www.haomeiwen.com/subject/awypurtx.html