IOS – OpenGL ES black and white mesh effect GPUImageCrosshatchFilter

Table of contents

Zero-based OpenGL (ES) learning route recommended: OpenGL (ES) Learning Catalog >> OpenGL ES Basics

Zero-based OpenGL (ES) learning route recommended: OpenGL (ES) Learning Catalog >> OpenGL ES transitions

Zero-based OpenGL (ES) learning route recommended: OpenGL (ES) Learning Catalog >> OpenGL ES effects

Zero-based OpenGL (ES) learning route recommended: OpenGL (ES) Learning Catalog >> OpenGL ES functions

Zero-based OpenGL (ES) learning route recommended: OpenGL (ES) Learning Catalog >> OpenGL ES GPUImage usage

Zero-based OpenGL (ES) learning route recommended: OpenGL (ES) Learning Catalog >> OpenGL ES GLSL programming

1. Introduction

GPUImage 125 filters in total, divided into four categories

1. Color adjustments: 31 filters, related to color processing
2. Image processing: 40 filters, related to image processing.
3. Blending modes: 29 filters, related to blending modes.
4. Visual effects: 25 filters, related to visual effects.

**GPUImageCrosshatchFilter GPUImage black and white mesh effect, **shader source code is as follows:

/******************************************************************************************/
//@Author: Ape says programming
//@Blog (personal blog address): www.codersrc.com
//@File:IOS - OpenGL ES black and white mesh effect GPUImageCrosshatchFilter
//@Time:2022/05/24 06:30
//@Motto: If you don't accumulate small steps, you can't reach a thousand miles. If you don't accumulate small streams, you can't make a river. The wonderful life of programming requires persistent accumulation!
/******************************************************************************************/


#if TARGET_IPHONE_SIMULATOR || TARGET_OS_IPHONE
NSString *const kGPUImageCrosshatchFragmentShaderString = SHADER_STRING
(
 varying highp vec2 textureCoordinate;

 uniform sampler2D inputImageTexture;

 uniform highp float crossHatchSpacing;
 uniform highp float lineWidth;

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

 void main()
 {
     highp float luminance = dot(texture2D(inputImageTexture, textureCoordinate).rgb, W);

     lowp vec4 colorToDisplay = vec4(1.0, 1.0, 1.0, 1.0);
     if (luminance < 1.00)
     {
         if (mod(textureCoordinate.x + textureCoordinate.y, crossHatchSpacing) <= lineWidth)
         {
             colorToDisplay = vec4(0.0, 0.0, 0.0, 1.0);
         }
     }
     if (luminance < 0.75)
     {
         if (mod(textureCoordinate.x - textureCoordinate.y, crossHatchSpacing) <= lineWidth)
         {
             colorToDisplay = vec4(0.0, 0.0, 0.0, 1.0);
         }
     }
     if (luminance < 0.50)
     {
         if (mod(textureCoordinate.x + textureCoordinate.y - (crossHatchSpacing / 2.0), crossHatchSpacing) <= lineWidth)
         {
             colorToDisplay = vec4(0.0, 0.0, 0.0, 1.0);
         }
     }
     if (luminance < 0.3)
     {
         if (mod(textureCoordinate.x - textureCoordinate.y - (crossHatchSpacing / 2.0), crossHatchSpacing) <= lineWidth)
         {
             colorToDisplay = vec4(0.0, 0.0, 0.0, 1.0);
         }
     }

     gl_FragColor = colorToDisplay;
 }
);
#else
NSString *const kGPUImageCrosshatchFragmentShaderString = SHADER_STRING
(
 varying vec2 textureCoordinate;

 uniform sampler2D inputImageTexture;

 uniform float crossHatchSpacing;
 uniform float lineWidth;

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

 void main()
 {
     float luminance = dot(texture2D(inputImageTexture, textureCoordinate).rgb, W);

     vec4 colorToDisplay = vec4(1.0, 1.0, 1.0, 1.0);
     if (luminance < 1.00)
     {
         if (mod(textureCoordinate.x + textureCoordinate.y, crossHatchSpacing) <= lineWidth)
         {
             colorToDisplay = vec4(0.0, 0.0, 0.0, 1.0);
         }
     }
     if (luminance < 0.75)
     {
         if (mod(textureCoordinate.x - textureCoordinate.y, crossHatchSpacing) <= lineWidth)
         {
             colorToDisplay = vec4(0.0, 0.0, 0.0, 1.0);
         }
     }
     if (luminance < 0.50)
     {
         if (mod(textureCoordinate.x + textureCoordinate.y - (crossHatchSpacing / 2.0), crossHatchSpacing) <= lineWidth)
         {
             colorToDisplay = vec4(0.0, 0.0, 0.0, 1.0);
         }
     }
     if (luminance < 0.3)
     {
         if (mod(textureCoordinate.x - textureCoordinate.y - (crossHatchSpacing / 2.0), crossHatchSpacing) <= lineWidth)
         {
             colorToDisplay = vec4(0.0, 0.0, 0.0, 1.0);
         }
     }

     gl_FragColor = colorToDisplay;
 }
);
#endif

