webgl 绿布视频抠图

最新推荐文章于 2024-07-12 12:04:56 发布
最新推荐文章于 2024-07-12 12:04:56 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： opengl实例代码 webgl
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u013378269/article/details/110044818
版权
本文介绍了一个使用WebGL技术处理MP4格式的绿幕视频，通过计算RGB值对应HSV值的欧式距离，平滑处理并混合背景图片，实现视频抠图和背景替换的项目。开发环境为WebGL、JavaScript，测试于火狐浏览器，并提供了IDE配置及工程代码下载。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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.16
最低0.47元/天 解锁文章
原生webgl学习（二） 用WebGL绘制一个三角形
Bruce_wjh的博客
10-10 3632
所有示例代码均可在我的gitee码云上，读者可自行下载：https://gitee.com/babyogl/learnWebGL,本文示例代码在chapter-01里面,引用文件都在libs文件夹下；为了让读者不至于枯燥乏味，这一篇文章我们不讲计算和理论，相关的矩阵运算和理论留在后面，现在只是单纯的介绍WebGL一些接口和用法，从一个简单的示例开始：绘制一个带颜色的三角形。 在开始之前，需要知道...
绿屏抠图（image matting）
Not everything that counts can be counted
01-02 1万+
提前声明本文内容： 1、本文核心算法（alpha求解）基于论文Shared Sampling for Real-Time Alpha Matting进行; 2、本文对上面论文的核心算法进行了分析； 3、对于绿色背景的视频进行自动抠图与重新合成； 4、绿屏视频中（只要是单一颜色背景）的前景目标在新背景上的位置以及大小用户自己设定； 5、对于光照有较好的鲁棒性； 部分结果展示： ...
20 行核心（shader）代码实现实时绿幕抠图
最新发布
ufrontend的博客
07-12 1386
武汉优联前端科技有限公司由一批从事前端10余年的专业人才创办，是一家致力于H5前端技术研究的科技创新型公司，为合作伙伴提供专业高效的前端解决方案，合作伙伴遍布中国及东南亚地区，行业涵盖广告，教育， 医疗，餐饮等。有效的解决了合作伙伴的前端技术难题，节约了成本，实现合作共赢。除了上面分析的核心代码之外还有一些为了让 Shader 运行起来的辅助代码，属于 WebGL 的基础知识，查看完整代码。将相似度与饱和度参数计算，然后与原像素点的灰度值混合，越大越靠近原像素点，越小越就接近灰度。
绿幕抠图shader备忘
JIH488的专栏
11-06 669
"#extension GL_OES_EGL_image_external : require\n" + "precision highp float;\n"+ "varying highp vec2 textureCoordinate;\n" + "varying highp vec2 backgroundCoordinate;\n" + "uniform samplerExternalOES inputIma...
opengl进行绿色屏幕抠图
XR风云
10-14 2971
在进行一个AR项目，需要进行抠图，所以就用了一些抠图的方法，先展示一下抠图效果，如下： 抠图之前 抠图之后 蓝色背景 RGB值 : 0, 71, 187 CMYK : 90, 68, 0, 0 绿色背景 RGB值: 0, 177, 64 CMYK : 81, 0, 92, 0 RGB值转换成(0-1)之间，需要除以255 我们直接在fragment shader中进行抠图。 抠图算法方案一： keying_color = vec3(0.0, 0.6941177, 0.2509804)
webgl canvas系列——快速加背景、抠图、加水印并下载图片
热门推荐
编程知识分享，主打前端
03-17 2万+
大家好，我是yma16，本文分享webgl canvas系列——快速抠图、加水印。该系列往期文章web canvas系列——快速入门上手绘制二维空间点、线、面。
unity3d webgl播放视频 自用备份
11-04
本项目主要关注的是如何在Unity3D中利用WebGL技术来播放视频，特别是对于OGV格式的视频。 在Unity3D中，WebGL的视频播放涉及到以下几个关键知识点： 1. **Unity WebGL导出**：首先，你需要在Unity中将项目设置为...
UnityWebGL播放在线视频m3u8两种方案
04-15
在Unity WebGL平台开发中，为用户提供在线视频播放功能是一项常见的需求。本文将详细介绍两种实现这一功能的方法：一种是使用AVProVideo插件，另一种是利用HTML内嵌网页技术。 首先，我们来了解一下**AVProVideo...
Unity-webgl视频流测试程序
06-29
这个"Unity WebGL视频流测试程序"是为了检验Unity WebGL项目是否能够有效地处理视频流内容，特别是通过WebGL在浏览器中播放。 在Unity中，使用Unity Media Player (UMP) 模块可以实现视频播放功能。UMP是一个内置的...
简易视频播放器webgl可用 MoviePlayer.unitypackage
03-17
简易视频播放器webgl可用，缺点 不能控制视频音量，解决方案：把视频音源提取出来，通过计算视频播放时间，去调整音频播放时间。
实时高分辨率视频抠像
qq_50213874的博客
03-12 7736
的，即预测结果是 0-1 的任意值，而 segmentation 的预测结果则是 0 或 1 的整。下图是 MobileNetV3 的网络架构：large 和 small 的整体结构一致，区别就。只使用人类的图像，并将它们组合成 420/15 train/val 分割用于训练。和连接，ConvGRU 层只在一半的通道上操作。的 8 位可以表示的范围是 0-255，即 255 代表不透明（白色），0 表示完全透明。用预训练的 ImageNet 权重进行初始化，并使用 1e−4 学习率，而网络的其余部分。
超炫酷HTML5 Canvas 3D旋转地球动画
08-23
这是一款基于HTML5 Canvas的3D地球模拟动画，动画以太空作为背景，地球在太空中旋转，同时我们也可以拖拽鼠标来从不同的角度观察地球。另外我们也可以通过点击全屏按钮来全屏观看地球旋转动画，记得在很早以前我们也分享过一款基于HTML5 Canvas的地球动画，请看这里。
html5 自动扣图,canvas像素点操作之视频绿幕抠图
weixin_35672512的博客
06-01 942
本文介绍了canvas像素点操作之视频绿幕抠图，分享给大家，具体如下：用法：context.putimagedata(imgdata, x, y, dx, dy, dwidth, dheight);参数描述imgdata规定要放回画布的 imagedata 对象。ximagedata 对象左上角的 x 坐标，以像素计。yimagedata 对象左上角的 y 坐标，以像素计。dx可选。水平值(x)，...
Threejs实现数字人绿幕视频背景透明播放，Shader绿幕视频抠像
左本Web3D
05-13 4472
Threejs实现数字人绿幕视频背景透明播放，在数字人应用中，绿幕技术是一种常见的技术，也是实现数字人绿幕视频背景透明播放的基础。所谓绿幕，就是在录制数字人视频时，用绿色背景替代实景背景，并在后期制作中将这个绿色背景抠掉，留下数字人在实景背景下的视频，实现数字人的半透明化，或者将数字人放到任意背景中，从而实现很多炫酷的视觉效果。
无需绿幕，谷歌黑科技实现视频背景实时“抠像”
互动教程网[www.hdjc8.com]
05-09 1960
　IT之家3月3日消息 我们知道，要想把人物跟视频背景中分离开来，一般常用的方法是绿幕抠像，但这种方法准备起来比较费时，还需要一块绿幕。为此，谷歌开发了一种新技术，可实时删除视频中人物的复杂背景。 　　 　　根据谷歌的说法，将人从背景中分离出来使用了“卷积神经网络（CNN）”技术，它常被用于机器学习。从演示图像能够看出，人物的真实背景被删除，换上了一些虚拟的背景，并且也没有特别假的感觉。 　　 　　 　　为了实现高度精确的“分割”，谷歌用该技术学习了数以万计的图像数据，并且专门分辨出“头发”、“颈
通过OpenCV对视频进行绿幕抠图
weixin_46405486的博客
01-04 5563
通过OpenCV对视频进行绿幕抠图效果代码1、打开视频素材2、保存视频路径及格式设置3、读取一帧视频4、寻找绿幕背景5、融合6、代码执行效果 效果 今天跟大家分享的是最近比较受大家喜欢的视频或图片的部分场景抠图替换，先不多说，先看效果： 这是原视频，在场景中有个电视机被制成了绿幕。 胆小的猫 这是另一个需要添加的视频，我们的目的是将下边的“美女”视频添加到上边视频的绿幕电视机上。
OpenGL 图像绿幕抠图
猿说编程
12-03 877
目录零基础 OpenGL ES 学习路线推荐 :>>零基础 OpenGL ES 学习路线推荐 :>>零基础 OpenGL ES 学习路线推荐 :>>零基础 OpenGL ES 学习路线推荐 :>>零基础 OpenGL ES 学习路线推荐 :>>零基础 OpenGL ES 学习路线推荐 :>>
threejs实现绿幕视频透明播放
思依_vr 的专栏
03-30 4256
threejs实现绿幕视频播放
实践解析丨如何通过 WebAssembly 在 Web 进行实时视频人像分割
声网的博客
07-23 4258
5 月 15 日，声网Agora 高级架构师高纯参加了 WebAssambly 社区举办的第一场线下活动“WebAssembly Meetup”，并围绕声网Agora 在 Web 实时视频人像分割技术的应用落地，分享了实践经验。以下为演讲分享整理。 RTC 行业在近几年的发展日新月异，在线教育、视频会议等场景繁荣蓬勃。场景的发展也给技术提出了更高的要求。于是，机器学习越来越多地应用到了实时音视频场景中，比如超分辨率、美颜、实时美声等。这些应用在 Web 端也存在同样的需求，同时也是所有音视频开发者面对的挑
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值