Shaders, WebGL & Creative Coding

Browser live-codable video synthesizer using chained function calls, with networked video streams shared between performers.

Reference article cataloguing signal shaping functions like impulse, gain, parabola and cubic pulse with formulas and plots.

Browser design tool with real-time WebGL effect layers including ASCII, dithering, halftone and glitch applied to artboards.

Generator producing Bauhaus-inspired generative geometric compositions as downloadable SVG artwork, with colour and density controls.

TypeScript library for composing points, vectors, curves and interaction into visualizations rendered to canvas or SVG.

No-code editor for building interactive WebGL scenes and effects and embedding them on any website.

p5.js library that separates a sketch into risograph-style spot colour channels and exports print-ready separations.

Creative coding environment where a single JavaScript expression over t, i, x and y drives a sixteen-by-sixteen dot grid.

Headless React lens component that actually refracts the live page underneath it rather than faking blur.

React component wrapper for VFX-JS applying WebGL shader effects to img, video and text elements through props.

SVG generator for wavy mesh-like gradient backgrounds built from overlapping union shapes with adjustable turbulence.

Zero-dependency animated canvas shaders including mesh gradients, grain, dithering and warps, shipped as React components and vanilla JS.

Open-source procedural tree generator with a browser editor and a Three.js runtime library, exporting GLB models.

Browser editor for viewing, cleaning and publishing 3D Gaussian splat captures.

Generator for SVG noise and grain texture overlays with control over frequency, opacity and blend mode, exporting SVG or CSS.

Node-based visual editor for building procedural WebGL scenes, geometry and materials that export to a Three.js runtime.

Framework-agnostic library rendering real interactive HTML inside a canvas with WebGL shader effects applied over it.

Vanilla WebGL library that converts HTML DOM elements into textured planes you can distort with custom shaders.

Web app that inspects a GLTF or GLB file, reporting mesh, texture and material costs and running optimization scripts in-browser.

Library applying WebGL shader effects such as glitch, RGB shift, pixelate and warp directly onto existing DOM images and text.

Browser toolkit for creating, stacking and animating layered GPU shaders, then exporting the composed result as code.

SDK and CLI for reading, editing and optimizing GLTF assets with Draco and Meshopt compression, texture resizing, pruning and welding.

Collection of ready-made abstractions, controls, loaders and shader materials for TresJS, the Vue declarative Three.js renderer.

Lightweight modular WebGL shader library packaging animated background shaders for use in ordinary web interfaces.

Demo repository implementing interactive WebGL hover distortions on images driven by mouse velocity and displacement maps.

CLI that converts a GLTF file into a declarative, tree-shakeable JSX component with named nodes and instancing support.

Single-file collection of classic, simplex and Worley noise implementations in GLSL ready to paste into any shader.

TypeScript WebGPU library with importable WGSL modules that renders the same shader to a browser canvas, headless Node.js, images, video, and CI snapshot tests.

Thin WebGL 2 wrapper managing GPU state objects such as programs, vertex arrays and framebuffers without imposing a scene graph.

p5.js addon for film grain, seamless texture overlays and fast per-pixel manipulation to age and texture sketches.

Command line tool and Node library for converting, compressing and optimizing glTF and GLB assets, maintained by Cesium.

Minimalist JavaScript playground for plotter-style generative art using a turtle graphics API, with a public gallery.

Demo set of SVG and shader-driven distortion effects applied to headline typography on interaction.

Real-time ordered Bayer dithering post-processing effect for 3D scenes, built for react-three-fiber and plain Three.js.

Console-based GLSL sandbox and live renderer for macOS, Linux and Raspberry Pi with hot reload and headless image export.

Local web environment for live-coding fragment shaders and sketches with hot reload, GUI controls and video export.

Curated GitHub list of Three.js libraries, physics engines, shader resources, editors and asset sources.

Tiny helper library removing WebGL boilerplate for buffers, uniforms, textures and framebuffers while staying close to the raw API.

