浏览器中生产就绪的绿屏

How does it work? Here’s the basic “pipeline”:

它是如何工作的？这是基本的“pipeline”：

1. Get a MediaStream with getUserMedia
2. 使用getUserMedia获取MediaStream
3. Decode the stream with an invisible <video> element
4. 使用不可见的<video>元素解码流
5. requestVideoFrameCallback tells us when a video frame is available
6. requestVideoFrameCallback告诉我们何时有视频帧可用
7. For each frame, copy it to a WebGL texture with texImage2D
8. 对于每一帧，使用 texImage2D 将其复制到 WebGL 纹理中
9. For each frame, set the uniform parameters of a fragment shader from the new texture and the HTML form
10. 对于每一帧，从新纹理和 HTML 表单设置片段着色器的 uniform 参数
11. For each frame, redraw a canvas, shaded by the fragment shader
12. 对于每一帧，重新绘制画布，由片元着色器着色
13. In the fragment shader, adjust each pixel’s opacity and color based on its closeness to the chroma of the chosen key color
14. 在片段着色器中，根据其与所选键色的色度接近程度调整每个像素的不透明度和颜色

After tweaking the parameters for your own green screen, you should get a reasonable result like this:

调整自己的绿屏参数后，你应该能得到类似这样的合理结果：

This is similar to the green screen pipeline in my previous post, but with a much better green screen algorithm. In the previous post, the green screen algorithm makes the pixel fully transparent if g > 0.4 && r < 0.4 (where color channels are measured between 0.0 and 1.0). Otherwise, it makes it fully opaque. But there are more sophisticated methods to decide how transparent a pixel should be, and to correct for “color spill” (that is, green light reflected from the subject).

这类似于 我之前的文章 中的 green screen 流水线，但使用了更好的 green screen 算法。在之前的文章中，green screen 算法如果 g > 0.4 && r < 0.4（其中颜色通道在 0.0 到 1.0 之间测量），则使像素完全透明。否则，使其完全不透明。但是，有更复杂的方法来决定像素应该多么透明，并校正“color spill”（即从主体反射的绿光）。

The green screen algorithm above is derived from the Chroma Key filter in OBS Studio. The OBS shader is written in HLSL, but WebGL shaders are written in GLSL. Microsoft have a GLSL-to-HLSL conversion reference, which I just read “backwards”. I also removed some extraneous features from the OBS shader that did not seem to improve quality. This left me with:

上面的绿屏算法源自OBS Studio 中的 Chroma Key 滤镜。OBS 着色器是用 HLSL 编写的，但 WebGL 着色器是用 GLSL 编写的。Microsoft...