嫌 Three.js 厚？4.7 千星的 OGL 全套只有 29kb

用 Three.js 的人多了，总有那么一批人开始嫌它厚：我只想写个着色器，为什么要在场景图、加载器、材质系统里绕一圈？OGL 就是为这群人准备的，官方自我介绍只有三个词，Minimal WebGL library。仓库 4.7 千星，npm 最新版 1.0.11，ES6 模块、零依赖，README 里那句定位很诚实：给喜欢少量抽象、想自己写着色器的开发者。它是本系列第 11 个工具。

一、全套家当只有 29kb

README 给了个体积表：核心 8kb、数学库 6kb、附加组件 15kb，全加起来 minzip 后 29kb，tree-shaking 之后还能更小。对比动辄几百 kb 的全功能 3D 引擎，这是「薄」的第一层含义。

API 和 Three.js 刻意保持相似，迁移心智成本不高，但每个概念都更贴 WebGL 原生。渲染一个立方体大致长这样：

import { Renderer, Camera, Transform, Box, Program, Mesh } from 'ogl';

const renderer = new Renderer();
const gl = renderer.gl;
const camera = new Camera(gl);
camera.position.z = 5;
const scene = new Transform();
const mesh = new Mesh(gl, {
  geometry: new Box(gl),
  program: new Program(gl, { vertex, fragment }),
});

抽象薄到什么程度？README 明说可以和原生 WebGL 命令混着用，库只做最必要的封装。

二、为手写着色器而生

OGL 的主战场是着色器：几何体给你备好，材质层的 Program 直接收 vertex 和 fragment 两段 GLSL，写什么渲染什么，中间没有魔法。官方 examples 页面列表相当全，而且源码里带注释，README 自己都说它是实用的 WebGL 学习资源，事实上不少人的入门路径就是照着 OGL 的 examples 读 WebGL。

对 agent 也友好：概念面小，Renderer、Camera、Transform、Mesh、Program 五六个类撑起全部，生成的代码不需要理解庞大的材质系统就能跑。

三、一个协议细节和分工建议

有个合规细节值得提：仓库里没有标准的 LICENSE 文件，GitHub 的协议识别是空的，npm 元数据里标的是 Unlicense，即公有领域声明。日常引用问题不大，但真要放进商业产品，建议先到仓库确认一下再决定。

放进系列分工：Three.js 是全功能选项，生态厚、资料多；OGL 适合特效 hero 片段、着色器实验和对体积敏感的落地页与广告页，29kb 的成本几乎可以忽略。它上一次提交停在 2025 年春天，这在这个体量的库里属于「稳定收工」，用起来不必担心，但也别指望大版本迭代。

下一篇是 tsParticles，粒子效果的一站式方案。