<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script>
<script id="vertexShader" type="x-shader/x-vertex">
void main() {
gl_Position = vec4( position, 1.0 );
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform sampler2D u_noise;
#define PI 3.14159265359
#define TAU 6.283185307179586
float tri( float x ) {
return abs( fract(x) - .5 );
}
vec3 tri3( vec3 p ){
return vec3(
tri( p.z + tri( p.y * 1. ) ),
tri( p.z + tri( p.x * 1. ) ),
tri( p.y + tri( p.x * 1. ) )
);
}
float triNoise3D( vec3 p, float spd , float time){
float z = 1.4;
float rz = 0.;
vec3 bp = p;
for( float i = 0.; i <= 3.; i++ ){
vec3 dg = tri3( bp * 2. );
p += ( dg + time * .1 * spd );
bp *= 1.8;
z *= 1.5;
p *= 1.2;
float t = tri( p.z + tri( p.x + tri( p.y )));
rz += t / z;
bp += 0.14;
}
return rz;
}
void main() {
float scale = .4;
vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
vec3 highlightColour;
vec3 bodyColour;
vec3 bgColour = mix(vec3(0., .0, .1), vec3(.6,.45,.1) * .5, uv.y + .1);
bgColour += (1. - length(uv * 1.5)) * .2;
vec2 pos = uv / .5;
float bottom = 0.5*(pos.y+1.0) * sin(u_time);
vec2 wave = vec2(0.);
wave.x += bottom*sin(4.0*pos.y-8.0*u_time)*.5;
pos += .25*wave;
pos.x += pos.x / (1.0-(pos.y));
float flameMask = clamp(1.0-length(pos), 0.0, 1.0);
flameMask = 1.0-pow(1.0-flameMask, 4.);
bodyColour = mix(vec3(0.5,0.2,0.2), vec3(0.55,0.25,0.0), uv.y + flameMask);
highlightColour = mix(vec3(1.0,.5,0.0), vec3(1.0,2.0,0.0), uv.y * (1. - flameMask * flameMask));
vec3 uv3d = scale*0.1*vec3(uv.x, uv.y, 0.0);
uv3d += vec3(0.0, -u_time*0.04, u_time*0.02);
float noise = triNoise3D(uv3d * 5. + flameMask * .05, 0., u_time);
noise = noise * 1.5 - .2;
vec3 colour;
float value = flameMask*noise;
value += .5*flameMask;
float flame_edge = flameMask * 0.3*(pos.y+1.0);
float edge = clamp(value-flame_edge*2., 0.0 , 1.0);
float hardMask = smoothstep(flame_edge,flame_edge+0.1, value);
float highlight = 1.0-edge*edge;
uv3d = vec3(uv.x, uv.y, 0.0) + vec3(0.0, -u_time*0.01, u_time*0.025);
highlight = pow(highlight, 2.0);
// colour += glow * 2.;
colour = highlightColour*(hardMask*highlight);
colour = mix(bgColour, colour, hardMask);
colour += bodyColour*flameMask*flameMask;
gl_FragColor = vec4(colour,1.0);
}
</script>
<div id="container" touch-action="none"></div>
!
