oframe/ogl

★ 4,504JavaScriptAudience · developerComplexity · 3/5LicenseSetup · easy

Mindmap

mindmap
  root((ogl))
    What It Does
      WebGL abstraction
      3D in the browser
    Modules
      Math library
      Core rendering
      Extras
    Design Goals
      Zero dependencies
      Minimal abstraction
      GLSL friendly
    Use Cases
      Custom shaders
      Generative art
      Learning WebGL

mindmap root((ogl)) What It Does WebGL abstraction 3D in the browser Modules Math library Core rendering Extras Design Goals Zero dependencies Minimal abstraction GLSL friendly Use Cases Custom shaders Generative art Learning WebGL

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Render an interactive 3D scene in a browser using custom GLSL shaders without learning a heavy framework like Three.js.

USE CASE 2

Build a full-screen generative art or visual effect using a fragment shader, skipping the scene graph entirely.

USE CASE 3

Learn WebGL fundamentals by studying OGL's annotated examples and source code while building something real.

Tech stack

JavaScriptWebGLGLSL

Getting it running

Difficulty · easy Time to first run · 30min

Requires knowledge of GLSL shader programming, OGL does not abstract away the GPU programming layer.

Released into the public domain, use for any purpose with no restrictions whatsoever.

In plain English

OGL is a minimal WebGL library for JavaScript developers who want to write their own shaders with few abstractions between their code and the browser's graphics layer. WebGL is the browser API for drawing 3D graphics on a webpage. OGL wraps just enough of that API to make it usable without burying the developer in framework-level decisions. The library is split into three parts: Math (matrix and vector math, about 6KB compressed), Core (the fundamental building blocks like geometry, cameras, and meshes, about 8KB compressed), and Extras (additional features that go beyond the core, about 15KB compressed). The total minified-and-gzipped size is roughly 29KB, and with tree-shaking during a build step the final bundle gets much smaller. There are zero external dependencies. Installing is a standard npm or yarn install. You can also load it from a CDN such as jsDelivr, unpkg, or Skypack. The API shares many similarities with ThreeJS, but OGL is more tightly coupled to raw WebGL, which means you can freely mix OGL code with native WebGL commands without the library getting in the way. The design philosophy is to do the minimum abstraction necessary. A basic example from the README renders a spinning white cube using a renderer, a camera, a box geometry, a shader program written in GLSL, and a mesh. For simpler uses like full-screen shader effects, you can skip the camera and scene graph entirely. The README includes both examples with working code. The examples on the project's website are intended as the primary learning resource, with comments in the source explaining each technique. Because the library stays close to the underlying WebGL layer, it also works as a practical way to learn WebGL while building something real. The code is released into the public domain with no restrictions on use or modification.

Copy-paste prompts

Prompt 1

Using OGL, write a minimal WebGL sketch that renders a spinning 3D cube with a custom vertex and fragment shader, show the full HTML and JavaScript.

Prompt 2

How do I create a full-screen fragment shader effect in OGL without setting up a camera or a scene graph?

Prompt 3

Show me how to mix raw WebGL draw calls alongside OGL's mesh rendering in the same canvas, where do the two layers meet?

Prompt 4

Using OGL, load a geometry, apply a custom GLSL material, and animate it with a requestAnimationFrame loop, show the minimal setup code.

Prompt 5

How do I use OGL via a CDN import in a plain HTML file without a build step to render a simple triangle with a color gradient shader?

Open on GitHub → Explain another repo

← oframe on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.