这篇文章探讨了如何利用噪声函数生成逼真的火焰效果。通过定义rand、noise和fire等函数，作者展示了如何在Shader中创建动态的火焰纹理。接着，应用这些函数到square_tunnel函数产生的形状上，实现火焰在特定像素上的分布。最后，通过调整颜色和渐变，得到最终的火焰视觉效果。

效果如下:

shader 代码:

float rand(vec2 n) {
    return fract(sin(dot(n, vec2(12.9898,12.1414))) * 83758.5453);
}

float noise(vec2 n) {
    const vec2 d = vec2(0.0, 1.0);
    vec2 b = floor(n);
    vec2 f = fract(n);
    return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);
}

float fire(vec2 n) {
    return noise(n) + noise(n * 2.1) * .6 + noise(n * 5.4) * .42;
}



float square_tunnel(vec2 uv) {
    vec2 p = -1.0 + 2.0 * uv;
    vec2 t = p*p*p*p;
    return max(t.x, t.y);
}

/

void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
    float t = iTime;
    vec2 uv = fragCoord/iResolution.xy;

    // create a fire texture
    float q = noise(uv + t);
    float fire = fire(uv - (t * .934) - q);
    
    float square_tunnel = square_tunnel(uv);

    // apply fire everywhere to only select pixels
    float grad = fire * (1. - (square_tunnel * 2. -1.));

    // can't really explain what this is doing
    grad = max(0., (1. - grad)/grad);

    // adjust fade
     // grad /= (1. + grad);
    
    // add colour
    vec3 portal = vec3((grad * grad * grad), (grad * grad), grad); 

    // add your portal onto whatever
    //vec3 bg = texture(iChannel0, uv + (q * .1 - .05)).rgb * square_tunnel * 2.;
    
    fragColor = vec4( portal, 1.);
}