本文的另一个版本在:csdn上,但是不知为何总是半天打不开页面修改不了。
图片:
昨晚在将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;" +"}";