After my previous post on animated shaders, I decided to build on the shader code to create a more visually sophisticated "fireball effect". This time, my inspiration came from Jaume Sánchez Elias' experiments with perlin noise, particularly his great article on vertex displacement.
In the previous post, we have shader code for animating a "noisy" random distortion of a texture (the "base texture"). The noise is generated from the RGB values of a second texture (the "noise texture"). This time around, we add the following features:
- allow repeating the textures in each direction (repeatS and repeatT)
- a second texture (the "blend texture") that is randomly distorted (at a different rate) and then additively blended with the base texture; we also pass in a float that controls the speed of distortion (blendSpeed) and a float value (blendOffset) that is subtracted from the pixel data so that darker parts of the blend texture may result in decreasing values in the base texture
- randomly distort the positions of the vertices of the sphere using another texture (the "bump texture"); the rate at which these distortions change is controlled by a float value (bumpSpeed) and the magnitude is controlled by a second float value (bumpScale).
Causing the texture to repeat and blending in the color values takes place in the fragment shader, as follows:
<script id="fragmentShader" type="x-shader/x-vertex">
uniform sampler2D baseTexture;
uniform float baseSpeed;
uniform float repeatS;
uniform float repeatT;
uniform sampler2D noiseTexture;
uniform float noiseScale;
uniform sampler2D blendTexture;
uniform float blendSpeed;
uniform float blendOffset;
uniform float time;
uniform float alpha;
varying vec2 vUv;
void main()
{
vec2 uvTimeShift = vUv + vec2( -0.7, 1.5 ) * time * baseSpeed;
vec4 noise = texture2D( noiseTexture, uvTimeShift );
vec2 uvNoiseTimeShift = vUv + noiseScale * vec2( noise.r, noise.b );
vec4 baseColor = texture2D( baseTexture, uvNoiseTimeShift * vec2(repeatS, repeatT) );
vec2 uvTimeShift2 = vUv + vec2( 1.3, -1.7 ) * time * blendSpeed;
vec4 noise2 = texture2D( noiseTexture, uvTimeShift2 );
vec2 uvNoiseTimeShift2 = vUv + noiseScale * vec2( noise2.g, noise2.b );
vec4 blendColor = texture2D( blendTexture, uvNoiseTimeShift2 * vec2(repeatS, repeatT) ) - blendOffset * vec4(1.0, 1.0, 1.0, 1.0);
vec4 theColor = baseColor + blendColor;
theColor.a = alpha;
gl_FragColor = theColor;
}
</script>
The bump mapping occurs in the vertex shader. Bump mapping is fairly straightforward -- see the article above for an explanation; the key code snippet is:
vec4 newPosition = position + normal * displacement
However, there are two particularly interesting points in the code below:
- Using time-shifted UV coordinates seems to create a "rippling" effect in the bump heights, while using the noisy-time-shifted UV coordinates seems to create more of a "shivering" effect.
- There is a problem at the poles of the sphere -- the displacement needs to be the same for all vertices at the north pole and south pole, otherwise a tearing effect (a "jagged hole") appears, as illustrated at StackOverflow (and solved by WestLangley). This is the reason for the conditional operator that appears in the assignment of the distortion (and introduces not-so-random fluctuations at the poles).
Without further ado, The code for the new and improved vertex shader is:
<script id="vertexShader" type="x-shader/x-vertex">
uniform sampler2D noiseTexture;
uniform float noiseScale;
uniform sampler2D bumpTexture;
uniform float bumpSpeed;
uniform float bumpScale;
uniform float time;
varying vec2 vUv;
void main()
{
vUv = uv;
vec2 uvTimeShift = vUv + vec2( 1.1, 1.9 ) * time * bumpSpeed;
vec4 noise = texture2D( noiseTexture, uvTimeShift );
vec2 uvNoiseTimeShift = vUv + noiseScale * vec2( noise.r, noise.g );
// below, using uvTimeShift seems to result in more of a "rippling" effect
// while uvNoiseTimeShift seems to result in more of a "shivering" effect
vec4 bumpData = texture2D( bumpTexture, uvTimeShift );
// move the position along the normal
// but displace the vertices at the poles by the same amount
float displacement = ( vUv.y > 0.999 || vUv.y < 0.001 ) ?
bumpScale * (0.3 + 0.02 * sin(time)) :
bumpScale * bumpData.r;
vec3 newPosition = position + normal * displacement;
gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );
}
</script>
The code for integrating these shaders into Three.js:
// base image texture for mesh
var lavaTexture = new THREE.ImageUtils.loadTexture( 'images/lava.jpg');
lavaTexture.wrapS = lavaTexture.wrapT = THREE.RepeatWrapping;
// multiplier for distortion speed
var baseSpeed = 0.02;
// number of times to repeat texture in each direction
var repeatS = repeatT = 4.0;
// texture used to generate "randomness", distort all other textures
var noiseTexture = new THREE.ImageUtils.loadTexture( 'images/cloud.png' );
noiseTexture.wrapS = noiseTexture.wrapT = THREE.RepeatWrapping;
// magnitude of noise effect
var noiseScale = 0.5;
// texture to additively blend with base image texture
var blendTexture = new THREE.ImageUtils.loadTexture( 'images/lava.jpg' );
blendTexture.wrapS = blendTexture.wrapT = THREE.RepeatWrapping;
// multiplier for distortion speed
var blendSpeed = 0.01;
// adjust lightness/darkness of blended texture
var blendOffset = 0.25;
// texture to determine normal displacement
var bumpTexture = noiseTexture;
bumpTexture.wrapS = bumpTexture.wrapT = THREE.RepeatWrapping;
// multiplier for distortion speed
var bumpSpeed = 0.15;
// magnitude of normal displacement
var bumpScale = 40.0;
// use "this." to create global object
this.customUniforms = {
baseTexture: { type: "t", value: lavaTexture },
baseSpeed: { type: "f", value: baseSpeed },
repeatS: { type: "f", value: repeatS },
repeatT: { type: "f", value: repeatT },
noiseTexture: { type: "t", value: noiseTexture },
noiseScale: { type: "f", value: noiseScale },
blendTexture: { type: "t", value: blendTexture },
blendSpeed: { type: "f", value: blendSpeed },
blendOffset: { type: "f", value: blendOffset },
bumpTexture: { type: "t", value: bumpTexture },
bumpSpeed: { type: "f", value: bumpSpeed },
bumpScale: { type: "f", value: bumpScale },
alpha: { type: "f", value: 1.0 },
time: { type: "f", value: 1.0 }
};
// create custom material from the shader code above
// that is within specially labeled script tags
var customMaterial = new THREE.ShaderMaterial(
{
uniforms: customUniforms,
vertexShader: document.getElementById( 'vertexShader' ).textContent,
fragmentShader: document.getElementById( 'fragmentShader' ).textContent
} );
var ballGeometry = new THREE.SphereGeometry( 60, 64, 64 );
var ball = new THREE.Mesh( ballGeometry, customMaterial );
scene.add( ball );
For a live example, check out the demo in my GitHub collection, which uses this shader to create an animated fireball.
Happy coding!
