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

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.

Lights

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.

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.

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.

Comments