Three.js is a mature, production-grade JavaScript 3D library providing WebGL and WebGPU renderers, a comprehensive scene graph, and extensive tooling for 3D web applications. The codebase demonstrates exceptional architecture with a clean separation between core rendering (src/), the new node-based shader system TSL (Three.js Shading Language), and a vast ecosystem of addons in examples/jsm/. The library supports multiple renderers (WebGLRenderer, WebGPURenderer, CSS2DRenderer, CSS3DRenderer, SVGRenderer), a full animation system, physics integrations (Ammo, Rapier, Jolt), WebXR for AR/VR, and loaders for 30+ formats (GLTF, FBX, USD, OBJ, etc.). The TSL node system is a standout achievement - a compiler-like architecture that transpiles shader graphs to GLSL/WGSL with automatic differentiation, lighting models, and post-processing. The WebGPU backend shows deep GPU API expertise with pipeline management, bind groups, and descriptor reuse. Code quality is consistently high with strong typing patterns, comprehensive unit tests (200+ test files), and modern ES module architecture. The project is actively maintained with recent commits, semantic versioning, and CI/CD pipelines.
PixiJS is a mature 2D rendering library for the web (npm package pixi.js). Its production purpose is to let developers build interactive scenes, games, visualizations, and creative applications using an object-oriented scene graph and render them through WebGL, WebGPU, or Canvas backends. The core runtime is a modular TypeScript library, not a monolith: users construct Containers, Sprites, Graphics, Text, Meshes, and ParticleContainers, then a renderer collects renderables into instruction sets, batches draw calls through backend-specific adaptors and pipes, and manages GPU resources such as textures, buffers, uniform groups, and render targets via pooling and garbage-collected caches. The repository also includes an asset subsystem with loader parsers, a resolver, a cache, and format detection, plus an extension registry that allows custom systems, loaders, pipes, filters, and backend adaptors to be registered cleanly. Primary entry points are src/index.ts, the Application class with initialization and plugins (ResizePlugin, TickerPlugin, CullerPlugin), autoDetectRenderer, and the Assets API. The library depends on browser platform capabilities (Canvas 2D, WebGL/WebGPU, OffscreenCanvas, Web Workers, fetch) and small npm packages; compressed-texture support shells out to Basis/KTX transcoders. Data flows are asset ingestion (fetch/parse/cache) and GPU command generation; there is no server-side pipeline or ETL component. The codebase shows strong engineering practice: typed extension points, backend abstraction layers, performance-conscious allocation management, dual GLSL/WGSL shader support, and an extensive test suite including snapshot-based visual regression tests across WebGL1, WebGL2, WebGPU, and Canvas. Some deprecation shims and experimental features exist, but the project is actively maintained with recent commits, release automation, and active issue triage.
React Three Fiber (R3F) is a React renderer for three.js, enabling declarative construction of 3D scenes using JSX. It provides a `<Canvas>` component that bootstraps a WebGL renderer, a custom React reconciler that bridges React's component lifecycle with three.js objects, and a rich set of hooks (`useFrame`, `useThree`, `useLoader`) for imperative control. The architecture follows a monorepo pattern with three packages: the core fiber library (web and React Native), a test renderer for unit testing 3D components, and an ESLint plugin enforcing performance rules. The core library abstracts WebGL details, handles pointer events with raycasting, manages the render loop, and supports advanced features like portals, Suspense for async assets, and context bridging. It is a foundational tool for building interactive 3D applications in the browser or on mobile via Expo. The codebase demonstrates high craftsmanship with clean abstractions, extensive test coverage, and a modular design that separates concerns across reconciler, event system, state management, and rendering utilities.
react-bits is a comprehensive open-source library of animated, interactive React components, accompanied by a full documentation and demo site. The repository contains hundreds of self-contained components spanning text animations, background effects, UI micro-interactions, and complete widgets, each offered in four variants (JavaScript/TypeScript × CSS/Tailwind) and distributed via a custom jsrepo registry that allows direct code copying or CLI installation (shadcn/jsrepo). The architecture is a hybrid of a component distribution platform and a marketing/demo site: `src/content`, `src/tailwind`, `src/ts-default`, and `src/ts-tailwind` contain the actual component sources, while `src/demo` and `src/components` host a Chakra UI–based playground with live prop editing, code previews, prop tables, and dependency listings. The project heavily leverages modern animation and WebGL libraries — GSAP, Framer Motion (motion/react), OGL, Three.js, and Matter.js — with many components implementing custom shaders, physics simulations, and gesture handling. While the codebase exhibits strong craftsmanship in individual components (clean hooks, accessibility attributes, cleanup of WebGL contexts, reduced-motion support), it suffers from notable duplication across the four variant directories, which risks behavioral drift and increases maintenance burden. Despite this, the library is actively maintained, well-documented, and genuinely reusable, making it a valuable resource for front-end developers seeking production-ready animated UI patterns.
p5.js is a JavaScript library for creative coding, providing a comprehensive API for 2D/3D graphics, animation, interaction, and data visualization. It is designed for artists, designers, and educators, with a focus on accessibility and beginner-friendly error messages. The architecture is modular: a core module registers addons for color, shape, WebGL, DOM, I/O, math, and more. It supports multiple renderers (2D canvas, WebGL 3D, experimental WebGPU) and includes a sophisticated shader compilation pipeline (strands) that transpiles a p5.js-like DSL to GLSL/WGSL. The codebase is well-structured with extensive unit and visual regression tests, and it follows a consistent addon registration pattern for extensibility.
Pannellum is a lightweight, free, and open source panorama viewer for the web. Built using HTML5, CSS3, JavaScript, and WebGL, it provides plugin-free display of panoramic images in equirectangular, cubemap, and multiresolution formats. The viewer supports hot spots for linking scenes or displaying information, enabling virtual tours. It includes a comprehensive API for programmatic control, device orientation support for mobile devices, fullscreen capability, and responsive touch and mouse controls. The architecture separates core WebGL rendering logic (in libpannellum.js) from viewer UI and API logic (in pannellum.js), with fallback to CSS 3D transforms when WebGL is unavailable. A utility script (generate.py) creates multiresolution tile sets for efficient streaming of large panoramas.
A polished documentation website for Ink, a Layer 2 blockchain (OP Stack) built by Kraken. The site is implemented with Next.js 15 and Nextra 3 using the Pages Router, with MDX-authored content covering network setup, contract deployment, bridges, faucets, and ecosystem tools. It features a highly custom UI: a WebGL interactive ink animation on the homepage, a theme toggle using View Transitions API, a full-text search with a custom modal, and a 'copy page as Markdown' feature designed for LLM consumption. The codebase is meticulously crafted with extensive comments explaining design rationales (e.g., Tailwind token mapping, font loading, shader adaptations). Build tooling includes ESLint, Prettier, CSpell, remark linting, and a GitHub Actions CI/CD pipeline with Vercel deployments. No tests are present, but the code is clean, well-organized, and demonstrates strong frontend engineering skills.
react-map-gl is a TypeScript React component library that wraps Mapbox GL JS and MapLibre GL JS behind a declarative, reactive API. It does not render maps itself; instead it owns the lifecycle of native map instances and exposes components (Map, Marker, Popup, Source, Layer), controls such as NavigationControl and GeolocateControl, and hooks (useMap, useControl, MapProvider) that synchronize React props with the imperative map engine. The package is structured as a monorepo: a main aggregator package re-exports two per-backend packages, @vis.gl/react-mapbox and @vis.gl/react-maplibre, plus a legacy Mapbox adapter. The current line is an alpha rewrite (v8.1.0-alpha.2) focused on performance, full typing, and 1:1 prop mapping with the native map libraries.
glTF-Transform is a comprehensive SDK and CLI tool for processing, optimizing, and inspecting glTF/GLB 3D assets. It provides a rich property graph model (Document) for reading, editing, and writing glTF files, with full support for the glTF 2.0 specification and dozens of official extensions (KHR_materials_*, EXT_meshopt_compression, etc.). The library includes a broad set of transforms (compression, quantization, deduplication, welding, palette optimization, texture compression, etc.) that can be composed into custom pipelines. A command-line interface wraps all transforms for batch processing, and a viewer package provides real-time Three.js integration. Built as a monorepo with packages for core, extensions, functions, CLI, view, and docs, it demonstrates strong software engineering practices: property-graph architecture, extension system, observer patterns, and comprehensive unit/integration tests. Designed for both scripting in Node.js/Deno/Web and direct use from the command line.
Phaser is a client-side 2D game engine/framework distributed as a JavaScript library. In production it provides the runtime systems game developers assemble into browser games: scene lifecycle management, game-object factories and component mixins, display lists, input processing (pointer/touch/keyboard/gamepad), asset loading/caching, tweens, animation state machines, tilemap parsing/rendering, Arcade and Matter.js physics, audio, and a dual Canvas/WebGL rendering pipeline. The engine is event-driven: core, scene, camera, physics, loader, and sound subsystems communicate through named event constants, and game objects expose component-based behavior via mixed-in plain objects. Entry points include src/phaser.js (UMD bundle), src/phaser-esm.js (ESM), src/phaser-arcade-physics.js, and src/phaser-no-physics.js build variants; package.json exposes the main library and TypeScript declarations. Architecture is modular CommonJS with heavy JSDoc. The main data flow: developer configures Phaser.Game; Config boots core systems, SceneManager instantiates scenes and injects plugins; scenes create GameObjects through factory/creator registries; game objects are added to DisplayList/UpdateList; each frame TimeStep emits STEP, camera systems transform, renderers submit object batches to WebGL drawing contexts or Canvas contexts; loader uses XHR/fetch in browser to populate texture/audio/cache managers. Runtime dependency is minimal (eventemitter3); WebGL, Canvas, WebAudio, and device APIs are browser-native; Matter.js is vendored inside src/physics/matter-js. There is no data/research content; type definitions and constants are not analytical models. The codebase is large but well-modularized: many small single-purpose utility modules (math, geometry, color, arrays) are safely reusable outside Phaser. The most notable reusable pieces are polygon triangulation, the R-tree spatial index, and seeded RNG. Maintenance is active; however the repository carries legacy API vestiges (e.g. deprecated aliases, vendor-prefixed browser checks, mixed Jasmine/Vitest test conventions) and a renderer transition from older Canvas batching to the newer WebGL render-node pipeline, so technical drift is moderate despite recent commits.
Two.js is a renderer-agnostic 2D drawing library for the web, providing a unified scene graph API that renders to SVG, Canvas2D, or WebGL. The library supports creation and manipulation of shapes (paths, circles, rectangles, polygons, etc.), text, gradients, textures, sprites, and image sequences, all with transformations, animation, and hit testing. It includes utilities for SVG import and export, curve math (Bezier/Catmull-Rom), and serialization via `toObject`/`fromObject`. The architecture is modular: a core `Two` class manages the scene and animation loop, with a hierarchy of elements (Element → Shape → Path/Text/Points), a Group container for scene graph nesting, and separate renderer implementations for each target. Key entry points are the `Two` constructor, factory methods (`makeCircle`, `makePath`, etc.), `update()`, `play()`, and `pause()`. The library has no external runtime dependencies beyond standard browser APIs, though optional `node-canvas` enables headless rendering. Notably, the codebase demonstrates high craftsmanship with a flag-based dirty tracking system for efficient updates, an event system with cross-object observation, and a collection pattern with mutation events. However, it shows maintenance drift through some outdated development dependencies (e.g., `babel-eslint`, `underscore`) and manually maintained TypeScript declarations that may lag behind the source.
Troika is a monorepo for a collection of JavaScript libraries focused on building interactive 3D/2D data visualizations and immersive WebXR experiences using Three.js. The core framework (troika-core) provides a declarative facade system with lifecycle hooks, scene descriptors, event handling, and transitions, enabling developers to describe complex scenes with simple property setters. Higher-level packages (troika-3d, troika-3d-ui, troika-xr) extend this with 3D objects, flexbox-based UI blocks, and XR controller/teleport support. Standalone utilities like troika-three-text and troika-three-utils offer high-quality SDF text rendering and generic shader derivation, while troika-worker-utils offloads heavy computation (e.g., font parsing, layout) to web workers. The repository also includes three-instanced-uniforms-mesh for per-instance uniforms, troika-animation for tweening, and a bespoke flex layout engine built on Yoga. Though primarily an application framework, several packages are reusable libraries for any Three.js project, and the examples showcase data-driven scenes (e.g., globe connections, city grids, animated curves). Architecture is modular (monorepo with Lerna) with peer dependencies on Three.js and optional React integration.
This repository is the @playcanvas/supersplat-viewer npm package, an embeddable 3D Gaussian splatting viewer built on the PlayCanvas engine. It bootstraps a full web application around a PlayCanvas AppBase: createViewer(options) mounts a canvas and UI, loads .gsplat/.ply content plus optional skybox and voxel/mesh collision assets, and returns a ViewerHandle for capture, seeking, camera control, XR, and teardown. The default rendering path is the engine's sorted gsplat renderer; an opt-in WebGPU stochastic renderer provides unsorted splat projection, temporal anti-aliasing, occlusion culling, and depth-based picking. The repo is an application, not a data/research pipeline, though it contains research-grade rendering experiments and a dedicated benchmark harness.
SuperSplat is a browser-based 3D Gaussian Splatting editor built with the PlayCanvas engine and PCUI framework. It provides a full-featured editing environment for loading, inspecting, selecting, transforming, color-grading, and exporting Gaussian splat data (PLY, SOG, SPZ, Splat formats). The application supports real-time GPU-accelerated data processing (histograms, bounding boxes, picking), camera animation with keyframe tracks and spline interpolation, video export via WebCodecs, and publishing to the PlayCanvas platform. Its architecture is event-driven with a centralized command queue for serializing async GPU work, an undo/redo system, and a modular tool system covering selection (rect, lasso, polygon, brush, flood, eyedropper, sphere, box) and transformation (move, rotate, scale, measure, orient). The UI is fully localized into 9 languages and includes a service worker for offline caching.
Inspira UI is a curated collection of beautifully designed, copy-paste-ready Vue/Nuxt UI components, inspired by Aceternity UI and Magic UI. The repository serves both as a component library and a documentation/demo site built with Nuxt 4, Tailwind CSS v4, and a rich ecosystem of animation and WebGL libraries (motion-v, Three.js, OGL, GSAP). The architecture is a standard Nuxt application with i18n (English, French, Chinese), content management via @nuxt/content, and a custom registry system that generates component metadata for CLI installation. Key entry points include the Nuxt configuration (nuxt.config.ts), the app configuration (app.config.ts) for UI theming, and the registry build script (scripts/build-registry.mts) that crawls component files and produces Zod-validated schemas. The primary data flow is static: markdown documentation files in content/ are rendered alongside live interactive playgrounds that allow users to tweak component props via DialKit config panels. External dependencies are heavy but modern, including motion-v for spring animations, Three.js/OGL for WebGL effects, canvas-confetti for particle effects, and @vueuse/core for utilities. The codebase demonstrates consistent patterns (barrel exports, cn() class merging, shader-based backgrounds, context injection for compound components) and a strong emphasis on visual polish and developer experience.
butterchurn is a browser-based, real-time music visualizer that faithfully reimplements the classic MilkDrop visualizer using WebGL2. It consumes audio from the Web Audio API, runs FFT analysis to derive frequency/amplitude data, and drives a shader-based render pipeline from JSON presets that encode MilkDrop-style equations. The core library exposes a minimal `createVisualizer()` entry point, after which consumers load a preset and call `render()` with audio level data each animation frame. The library supports two equation execution paths: a JS-based expression runner and a WebAssembly/AssemblyScript-based EEL runner, with a custom Rollup plugin that compiles AssemblyScript to base64-encoded WASM at build time. It also includes deterministic seeded RNG for reproducible rendering, which is used by its visual regression test suite to compare JS and WASM paths pixel-for-pixel across a curated set of presets.
Fabric.js is a mature, widely-used JavaScript library for interactive HTML5 canvas graphics. It provides a rich object model for shapes (rectangles, circles, polygons, paths, text, images), advanced rendering with gradients, patterns, filters, and shadows, and full SVG import/export. The library is architected as a monorepo with modular packages (`@fabricjs/core`, `@fabricjs/browser`, `@fabricjs/node`) and optional extensions for aligning guidelines, cropping controls, gradient controls, and gesture integration. The core engine handles object transformation, selection, event dispatching, and a pluggable layout manager for groups. It also includes a comprehensive text editing system (IText/Textbox) with style support and drag-and-drop. In production, Fabric.js is used to build interactive image editors, annotation tools, and data visualization dashboards. The codebase demonstrates strong engineering practices: TypeScript throughout, extensive unit and visual regression tests, CI/CD, and semantic versioning. However, some legacy code remains (e.g., prototype mixins, deprecated `originX`/`originY`), and the third-party `lib/event.js` gesture library is outdated. Overall, Fabric.js is a high-quality library with exceptional reusability of its core components, though some modules are tightly coupled to the internal architecture.
A monorepo providing `@pixiv/three-vrm`, a library for loading, controlling, and rendering VRM (Virtual Reality Model) avatars in three.js. It implements VRM 1.0 and partial VRM 0.0 specifications, handling humanoid bone mapping, facial expressions, eye gaze control (lookAt), first-person mesh culling, spring bone physics simulation, node constraints (aim, roll, rotation), and MToon toon material rendering. The library is structured as a collection of GLTFLoader plugins that parse VRM extensions from `.vrm` files. Core modules include `VRMLoaderPlugin` (orchestrating sub-plugins), `VRMCore` (humanoid, expressions, lookAt, firstPerson), `VRMSpringBoneManager` (verlet physics), `VRMNodeConstraintManager` (topological sort for constraints), and `MToonMaterial`/`MToonNodeMaterial` (custom shader/material for toon rendering). Both WebGL and experimental WebGPU renderers are supported. The codebase includes thorough examples, CI/CD, and compatibility shims for multiple three.js revisions (r123 through r180).
This is a comprehensive educational website and tutorial series for WebGPU, the next-generation graphics API. It provides over 100 interactive lessons covering fundamentals, 3D math, lighting, textures, compute shaders, post-processing, and more. The site is built as a static site with a custom build system, featuring live code editors, interactive diagrams, and multilingual support. The codebase includes reusable WebGPU utilities, a diagram framework, and helper libraries for timing, texture loading, and shader reflection. It serves as both a learning resource and a reference for WebGPU developers.
A comprehensive monorepo for the maptalks 2D/3D WebGL/WebGPU map rendering engine. It provides a full-stack geospatial visualization framework including core map controls, geometry types (Marker, LineString, Polygon), multiple layer types (Tile, Vector, GLTF, 3D Tiles, Video, Particle), advanced shading (PBR, Phong, Cloth, Subsurface), post-processing (bloom, SSR, TAA, fog, weather), spatial analysis (viewshed, cut, flood, heightmap), traffic simulation, and interactive editing tools. The architecture is modular with ~20 interdependent packages under a pnpm workspace, using a custom WebGL abstraction (fusion.gl) and a vector tile pipeline with worker-based processing. It supports both Canvas2D and WebGL renderers, with emerging WebGPU support via WGSL shaders. The codebase is well-structured with reusable patterns (mixin, painter plugin, worker communication, LRU cache, texture pooling) but shows medium technical drift due to experimental WebGPU code, duplicated utility functions across packages, and reliance on legacy tooling (regl, shelf-pack).