GLSL Balloon Effect

WebGL Shader Effect

This Web page includes the GLSL shader source code. This GLSL vertex shader distorts the mesh. Center vertices move toward the viewport. A checker pattern texture accentuates the appearance of inflation from the center, providing unique VFX.

Vertex Shader Fragment Shader Texture Summary

Vertex Shader

 
attribute vec4 a_position;   
attribute vec2 a_tex_coord0;
varying vec2 v_tex_coord0;
 
uniform float uf_time;          
uniform mat4 um4_matrix;
uniform mat4 um4_pmatrix;
const float cf_divisor = 16.0;
            
void main(void) {
 vec4 pos = a_position;
 float fX = abs(pos.x);
 float fY = abs(pos.y); 
 
 // Move X and Y coordinates
 // in toward the center.
 // Apply to corner vertices
 // only.
 if (fX == 1.0 && fY == 1.0)
 {
  float f_offset = 1.0 - (uf_time/cf_divisor);
  pos.x *= f_offset;
  pos.y *= f_offset;
 }
 // Move center vertices
 // toward the viewport.
 else if (fX == 0.0 && fY == 0.0)
 {
  pos.z = uf_time;
 }
 gl_Position = um4_pmatrix * um4_matrix * pos; 
 v_tex_coord0 =  a_tex_coord0;  
}

Fragment Shader

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

void main(void) {
 gl_FragColor = texture2D(u_sampler0, v_tex_coord0); 
}

Texture Map

Balloon Checkered Texture Map

Summary

This GLSL vertex shader distorts the mesh. Center vertices move toward the viewport. A checker pattern texture accentuates the appearance of inflation from the center, providing a unique visual effect.

Tags

WebGL shaders, WebGL shader, WebGL examples, Web GL, HTML5, 3D Web, OpenGL ES, gpu, shader programming, shader tutorial, 3D graphics, opengl shading language, vertex shader, webgl shader language, vertex shader tutorial, javascript, html5, learn webgl, webgl samples, html5 canvas tutorial,
Learn 3D Programming Learn 3D Programming
Copyright © 2015 Seven Thunder Software. All Rights Reserved.