IOS OpenGL ES GPUImage 图像阀值素描,形成有噪点的素描 GPUImageThreshol ...

打印 上一主题 下一主题

主题 865|帖子 865|积分 2605

目录
零基础 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 , 视觉效果相关.
GPUImageThresholdSketchFilter 属于 GPUImage 图像视觉效果相关,用于图像阀值素描,形成有噪点的素描。shader 源码如下:
  1. /******************************************************************************************/
  2. //@Author:猿说编程
  3. //@Blog(个人博客地址): www.codersrc.com
  4. //@File:IOS – OpenGL ES GPUImage GPUImageThresholdSketchFilter
  5. //@Time:2022/07/02 06:30
  6. //@Motto:不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  7. /******************************************************************************************/
  8. #if TARGET_IPHONE_SIMULATOR || TARGET_OS_IPHONE
  9. NSString *const kGPUImageThresholdSketchFragmentShaderString = SHADER_STRING
  10. (
  11. precision highp float;
  12. varying vec2 textureCoordinate;
  13. varying vec2 leftTextureCoordinate;
  14. varying vec2 rightTextureCoordinate;
  15. varying vec2 topTextureCoordinate;
  16. varying vec2 topLeftTextureCoordinate;
  17. varying vec2 topRightTextureCoordinate;
  18. varying vec2 bottomTextureCoordinate;
  19. varying vec2 bottomLeftTextureCoordinate;
  20. varying vec2 bottomRightTextureCoordinate;
  21. uniform sampler2D inputImageTexture;
  22. uniform lowp float threshold;
  23. uniform float edgeStrength;
  24. const highp vec3 W = vec3(0.2125, 0.7154, 0.0721);
  25. void main()
  26. {
  27.      float bottomLeftIntensity = texture2D(inputImageTexture, bottomLeftTextureCoordinate).r;
  28.      float topRightIntensity = texture2D(inputImageTexture, topRightTextureCoordinate).r;
  29.      float topLeftIntensity = texture2D(inputImageTexture, topLeftTextureCoordinate).r;
  30.      float bottomRightIntensity = texture2D(inputImageTexture, bottomRightTextureCoordinate).r;
  31.      float leftIntensity = texture2D(inputImageTexture, leftTextureCoordinate).r;
  32.      float rightIntensity = texture2D(inputImageTexture, rightTextureCoordinate).r;
  33.      float bottomIntensity = texture2D(inputImageTexture, bottomTextureCoordinate).r;
  34.      float topIntensity = texture2D(inputImageTexture, topTextureCoordinate).r;
  35.      float h = -topLeftIntensity - 2.0 * topIntensity - topRightIntensity + bottomLeftIntensity + 2.0 * bottomIntensity + bottomRightIntensity;
  36.      float v = -bottomLeftIntensity - 2.0 * leftIntensity - topLeftIntensity + bottomRightIntensity + 2.0 * rightIntensity + topRightIntensity;
  37.      float mag = (length(vec2(h, v)) * edgeStrength);
  38.      mag = step(threshold, mag);
  39.      mag = 1.0 - mag;
  40.      gl_FragColor = vec4(vec3(mag), 1.0);
  41. }
  42. );
  43. #else
  44. NSString *const kGPUImageThresholdSketchFragmentShaderString = SHADER_STRING
  45. (
  46. varying vec2 textureCoordinate;
  47. varying vec2 leftTextureCoordinate;
  48. varying vec2 rightTextureCoordinate;
  49. varying vec2 topTextureCoordinate;
  50. varying vec2 topLeftTextureCoordinate;
  51. varying vec2 topRightTextureCoordinate;
  52. varying vec2 bottomTextureCoordinate;
  53. varying vec2 bottomLeftTextureCoordinate;
  54. varying vec2 bottomRightTextureCoordinate;
  55. uniform sampler2D inputImageTexture;
  56. uniform float threshold;
  57. uniform float edgeStrength;
  58. const vec3 W = vec3(0.2125, 0.7154, 0.0721);
  59. void main()
  60. {
  61.      float bottomLeftIntensity = texture2D(inputImageTexture, bottomLeftTextureCoordinate).r;
  62.      float topRightIntensity = texture2D(inputImageTexture, topRightTextureCoordinate).r;
  63.      float topLeftIntensity = texture2D(inputImageTexture, topLeftTextureCoordinate).r;
  64.      float bottomRightIntensity = texture2D(inputImageTexture, bottomRightTextureCoordinate).r;
  65.      float leftIntensity = texture2D(inputImageTexture, leftTextureCoordinate).r;
  66.      float rightIntensity = texture2D(inputImageTexture, rightTextureCoordinate).r;
  67.      float bottomIntensity = texture2D(inputImageTexture, bottomTextureCoordinate).r;
  68.      float topIntensity = texture2D(inputImageTexture, topTextureCoordinate).r;
  69.      float h = -topLeftIntensity - 2.0 * topIntensity - topRightIntensity + bottomLeftIntensity + 2.0 * bottomIntensity + bottomRightIntensity;
  70.      float v = -bottomLeftIntensity - 2.0 * leftIntensity - topLeftIntensity + bottomRightIntensity + 2.0 * rightIntensity + topRightIntensity;
  71.      float mag = 1.0 - length(vec2(h, v) * edgeStrength);
  72.      mag = step(threshold, mag);
  73.      gl_FragColor = vec4(vec3(mag), 1.0);
  74. }
  75. );
  76. #endif
复制代码
二.效果演示

使用GPUImageThresholdSketchFilter**,**原图如下:

使用GPUImageThresholdSketchFilter 效果如下:

三.源码下载

OpenGL ES Demo 下载地址 : IOS OpenGL ES GPUImage 图像阀值素描,形成有噪点的素描 GPUImageThresholdSketchFilter

四.猜你喜欢

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

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

篮之新喜

金牌会员
这个人很懒什么都没写!
快速回复 返回顶部 返回列表