Threejs实现数字人绿幕视频背景透明播放，Shader绿幕视频抠像

个人主页： 左本Web3D，更多案例预览请点击==》 在线案例
个人简介：专注Web3D使用ThreeJS实现3D效果技巧和学习案例
💕 💕积跬步以至千里，致敬每个爱学习的你。喜欢的话请三连，有问题请私信或者加微信

        在数字人应用中，绿幕技术是一种常见的技术，也是实现数字人绿幕视频背景透明播放的基础。所谓绿幕，就是在录制数字人视频时，用绿色背景替代实景背景，并在后期制作中将这个绿色背景抠掉，留下数字人在实景背景下的视频，实现数字人的半透明化，或者将数字人放到任意背景中，从而实现很多炫酷的视觉效果。

        绿幕视频背景抠像的过程，需要使用专门的图像处理算法，根据指定的颜色值（例如绿色），从整个视频流中抠掉这个颜色值的像素，留下其他颜色的像素。在Three.js中，我们可以使用Shader来实现绿幕视频背景抠像。

下面的代码为实现绿幕视频抠像的Shader代码，包含顶点着色器和片元着色器两部分。

顶点着色器代码（id为“vertexShader”）处理顶点信息，将3D坐标从模型空间转换到裁剪空间，通过gl_Position设置输出的坐标。

片元着色器代码（id为“fragmentShader”）则是从videoTexture纹理中取出像素颜色，并将其转换为灰度值，接着计算绿色屏幕的值（通过绿色通道值减去红色和蓝色通道的值得到），然后根据指定的阈值进行抠像处理，将背景颜色设为透明。

其中，uniform keyword用来声明从CPU将数据传送到GPU的值，其中videoTexture是绿幕视频的纹理，在GPU和CPU之间传输数据，threshold是指定的阈值，用于调整抠像的精度和背景的透明度，其值越大，抠除的颜色范围也越大，画面中被抠掉的颜色更多，生成的抠像效果可能不太好；其值越小，抠掉的颜色范围更小，生成的抠像效果更加精细，但可能会留下一些边缘颜色。

最后，gl_FragColor输出转换后的颜色值和alpha值，其中alpha值表示背景透明度，用于实现从实景背景到数字人绿幕视频的渐变效果。

<script type="x-shader/x-vertex" id="vertexShader">varying vec2 vUv;void main() {vUv = uv;gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );}
</script><script type="x-shader/x-fragment" id="fragmentShader">uniform sampler2D videoTexture;uniform float threshold;varying vec2 vUv;void main() {vec4 color = texture2D(videoTexture, vUv);float greenScreen = color.g - max(color.r, color.b);float alpha = 1.0 - smoothstep(threshold - 0.05, threshold + 0.05, greenScreen);gl_FragColor = vec4(color.rgb, alpha);}
</script>

在Three.js中使用上面Shader代码实现绿幕视频抠像。首先，我们需要创建一个PlaneGeometry（平面几何体）作为显示绿幕视频的载体。平面大小根据视频比例设置，接下来，我们创建一个ShaderMaterial（Shader材质），并为其设置一些属性，如uniforms、vertexShader、fragmentShader等。uniforms是一个结构体，用于存储需要在Shader中使用的uniform变量。这里，我们将绿幕视频纹理设置为videoTexture，并将其值设置为通过HTML5 video元素创建的THREE.VideoTexture对象。threshold变量用于指定阈值，其值为0.05。vertexShader和fragmentShader分别表示顶点着色器和片元着色器的代码。我们通过document.getElementById获取到对应的HTML元素，然后将其textContent作为着色器代码传递给ShaderMaterial。side属性用于决定平面几何体的哪一面显示，这里设置为THREE.DoubleSide表示两面都显示。transparent属性用于启用透明度，因为数字人绿幕视频要与场景进行融合，需要将背景设置为透明。最后，我们创建一个Mesh（网格）对象，并将PlaneGeometry和ShaderMaterial作为其参数传递进去，然后将其添加到场景中。这样，绿幕视频就会在场景中显示，并通过Shader实现抠像处理使其背景透明进行播放。

const video_content = document.getElementById("video_content");

var geometry = new THREE.PlaneGeometry(0.5625, 1);
var material = new THREE.ShaderMaterial({
    uniforms: {
        'videoTexture': {
            value: new THREE.VideoTexture(video_content)
        },
        threshold: {
            value: 0.05
        },
    },
    vertexShader: document.getElementById('vertexShader').textContent,
    fragmentShader: document.getElementById('fragmentShader').textContent,
    side: THREE.DoubleSide,
    transparent: true
});

var mesh = new THREE.Mesh(geometry, shaderMaterial);
scene.add(mesh);