Glint3D

A zero-dependency WebGL2 library for real-time 3D graphics in the browser.
PBR materials · soft shadows · image-based lighting · instancing · picking · custom shaders

---

Glint3D is a compact, readable 3D engine written from scratch in modern JavaScript (ES modules). It talks to WebGL2 directly.

<script src="dist/glint3d.js"></script>
<script>
  const app = new Glint.App({ container: document.body });
  const cube = new Glint.Mesh(
    new Glint.BoxGeometry(),
    new Glint.StandardMaterial({ color: 0xff8a3d, roughness: 0.35 })
  );
  const sun = new Glint.DirectionalLight(0xffffff, 2);
  app.scene.add(cube, sun, new Glint.HemisphereLight());
  app.on('update', (dt) => (cube.rotation.y += dt));
  app.start();
</script>

Features

Area	What you get
Math	Vec2/3/4, Mat3/4, Quaternion, Euler, Color (sRGB-aware), Box3, Sphere, Ray, Frustum
Scene graph	Object3D hierarchy, Group, Mesh, InstancedMesh, Scene, linear & exponential fog
Cameras	PerspectiveCamera, OrthographicCamera, project / unproject
Geometry	Box, Sphere, Icosphere, Plane, Cylinder, Cone, Torus, TorusKnot; merge, transform, normals, bounds, OBJ loader
Materials	BasicMaterial (unlit), PhongMaterial, StandardMaterial (metal/rough PBR, clear-coat, normal/AO/emissive/ORM maps), ShaderMaterial (your GLSL)
Lights	Ambient, Hemisphere, Directional (with shadow mapping), Point, Spot
Rendering	Linear-space pipeline, ACES / Reinhard tone mapping, GGX specular, image-based lighting from cube maps, procedural sky generator, PCF shadows, frustum culling, opaque/transparent sorting, blending modes, wireframe, GPU instancing
Interaction	OrbitControls (mouse, touch, pinch), triangle-accurate Raycaster, Tween + easing
DX	App helper (renderer + loop + resize + controls), helpful shader error logs, 38 unit tests, no build step needed

Install

npm install glint3d          # once published

or clone this repository and use the pre-built bundle in dist/ (glint3d.js is a plain <script> build exposing the Glint global), or import the sources directly:

import * as Glint from './src/index.js';       // ES modules, no bundler needed

Run the examples

npm install        # installs esbuild (dev only)
npm run build      # creates dist/
npm run serve      # open http://localhost:8080/examples/

Example	Shows
01-hello-cube	Minimal program
02-pbr-materials	Roughness/metalness grid, clear-coat, IBL
03-shadows-lights	Sun shadows, point & spot lights, fog
04-instancing	12,000 animated cubes in one draw call
05-custom-shader	ShaderMaterial with GLSL
06-picking	Raycasting and tweens
showcase	Everything together

Documentation

Start with docs/getting-started.md, then:

• Concepts — coordinate system & conventions, color management, lighting units
• Guides — PBR & environments, shadows, custom shaders, performance, architecture, FAQ & troubleshooting
• API reference — math, core & scene graph, cameras, geometry, materials, lights, textures, renderer, controls, interaction & animation, loaders & helpers, App
• Roadmap

Browser support

Any browser with WebGL2: Chrome/Edge 56+, Firefox 51+, Safari 15+, and current iOS/Android browsers.

Project layout

src/            library source (ES modules)
  math/ core/ cameras/ geometry/ materials/ textures/ lights/
  renderer/     WebGL2 renderer, shaders, program wrapper
  controls/ interaction/ animation/ loaders/ helpers/
dist/           bundles (IIFE, minified IIFE, ESM, CJS)
examples/       runnable demos
test/           node:test unit + renderer smoke tests
docs/           guides and API reference
scripts/        build, dev server, showcase packer

Testing

npm test

Math, scene graph, geometry (including a winding-vs-normal check for every primitive), raycasting, loaders, tweens and the renderer's JS paths (through a fake WebGL2 context) are covered. Shaders were validated with glslangValidator for each #define permutation. Visual output should always be checked in a real browser.

License

MIT