推荐10个小而美的优质 WebGL 库

大家好，欢迎来到IT知识分享网。

大家好，很高兴又见面了，我是”高级前端进阶“，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

今天给大家带来的主题是“推荐10个小而美的 WebGL 库！”，话不多说，直接进入正题！

PixiJS

PixiJS 是一个渲染库，可让开发者创建丰富的交互式图形以及跨平台应用程序和游戏，而无需深入研究 WebGL API 或处理浏览器和设备兼容性。PixiJS 具有完整的 WebGL 支持，并在需要时无缝回退到 HTML5 的画布。

作为一个框架，PixiJS 是创作交互式内容的绝佳工具，尤其是在近年来逐渐放弃 Adobe Flash 的情况下，可将其用于图形丰富的交互式网站、应用程序和 HTML5 游戏。

PixiJS 开箱即用、跨平台兼容和优雅的降级意味着开发者要做的工作更少，而且乐趣更多。总之，PixiJS 项目旨在提供一个可在所有设备上运行的快速、轻量级 2D 库。 PixiJS 渲染器让每个人无需具备 WebGL 知识即可享受硬件加速的强大功能。而且，PixiJS 很快。

目前 PixiJS 在 Github 上通过 MIT 协议开源，有超过 41.3k 的 star、4.8k 的 fork、800+ 的项目依赖量、贡献者 500+，妥妥的前端优质开源项目。

PlayCanvas

PlayCanvas 是基于 WebGL 和 glTF 构建的快速、轻量级 JavaScript 游戏引擎，已经被视频游戏、广告和可视化领域的领先公司所使用，例如：Animech、Arm、宝马、迪士尼、Facebook 等等。

PlayCanvas 的典型特征包括：

• 图形 – 基于 WebGL 1 和 2 构建的高级 2D + 3D 图形引擎。
• 动画 – 针对角色和任意场景属性的强大的基于状态的动画
• ⚛️ 物理 – 与 3D 刚体物理引擎 ammo.js 完全集成
• 输入 – 鼠标、键盘、触摸、游戏手柄和 VR 控制器 API
• 声音 – 基于 Web Audio API 构建的 3D 位置声音
• Assets – 基于 glTF 2.0、Draco 和 Basis 压缩构建的异步流系统
• 脚本 – 用 Typescript 或 JavaScript 编写游戏行为

目前 PlayCanvas 在 Github 上通过 MIT 协议开源，有超过 8.7k 的 star、1.3k 的 fork、贡献者 200+，是一个优质的前端开源项目。

regl

regl 通过删除尽可能多的共享状态来简化 WebGL 编程。 为此，它用两个基本抽象、资源和命令替换了 WebGL API。

• 资源：是 GPU 驻留对象的句柄，例如:纹理、FBO 或缓冲区。
• 命令：是执行某些绘制调用所需的 WebGL 状态的完整表示。

要定义命令，需要为对象指定静态和动态数据的混合。 完成此操作后，regl 会获取此描述，然后将其编译为优化的 JavaScript 代码。

regl 具有以下特点：

• 界面简洁并强调关注点分离，删除共享状态有助于本地化代码的效果和交互，使其更容易推理。
• regl 拥有超过 30,000 个单元测试和 95% 以上的代码覆盖率。 在开发模式下，regl 对所有输入数据执行强大的验证和健全性检查，以帮助更快地捕获错误。
• regl 使用动态代码生成和部分执行来消除几乎所有开销。
• regl 只是包装了 WebGL，不是游戏引擎，对场景图或向量数学库同样支持。 WebGL 中的任何功能都可以访问，包括高级扩展，例如多个渲染目标或实例化。
• regl 非常重视接口兼容性和语义版本控制，使其非常适合长期存在的应用程序。

目前 regl 在 Github 上通过 MIT 协议开源，有超过 5k 的 star、20k 的项目依赖量、贡献者 50+，妥妥的前端优质开源项目。

twgl.js

WebGL 有非常冗长的 API，包括：设置着色器、缓冲区、属性和 uniform 需要大量代码。 WebGL 中的一个简单的光照立方体可以轻松达到对 WebGL 进行 60 多个调用。

TWGL 试图通过提供一些辅助函数来使 WebGL 变得更简单、简洁。 TWGL 并不是试图帮助解决管理着色器和编写 GLSL 的复杂性，也不非像 Three.js 的 3D 库。

TWGL 可以被认为是 TDL 的继承者， TDL 创建了几个包装 WebGL 的类，而 TWGL 则尝试不包装任何内容，却支持手动创建几乎所有 TWGL 数据结构。

twgl.js 核心只有以下几个主要功能：

• twgl.createProgramInfo ：编译着色器并为属性和 uniform 创建设置器
• twgl.createBufferInfoFromArrays： 创建缓冲区和属性设置
• twgl.setBuffersAndAttributes： 绑定缓冲区并设置属性
• twgl.setUniforms ：设置 uniform
• twgl.createTextures： 创建各种类型的纹理
• twgl.createFramebufferInfo 创建帧缓冲区和附件。

当然，如果需要的话，还有一些额外的帮助程序和底层函数，但这 6 个函数是 TWGL 的核心。

