Applying vertex deformations to a mesh. Click to randomize parameters and move camera. Post Processing via color grading and barrel blur. Model is ‘Nymph’ by John Gibson.
Demos
Nymph
ShaderToy Explorations
Some GLSL pixel shader explorations published on ShaderToy. Source code is available. Part of my ongoing effort to learn GLSL shaders.
Ribbons
An experiment in ambient generative art, built to run as wallpaper. Colors and geometry are procedurally generated so each view is different. Using custom shaders for post-processing. Built with WebGL, three.js and GLSL shaders.
Ripple Clock
Using Perlin noise to simulate wind ripples on cloth. Writing dynmic text to webGL texture via canvas.
EMSX Controller
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
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.
Winter Rush
A simple WebGL game that runs well on mobile devices. View the blog post including source code.
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.
Confessions
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.
Word Problems
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.
Pareidolia
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.
WebCamMesh
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.