零基础学WebGL：视频播放的幕后解读

2023-12-29 02:41:05

前言

如果已经看过【零基础学WebGL】绘制图片，或已经了解WebGL绘制基础。那么今天我们就来学习一个新的课题——WebGL视频播放。H5播放视频，通常可以使用HTML Video实现。但如果考虑HTML Video在移动端的兼容性，或者需要进行视频处理、特效添加等操作，WebGL就成为了一个更好的选择。

WebGL视频播放原理

WebGL视频播放的原理其实并不复杂，可以概括为以下几个步骤：

视频解码 ：首先，我们需要对视频文件进行解码，将视频数据从压缩格式转换为未压缩的原始数据。这通常由浏览器内置的视频解码器完成。
顶点着色器 ：解码后的视频数据包含了视频中每个像素的位置和颜色信息。顶点着色器将这些数据转换为屏幕坐标，并将其传递给片段着色器。
片段着色器 ：片段着色器将顶点着色器传递过来的数据转换为最终的像素颜色。这个过程通常涉及到一些计算，比如光照、纹理映射等。
纹理：纹理是WebGL中用于存储图像数据的对象。视频数据被存储在纹理中，以便在屏幕上显示。
帧缓冲对象 ：帧缓冲对象是WebGL中用于存储渲染结果的对象。视频帧被渲染到帧缓冲对象中，然后通过浏览器显示到屏幕上。
媒体元素 ：媒体元素是HTML中用于播放视频的元素。当媒体元素播放视频时，WebGL会自动将视频数据解码、渲染并显示到屏幕上。

WebGL视频播放代码示例

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

// 创建顶点着色器和片段着色器
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

// 设置顶点着色器和片段着色器的源代码
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_texture;
  varying vec2 v_texCoord;

  void main() {
    gl_FragColor = texture2D(u_texture, v_texCoord);
  }
`;

// 编译顶点着色器和片段着色器
gl.shaderSource(vertexShader, vertexShaderSource);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(vertexShader);
gl.compileShader(fragmentShader);

// 创建着色器程序
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

// 创建视频纹理
const video = document.getElementById('video');
const videoTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, videoTexture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, video.videoWidth, video.videoHeight, 0, gl.RGB, gl.UNSIGNED_BYTE, null);

// 创建帧缓冲对象
const framebuffer = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, videoTexture, 0);

// 设置视口
gl.viewport(0, 0, canvas.width, canvas.height);

// 播放视频
video.play();

// 渲染视频
function render() {
  gl.useProgram(program);

  // 获取顶点着色器的属性位置
  const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
  const texCoordAttributeLocation = gl.getAttribLocation(program, 'a_texCoord');

  // 绑定顶点数据
  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);
  gl.enableVertexAttribArray(positionAttributeLocation);
  gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

  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);
  gl.enableVertexAttribArray(texCoordAttributeLocation);
  gl.vertexAttribPointer(texCoordAttributeLocation, 2, gl.FLOAT, false, 0, 0);

  // 设置片段着色器的uniform变量
  const textureUniformLocation = gl.getUniformLocation(program, 'u_texture');
  gl.uniform1i(textureUniformLocation, 0);

  // 将视频帧渲染到帧缓冲对象中
  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

  // 将帧缓冲对象中的内容复制到屏幕上
  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

  // 请求浏览器调用render函数
  requestAnimationFrame(render);
}

// 启动渲染循环
render();