Article | Posted on June 2012

Experiments with Perlin noise

Reading time: 5 minutes

Topics: WebGL, three.js, GLSL, Perlin noise, JavaScript

This is a legacy post, ported from the old system:
Images might be too low quality, code might be outdated, and some links might not work.

Experimenting with perlin noise in the vertex and fragment shaders, using WebGL with three.js. A lot of displacement mapping by using 3D noise in the vertex shader.


Using Perlin Noise to disturb the suface of a sphere, and the distorsion amplitude is modulated by time. Using the equirectangular panorama shader for environment mapping, and a bit of lambert + specular shading based on light sources probed from the panorama image.

This is the result, using three.js and ashima noise.


This experiment uses a lower frequency Perlin Noise to disturb the sphere, and the fragment shader uses three similar noises to create RGB combinations. Additionally, there's a post-process render pass that performs radial or zoom blur.

This is the result, using three.js, ashima noise and evanw's zoom blur.


This time, the sphere is perturbed in the vertex shader by a more turbulent 3D noise. I sampled a picture of an explosion to obtain a gradient image that is sampled in the fragment shader depending on the distance to the center of the explosion. The closer to center, the brighter.

This is the result, using three.js, ashima noise and evanw's random function to add a bit of noise to the final shading.

That's all!

You might also be interested in Vertex displacement with a noise function using GLSL and three.js, a blog post detailing how this effect was created.