目前 twgl.js 在 Github 上通过 MIT 协议开源，有超过 2.5k 的 star、1.3k 的项目依赖量、贡献者 30+，是一个值得关注的前端优质开源项目。

OGL

OGL 是一个小型、有效的 WebGL 库，面向喜欢最少抽象层并对创建自己的着色器感兴趣的开发人员。

该 API 采用零依赖的 es6 模块编写，与 ThreeJS 有许多相似之处，但它与 WebGL 紧密耦合且功能少得多。

在其设计中，OGL 做了最少的必要抽象，因此开发人员仍然可以放心地将其与本机 WebGL 命令结合使用。保持较底层的抽象级别有助于使库更易于理解和扩展，并且使其作为 WebGL 学习资源更加实用。

为了保持 OGL 简洁和模块化，该库分为三个部分：Math、Core 和 Extras。Math 组件是 gl-matrix 的扩展，提供可实例化的类，为每个模块类型扩展 Array， gzip 压缩后 8kb，没有依赖关系，可以单独使用。

Core 由以下部分组成：

• Geometry.js
• Program.js
• Renderer.js
• Camera.js
• Transform.js
• Mesh.js
• Texture.js
• RenderTarget.js

任何 Extras 抽象层都将作为附加项包含在内，而不是核心的一部分，以减少膨胀。 它们提供了广泛的功能，从简单到高级。

目前 OGL 在 Github 上通过 MIT 协议开源，有超过 3.3k 的 star、1k 的项目依赖量、贡献者 30+，是一个值得关注的前端优质开源项目。

lightgl.js

lightgl.js 使快速构建 WebGL 应用程序变得更加容易。

lightgl.js 的级别比许多其他 WebGL 库要低，虽然它不提供场景图，但它重新实现了 OpenGL 的模型视图/投影矩阵堆栈以提供类似的功能。 它还重新引入了 GLSL 中的一些内置 uniform（例如 gl_Vertex 和 gl_ModelViewProjectionMatrix）和 OpenGL 的即时模式。

目前 lightgl.js 在 Github 上通过 MIT 协议开源，有超过 1.5k 的 star、1k 的项目依赖量、是一个值得关注的前端优质开源项目。

SwissGL

SwissGL 是 WebGL2 JS API 之上的简约包装器，旨在减少进行 GPGPU 式程序可视化或模拟时管理 GLSL 着色器、纹理和帧缓冲区所需的样板代码量。 截至目前，该库由一个独立的 <1000 loc .js 文件组成。

SwissGL 不是 Google 官方支持的产品，只是一个早期实验，不完整且不稳定。

目前 SwissGL 在 Github 上通过 MIT 协议开源，有超过 1.1k 的 star、是一个值得关注的前端优质开源项目。

picogl.js

PicoGL.js 是一个最小的 WebGL 2 渲染库，适用于了解 WebGL 2 渲染管道并希望使用它的开发人员，同时具有非常简单的 API。

PicoGL.js 的典型用法将涉及创建程序、顶点缓冲区、顶点数组、统一缓冲区、帧缓冲区、纹理、变换反馈，以及将它们组合到绘制调用中。

需要注意的是，PicoGL.js 不是场景图形库。 没有对象、层次结构、变换、材质等，它的设计只是为了使 GPU 状态的管理更加方便，概念模型相当直接地映射到直接使用 WebGL 2 API 编写时所处理的构造。 唯一的高级构造是绘制调用，管理相关的较低级构造集。

目前 PicoGL.js 在 Github 上通过 MIT 协议开源，有超过 0.9k 的 star、是一个值得关注的前端开源项目。

litegl.js

Litegl.js 是一个包装 WebGL 的库，通过创建用于管理不同项目（如缓冲区、网格、纹理、着色器和任何 WebGL 应用程序的其他常见方面）的类，使其更加用户友好。

Litegl.js 有助于简化 WebGL 的使用，无需处理所有底层调用，但又不会失去任何自由。Litegl.js 的典型特点包括：

• 轻松创建上下文，支持：网格和缓冲区、纹理、着色器
• 一些基本的原始形状（平面、立方体、球体、圆柱体、半球体）。 OBJ 解析器和编码器（易于添加新的）
• 来自 URL 的图像和网格的加载器（在加载之前使用占位符）
• 一切都使用类型化数组（所有操作都使用 glMatrix）
• 不产生垃圾（重复使用容器）
• 基本光线追踪（适用于光线球体、光线 aabb、光线平面和光线网格）
• 活动系统，鼠标、键盘和游戏手柄的跨浏览器输入处理
• 支持多个 WebGL 上下文、支持 WebGL1 和 WebGL2

目前 Litegl.js 在 Github 上通过 MIT 协议开源，有超过 0.4k 的 star、是一个值得关注的前端开源项目。

参考资料

https://github.com/regl-project/regl

https://github.com/greggman/twgl.js

https://github.com/oframe/ogl

https://github.com/evanw/lightgl.js

https://github.com/pixijs/pixijs

https://github.com/playcanvas/engine

https://github.com/tsherif/picogl.js

https://github.com/google/swissgl

https://github.com/jagenjo/litegl.js

https://pjbelo.medium.com/introduction-to-3d-in-html5-with-webgl-and-three-js-38565aa689c

https://aralroca.com/blog/first-steps-in-webgl