介绍

绿幕抠图指将图片中的绿色扣去，并将该处的 alpha 分量设为 0，并将另外一张图片作为背景，以实现背景替换的功能，常用于电影和电视的制作场景。

最终效果

原始图片

绿幕抠图后效果

代码

这一块的代码改动，主要在像素着色器 shader。

ps shader

本文只是实现了最简单的绿幕抠图，对于这种比较完美的图片，抠图效果较好，对于其他图片还有较大的优化空间。

Texture2D tex : register(t0);
SamplerState samplerLinear : register(s0);struct VSOut
{float4 pos : SV_Position;float2 tex : TEXCOORD1;
};float4 MyPs(VSOut pIn) : SV_Target
{float4 sampleColor = tex.Sample(samplerLinear, pIn.tex);float dis = distance(float3(sampleColor.xyz), float3(0.0, 1.0, 0.0));return float4(sampleColor.xyz, step(0.4, dis));
}

原理

本文使用的绿幕抠图的原理比较简单，就是比较该点的 rgb 颜色和绿色之间的差距d，并设置一个阈值a，但差距小于阈值 a，则认为其他绿色，将其透明分量设为 0。

step

step(x,y) 当 x ≤y时，返回1，否则为 0。

具体代码

void Graphics::DrawPicture()
{InitEffect();/************************************* 输入装配阶段 **************************************/ //创建顶点缓存struct SimpleVertex{DirectX::XMFLOAT3 pos;DirectX::XMFLOAT2 tex;};SimpleVertex vertices[] ={{DirectX::XMFLOAT3(-0.5f, -0.5f, 0.5f), XMFLOAT2(0.0f, 1.0f)},{DirectX::XMFLOAT3(-0.5f,  0.5f, 0.5f),  XMFLOAT2(0.0f, 0.0f)},{DirectX::XMFLOAT3(0.5f,  0.5f, 0.5f),    XMFLOAT2(1.0f, 0.0f)},{DirectX::XMFLOAT3(0.5f, -0.5f, 0.5f),    XMFLOAT2(1.0f, 1.0f)},};D3D11_BUFFER_DESC verticsDesc = {};verticsDesc.ByteWidth = sizeof(vertices) * 5; // 字节数// 将 usage 设为 D3D11_USAGE_IMMUTABLE  D3D11_USAGE_DEFAULT 可行verticsDesc.Usage = D3D11_USAGE_IMMUTABLE; // 资源的使用，gpu和cpu 的读写权限 verticsDesc.BindFlags = D3D11_BIND_VERTEX_BUFFER; // 标识如何将资源绑定到 pipeline verticsDesc.CPUAccessFlags = 0; // CPU 的读写权限verticsDesc.MiscFlags = 0;verticsDesc.StructureByteStride = 0;D3D11_SUBRESOURCE_DATA resourceData = {};resourceData.pSysMem = vertices;resourceData.SysMemPitch = 0;resourceData.SysMemSlicePitch = 0;ID3D11Buffer* verticesBuffer = NULL;m_pDevice->CreateBuffer(&verticsDesc, &resourceData, &verticesBuffer);UINT strider = sizeof(SimpleVertex);UINT offset = 0;m_pContext->IASetVertexBuffers(0,               // start slot1,             // buffer 数量  (start slot ~ start slot + buffer number&verticesBuffer,// 顶点缓存&strider,     // 每组数据的字节数&offset);        // 偏移量DirectX::XMUINT3 index[] = {{0, 1, 2},{0, 2, 3}};D3D11_BUFFER_DESC indexDesc = {};indexDesc.ByteWidth = sizeof(index) * 2; // 字节数// 将 usage 设为 D3D11_USAGE_IMMUTABLE  D3D11_USAGE_DEFAULT 可行indexDesc.Usage = D3D11_USAGE_IMMUTABLE; // 资源的使用，gpu和cpu 的读写权限 indexDesc.BindFlags = D3D11_BIND_INDEX_BUFFER; // 标识如何将资源绑定到 pipeline indexDesc.CPUAccessFlags = 0; // CPU 的读写权限indexDesc.MiscFlags = 0;indexDesc.StructureByteStride = 0;resourceData.pSysMem = index;resourceData.SysMemPitch = 0;resourceData.SysMemSlicePitch = 0;ID3D11Buffer* indexBuffer = NULL;m_pDevice->CreateBuffer(&indexDesc, &resourceData, &indexBuffer);// 设置所引缓存m_pContext->IASetIndexBuffer(indexBuffer, DXGI_FORMAT_R32_UINT, 0);// 输入布局m_pContext->IASetInputLayout(m_inputLayout);// 图元拓扑结构m_pContext->IASetPrimitiveTopology(D3D11_PRIMITIVE_TOPOLOGY_TRIANGLELIST);/************************************* 顶点着色器阶段 **************************************/m_pContext->VSSetShader(m_pVertexShader, nullptr, 0);/************************************* 像素着色器阶段 **************************************/m_pContext->PSSetShader(m_pPixelShader, nullptr, 0);ID3D11Resource* inputResource = NULL;ID3D11ShaderResourceView* shaderResourceView = NULL;std::wstring path = L"res\\image\\tiger.png";CreateWICTextureFromFile(m_pDevice,path.c_str(),&inputResource,&shaderResourceView);m_pContext->PSSetShaderResources(0, 1, &shaderResourceView);ID3D11SamplerState* sampler;D3D11_SAMPLER_DESC sampleDesc = {};sampleDesc.Filter = D3D11_FILTER_MIN_MAG_MIP_LINEAR;sampleDesc.AddressU = D3D11_TEXTURE_ADDRESS_WRAP; // 平铺整数个sampleDesc.AddressV = D3D11_TEXTURE_ADDRESS_WRAP;sampleDesc.AddressW = D3D11_TEXTURE_ADDRESS_WRAP;sampleDesc.ComparisonFunc = D3D11_COMPARISON_NEVER;sampleDesc.MinLOD = 0;sampleDesc.MaxLOD = D3D11_FLOAT32_MAX;m_pDevice->CreateSamplerState(&sampleDesc, &sampler);m_pContext->PSSetSamplers(0, 1, &sampler);/************************************* 输出阶段 **************************************/// 设置渲染目标m_pContext->OMSetRenderTargets(1, &m_pRenderTargetView, NULL);ID3D11BlendState* blendState;D3D11_BLEND_DESC blendDesc = {};blendDesc.AlphaToCoverageEnable = FALSE;blendDesc.IndependentBlendEnable = FALSE;blendDesc.RenderTarget->BlendEnable = TRUE; // 是否开启混合blendDesc.RenderTarget->SrcBlend = D3D11_BLEND_SRC_ALPHA; // 将源图的 alpha 作为 src rgb 的混合因子blendDesc.RenderTarget->DestBlend = D3D11_BLEND_INV_SRC_ALPHA; // 将源图的 1-alpha 作为 dst rgb 的混合因子blendDesc.RenderTarget->BlendOp = D3D11_BLEND_OP_ADD; // 进行相加操作blendDesc.RenderTarget->SrcBlendAlpha = D3D11_BLEND_ONE; // blendDesc.RenderTarget->DestBlendAlpha = D3D11_BLEND_ONE;blendDesc.RenderTarget->BlendOpAlpha = D3D11_BLEND_OP_ADD;blendDesc.RenderTarget->RenderTargetWriteMask = D3D11_COLOR_WRITE_ENABLE_ALL; // 可以写入的位置m_pDevice->CreateBlendState(&blendDesc, &blendState);const FLOAT BlendFactor[4] = {1.0f, 1.0f, 1.0f, 1.0f};m_pContext->OMSetBlendState(blendState, BlendFactor, 0xffffffff);// 设置视口D3D11_VIEWPORT viewPort = {};viewPort.TopLeftX = 0;viewPort.TopLeftY = 0;viewPort.Width = 800;viewPort.Height = 600;viewPort.MinDepth = 0.0f;viewPort.MaxDepth = 1.0f;m_pContext->RSSetViewports(1, &viewPort);// 开始绘制m_pContext->DrawIndexed(6, 0, 0);
}

