Using Perlin noise to simulate wind ripples on cloth. Writing dynmic text to webGL texture via canvas.
A WebGL UI Demo based on a design by Nicolas Lopardo. Using simple geometry with hi-res textures and a custom tilt-shift shader. Use scroll wheel to twist.
Noise Field Ribbons
Ribbons driven by a 4D noise field. Using WebGL, Three.js. Use mouse to zoom and rotate. Use control panel to modify ribbon behavior.
MOSH is a web app to apply creative ‘glitch’ filters to images and web cam input. Uses Three.js and custom GLSL shaders to stack multiple effects on to an image. Save results as still images or animated gifs. Featured on Creators Project, Product Hunt, Reddit, Codrops, and Chrome Experiments.
Nero – In the Way
A dubstep music visualizer for Nero’s In the Way. Featuring custom shaders, vertex displacement and lots of strobe. Stick around for the drop.
Music Visualizer, using WebGL and Web Audio API. Using a custom audio-reactive shader to draw lines and dots onto a 3D mesh. Mesh vertices are displaced by perlin noise based on audio level. Hit ‘q’ for control panel. Built with three.js.
3D Music Visualizer. Using WebGL and the Web Audio API. Renders frequency range levels as 3D colored strips. The time period of the stripes movement is set to the BPM of the song. Beat detection is used to transition the camera angle and fire a custom Bad TV pixel shader.
A WebGL Audio Visualizer. Use microphone or drop MP3 file. Set volume sensitivty, cube speed and control visuals with the mouse.
Bad TV Shader
Custom Pixel Shader simulates a bad TV via horizontal distortion and vertical roll, using Ashima WebGL Noise. Click to randomize uniforms.
Connects HTML5 WebCam input to a WebGL 3D Mesh. It creates a 3D depth map by mapping pixel brightness to Z-depth. Perlin noise is used for the ripple effect and CSS3 filters are used for color effects. Use mouse move to tilt and scroll wheel to zoom.
Loop Waveform Visualizer
Audio Reactive Waveform via Web Audio API and Three.js. Uses a combination of audio waveform and frequency data to create a live visualization of a track. Drag in any MP3 to see it visualized.
More WebGL Demos
A collection of recent WebGL demos featuring audio-reactive animations, shaders, perlin noise and webcam interactivity. Mostly built using Three.js.
Flickr Related Tag Browser
Enables user to surf Flickr’s ‘tag space’. Each tag has a list of ‘related’ tags, based on clustered usage analysis. Features a zooming Flash UI.