glsl实现的热气流动的纹理效果(基于WebGL展示)及若干变体Demo

本文的另一个版本在:csdn上，但是不知为何总是半天打不开页面修改不了。

图片:

web Demo请点击

另外一种变体效果Demo

第三种变体效果Demo

昨晚在将glsl由pc端转到webgl的时候,遇到webGL glsl for循环条件比较不支持变量，只能是常量的问题。后面想了一下才解决。下面给出webgl glsl代码,(如有需要用请自行优化)

this.vshdCode = 
          "precision highp float;"
          +"attribute vec3 a_vtx_pos;"
          +"attribute vec2 a_vtx_uv;"
          +"varying highp vec2 v_texUV;"
          +"uniform mediump vec2 u_Stage_size;"
          +"uniform vec3 a_time;"
          +"varying vec3 v_time;"
          +"void main()"
          +"{"
          +"  float px = 0.5 * u_Stage_size.x;"
          +"  float py = 0.5 * u_Stage_size.y;"
          +"  float kw = (2.0/u_Stage_size.x);"
          +"  float kh = (2.0/u_Stage_size.y);"
          +"  gl_Position = vec4((px + a_vtx_pos.x)* kw - 1.0, (py + a_vtx_pos.y) * kh - 1.0,0.0,1.0);"
          +"  v_texUV = a_vtx_uv;"
          +"  v_time = a_time;"
          +"}";
  this.fshdCode = 
            "precision highp float;"
            +"uniform sampler2D uSampler;"
            +"varying highp vec2 v_texUV;"
            +"varying vec3 v_time;"
            +"void main()"
            +"{"
            +"float cosV = cos(v_time.z);"
            +"float vTime = v_time.z;"
            +"vec4 color = texture2D(uSampler,  0.5 * vec2((v_texUV.x + vTime * 0.1),(v_texUV.y - vTime * 0.1)));"
            +"float e = color.r;"
            +"float seg = 5.0  +  floor(e * 25.0);"
            +"color = vec4(0.0);"
            +"float f = 0.0;"
            +"float dv = 2.0/512.0;"
            +"float base = seg * 1.5;"
            +"float tot = 0.0;"
            +"float totStep = 1.0;"
            +"for(int i = 0; i <= 30; ++i)"
            +"{"
            +"if(totStep < seg){"
            +"    f = (1.0 - totStep/base);"
            +"    f = pow(f,2.0);"
            +"    tot += f;"
            +"    color += texture2D( uSampler, vec2(v_texUV.x + totStep * dv, v_texUV.y - totStep * dv) ) * f;"
            +"  totStep += 1.0;"
            +"}else{break;}"
            +"}"
            +"color /= tot;"
            +"color.r *= 1.2;"
            +"color.g *= 0.2;"
            +"color.b *= 0.2;"
            +"color.a *= 0.0;"
            +"vec4 cc = texture2D( uSampler, v_texUV).rgba;"
            +"cc.r *= cc.b * cosV;"
            +"cc.b *= e * (1.0 - cosV);"
            +"gl_FragColor = color + cc;"
            +"}";