这篇文章探讨了如何利用噪声函数生成逼真的火焰效果。通过定义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.);
}