Search the archive.
Find published work and reporting by title, description, article text or tag.
Refine results
Also searching for Drag Interaction, because “draggable” is another name for it.
Results 1 to 24 of 29 for “draggable”.
- Showcase
Totem.earth Turns a Web3 Landing Page Into a WebGL Ritual Object
OFF+BRAND’s Totem.earth wraps a Web3 ecosystem in smoke, light, and a draggable Three.js object that does most of the branding before the copy gets a turn.
- Showcase
Orbiting a Single Photo: 3D Camera Control with Qwen Image Edit and Three.js
Upload a photo, drag a Three.js camera to a new angle, and a diffusion model hallucinates what the scene looks like from there. 96 poses, trained on Gaussian Splatting renders, running in a single app.py.
- Showcase
A Windows 98 Portfolio
Evan Poliquin's portfolio renders a full Windows 98 desktop inside a three.js scene, with React UI nested via CSS3D and raycasting to translate 3D clicks into 2D interaction. Two versions ship: WebGL with metaballs, or video fallback for lower-spec machines.
- Showcase
A Brewery Hero Section You Can Push Around
A landing page for a brewery that doesn't exist, built so you can shove it around. Real physics rides under the hero: objects with weight that jostle, settle, and won't sit still. A percent counter loads the whole scene before the first frame. The demo is its own documentation.
- Showcase
A Project Gallery That Bends Like Film
A row of project cards behaves like a strip of film you can scroll, flex, and shove around with your cursor. Built in Three.js with hand-written GLSL, where scroll velocity drives a vertex-shader bend and a post-process pass adds the grainy, almost celluloid edge shimmer.
- Showcase
Walking Inside a DeepSDF Latent Space, in the Browser
Click a dot in the UMAP atlas and a chair resolves from a 256-dim code. Drag a slider and watch it melt into a lamp, meshed live from a neural signed distance function at 64³ or 128³. DeepSDF latent spaces you can actually walk around in. Three.js, WebGL, no download.
- Showcase
PipeMagic: A WebGPU Node Editor for Image Pipelines
A node editor for image pipelines that runs entirely in the browser. Wire up background removal, depth estimation, JFA outlines, and 2x upscale, watch WebGPU do the work, then export the graph as JSON and drop the same logic into your app in roughly 180 lines.
- Showcase
Track: A Scroll-Paced WebGL Run by Hiroto Sato
Scroll the page and an athlete runs forward. Stopwatch climbing, meters racking up, quotes from sports icons surfacing as you earn them. Hiroto Sato's TRACK pairs WebGL with GSAP and paces its reveals to distance instead of viewport position.
- Showcase
SuperSplat: Editing 3D Gaussian Splats in the Browser
A few million ellipsoids that snap into a photoreal coffee shop, an ant, the Moon. SuperSplat is a browser-based editor for cleaning up 3D Gaussian splats, with GPU-accelerated selection, unlimited undo, and a streamed LOD format for massive scenes. Open source, nothing to install.
- Showcase
Smooothy: A Slider Built to Sit Under Your WebGL Scene
Federico Valla's Smooothy is a tiny TypeScript slider that exists because every other carousel synced badly with WebGL. Drag through Toast and Fish but no Head while current, target, and parallaxValues tick out in real time, ready to feed your shader uniforms.
- Showcase
Cat Warrior Parkour: Seven Levels of Three.js Platforming
Pelican Party Studios ships a tidy 3D parkour game in the browser: seven levels, hidden jades, a cat with no respect for gravity, and optional multiplayer. Three.js under the hood, aggressive asset diets, and jumps tuned to stay forgiving past the third fall.
- Showcase
Flight Path: 30,000 GPU-Instanced Flights on a Photorealistic Earth
Yong Su's Three.js demo spins a photorealistic Earth and threads up to 30,000 planes along dashed parabolas between cities. Every plane lives in one instanced mesh, with shaders handling the per-frame math. Scrub the UTC slider and watch the terminator crawl across the Pacific.
- Showcase
Justine Soulié's Portfolio: A WebGL Site Where Illustrations Are the Interface
Every illustration on Justine Soulié's portfolio is a live WebGL scene with its own micro-interactions. Built by Patrick Heng using OGL, scroll physics, and custom shaders, the canvas isn't decoration. It is the UI.
- Showcase
MasterSelects: A GPU-First Video Editor Built Entirely on WebGPU
A full video editor running in the browser with zero CPU roundtrip. 37 blend modes in one WGSL shader, GPU-accelerated scopes, optical flow scene detection, and SAM2 segmentation on-device. 13 dependencies. MIT licensed.
- Showcase
DRIFT: A Million Particles, a Lost Astronaut, and AI-Generated Loneliness
A lost astronaut records his diary in your browser. Over a million GPGPU particles shift with his mental state while AI generates fresh text and voice each visit. Ming Jyun Hung built something that feels alive and a little heartbreaking.
- Showcase
BOIDS: A Parametric Playground for Emergent Flocking Behavior
BOIDS simulates flocking through three local rules: separation, alignment, cohesion. No central control. Every parameter is exposed. Click to attract, right-click to scatter. Built in p5.js with texture support and video export.
- Showcase
Troika: The Three.js Framework That Solved WebGL Text Rendering
Troika parses font files directly, generates SDF glyphs in a web worker, and patches any Three.js material with the right shader code. The result is crisp, antialiased 3D text that handles kerning, ligatures, and RTL layout without dropping frames.
- Showcase
Climbuddy: From Phone Photos to Interactive 3D Climbing Walls in the Browser
Snap photos of a bouldering wall, get back a textured 3D model with routes and holds auto-detected. Climbuddy chains COLMAP, SAM, and YOLO into a WebGL viewer that actually makes sense to use.
- Showcase
Earthquake Pulse Map: A Century of Seismic Activity on a WebGL Globe
A Three.js globe plotting 120+ years of major earthquakes with custom GLSL shaders, binary-packed data, and live USGS feeds. Spin, zoom, and scrub through time. The tectonic boundaries light up whether you're ready or not.
- Showcase
Kiomet: A Real-Time Multiplayer Strategy Game Built With Rust and WebGL
Kiomet drops you into a live hex-grid battlefield with dozens of players, 27 tower types, and zero installs. The whole stack is Rust compiled to WebAssembly, rendered through WebGL with custom GLSL shaders. Open source and running in a browser tab.
- Showcase
WebGPU Water Simulation: Porting a Piece of Graphics History
The 2011 demo that helped inspire Figma gets a WebGPU rewrite. Ripples, caustics, raytraced reflections, and a bobbing sphere, all running on modern GPU APIs. Yong Su's port is a case study in what it takes to cross the WebGL-to-WebGPU bridge.
- Showcase
spark.js GLTF Demo: Real-Time Texture Transcoding for Faster Asset Delivery
A GLTF viewer that ships textures as compact WebP or AVIF, then transcodes them to GPU-compressed formats in the browser. Small downloads, efficient VRAM. Spark.js handles the conversion so you get the best of both worlds.
- Showcase
FLAKE: Distance-Driven Pattern Generation With Custom Shapes
FLAKE uses distance-from-center to control scale, color, and rotation across a grid of shapes. Use images as masks. Export to vector or video.
- Showcase
NGL Viewer: WebGL Molecular Graphics That Scales to Millions of Atoms
A WebGL viewer that renders proteins, DNA, and virus capsids with millions of atoms, smoothly, on desktop or phone. Hyperball shaders, MMTF parsing, and a selection language that actually works.
