16.3. Translation

We can achieve a simple animation effect for stored textures or procedural textures just by adding an offset to the texture access calculation. For instance, if we wanted to have procedural clouds that drift slowly across the sky, we could make a simple change to the cloud shader that we discussed in Section 15.4. Instead of using the object position as the index into our 3D noise texture, we add an offset value. The offset is defined as a uniform variable and can be updated by the application at each frame. If we want the clouds to drift slowly from left to right, we just subtract a small amount from the x component of this uniform variable each frame. If we want the clouds to move rapidly from bottom to top, we just subtract a larger amount from the y component of this value. To achieve a more complex effect, we might modify all three coordinates each frame. We could use a noise function in computing this offset to make the motion more natural and less like a scrolling effect.

The cloud shader as modified so as to be animatable is shown in Listing 16.1.

Listing 16.1. Animatable fragment shader for cloudy sky effect

varying float LightIntensity; varying vec3 MCposition; uniform sampler3D Noise; uniform vec3 SkyColor; // (0.0, 0.0, 0.8) uniform vec3 CloudColor; // (0.8, 0.8, 0.8) uniform vec3 Offset; // updated each frame by the application void main() { vec4 noisevec = texture3D(Noise, MCposition + Offset); float intensity = (noisevec[0] + noisevec[1] + noisevec[2] + noisevec[3]) * 1.5; vec3 color = mix(SkyColor, CloudColor, intensity) * LightIntensity; gl_FragColor = vec4(color, 1.0); }