目錄

• 一.簡介
• 二.效果演示
• 三.原始碼下載
• 四.猜你喜歡

零基礎 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 , 視覺效果相關.

GPUImageChromaKeyFilter 屬於 GPUImage 顏色處理相關，用來處理圖片指定顏色摳圖

GPUImageChromaKeyFilter 對影象中的指定的顏色，將Alpha通道設定為0，適用於指定顏色摳圖，例如：綠幕摳圖等操作；

閾值敏感度：要替換的目標顏色需要存在多少顏色匹配（預設值為0.4）
平滑：如何平穩地融合顏色匹配（預設為0.1）

shader 原始碼如下：

/******************************************************************************************/
//@Author:猿說程式設計
//@Blog(個人部落格地址): www.codersrc.com
//@File:IOS – OpenGL ES 指定顏色摳圖 GPUImageChromaKeyFilter
//@Time:2022/04/02 07:30
//@Motto:不積跬步無以至千里，不積小流無以成江海，程式人生的精彩需要堅持不懈地積累！
/******************************************************************************************/


#if TARGET_IPHONE_SIMULATOR || TARGET_OS_IPHONE
NSString *const kGPUImageChromaKeyFragmentShaderString = SHADER_STRING
(
 precision highp float;
 
 varying highp vec2 textureCoordinate;
 
 uniform float thresholdSensitivity;
 uniform float smoothing;
 uniform vec3 colorToReplace;
 uniform sampler2D inputImageTexture;
 uniform sampler2D inputImageTexture2;
 
 void main()
 {
     vec4 textureColor = texture2D(inputImageTexture, textureCoordinate);
     
     float maskY = 0.2989 * colorToReplace.r + 0.5866 * colorToReplace.g + 0.1145 * colorToReplace.b;
     float maskCr = 0.7132 * (colorToReplace.r - maskY);
     float maskCb = 0.5647 * (colorToReplace.b - maskY);
     
     float Y = 0.2989 * textureColor.r + 0.5866 * textureColor.g + 0.1145 * textureColor.b;
     float Cr = 0.7132 * (textureColor.r - Y);
     float Cb = 0.5647 * (textureColor.b - Y);
     
     //     float blendValue = 1.0 - smoothstep(thresholdSensitivity - smoothing, thresholdSensitivity , abs(Cr - maskCr) + abs(Cb - maskCb));
     float blendValue = smoothstep(thresholdSensitivity, thresholdSensitivity + smoothing, distance(vec2(Cr, Cb), vec2(maskCr, maskCb)));
     gl_FragColor = vec4(textureColor.rgb, textureColor.a * blendValue);
 }
);
#else
NSString *const kGPUImageChromaKeyFragmentShaderString = SHADER_STRING
(
 varying vec2 textureCoordinate;
 
 uniform float thresholdSensitivity;
 uniform float smoothing;
 uniform vec3 colorToReplace;
 uniform sampler2D inputImageTexture;
 uniform sampler2D inputImageTexture2;
 
 void main()
 {
     vec4 textureColor = texture2D(inputImageTexture, textureCoordinate);
     
     float maskY = 0.2989 * colorToReplace.r + 0.5866 * colorToReplace.g + 0.1145 * colorToReplace.b;
     float maskCr = 0.7132 * (colorToReplace.r - maskY);
     float maskCb = 0.5647 * (colorToReplace.b - maskY);
     
     float Y = 0.2989 * textureColor.r + 0.5866 * textureColor.g + 0.1145 * textureColor.b;
     float Cr = 0.7132 * (textureColor.r - Y);
     float Cb = 0.5647 * (textureColor.b - Y);
     
     //     float blendValue = 1.0 - smoothstep(thresholdSensitivity - smoothing, thresholdSensitivity , abs(Cr - maskCr) + abs(Cb - maskCb));
     float blendValue = smoothstep(thresholdSensitivity, thresholdSensitivity + smoothing, distance(vec2(Cr, Cb), vec2(maskCr, maskCb)));
     gl_FragColor = vec4(textureColor.rgb, textureColor.a * blendValue);
 }
 );
 

二.效果演示

使用 GPUImageChromaKeyFilter 指定顏色摳圖，例如：綠幕摳圖等操作，效果如下：

原圖：

摳圖效果：

三.原始碼下載

OpenGL ES Demo 下載地址 : IOS – OpenGL ES 指定顏色摳圖 GPUImageChromaKeyFilter

四.猜你喜歡

• IOS – OPenGL ES 設定影象亮度 GPUImageBrightnessFilter
• IOS – OPenGL ES 調節影象曝光度 GPUImageExposureFilter
• IOS – OpenGL ES 調節影象對比度 GPUImageContrastFilter
• IOS – OPenGL ES 調節影象飽和度 GPUImageSaturationFilter
• IOS – OPenGL ES 調節影象伽馬線 GPUImageGammaFilter
• IOS – OpenGL ES 調節影象反色 GPUImageColorInvertFilter
• IOS – OpenGL ES 調節影象褐色 GPUImageSepiaFilter
• IOS – OpenGL ES 調節影象灰色 GPUImageGrayscaleFilter
• IOS – OpenGL ES 調節影象RGB通道 GPUImageRGBFilter
• IOS – OpenGL ES 調節影象不透明度 GPUImageOpacityFilter
• IOS – OpenGL ES 調節影象陰影 GPUImageHighlightShadowFilter
• IOS – OpenGL ES 調節影象色彩替換 GPUImageFalseColorFilter
• GPUImage – 色彩直方圖 GPUImageHistogramFilter
• GPUImage – 色彩直方圖 GPUImageHistogramGenerator
• GPUImage – 畫素平均色值 GPUImageAverageColor
• GPUImage – 亮度平均 GPUImageLuminosity
• IOS – OpenGL ES 調節影象色度 GPUImageHueFilter
• IOS – OpenGL ES 指定顏色摳圖 GPUImageChromaKeyFilter

本文由部落格 - 猿說程式設計 猿說程式設計 釋出！