Horse of Fire WebGL Shader

WebGL Shader Effect

This page includes free source code for the horse of fire WebGL GLSL shaders. Fur animates as the horse moves.
The Horse of Fire VFX example
renders unique animated flames covering the horse's fur.
Swipe over the canvas to watch the horse and flames move.

Vertex Shader

The vertex shader includes uniforms for texture, uf_tex,
and time, uf_time.
JavaScript uploads values to uf_tex and uf_time,
per render frame.
Uniform uf_tex modifies texel coordinates.
Pass uf_tex through the GPU to the
fragment shader, through varying f_tex.
Read the
Learn to Morph
tutorial for details regarding how to apply
built-in function mix()
to the horse's morph targets.

Fragment Shader

Built-in functions cos()
and sin() modify texel coordinates
for the texture which maps the horse's fur.
Remember the vertex shader passes varying f_tex
through the GPU to the fragment shader.
JavaScript modifies varying f_tex, per animation frame,
then uploads the modified value.
When f_tex
passes through sin() and cos()
functions, texels are modifed, per frame.
Therefore the texture appears to move on the horse's fur.

Texture

The texture map for the horse includes fire-like colors.

Summary

The source code for the horse of fire WebGL shaders animate
fur as the horse moves.
The Horse of Fire VFX example
renders unique animated flames covering the horse's fur.
Swipe over the canvas to watch the horse and flames move.
Also read the
Learn to Morph free tutorial.