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 Fragment Shader Texture Summary

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.

 
attribute vec4 a_position;  
attribute vec4 a_position_morph; 
attribute vec2 a_tex_coord0;
varying vec2 v_tex_coord0;
varying float f_tex;
           
uniform mat4 um4_matrix;
uniform mat4 um4_pmatrix; 
uniform float uf_tex; 
uniform float uf_time;
           
void main(void) {

 vec4 v4_mix = mix(
  a_position_morph,
  a_position,
  uf_time
 );
 
 f_tex = uf_tex;
 
 gl_Position = um4_pmatrix * um4_matrix * v4_mix;
 
 v_tex_coord0 = a_tex_coord0;
 
}

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.

precision mediump float;
uniform sampler2D u_sampler0;
varying vec2 v_tex_coord0;
varying float f_tex;

void main(void) {

float v2_s = clamp(
 v_tex_coord0.s * sin(f_tex),
 0.0,1.0
);
  
float v2_t = clamp(
 v_tex_coord0.t * cos(f_tex),
 0.0,1.0
);
  
vec4 v4_color = texture2D(
 u_sampler0, 
 vec2(v2_t+0.5,v2_s)
);
  
gl_FragColor = v4_color;

}

Texture

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

Fire Texture

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.

Tags
learn to code,Web GL, 3D Programming, 3D Development, 3D Media, 3D Web, 3 D Websites, 3D Development, 3D Web Design, 3D Web Development, Web Development, free tutorials, online learning, learn coding, html5, html 5, Web GL, 3D rendering software, GLSL, 3D Graphics Engine, 3D rendering software, create 3D website, 3D Media, JavaScript, html tutorial, how to code, programming websites, learn computer programming, learn to code for free, learning coding, stem, 3D images, webgl simple example, webgl basics, learning webgl, learn webgl
Learn 3D Programming Learn 3D Programming
Copyright © 2015 Seven Thunder Software. All Rights Reserved.