关于前端:译如何使用-WebGL-进行实时视频处理

原文地址：Realtime video processing with WebGL

原文作者：Lea Rosema

这是我最近在 CodePen 上制作的 WebGL 演示案例。它能够捕捉网络摄像头的数据（或在无法访问网络摄像头时，从 placekitten 获取备用图像），并将其实时转换为 ASCII 图像艺术。

为了取得更多的复旧性，我应用了 90 年代 DOS PC 中常见的 8×8 像素光栅字体（您可能会在某些 BIOS 中看到这种字体）。

要将图像内容映射到特定字符，我通过应用亮度图抉择最佳匹配。我计算每个 4×4 正方形的像素。在画板内向下滚动以查看亮度图：

我还为这些字体创立了一个编辑器：https://terabaud.github.io/pi…

我将介绍 WebGL 的一些基础知识，但这里仅波及局部问题。获取无关具体领导，建议您拜访 https://webglfundamentals.org

对于 WebGL，一个常见误会是把它当作浏览器中的 3D 引擎。只管 WebGL 技术能使咱们在浏览器中提供 GPU 减速的 3D 内容，但 WebGL 自身不是 3D 引擎。在 WebGL 之上，有专门用于 GPU 减速的 2D 或 3D 内容的图形库（例如用于 2D 的 Pixi，用于 3D 的 ThreeJS）。

WebGL 自身是很根底的绘图规范库，并且是一个以 GPU 减速的形式，将点、线和三角形绘制到 html <canvas> 元素上的库。

能够通过 getContext（相似于 2D canvas API）检索 WebGL 渲染上下文：

const canvas = document.querySelector('canvas');
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');

一个 WebGL 程序蕴含多个着色器组件，着色器是运行在 GPU 上的代码，它们不是用 JavaScript 编写的，而是具备本人的语言，称为 GLSL（GL 着色器语言）。

相似 C 语言，着色器程序蕴含 void main()
变量申明也像在 C 语言中一样
原始数据类型：int, float, double
向量：vec2, vec3, vec4, …
矩阵：mat2, mat3, mat4, …
拜访纹理数据的类型：sampler2D
内置向量、矩阵运算
大量内置性能, 例如，求取向量的长度 (length(v))

WebGL 程序中有两种类型的着色器。

顶点着色器计算地位。
片段着色器解决栅格化。

如果您的 WebGL 程序想要在屏幕上绘制一个三角形，它会把三角形的 3 个坐标传递给顶点着色器。而后，片段着色器的工作是用像素填充该三角形，这种逐像素处理过程十分快，因为它是针对 GPU 上的每个像素并行运行解决的。

在我的演示案例中，我应用 4 个矢量坐标来笼罩适宜整个屏幕的矩形，所有工作都在片段着色器中实现。

顾名思义，顶点着色器存在于顶点。它从 JavaScript 代码提供的缓冲区中获取一堆数据，并依据这些数据计算在画布中的相应地位。

以下代码段将数据从缓冲区拉入一个 attribute 变量，并将其传递给该 gl_Position 变量：

attribute vec3 position;

void main() {gl_Position = vec4(position, 1.0);
}

precision highp float;

void main() {
  vec2 p = gl_FragCoord.xy;
  gl_FragColor = vec4(1.0, .5 + .5 * sin(p.y), .5 + .5 * sin(p.x), 1.0);
}

片段着色器针对每个片段（像素）并行运行。在下面的示例中，片段着色器从 gl_FragCoord 变量读取以后像素坐标，并通过 gl_FragColor 中的 sin() 计算运行并输入色彩。

gl_FragColor 是一个 vec4 向量，其中蕴含（红色，绿色，蓝色，alpha），取值各为 0 .. 1。

attribute: 顶点着色器从缓冲区中提取一个值并将其存储在属性变量中。
uniform: 从 JS 端设置对立变量。例如，您能够对立应用诸如以后鼠标、轻敲地位之类的内容传递给着色器。您还能够应用对立变量来拜访从 JavaScript 上传的纹理数据。
varying: 将值从顶点传递到片段着色器并进行插值。

您能够应用图像数据拜访到着色器中的 WebGLRenderingContext，并将其上传到纹理中。(另请参见：WebGL 基础知识：图像处理)

您能够应用 texImage2D 外部办法 WebGLRenderingContext 将图像数据上传到纹理中。

