Share This on Twitter

This site requires Chrome 9 or Firefox 4.0 beta, 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.

If you're on a laptop or workstation with a small graphics card be careful how far the above animation is zoomed. As it's size increases, so does the computational intensity on your gpu. As a result, your computer may get sluggish if it can't handle the number crunching. Shrinking the animation should make the sluggishness go away on slow graphics cards.

The above sky and ground 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 easily by the same dimension we live in. Width, height, depth, and time. A mathematical function generating textures along these dimensions can be used to create experiences we find interesting and entertaining. Just like the special effects we see in movies.

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.

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!