IOS – OpenGL ES 卡通效果（黑色粗线描边） GPUImageToonFilter

最新推荐文章于 2023-04-14 17:11:53 发布
最新推荐文章于 2023-04-14 17:11:53 发布
阅读量619 收藏 2
点赞数
分类专栏： # IOS GPUImage 文章标签： 图像处理 OPENGL ES OPENGL opengl shadr GPUIAMGE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZhaDeNianQu/article/details/124969485
版权

目录

零基础 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 , 视觉效果相关.

**GPUImageToonFilter 属于 GPUImage 图像处理相关，用来图像卡通效果（黑色粗线描边），**shader 源码如下：

******************************************************************************************/
//@Author:猿说编程
//@Blog(个人博客地址): www.codersrc.com
//@File:IOS – OpenGL ES 卡通效果（黑色粗线描边） GPUImageToonFilter
//@Time:2022/05/14 10:30
//@Motto:不积跬步无以至千里，不积小流无以成江海，程序人生的精彩需要坚持不懈地积累！
/******************************************************************************************/


#if TARGET_IPHONE_SIMULATOR || TARGET_OS_IPHONE
NSString *const kGPUImageToonFragmentShaderString = SHADER_STRING
(
 precision highp float;

 varying vec2 textureCoordinate;
 varying vec2 leftTextureCoordinate;
 varying vec2 rightTextureCoordinate;

 varying vec2 topTextureCoordinate;
 varying vec2 topLeftTextureCoordinate;
 varying vec2 topRightTextureCoordinate;

 varying vec2 bottomTextureCoordinate;
 varying vec2 bottomLeftTextureCoordinate;
 varying vec2 bottomRightTextureCoordinate;

 uniform sampler2D inputImageTexture;

 uniform highp float intensity;
 uniform highp float threshold;
 uniform highp float quantizationLevels;

 const highp vec3 W = vec3(0.2125, 0.7154, 0.0721);

 void main()
 {
     vec4 textureColor = texture2D(inputImageTexture, textureCoordinate);

     float bottomLeftIntensity = texture2D(inputImageTexture, bottomLeftTextureCoordinate).r;
     float topRightIntensity = texture2D(inputImageTexture, topRightTextureCoordinate).r;
     float topLeftIntensity = texture2D(inputImageTexture, topLeftTextureCoordinate).r;
     float bottomRightIntensity = texture2D(inputImageTexture, bottomRightTextureCoordinate).r;
     float leftIntensity = texture2D(inputImageTexture, leftTextureCoordinate).r;
     float rightIntensity = texture2D(inputImageTexture, rightTextureCoordinate).r;
     float bottomIntensity = texture2D(inputImageTexture, bottomTextureCoordinate).r;
     float topIntensity = texture2D(inputImageTexture, topTextureCoordinate).r;
     float h = -topLeftIntensity - 2.0 * topIntensity - topRightIntensity + bottomLeftIntensity + 2.0 * bottomIntensity + bottomRightIntensity;
     float v = -bottomLeftIntensity - 2.0 * leftIntensity - topLeftIntensity + bottomRightIntensity + 2.0 * rightIntensity + topRightIntensity;

     float mag = length(vec2(h, v));

     vec3 posterizedImageColor = floor((textureColor.rgb * quantizationLevels) + 0.5) / quantizationLevels;

     float thresholdTest = 1.0 - step(threshold, mag);

     gl_FragColor = vec4(posterizedImageColor * thresholdTest, textureColor.a);
 }
);
#else
NSString *const kGPUImageToonFragmentShaderString = SHADER_STRING
(
 varying vec2 textureCoordinate;
 varying vec2 leftTextureCoordinate;
 varying vec2 rightTextureCoordinate;

 varying vec2 topTextureCoordinate;
 varying vec2 topLeftTextureCoordinate;
 varying vec2 topRightTextureCoordinate;

 varying vec2 bottomTextureCoordinate;
 varying vec2 bottomLeftTextureCoordinate;
 varying vec2 bottomRightTextureCoordinate;

 uniform sampler2D inputImageTexture;

 uniform float intensity;
 uniform float threshold;
 uniform float quantizationLevels;

 const vec3 W = vec3(0.2125, 0.7154, 0.0721);

 void main()
 {
     vec4 textureColor = texture2D(inputImageTexture, textureCoordinate);

     float bottomLeftIntensity = texture2D(inputImageTexture, bottomLeftTextureCoordinate).r;
     float topRightIntensity = texture2D(inputImageTexture, topRightTextureCoordinate).r;
     float topLeftIntensity = texture2D(inputImageTexture, topLeftTextureCoordinate).r;
     float bottomRightIntensity = texture2D(inputImageTexture, bottomRightTextureCoordinate).r;
     float leftIntensity = texture2D(inputImageTexture, leftTextureCoordinate).r;
     float rightIntensity = texture2D(inputImageTexture, rightTextureCoordinate).r;
     float bottomIntensity = texture2D(inputImageTexture, bottomTextureCoordinate).r;
     float topIntensity = texture2D(inputImageTexture, topTextureCoordinate).r;
     float h = -topLeftIntensity - 2.0 * topIntensity - topRightIntensity + bottomLeftIntensity + 2.0 * bottomIntensity + bottomRightIntensity;
     float v = -bottomLeftIntensity - 2.0 * leftIntensity - topLeftIntensity + bottomRightIntensity + 2.0 * rightIntensity + topRightIntensity;

     float mag = length(vec2(h, v));

     vec3 posterizedImageColor = floor((textureColor.rgb * quantizationLevels) + 0.5) / quantizationLevels;

     float thresholdTest = 1.0 - step(threshold, mag);

     gl_FragColor = vec4(posterizedImageColor * thresholdTest, textureColor.a);
 }
);
#endif

