Share This on Twitter

This site requires Chrome 9 or Firefox 4.0, please download one of these browsers and revisit this site for a full WebGL experience. Get FireFox here

Your PC needs a bigger graphics card, this site requires shader model 3.0 or higher.

The above cube is textured with multiple octaves of Perlin noise to create a 4D fractal that moves in real-time. 4D noise is extremely useful because it can be indexed by all the same dimension we live in. Width, height, depth, and time are the dimensions we experience on a daily basis. A mathematical function generating textures along these dimension can be used to create experiences we as humans find interesting and entertaining. Just like the special effects we see in movies these days.

To learn more about Perlin noise, check it out here. As can be seen, it has a soft lumpy look. If this basic texture is scaled and then folded back on itself, multiple times, other unique looking textures such as turbulence or ridged multifractal can be generated. Normally it has only been possible to generate such textures using offline rendering and saving the texture in a bitmap which is then applied to a mesh. With the advent of shader model 3.0, it is now possible to calculate noise in realtime using the GPU. For the first time ever, shader model 3.0 is now available within the web browser. WebGL with shader model 3.0 is able to run on Windows thanks to the Angle project. Watch out internet, things are about to get interesting!

A faster form of Perlin noise, known as Simplex noise, has been put in the public domain by Stefan Gustavson. Do a "View Source" on this page to see both versions. The Perlin noise implementations are noise(vec2 P), noise(vec3 P), and noise(vec4 P) for 2D, 3D, and 4D respectively. For Simplex noise they are the same, but named snoise instead.

Those interested in understanding how noise can be used for animation and the special effects in movies can buy a copy of Texturing and Modeling, A Procedural Approach, 3rd Edition.

Check back often, we'll be adding more demos soon.