2. Effect demonstration

use GPUImageCrosshatchFilter GPUImage black and white mesh effect, original image:

**GPUImageCrosshatchFilter GPUImage black and white mesh effect, renderings:**

3. Source code download

OpenGL ES Demo download address: IOS – OpenGL ES black and white mesh effect GPUImageCrosshatchFilter

4. Guess you like

  1. IOS - OPenGL ES set image brightness GPUImageBrightnessFilter
  2. IOS – OPenGL ES adjust image exposure GPUImageExposureFilter
  3. IOS – OpenGL ES adjusts image contrast GPUImageContrastFilter
  4. IOS – OPenGL ES adjust image saturation GPUImageSaturationFilter
  5. IOS – OPenGL ES adjust image gamma line GPUImageGammaFilter
  6. IOS – OpenGL ES adjusts the image inverse color GPUImageColorInvertFilter
  7. IOS – OpenGL ES adjust image sepia GPUImageSepiaFilter
  8. IOS – OpenGL ES adjust image gray GPUImageGrayscaleFilter
  9. IOS – OpenGL ES adjust image RGB channel GPUImageRGBFilter
  10. IOS – OpenGL ES adjust image opacity GPUImageOpacityFilter
  11. IOS – OpenGL ES adjust image shadow GPUImageHighlightShadowFilter
  12. IOS – OpenGL ES adjust image color replace GPUImageFalseColorFilter
  13. GPUImage – Color histogram GPUImageHistogramFilter
  14. GPUImage – Color histogram GPUImageHistogramGenerator
  15. GPUImage – pixel average color value GPUImageAverageColor
  16. GPUImage – Luminance Average GPUImageLuminosity
  17. IOS – OpenGL ES adjust image chroma GPUImageHueFilter
  18. IOS – OpenGL ES specifies color matting GPUImageChromaKeyFilter
  19. IOS – OpenGL ES adjust image white balance/color temperature GPUImageWhiteBalanceFilter
  20. IOS – OpenGL ES set image lookup filter GPUImageLookupFilter
  21. IOS – OpenGL ES set image filter GPUImageAmatorkaFilter
  22. IOS – OpenGL ES set image filter GPUImageSoftEleganceFilter
  23. IOS - OpenGL ES set image sharpening GPUImageSharpenFilter
  24. IOS – OpenGL ES draw cross GPUImageCrosshairGenerator
  25. IOS – OpenGL ES draws lines GPUImageLineGenerator
  26. IOS – OpenGL ES set the image black and white dry point GPUImageLocalBinaryPatternFilter
  27. IOS – OpenGL ES set image cartoon effect (black thick line stroke) GPUImageToonFilter
  28. IOS – OpenGL ES Kuwahara filter / gouache blur effect GPUImageKuwaharaFilter
  29. IOS – OpenGL ES black and white mosaic effect GPUImageMosaicFilter
  30. IOS – OpenGL ES pixelated mosaic effect GPUImagePixellateFilter
  31. IOS – OpenGL ES concentric circle pixelated mosaic effect GPUImagePolarPixel
  32. IOS – OpenGL ES black and white mesh effect GPUImageCrosshatchFilter

Tags: image processing OpenGL gpuimage

Posted by php_novice2007 on Sun, 29 May 2022 22:47:11 +0530