OGL——轻量级 WebGL 新秀，为何能成为 Three.js 的“极简派”替代？

一、什么是 OGL？

OGL（[oframe/ogl]）是一个仅用 ES Module 编写、零依赖的 WebGL 库，主打“最小抽象层”。

它保留了 Three.js 在 Renderer / Camera / Mesh / Geometry / Program 等 API 上的友好命名，却把庞杂的场景管理、材质系统统统留给开发者自己实现，从而把整体体积压缩到 Core 8 kb + Math 6 kb + Extras 15 kb ≈ 29 kb（min+gzip）。截至 2025 年 5 月，GitHub 已收获 4 k+ star。

地址：https://github.com/oframe/ogl (opens in a new tab)

二、为什么选择 OGL？

1. 极小体积可随手引入
   与三方 CDN/ImportMap 搭配即可上线，配合 tree‑shaking 更可把包体压到个位数 KB。(GitHub (opens in a new tab))

2. 低抽象，保留原生 WebGL 的可控性
   所有核心类都薄如纸张；想调用 gl.enable(DEPTH_TEST)？直接写就行。比起“黑盒”式引擎，这种设计更方便 Debug 与性能微调。(GitHub (opens in a new tab))

3. 学 WebGL 的最佳教材
   OGL 仅约 29KB，结构清晰、逻辑直白，源码几百行就能看懂；而 Three.js 打包后近 700KB，模块多、封装重，学习成本更高。

三、OGL vs Three.js对比

简而言之：Three.js 适合“一站式”3D 项目；OGL 则是“我只想要一块 WebGL 原料，剩下自己调味”的极客选择。

四、灵感案例速览

我们来看下使用ogl实现的一些网站案例

• Oscar Pico 作品集 2024：Nuxt3 + OGL 打造的沉浸式滚动作品集，WebGL 特效全部自行编写着色器。

• https://www.oscarpico.es/project-page/viadomo-deco (opens in a new tab)

• 

• Infinite Circular Gallery：Codrops 教程，演示可拖拽、可无限滚动的环形相册，所有几何与流体变形均由 OGL Shader 驱动。

• https://tympanus.net/codrops/2021/02/23/creating-an-infinite-circular-gallery-using-webgl-with-ogl-and-glsl-shaders (opens in a new tab)

• Bizarro Portfolio 2024：采用 OGL 实现鼠标流体涟漪与页面过渡动画。

• https://github.com/bizarro/2024/ (opens in a new tab)

五、五分钟上手：从零到旋转立方体

代码动手前先说原理：

1. Renderer 封装了 WebGL 上下文和自动更新视口；

2. Camera 只做投影矩阵的计算，没有任何后期管线；

3. Program 就是薄包装的 Shader；Mesh 把 Geometry 和 Program 组合起来；

4. 没有 “Scene” 概念，顶层用 Transform 管理层级关系；

5. 一切 Uniform 更新、动画循环都由你自己控制——这正是 OGL 的“可控性”所在。

import { Renderer, Camera, Transform, Box, Program, Mesh } from 'ogl';
 
// ① 创建渲染器并挂载 <canvas>
const renderer = new Renderer();
const gl = renderer.gl;
document.body.appendChild(gl.canvas);
 
// ② 相机与窗口自适应
const camera = new Camera(gl);
camera.position.z = 5;
function resize() {
  renderer.setSize(window.innerWidth, window.innerHeight);
  camera.perspective({ aspect: gl.canvas.width / gl.canvas.height });
}
window.addEventListener('resize', resize);
resize();
 
// ③ 创建场景根节点
const scene = new Transform();
 
// ④ 立方体几何 & 着色器
const geometry = new Box(gl);
const program = new Program(gl, {
  vertex: /* glsl */`
    attribute vec3 position;
    uniform mat4 modelViewMatrix, projectionMatrix;
    void main() {
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragment: /* glsl */`
    void main() { gl_FragColor = vec4(1.0); }
  `
});
const cube = new Mesh(gl, { geometry, program });
cube.setParent(scene);
 
// ⑤ 渲染循环
requestAnimationFrame(function update(t) {
  requestAnimationFrame(update);
  cube.rotation.y -= 0.04;
  cube.rotation.x += 0.03;
  renderer.render({ scene, camera });
});

六、适用场景与推荐组合

七、写在最后

如果你厌倦了在 Three.js 里“削足适履”地删 Loader、删材质，只为追求更小首屏；或者你想要在 Shader 里自由驰骋、不被庞大框架束缚，那么 OGL 正是那个让你“回归 WebGL 本真”的小而美选择。下班后抽半小时，复制一段官方 Demo，改改着色器颜色，你会发现 WebGL 原来也可以如此优雅纯粹——而这，正是极简主义的魅力所在。