IOS OpenGL ES GPUImage 图像阈值边缘检测GPUImageThresholdEdgeDetectionF ...

打印 上一主题 下一主题

主题 873|帖子 873|积分 2619

目录
零基础 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 , 视觉效果相关.
GPUImageThresholdEdgeDetectionFilter 属于 GPUImage 图像视觉效果相关,用于图像阈值边缘检测。shader 源码如下:
  1. /******************************************************************************************/
  2. //@Author:猿说编程
  3. //@Blog(个人博客地址): www.codersrc.com
  4. //@File:IOS – OpenGL ES GPUImage GPUImageThresholdEdgeDetectionFilter
  5. //@Time:2022/06/26 06:30
  6. //@Motto:不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  7. /******************************************************************************************/
  8. // Invert the colorspace for a sketch
  9. #if TARGET_IPHONE_SIMULATOR || TARGET_OS_IPHONE
  10. NSString *const kGPUImageThresholdEdgeDetectionFragmentShaderString = SHADER_STRING
  11. (
  12. precision highp float;
  13. varying vec2 textureCoordinate;
  14. varying vec2 leftTextureCoordinate;
  15. varying vec2 rightTextureCoordinate;
  16. varying vec2 topTextureCoordinate;
  17. varying vec2 topLeftTextureCoordinate;
  18. varying vec2 topRightTextureCoordinate;
  19. varying vec2 bottomTextureCoordinate;
  20. varying vec2 bottomLeftTextureCoordinate;
  21. varying vec2 bottomRightTextureCoordinate;
  22. uniform sampler2D inputImageTexture;
  23. uniform lowp float threshold;
  24. uniform float edgeStrength;
  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 centerIntensity = texture2D(inputImageTexture, textureCoordinate).r;
  36. //     float h = -topLeftIntensity - 2.0 * topIntensity - topRightIntensity + bottomLeftIntensity + 2.0 * bottomIntensity + bottomRightIntensity;
  37. //     float v = -bottomLeftIntensity - 2.0 * leftIntensity - topLeftIntensity + bottomRightIntensity + 2.0 * rightIntensity + topRightIntensity;
  38. //     float h = -topLeftIntensity - 2.0 * topIntensity - topRightIntensity + leftIntensity + 2.0 * centerIntensity + rightIntensity;
  39. //     float v = -bottomLeftIntensity - 2.0 * leftIntensity - topLeftIntensity + bottomIntensity + 2.0 * centerIntensity + topIntensity;
  40.      float h = (centerIntensity - topIntensity) + (bottomIntensity - centerIntensity);
  41.      float v = (centerIntensity - leftIntensity) + (rightIntensity - centerIntensity);
  42. //     float h = (centerIntensity - topIntensity);
  43. //     float j = (topIntensity - centerIntensity);
  44. //     h = max(h,j);
  45. //     j = abs(h);
  46. //     float v = (centerIntensity - leftIntensity);
  47.     float mag = length(vec2(h, v)) * edgeStrength;
  48.      mag = step(threshold, mag);
  49. //     float mag = abs(h);
  50. //     gl_FragColor = vec4(h, h, h, 1.0);
  51. //     gl_FragColor = vec4(texture2D(inputImageTexture, textureCoordinate));
  52. //     gl_FragColor = vec4(h, centerIntensity, j, 1.0);
  53.      gl_FragColor = vec4(mag, mag, mag, 1.0);
  54. }
  55. );
  56. #else
  57. NSString *const kGPUImageThresholdEdgeDetectionFragmentShaderString = SHADER_STRING
  58. (
  59. varying vec2 textureCoordinate;
  60. varying vec2 leftTextureCoordinate;
  61. varying vec2 rightTextureCoordinate;
  62. varying vec2 topTextureCoordinate;
  63. varying vec2 topLeftTextureCoordinate;
  64. varying vec2 topRightTextureCoordinate;
  65. varying vec2 bottomTextureCoordinate;
  66. varying vec2 bottomLeftTextureCoordinate;
  67. varying vec2 bottomRightTextureCoordinate;
  68. uniform sampler2D inputImageTexture;
  69. uniform float threshold;
  70. uniform float edgeStrength;
  71. void main()
  72. {
  73.      float bottomLeftIntensity = texture2D(inputImageTexture, bottomLeftTextureCoordinate).r;
  74.      float topRightIntensity = texture2D(inputImageTexture, topRightTextureCoordinate).r;
  75.      float topLeftIntensity = texture2D(inputImageTexture, topLeftTextureCoordinate).r;
  76.      float bottomRightIntensity = texture2D(inputImageTexture, bottomRightTextureCoordinate).r;
  77.      float leftIntensity = texture2D(inputImageTexture, leftTextureCoordinate).r;
  78.      float rightIntensity = texture2D(inputImageTexture, rightTextureCoordinate).r;
  79.      float bottomIntensity = texture2D(inputImageTexture, bottomTextureCoordinate).r;
  80.      float topIntensity = texture2D(inputImageTexture, topTextureCoordinate).r;
  81.      float h = -topLeftIntensity - 2.0 * topIntensity - topRightIntensity + bottomLeftIntensity + 2.0 * bottomIntensity + bottomRightIntensity;
  82.      h = max(0.0, h);
  83.      float v = -bottomLeftIntensity - 2.0 * leftIntensity - topLeftIntensity + bottomRightIntensity + 2.0 * rightIntensity + topRightIntensity;
  84.      v = max(0.0, v);
  85.      float mag = length(vec2(h, v)) * edgeStrength;
  86.      mag = step(threshold, mag);
  87.      gl_FragColor = vec4(vec3(mag), 1.0);
  88. }
  89. );
  90. #endif
复制代码
二.效果演示

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

使用 GPUImageThresholdEdgeDetectionFilter 效果如下:

三.源码下载

OpenGL ES Demo 下载地址 : IOS OpenGL ES GPUImage 图像阈值边缘检测 GPUImageThresholdEdgeDetectionFilter

四.猜你喜欢

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

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

本帖子中包含更多资源

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

x
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

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

本版积分规则

一给

金牌会员
这个人很懒什么都没写!

标签云

快速回复 返回顶部 返回列表