WebGL - shader - 燃尽纸张的效果

直接上效果

然后相关代码

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