二.效果演示

使用 GPUImageToonFilter 用来图像卡通效果（黑色粗线描边）****，原图：

**GPUImageToonFilter** 用来图像卡通效果（黑色粗线描边）**，效果图：**

三.源码下载

OpenGL ES Demo 下载地址 : IOS – OpenGL ES 设置图像卡通效果（黑色粗线描边） GPUImageToonFilter

四.猜你喜欢

  1. IOS – OPenGL ES 设置图像亮度 GPUImageBrightnessFilter
  2. IOS – OPenGL ES 调节图像曝光度 GPUImageExposureFilter
  3. IOS – OpenGL ES 调节图像对比度 GPUImageContrastFilter
  4. IOS – OPenGL ES 调节图像饱和度 GPUImageSaturationFilter
  5. IOS – OPenGL ES 调节图像伽马线 GPUImageGammaFilter
  6. IOS – OpenGL ES 调节图像反色 GPUImageColorInvertFilter
  7. IOS – OpenGL ES 调节图像褐色 GPUImageSepiaFilter
  8. IOS – OpenGL ES 调节图像灰色 GPUImageGrayscaleFilter
  9. IOS – OpenGL ES 调节图像 RGB 通道 GPUImageRGBFilter
  10. IOS – OpenGL ES 调节图像不透明度 GPUImageOpacityFilter
  11. IOS – OpenGL ES 调节图像阴影 GPUImageHighlightShadowFilter
  12. IOS – OpenGL ES 调节图像色彩替换 GPUImageFalseColorFilter
  13. GPUImage – 色彩直方图 GPUImageHistogramFilter
  14. GPUImage – 色彩直方图 GPUImageHistogramGenerator
  15. GPUImage – 像素平均色值 GPUImageAverageColor
  16. GPUImage – 亮度平均 GPUImageLuminosity
  17. IOS – OpenGL ES 调节图像色度 GPUImageHueFilter
  18. IOS – OpenGL ES 指定颜色抠图 GPUImageChromaKeyFilter
  19. IOS – OpenGL ES 调节图像白平衡/色温 GPUImageWhiteBalanceFilter
  20. IOS – OpenGL ES 设置图像 lookup 滤镜 GPUImageLookupFilter
  21. IOS – OpenGL ES 设置图像滤镜 GPUImageAmatorkaFilter
  22. IOS – OpenGL ES 设置图像滤镜 GPUImageSoftEleganceFilter
  23. IOS – OpenGL ES 设置图像锐化 GPUImageSharpenFilter
  24. IOS – OpenGL ES 绘制十字 GPUImageCrosshairGenerator
  25. IOS – OpenGL ES 绘制线条 GPUImageLineGenerator
  26. IOS – OpenGL ES 设置图像黑白燥点 GPUImageLocalBinaryPatternFilter
  27. IOS – OpenGL ES 设置图像卡通效果（黑色粗线描边） GPUImageToonFilter
