IOS – OpenGL ES 指定颜色抠图 GPUImageChromaKeyFilter

目录

  • 一.简介
  • 二.效果演示
  • 三.源码下载
  • 四.猜你喜欢

零基础 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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/524561.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

要闻君说:华为“发飙”了;快手抛出了1000+社招岗位;迅雷2018年度财报:云连续三年上涨;定论!小米成立AIoT战略委员会...

关注并标星星CSDN云计算每周三次,打卡即read更快、更全了解泛云圈精彩newsgo go go 大家好!偶是要闻君。紧锣密鼓的工作转眼到了“周五时间”,最近圈里的大事儿还挺多,看看!文/要闻君华为决定起诉美国政府。在近日举行…

IOS – OpenGL ES 调节图像白平衡/色温 GPUImageWhiteBalanceFilter

目录 一.简介二.效果演示三.源码下载四.猜你喜欢 零基础 OpenGL (ES) 学习路线推荐 : OpenGL (ES) 学习目录 >> OpenGL ES 基础 零基础 OpenGL (ES) 学习路线推荐 : OpenGL (ES) 学习目录 >> OpenGL ES 转场 零基础 OpenGL (ES) 学习路线推荐 : OpenGL (ES) 学习目…

云生态战略首次曝光,牵手精诚中国和神州光大共建云生态

2月28日,北京——世纪互联蓝云媒体沟通会暨战略合作伙伴签约仪式隆重举行,来自上海蓝云网络科技有限公司(以下简称世纪互联蓝云)、精诚(中国)企业管理有限公司(以下简称精诚中国)和北京神州光大科技有限公司…

React之新旧生命周期对比

<!DOCTYPE html> <html> <head> <meat charset"UTF-8"> <title>新旧react生命周期对比</title> </head> <body> <!-- 准备好一个容器 --> <div id"test"></div> <!-- 核心库 --&g…

企业应用快速跨向容器时代的正确姿势

戳蓝字“CSDN云计算”关注我们哦&#xff01;编者按&#xff1a;1月18日&#xff0c;网易云首席解决方案架构师刘超在微信群带来了主题为“企业应用快速跨向容器时代的正确姿势”的线上讲座&#xff0c;顺接上个月“云计算的前世今生”&#xff0c;为大家进一步详细解读了容器的…

IOS – OpenGL ES 设置图像 lookup 滤镜 GPUImageLookupFilter

目录 一.简介二.效果演示三.源码下载四.猜你喜欢 零基础 OpenGL (ES) 学习路线推荐 : OpenGL (ES) 学习目录 >> OpenGL ES 基础 零基础 OpenGL (ES) 学习路线推荐 : OpenGL (ES) 学习目录 >> OpenGL ES 转场 零基础 OpenGL (ES) 学习路线推荐 : OpenGL (ES) 学习目…

React之getDerivedStateFromProps

<!DOCTYPE html> <html> <head> <meat charset"UTF-8"> <title>新react生命周期</title> </head> <body> <!-- 准备好一个容器 --> <div id"test"></div> <!-- 核心库 --> <…

云漫圈 | 如何给女朋友解释什么是HTTP

戳蓝字“CSDN云计算”关注我们哦&#xff01;文章转载自漫话编程周末一大早&#xff0c;我正在电脑前面浏览一些技术网站&#xff0c;突然女朋友大喊起来&#xff1a;哇&#xff0c;杭州又下大雪啦&#xff0c;快来看啊。我并没有理她&#xff0c;于是她跑过来拉我。&#xfff…

IOS – OpenGL ES 设置图像滤镜 GPUImageAmatorkaFilter

目录 一.简介二.效果演示三.源码下载四.猜你喜欢 零基础 OpenGL (ES) 学习路线推荐 : OpenGL (ES) 学习目录 >> OpenGL ES 基础 零基础 OpenGL (ES) 学习路线推荐 : OpenGL (ES) 学习目录 >> OpenGL ES 转场 零基础 OpenGL (ES) 学习路线推荐 : OpenGL (ES) 学习目…

IOS – OpenGL ES 设置图像滤镜 GPUImageSoftEleganceFilter

目录 一.简介二.效果演示三.源码下载四.猜你喜欢 零基础 OpenGL (ES) 学习路线推荐 : OpenGL (ES) 学习目录 >> OpenGL ES 基础 零基础 OpenGL (ES) 学习路线推荐 : OpenGL (ES) 学习目录 >> OpenGL ES 转场 零基础 OpenGL (ES) 学习路线推荐 : OpenGL (ES) 学习目…