// gl is the WebGLRenderingContext 
const texture = gl.createTexture()
gl.activeTexture(gl.TEXTURE0 + textureIndex);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);

// more info about these parameters in the webglfundamentals
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

您传递给 texImage2D 的图像数据，能够是 img 元素、视频元素、ImageData 等。

因为视频的图像数据一直变动，因而您必须在 requestAnimationFrame 动画循环内更新纹理。以下是获取实现的 texSubImage2D。

gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, video);

在着色器代码中读取纹理数据，您能够通过 texture 的 2Dglsl 函数拜访纹理的像素数据。

当纹理坐标从（0，0）变为（1，1）时，图像会上下颠倒。同时，我正处于程度镜像图像中（就像用相机自拍一样）。

uniform sampler2D texture0;

void main() {vec2 coord = 1.0 - gl_FragCoord.xy / vec2(width, height);
  gl_FragColor = texture2D(texture1, coord);
}

要从网络摄像头获取图像数据，咱们能够应用 video 标签，并应用 getUserMediaAPI：

function accessWebcam(video) {return new Promise((resolve, reject) => {
    const mediaConstraints = { audio: false, video: { 
        width: 1280, 
        height: 720,
        brightness: {ideal: 2} 
      }
    };

    navigator.mediaDevices.getUserMedia(mediaConstraints).then(mediaStream => {
        video.srcObject = mediaStream;
        video.setAttribute('playsinline', true);
        video.onloadedmetadata = (e) => {video.play();
          resolve(video);
        }
      }).catch(err => {reject(err);
      });
    }
  );
}

// 应用阐明：// const video = await accessWebcam(document.querySelector('video'));
// or via promises:
// accessWebcam(document.querySelector('video')).then(video => { ...});

要拜访网络摄像头，您能够应用 getUserMedia API 来拜访网络摄像头，如上所述。

如果用户阻止了对网络摄像头的拜访，或者没有可用的网络摄像头，则能够提供一个备用图像供您应用。

我也将 new Image() 中的 onload 操作包装成一个 promise。

function loadImage(url) {return new Promise((resolve, reject) => {const img = new Image();
    img.crossOrigin = 'Anonymous';
    img.src = url;
    img.onload = () => {resolve(img);
    };
    img.onerror = () => {reject(img);
    };
  });
}

为了使事件变得容易一些，我将罕用的 WebGL 函数放入了我创立的一个小助手库 GLea 中。

它初始化 WebGL 利用上下文，编译 WebGL 着色器代码，并为顶点着色器创立属性和缓冲区：

默认状况下，position 为顶点着色器提供一个属性，该属性带有一个缓冲区，该缓冲区蕴含 4 个 2D 坐标，笼罩整个屏幕上的 2 个三角形。

import GLea from 'glea.js';

const frag = ` ... `; // 片段着色器代码
const vert = ` ... `; // 顶点着色器代码
const glea = new GLea({
  shaders: [GLea.fragmentShader(frag),
    GLea.vertexShader(vert)
  ]
}).create();

function loop(time = 0) {const { gl, width, height} = glea;
  glea.clear();
  glea.uniV('resolution', [width, height]);
  glea.uni('time', time * 1e-3);
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  requestAnimationFrame(loop);
}

window.addEventListener('resize', () => {glea.resize();
});
loop(0);

基本上就是这样。我心愿您喜爱浏览本文，并对本人摸索 WebGL 感到好奇。我会在这里放一些资源。

如果我还有没介绍到的内容，请随时发表补充评论 =)。

https://webglfundamentals.org/
https://thebookofshaders.com/
https://frontendmasters.com/c…
https://codame.com/events/wor…

关于前端:译如何使用-WebGL-进行实时视频处理

若干 WebGL 基础知识

GLSL 疾速概览

着色器的类型

顶点着色器

片段着色器

GLSL 变量的类型

上传图像数据

读取纹理数据

拜访网络摄像头

提供后备图像

合并全副操作

论断

参考资料

Just My Socks（注册教程内含优惠码）

关于前端:译如何使用-WebGL-进行实时视频处理

若干 WebGL 基础知识

GLSL 疾速概览

着色器的类型

顶点着色器

片段着色器

GLSL 变量的类型

上传图像数据

读取纹理数据

拜访网络摄像头

提供后备图像

合并全副操作

论断

参考资料

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）