直接上效果
然后相关代码
var FSHADER_SOURCE =
'precision mediump float;\n' +
//通过传入的时间值控制燃烧的程度
'uniform float u_time;' +
'uniform sampler2D u_Sampler;\n' +
'varying vec2 v_uv;'+
//取随机值
'float random (in vec2 st) {' +
' return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123); ' +
'}' +
//噪声
'float noise (in vec2 st) {' +
' vec2 i = floor(st);' +
' vec2 f = fract(st);' +
' float a = random(i);' +
' float b = random(i + vec2(1.0, 0.0));' +
' float c = random(i + vec2(0.0, 1.0));' +
' float d = random(i + vec2(1.0, 1.0));' +
//' vec2 u = smoothstep(0.,1.,f);' +
' vec2 u = sin(f * 3.1415926 / 2.);' +
//' return mix(a, b, u.x) + (c - a)* u.y * (1.0 - u.x) + (d - b) * u.x * u.y;}' +
' return mix(mix(a, b, u.x), mix(c, d, u.x), u.y); '+
'}' +
'void main() {\n' +
//取噪声的值
' vec2 pos = vec2(v_uv * 100.0); ' +
' float n = noise(pos);'+
//设置火焰燃烧的走势
' vec2 ct = vec2(0.5, 0.5);' +
' float d = 1. - distance (v_uv, ct) / sqrt(0.5);' + //直接输出vec4(d, d, d, 1.)见图2
//设置火焰区域的紧密程度
' float s = 1. - smoothstep(d - 0.3, d + 0.3, u_time);' +
' s = mix(mix(n, d, 0.5), (s - 0.5) * 4., 0.5);'+ //直接输出vec4(s, s, s, 1.)见图3
//燃烧后的颜色
' float f1 = step(0.3, s); '+
' vec4 fv1 = f1 * vec4(0., 0., 0., 1.); '+
//将要燃烧的区域
' float f2 = smoothstep(-0.2, 0.3, s) * step(s, 0.3); '+
' vec4 fv2 = f2 * vec4(-0.5, -1., -1., 0.); '+
//燃烧的火焰的区域
' float f3 = step(s, 0.31) * step(0.3, s);'+
' vec4 fv3 = f3 * vec4(1.0, 1.0, 0., 1.); '+
//未燃烧的区域
' float f4 = step(s, 0.3);' +
' vec4 fv4 = f4 * texture2D(u_Sampler, v_uv); '+
' gl_FragColor = fv4 + fv2 + fv3 + fv1;'+
'}\n';
图2
图3