趣挨踢 | 跳槽季,让我们一起攻克算法吧!

戳蓝字“CSDN云计算”关注我们哦&#xff01;文章转载自程序员小灰所谓金三银四跳槽季&#xff0c;去年的年终奖拿到了么&#xff1f;即使拿到了年终奖&#xff0c;也千万不要裸辞&#xff0c;毕竟今年的形式不同于往年。不过&#xff0c;虽然小灰不提倡大家裸辞&#xff0c;但…

React新生命周期之getSnapshotBeforeUpdate使用场景

<!DOCTYPE html> <html> <head> <meat charset"UTF-8"> <title>getSnapshotBeforeUpdate使用场景</title> <style> .list { width: 200px; height: 150px; background-color: skyblue; overflow: auto; } .news { height…

IOS – OpenGL ES 设置图像锐化 GPUImageSharpenFilter

目录 一.简介二.效果演示三.源码下载四.猜你喜欢 零基础 OpenGL (ES) 学习路线推荐 : OpenGL (ES) 学习目录 >> OpenGL ES 基础 零基础 OpenGL (ES) 学习路线推荐 : OpenGL (ES) 学习目录 >> OpenGL ES 转场 零基础 OpenGL (ES) 学习路线推荐 : OpenGL (ES) 学习目…

Kubernetes 2018 年度简史

戳蓝字“CSDN云计算”关注我们哦&#xff01;作者&#xff1a;bot&小君君&#xff08;才云&#xff09;转自&#xff1a;K8sMeetup社区Kubernetes 在过去几年中一直是云计算领域最著名的开源项目之一。2018 年&#xff0c;Kubernetes 度过了自己的 4 岁生日。从 2014 年开源…

IOS – OpenGL ES 绘制十字 GPUImageCrosshairGenerator

目录 一.简介二.效果演示三.源码下载四.猜你喜欢 零基础 OpenGL (ES) 学习路线推荐 : OpenGL (ES) 学习目录 >> OpenGL ES 基础 零基础 OpenGL (ES) 学习路线推荐 : OpenGL (ES) 学习目录 >> OpenGL ES 转场 零基础 OpenGL (ES) 学习路线推荐 : OpenGL (ES) 学习目…

携手伙伴谋增长 同心协力齐飞飏

3月6日&#xff0c;以“携手同心&#xff0c;逆风飞飏”为主题的锐捷网络2019年合作伙伴大会在南京召开。本次大会上&#xff0c;锐捷网络全面回顾了2018年“做精做强”战略下的成果与收获&#xff0c;重磅发布了下一代创新产品和解决方案&#xff0c;携手8000多家合作伙伴畅谈…

获取反射对象

package com.wuming.reflection; //什么叫反射 public class Test02 extends Object{//Object定义了一个方法被所有子类继承&#xff0c;就是public final Class getClass(),返回值类型是Class类//反射&#xff1a;就是通过对象获取类的名称public static void main(String[] a…

IOS – OpenGL ES 绘制线条 GPUImageLineGenerator

目录 一.简介二.效果演示三.源码下载四.猜你喜欢 零基础 OpenGL (ES) 学习路线推荐 : OpenGL (ES) 学习目录 >> OpenGL ES 基础 零基础 OpenGL (ES) 学习路线推荐 : OpenGL (ES) 学习目录 >> OpenGL ES 转场 零基础 OpenGL (ES) 学习路线推荐 : OpenGL (ES) 学习目…

得到Class类的几种方式

反射可以获取类的属性&#xff0c;方法和构造器 类只有一个Class实列 一个Class对象就是加载到jvm中的一个.class文件 通过Class可以完整得到一个类中所有被加载的结构 package com.wuming.reflection; //测试Class类的创建方式有哪些 public class Test03 {public static…

IOS – OpenGL ES 设置图像模糊 GPUImageFastBlurFilter

目录 一.简介二.效果演示三.源码下载四.猜你喜欢 零基础 OpenGL (ES) 学习路线推荐 : OpenGL (ES) 学习目录 >> OpenGL ES 基础 零基础 OpenGL (ES) 学习路线推荐 : OpenGL (ES) 学习目录 >> OpenGL ES 转场 零基础 OpenGL (ES) 学习路线推荐 : OpenGL (ES) 学习目…