猿说编程
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
shader-3dcurve:GLSL着色器，可在3D模式下绘制粗线和平滑线（OpenSceneGraph可视化）
05-10
GLSL着色器，用于带有附加雾效果的3D Bezier曲线（使用OpenSceneGraph） 这是一个示例项目，演示了如何在3D中绘制粗线和平滑线/曲线。 ，原生GL_LINE_STRIP_ADJACENCY在绘制折线时会产生间隙。 上述模式的另一个限制是厚度不能超过某个阈值（例如， 10.f ，具体取决于机器）。 此代码演示了GLSL着色器如何帮助解决上述问题。 可以使用提供的着色器绘制两种类型的几何图形： 折线 贝塞尔曲线 两种几何都可以以任何线宽放置在3D空间中。 另外，我在片段着色器中为Bezier曲线添加了最简单的雾化效果。 3D折线 折线着色器可以作为“ Shaders/polyline.*文件找到。 顶点和片段着色器是简单的传递，而几何形状着色器提供了将输入几何形状转换为始终朝向屏幕的三角形三角形条带的功能。 3D贝塞尔曲线 请参阅“ Shaders/bezier.
shader实现描边效果
Katichar
01-20 5880
描边效果在项目中是常用到的，通常称作轮阔渲染。非opengl的方法是通过CCRenderTexture动态创建纯色纹理，加入到要设置描述效果的图片后面，达到描述效果，该方法要绘制多次，效率不是很好。下面介绍下通shader language来实现描述效果。 glsl语言代码是是操作GPU的命令，需要其它语言加载和调用，下面通过cocos2dx引擎的加载顶点着色器和片段着色器来实现描边效果。
OpenGl图元基本操作之点选高亮
积累点滴，保持自我
07-27 1231
一.点选高亮简介 在使用各种方式（GDI,Opengl，occ等）绘图时，显示区域的图元的选择是需要使用另外一种区分的，这个就是基本的高亮，点选是指单独的鼠标点击一下就选中坐标附近的一个图元，然后将该图元以一种独特的醒目的颜色显示就是点选高亮。 二.Opengl实现点选高亮的思路 我最近在整理Opengl1.1版本的一些操作，因此关于这里说的点选高亮也是基于opengl1.1版本的，就是windows系统下默认支持的版本，其它高版本应该都有更加简洁的实现方式，在这里不做讨论。 要实现点选高亮，我认为
Shader 轮廓线（描边）总结
sinat_34014668的博客
11-26 2156
Shader 轮廓线
ps 色相/饱和度，描边，外发光算法(opengl）
米糊的专栏
10-16 9367
做游戏可能需要有些动态的改变图片效果要求，这些
iOS基于 UILabel实现文字添加描边功能
01-04
可以达到文字描一圈黑边的效果: 继承UILabel以后重载drawTextInRect: - (void)drawTextInRect:(CGRect)rect { CGSize shadowOffset = self.shadowOffset; UIColor *textColor = self.textColor; CGContextRef ...
OpenGL之立体图元的绘制和描边的原理和流程.zip
07-22
详细介绍了OpenGL图元的渲染绘制、矩阵堆栈的压栈和出栈的过程，以及边框的绘制的原理、边框的绘制流程等进行了详细的原理分析和流程介绍。
MoonStartMan#iOS-Swift-Problem-Record#swift给文字添加描边效果1
07-25
swift给文字添加描边效果封装方法/// 给字体添加描边效果 : strokeWidth为正数为空心文字描边 strokeWidth为负数为实心文字描边let
svg动画之动态描边效果
08-31
本文主要介绍了svg实现的动态描边效果，文中分享了两个实例：1.一个简单的线一点一点画出来的效果；2.用同样的原理画一个“蓝胖子”。具有很好的参考价值，下面跟着小编一起来看下吧
OpenGL之图元描边的绘制流程
╰つ栺尖篴夢ゞ
07-13 1309
立体图元的绘制与渲染，之前的文章已经完全实现了图元的“颜色填充”，图元边框的绘制也有接触，详情可参考：OpenGL之矩阵堆栈绘制立体图元。 这里具体的介绍一下图元边框的绘制原理和流程： 首先，如果图元没有渲染边框 ，是什么效果呢？通过效果图，我们可以看到：图元分不清轮廓，看不清图元面与面的区分，很难看出图元具体是什么样子，这主要是因为出现类似ZFighting的问题，OpenGL中没有办法通过相同颜色的图层，来区分图层关系。 边框的绘制流程： ① 通过颜色填充绘制图元的基本形状； ② 开启多边形偏
ios+opencv 图像卡通化
06-11
iOS+opencv+xcode实现摄像头视频流的卡通化
outline-shader:GLSL Shader为图像添加轮廓
04-05
轮廓着色器 您只需要一个文件。 只需通读注释，也许删除顶部的示例位，将其放入您的游戏中并按照建议使用即可。 使用Ren'Py 7.4着色器勾勒可显示对象的轮廓。 这是一个非常简单的着色器方法，用于向任何可显示对象添加轮廓。 使用mesh布尔（在转换中设置为True）时，它可以在LayeredImages，Composites甚至Live2D模型以及普通图像和文字字形上使用。 它还允许设置一个mesh_pad布尔值，如果为True，它将填充表面以增加额外的空间来绘制轮廓（因此，您不必创建周围具有额外透明度的新图像）。 它使用GPU并行执行计算负荷，每个非透明像素对应一个，并计算出到最近的不透明像素的距离。 一旦达到该距离，便可以使用多种设置来计算颜色以绘制像素。 如果所有这些都处于并行状态，则只需花费一小部分时间（如果在CPU上完成这种方法）就可以了。 这使其在运行时使用非常可接受，因
swift-SRAlbum自定义相册带拍照录像图片处理GPUImage
08-15
SRAlbum自定义相册，带拍照、录像，图片处理（GPUImage）
描边/轮廓线总结
dogman_的博客
04-14 447
基于V和N描边：通过V·N来得到轮廓信息，只需要一个Pass（缺点：效果一般）过程式几何描边：先渲染放大的背面，再渲染正面，这样轮廓就出现在屏幕上了；需要两个Pass，适合表面平滑模型（缺点：不适合cube这种规则平整的模型）后处理描边：通过后处理的卷积实现，详情看本人的另一篇文章（缺点：深度和法线变化小的轮廓无法检测：桌面上的纸张）轮廓边检测描边：通过公式（后面会讲）判断模型上的哪些边是位于边缘的，直接获取构成轮廓的边，并直接用渲染这些边。
Android---OpenGL ES之图形描画
FireOfStar的专栏
08-28 2221
本文译自：http://developer.android.com/training/graphics/opengl/draw.html 用OpenGL定义了要描画的图形之后，就可以来描画它们了。用OpenGL ES2.0来描画图形可能会比你想的要麻烦一些，因为它的API提供了很多基于图形渲染管道的控制。 本文会向你介绍如何绘制在《Android---OpenGL ES之形状定义》一文中定义的
OpenGL初级_简单实现模型描边shader
qq_29601003的博客
12-13 1674
Shader中实现动态边框的方法 这里说解题思路 不使用边缘检测的情况下， 可以使用stencil写入模版缓冲区中，但是drawcall会因此增加，需要衡量项目中是否需要频繁使用, 或则只是有buff 特效时候添加是最为方便的 Stencil模版测试(这里说一下过程，简单粗暴一点)： *理解原理： - 给状态机 声明 ‘什么地方需要绘制’，‘怎么绘制’， ‘绘制什么’ 这三个命令 以OpenGL为...
OpenGL之仿美图实现不规则物体加描边特效
音视频开发进阶
11-25 1059
背景 在美图中有个功能可以给抠图以后的物体加上描边，就想着能不能在Android中用OpenGL实现它，最终效果如下：实现 分析思路一：刚开始的想法是把物体放大，放大的物体全设为白色，就是不规则的物体中心点很难找思路二：如果能找到边缘，按边缘的法线方向放大一定比例就可以，可是怎么找到边缘，又怎么找到法线方向，一时无从入手思路三：假设知道物体的所有点到物体中某一点的距离，只要变换距离，就能放大物体，...
[OpenGL] 简单的物体描边效果
(ง •̀_•́)ง
10-03 4281
    开发环境：Qt, OpenGL         主要是为了练习glsl写的一个小例子，本身没有什么难度。         思路一：进行两次绘制。在顶点着色器中，第一次只绘制背面，将顶点沿着法线方向进行移动，可以使物体"膨胀"起来，使用描边的纯色填充，第一次渲出来的图像就是一个稍大一点的纯色物体。第二次正常绘制正面，此时尚未进行清屏，所以第二次绘制结果会叠加在第一次的结果上。 ...
OpenGL 多边形偏移高亮物体边 Polygon offset
linian71的专栏
12-01 2502
直接绘制一个物体两次分别以GL_FILL, GL_LINE会出现片段重叠现象，线框会断断续续的，这是由于片段深度浮点精度造成深度比较时出问题： 解决办法： 参考OpenGL programming guide 8th p164 Polygon Offset 先用面绘制一遍物体，后设置填充模式为线，再设置多边形偏移靠近观察点一些，再绘制一遍物体。
opengl给模型描边
最新发布
11-05
OpenGL给模型描边一般可以通过外侧轮廓线和内部边缘线两种方式实现。...总之，OpenGL可以通过使用边缘着色器和几何着色器来实现模型的描边效果，通过对模型的外侧轮廓线和内部边缘线进行渲染，使其在可视化中更加突出。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

猿说编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值