Bounding volume hierarchy for Three.js geometry that makes raycasting, collision checks and clipping orders of magnitude faster.

Drop-in p5.js recorder capturing sketches to WebM, GIF, MP4 or PNG sequences through a floating UI panel.

p5.js addon that automatically generates a graphical control panel from the global variables in your sketch.

Guide and code patterns for optimizing Three.js WebGPU rendering with TSL, covering compute shaders, instancing and memory layout.

Growing vanilla Three.js helper library with component base classes, asset managers, shader passes and scroll or pointer utilities.

Utility package of seeded random, geometry, colour, math and shader helpers extracted from the canvas-sketch workflow.

Collaborative live-coding environment for p5.js with multiplayer sessions, autocompile, sketch sharing and MIDI hooks.

Collection of 130+ production-ready web shaders, each a self-contained HTML file with no build step, dependencies or bundler.

Minimal unopinionated WebGL library exposing raw GL concepts through small helper classes without scene-graph overhead.

Pseudo-3D engine rendering round, flat, designer-friendly vector illustrations on canvas or SVG with genuine 3D rotation.

Framework and CLI for generative artwork in JavaScript with deterministic seeding, print-resolution export and video recording.

Renderer-agnostic two-dimensional drawing API that outputs to SVG, canvas or WebGL from one scene description.

Directory of Three.js tools, shader editors, asset optimizers, tutorials and learning resources, organized and regularly updated.

Interactive plotter for GLSL-style math functions showing up to six formulas at once for shaping signals and curves.

Library fusing Hydra video synthesis into p5.js sketches so both share textures inside one live-coding context.

Online mesh gradient maker producing liquid warped gradients exportable as PNG, SVG or CSS for web use.

Functional stateless WebGL abstraction where draw commands are declared as data and the library manages all GL state.

Node-based visual programming environment for building interactive WebGL scenes and exporting them as embeddable pages.

Digital art platform where creative coders publish shader and generative sketches with a curated popular feed.

GT-VBAO screen-space ambient occlusion for three.js WebGPU and WebGL2, written in TSL with presets, TRAA and denoising.

Unity URP glass die with a nebula and per-face constellations, all raymarched in one pass on the default cube.

Lightweight Three.js Gaussian splat viewer with WebGPU and WebGL2, streaming LOD, stochastic rendering and PLY/SPZ/SOG/RAD support.

Browser visual instrument that turns local video into procedural points, brackets, labels and tracking overlays, then exports a five-second composite clip.

Browser studio that extracts motion from a live camera feed and shades it as trails, heatmaps, tracked blobs or vector fields via WebGPU.

WebGPU playground that reads the shape of an uploaded image, text or mark and burns it as animated fire in the browser.

First-person three.js walk through red rock buttes at golden hour, with every mesh, texture and sound generated procedurally in code.

Browser playground for WGSL compute shaders: write, run and publish GPU compute experiments with a public gallery of other people's sketches.

Calm 3D museum of 18 prehistoric animals for young children, with narration, grown-up research notes and sourced fossil citations, in English and Chinese.

Browser spy-satellite simulator on a photorealistic 3D globe, driven by live open-source spatial intelligence feeds rather than mock data.

WebGPU space explorer that flies you from Earth out to planets, stars, nebulae and distant galaxies in one continuous 3D scene.

Trains 3D Gaussian splats entirely in a browser tab: photos in, camera poses solved on WebGPU, standard .ply out.

WebGPU solver that simulates fluid and rigid bodies as one position-based-dynamics system, with screen-space fluid surface reconstruction.

Local-first WebGL2 playground that overlays two pattern layers — stripes, grids, radials, dots — so you can tune moiré interference live.

Ruby library that flattens GLSL #include directives and extracts uniform, attribute and output reflection into a JSON manifest at build time.

Five-chapter scrolling night walk through a Kyoto mountain temple, rendered live in Three.js with illustrated garden field notes.

