webgl 绿布视频抠图

1、项目介绍

输入有背景色的视频，MP4格式，每一帧画面进行处理。

输入要替换的背景图，jpg格式图片

最终抠图合成效果

2 开发环境介绍

开发语言：webgl 、js
测试浏览器：火狐
IDE :webstorm

3 开发步骤

主要在片元着色器中进行处理

计算当前像素点RGB值对应的HSV值
设定HSV三个分量的权重，根据权重计算当前像素点的HSV值到给定背景色的HSV值的欧式距离
将欧式距离用smoothstep做平滑，0.5以下的一定要滤掉
将原图和背景图用平滑值混合

4、主要GLSL代码

      vec2 RGBtoUV(vec3 rgb){return vec2(rgb.r * -0.169 + rgb.g * -0.331 + rgb.b *  0.5    + 0.5,rgb.r *  0.5   + rgb.g * -0.419 + rgb.b * -0.081  + 0.5);}vec4 ProcessChromaKey(vec2 texCoord) {vec4 rgba = texture2D(tex, texCoord);float chromaDist = distance(RGBtoUV(texture2D(tex, texCoord).rgb), RGBtoUV(keyColor));float baseMask = chromaDist - similarity;float fullMask = pow(clamp(baseMask / smoothness, 0., 1.), 1.5);rgba.a = fullMask;float spillVal = pow(clamp(baseMask / spill, 0., 1.), 1.5);float desat = clamp(rgba.r * 0.2126 + rgba.g * 0.7152 + rgba.b * 0.0722, 0., 1.);rgba.rgb = mix(vec3(desat, desat, desat), rgba.rgb, spillVal);return rgba;}

5、目录截图

6 整个工程代码下载

webgl 绿布视频抠图相关推荐

Unity 绿幕视频抠图算法原理与实现 -- 效果极好
码字不易,转载请注明出处喔 https://blog.csdn.net/newchenxf/article/details/119575690 分两件事来说,一个是Unity怎么播放视频,二是播放了, ...
Opencv4学习-2、小案例之绿布抠图-视频背景图替换
一.绿布抠图-背景图替换主要是基于图像色彩空间,转换为HSV色彩空间实现mask层提取.然后通过一些简单的图像处理比如形态学开闭操作.高斯模糊等到完整的mask区域,运用mask区域生成权重系数,对 ...
没有绿幕，AI也能完美视频抠图，发丝毕现，毫无违和感 | CVPR
鱼羊发自凹非寺量子位报道 | 公众号 QbitAI 在阳台上给小姐姐拍个视频: 再把她P到喷泉广场: 需要几步? 现在,无需绿幕,AI 就能搞定这件事. 就像这样,随便用手机给小姐姐拍张照片, ...
抠图为什么要用绿布_《暮白首》为什么如此火爆？五个原因带你深度剖析
由任嘉伦.张慧雯主演的<暮白首>正在热播中,这部剧开播首日收视率拿下多榜第一,之所以<暮白首>这么受欢迎,无非就是以下五点原因. <暮白首>的第一大特点,剧情无注水 ...
绿幕背景视频抠图替换
首先说明,参考的博客 https://blog.csdn.net/linqianbi/article/details/78975998 https://blog.csdn.net/linqianbi/ ...
AI视频抠图换背景，无需「绿幕」，也可达到影视级效果
相信很多小伙伴在平时拍摄剪辑视频的时候,都会遇到视频背景杂乱的情况吧,这个时候都会想到像抠图一样,将视频中的人像抠出来换一个背景!那么具体应该怎么操作呢? 其实这个问题很简单,利用AI智能视频抠图,无 ...
java绿幕抠图_无需绿幕的全自动视频抠图工具｜unscreen
早前我有分享过用AI算法去除图片背景的方法(AI抠图),最近看到群里有人分享了一个视频抠图的网站.同大家一起分享下. 抠图是一个相关行业的必备技能,但是大部分小白只有看大声炫技的份.此时多么希望能 ...
绿布抠像怎么抠干净_AE如何抠取绿幕视频干净抠像教程
AE是一款相当不错的视频处理软件,我们能够用它来解决各种各样在视频编辑方面出现的问题,不少制作视频的朋友都知道绿幕视频要抠取东西的话是一个非常头疼的事情,但是有时候工作需要得用AE进行抠取,特此小编带 ...
python 抠图白幕_巧用Python，视频抠图无需绿幕
最近参加超越杯发生了一段小插曲,主办方要求提交白底的团队介绍VCR,然而之前没有注意到这点,就找了个风景优美的地方拍摄,直到截止前才发现大事不妙. 此时自然而然地就想到抠图了!然而这次的视频背景花里胡 ...

webgl 绿布视频抠图

1、项目介绍

2 开发环境介绍

3 开发步骤

4、主要GLSL代码

5、目录截图

6 整个工程代码下载

webgl 绿布视频抠图相关推荐

最新文章

热门文章