20行代码搞定WebGL绿幕抠图，视频背景透明不再是梦

前端

2023-06-08 10:40:17

使用 20 行代码实现 WebGL Chromakey 实时绿幕抠像

欢迎来到视频制作的精彩世界，在这里，绿幕抠像术是一种改变游戏规则的技术，可以将您的创意愿景变为现实。无论您是经验丰富的专业人士还是初出茅庐的视频爱好者，WebGL Chromakey 实时绿幕抠像都将为您的项目注入无限的可能性。

WebGL Chromakey 实时绿幕抠像简介

想象一下一种神奇的力量，它可以让您瞬间去除视频中的绿色背景，释放您的人物或物体，让他们自由翱翔在任何您想要的新环境中。这就是 WebGL Chromakey 实时绿幕抠像的魔力所在。

凭借 WebGL 技术的强大功能，您可以直接在网络浏览器中实现此视觉效果，无需昂贵的设备或复杂的后期处理。这为您提供了前所未有的灵活性，让您可以在几秒钟内轻松实现专业的视频效果。

使用 20 行代码解锁绿幕抠像

准备好在短短 20 行代码中释放您的创造力了吗？让我们踏上 WebGL Chromakey 实时绿幕抠像的非凡之旅吧！

// 创建 WebGL 上下文
const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');

// 加载视频和绿幕背景图片
const video = document.getElementById('video');
const greenScreenImage = new Image();
greenScreenImage.src = 'green_screen.jpg';

// 创建着色器程序
const vertexShaderSource = `
  attribute vec2 a_position;
  attribute vec2 a_texCoord;

  varying vec2 v_texCoord;

  void main() {
    gl_Position = vec4(a_position, 0.0, 1.0);
    v_texCoord = a_texCoord;
  }
`;

const fragmentShaderSource = `
  precision mediump float;

  uniform sampler2D u_videoTexture;
  uniform sampler2D u_greenScreenTexture;

  varying vec2 v_texCoord;

  void main() {
    vec4 videoColor = texture2D(u_videoTexture, v_texCoord);
    vec4 greenScreenColor = texture2D(u_greenScreenTexture, v_texCoord);

    float alpha = 1.0 - greenScreenColor.g;
    gl_FragColor = vec4(videoColor.rgb * alpha, alpha);
  }
`;

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

// 将视频和绿幕背景图片作为纹理传递给着色器程序
const videoTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, videoTexture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, video);

const greenScreenTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, greenScreenTexture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, greenScreenImage);

// 将着色器程序应用到视频上，并将其渲染到画布上
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, 1.0]), gl.STATIC_DRAW);

const texCoordBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 1.0, 1.0]), gl.STATIC_DRAW);

const positionLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);

const texCoordLocation = gl.getAttribLocation(program, 'a_texCoord');
gl.enableVertexAttribArray(texCoordLocation);
gl.vertexAttribPointer(texCoordLocation, 2, gl.FLOAT, false, 0, 0);

const videoTextureLocation = gl.getUniformLocation(program, 'u_videoTexture');
gl.uniform1i(videoTextureLocation, 0);

const greenScreenTextureLocation = gl.getUniformLocation(program, 'u_greenScreenTexture');
gl.uniform1i(greenScreenTextureLocation, 1);

gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);