Builds interactive WebGL visuals — kinetic type, 3D scenes, particle and liquid-glass logo effects — as parameterised tools you can remix, share and export.

Real-time GPU shader IDE for desktop and mobile with live reload, MIDI and OSC input and multi-pass pipelines.

Browser tool for dithering images with Floyd-Steinberg, Atkinson, Bayer and other algorithms, with palette control and export.

Library of CC0 PBR material scans providing albedo, normal, roughness and displacement maps at multiple resolutions.

Free seamless PBR texture set library with full map channels, published continuously by a single artist.

Library for building and posing articulated human figures procedurally in Three.js through a body-part joint API.

Animated liquid-metal border component for React with fluid chrome-like reflections and tunable motion parameters.

Collection of procedural textures such as wood, marble, cave, planet and camouflage, authored in Three.js Shading Language.

JavaScript library for writing interactive 2D and 3D procedural shaders with built-in raymarching and signed distance functions.

Tutorial code repository working through Three.js Shading Language and WebGPURenderer with progressively more complex shader examples.

Extends Three.js built-in materials with your own vertex and fragment shaders while keeping lighting, shadows and depth passes intact.

Character skinning, inverse kinematics and animation retargeting library for the web, independent of any renderer.

p5.js addon adding natural brushes, hatching, vector fields and organic fill effects to the standard drawing API.

Curated list of GLSL editors, playgrounds, debugging tools, frameworks and learning references in one page.

Vue 3 custom renderer that lets you build Three.js scenes as Vue components with reactive props.

Repository of hundreds of matcap material capture textures with a searchable preview page, free for any use.

Minimal creative coding boilerplate that sets up a canvas, animation loop and input handling in a few lines.

Node-based GLSL shader editor that exports working shaders for Three.js and other WebGL pipelines.

Steering behaviour and spatial query library for 3D agents, usable with Three.js for flocking and pursuit.

Modular WebGPU toolkit with typed buffers, bind groups and the ability to author WGSL shaders directly in TypeScript.

Angular custom renderer for Three.js, giving Angular the same declarative scene-graph model react-three-fiber gives React.

Online shader composer that visually combines and remixes existing GLSL shaders and exports them to Three.js.

TypeScript DSL and AST compiling one shader definition to GLSL, WGSL or JavaScript, enabling CPU-side shader debugging.

Collection of WebGL slideshow transition shaders between images, with displacement, wave and threshold variants.

Web component that generates CSS-only patterns and grids from a compact declarative rule language with built-in randomness.

Visual editor where shader functions are built by dragging and combining graphs rather than writing the math manually.

Gallery and live editor where every artwork is generated purely from a vertex shader driving a point or line array.

Open-source platform for publishing and browsing animated art generated by code, with GIF export from shaders.

Granular dependency-free shader library of noise, SDF, colour, lighting and filter functions in GLSL, HLSL, WGSL, Metal and CUDA.

Minimal online fragment shader editor and public gallery where every submitted shader can be forked and edited.

Browser tool converting an equirectangular HDRI into six cube map faces with format and resolution options.

Svelte component library and renderer for Three.js with physics, XR, extras and a declarative scene graph.

Fast, memory-compact constructive solid geometry for Three.js with runtime boolean union, subtraction and intersection on meshes.

Curated index of WebGPU libraries, engines, samples, articles and tooling, maintained as the specification ships.

Demo and source for a hover effect that stacks and scales repeated image layers with staggered motion.

Navigation mesh pathfinding for Three.js scenes, computing agent routes across baked navmesh geometry at runtime.

Archive of pattern and shaping functions covering easing, sigmoid, Bezier and oscillation with equations and multi-language code.

Lightweight WebGPU rendering library that turns DOM elements into textured planes and meshes driven by WGSL shaders.

Browser live-coding environment for GLSL fragment shaders with audio reactivity, built for live audiovisual performance.

Compact WebGL toolset of framebuffers, cameras, batches and shader helpers used across Yi-Wen Lin's experiments.