webgl 基础渲染demo_如何使用 WebGL 进行实时视频处理

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

为了获得更多的复古性，我使用了 90 年代 DOS PC 中常见的 8x8 像素光栅字体(您可能会在某些 BIOS 中看到这种字体)。

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

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

若干 WebGL 基础知识

我将介绍 WebGL 的一些基础知识，但这里仅涉及部分问题。获取有关详细指导，建议您访问 https://webglfundamentals.org

对于 WebGL，一个常见误解是把它当作浏览器中的 3D 引擎。尽管 WebGL 技术能使我们在浏览器中提供 GPU 加速的 3D 内容，但 WebGL 本身不是 3D 引擎。在 WebGL 之上，有专门用于 GPU 加速的 2D 或 3D 内容的图形库(例如用于 2D 的 Pixi，用于 3D 的 ThreeJS)。

WebGL 本身是很基础的绘图标准库，并且是一个以 GPU 加速的方式，将点、线和三角形绘制到 html 元素上的库。

可以通过 getContext (类似于 2D canvas API )检索 WebGL 渲染上下文：

const canvas = document.queryS