clicktorelease

Hi! My name is Jaume Sanchez!
I like to do things with the browser
(NOT those kind of things, you pervert!)

Find me on twitter or GitHub

Experiments with Perlin noise

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.

Chrome

Wobbly chrome sphere

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.

Click to see the chrome wobbly sphere

Lights

Lights w. radial blur

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.

Click to see the Lights experiment

Explosion

Fireball explosion!

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.

Click to see the Perlin Fireball Explosion

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.