参考文献

https://blog.csdn.net/grace_yi/article/details/109081046

Direct3D 11 总结 —— 8 实现简单的绿幕抠图效果相关推荐

Direct3D 11 总结 —— 9 通过键盘调整绿幕抠图阈值
介绍本文主要介绍如何通过键盘设置绿幕抠图的阈值,通过设置不同的阈值,看最终的结果. 最终结果阈值为 0.9 阈值为 0.2 阈值为 0.5 知识点获取键盘输入当键盘按下后,会给窗口的回调函数, ...
Android OpenGL ES(八) - 简单实现绿幕抠图
image.png 实现绿幕抠图,其实想法很简单. 这里简单粗暴的使用着色器替换. OES Filter 直接实现在相机预览上的Shader #extension GL_OES_EGL_image_e ...
绿幕抠图在手机上使用认识.
简单介绍疑问1: 绿幕技术在手机APP上合适吗? 毕竟带着绿布在户外不现实. 是的, 太不现实了, 我们之前不做也是这样想的, 用户量不大, 使用场景不大. 没有谁愿意在户外先支好绿布,然后再拍视频 ...
绿幕抠图自己的认识.
疑问1: 绿幕技术在手机APP上合适吗? 毕竟带着绿布在户外不现实. 是的, 太不现实了, 我们之前不做也是这样想的, 用户量不大, 使用场景不大. 没有谁愿意在户外先支好绿布,然后再拍视频. 也是我 ...
通过OpenCV对视频进行绿幕抠图
通过OpenCV对视频进行绿幕抠图效果代码 1.打开视频素材 2.保存视频路径及格式设置 3.读取一帧视频 4.寻找绿幕背景 5.融合 6.代码执行效果效果今天跟大家分享的是最近比较受大家喜欢 ...
抖音直播画中画、绿幕抠图直播，如此简单
抖音直播目前较火,但只单存的播放视频,很容易限流,无法加热... 目前较火的直播方式,无非就是画中画+绿幕直播了.可能会环节以上问题. 什么是画中画,就是两个媒体源叠加在一起如下图: 如何把摄像头只 ...
编程去除背景绿幕抠图，基于.NET+OpenCVSharp
摘要:本文介绍了一种使用OpenCVSharp对摄像头中的绿幕视频进行实时"抠人像.替换背景"的方式,对于项目中的算法进行了分析.本文中给出了简化OpenCVSharp中Mat.M ...
Unity3D视频绿幕抠图的实现及优化
Unity3D视频绿幕抠图的实现及优化展开本文是通过Shader处理绿幕的方式来实现Unity中视频(VideoPlayer)的绿幕抠图.因为项目原因,不追究细节(能用就好能用就好)orz可是我连 ...
绿幕抠图SDK技术对比
复杂度现实环境的影响:绿色不是一个固定的像素值, 它会随光线亮暗,绿布的颜色, 相机的成像质量,反光,色溢等各种因素影响,所以不能用简单的判断一个像素值,就认为是绿或不绿:也不是一个平滑过度的值,比 ...

Direct3D 11 总结 —— 8 实现简单的绿幕抠图效果

介绍