Tag Search: WebGL

Reaction Diffusion Shader
, , ,

A simulation of two chemicals reacting in a fluid written in GLSL and presented using Three.js. ┬áThis experiment was adapted from Daniel Shiffman’s reaction diffusion in Processing tutorial, which was in turn adapted from Karl Sim’s excellent description of the process.

View Experiment

reactiondiffusion-39 reactiondiffusion-36 reactiondiffusion-35 reactiondiffusion-32 reactiondiffusion-30 reactiondiffusion-27 reactiondiffusion-24 reactiondiffusion-22 reactiondiffusion-20 reactiondiffusion-16 reactiondiffusion-13 reactiondiffusion-11 reactiondiffusion-8 reactiondiffusion-5 reactiondiffusion-3

WebGL Polygon Chain
, ,

We’re back in WebGL and Three.js again. We’ve got 300 polygons moving in an oscillating chain. Basic horizontal and vertical symmetry add the special sauce.

View Experiment

polychain-15 polychain-11 polychain-7 polychain-3 polychain-1

WebGL Kaleidoscope
, ,

WebGL is a super-powerful tool for creative expression on the web, and three.js makes an otherwise obtuse system a pleasure to work with. Here is a kaleidoscope created with WebGL via three.js. It has a number of configurable features including the number of axis and the type of grid used. It also uses environment mapping for a nice reflective effect.

View Kaleidoscope

kaleidoscope2 kaleidoscope3