console 命令行工具 X clear

console

const fragCode = `
uniform sampler2D prevTexture, nextTexture;
uniform float progress;
uniform vec2 playerResolution;

vec3 rgb2hsv(vec3 rgb)
{
	float Cmax = max(rgb.r, max(rgb.g, rgb.b));
	float Cmin = min(rgb.r, min(rgb.g, rgb.b));
    float delta = Cmax - Cmin;

	vec3 hsv = vec3(0., 0., Cmax);
	
	if (Cmax > Cmin)
	{
		hsv.y = delta / Cmax;

		if (rgb.r == Cmax)
			hsv.x = (rgb.g - rgb.b) / delta;
		else
		{
			if (rgb.g == Cmax)
				hsv.x = 2. + (rgb.b - rgb.r) / delta;
			else
				hsv.x = 4. + (rgb.r - rgb.g) / delta;
		}
		hsv.x = fract(hsv.x / 6.);
	}
	return hsv;
}

float chromaKey(vec3 color)
{
	vec3 backgroundColor = vec3(0.157, 0.576, 0.129);
	vec3 weights = vec3(4., 1., 2.);

	vec3 hsv = rgb2hsv(color);
	vec3 target = rgb2hsv(backgroundColor);
	float dist = length(weights * (target - hsv));
	return 1. - clamp(3. * dist - 1.5, 0., 1.);
}

vec3 changeSaturation(vec3 color, float saturation)
{
	float luma = dot(vec3(0.213, 0.715, 0.072) * color, vec3(1.));
	return mix(vec3(luma), color, saturation);
}

void main() {
	
    vec2 uv = gl_FragCoord.xy / playerResolution.xy;
	
	vec3 color = texture2D(prevTexture, vec2(uv.x, 1.0 - uv.y)).rgb;
	vec3 bg = texture2D(nextTexture, uv).rgb;
	
	float incrustation = chromaKey(color);
	
	color = changeSaturation(color, 1.0);
	color = mix(color, bg, incrustation);

	gl_FragColor = vec4(color, 1.);
}
`


function createVideo(url) {
    let resource = new PIXI.VideoResource(url, {
        autoLoad: true,
        autoPlay: false,
    })
    resource.source.play()
    resource.source.loop = 'loop'
    return PIXI.Sprite.from(resource)
}

const width = 320
const height = 1280 * 320 / 720
const app = new PIXI.Application({
    width, height
});

document.body.appendChild(app.view);

const container = new PIXI.Sprite();
container.width = width
container.height = height

app.stage.addChild(container);

const uniforms = {
    prevTexture: PIXI.Texture.from('https://test-res-lego.oss-cn-shenzhen.aliyuncs.com/videos/chroma-key-test-1.mp4'),
    nextTexture: PIXI.Texture.from('https://test-res-lego.oss-cn-shenzhen.aliyuncs.com/images/4.jpg'),
    playerResolution: new PIXI.Point(width, height),
};

var filter = new PIXI.Filter(null, fragCode, uniforms);
container.filters = [filter];

<html>

<head></head>

<body>
</body>

</html>

本项目引用的自定义外部资源

pixi.js