cpp模拟火焰效果

⌚Time: 2025-03-15 15:14:00

👨‍💻Author: Jack Ge

火焰效果可以通过粒子系统模拟实现。基本上就是这种效果：

这是一个itch.io上由wishforge分享的示例程序。

可以看出来是通过不断创造一些圆形粒子，并且改变其大小，颜色，透明度等信息模拟火焰运行状态。但是这样仔细看不是很逼真。

如果把这些圆形粒子，变成火焰纹理，效果会更好。除了使用粒子系统之外，还可以使用着色器语言模拟火焰。

通过着色器语言控制显卡进行像素级别的绘制，可以实现更细腻的火焰效果。

这个例子是在www.shadertoy.com上一个叫xbe的人的片段着色器代码，并修改在本地运行。

#version 330 core

out vec4 fragColor;

uniform float time;//时间
uniform vec2 resolution; // 屏幕分辨率

// procedural noise from IQ

vec2 hash( vec2 p )
{
    p = vec2( dot(p,vec2(127.1,311.7)),
             dot(p,vec2(269.5,183.3)) );
    return -1.0 + 2.0*fract(sin(p)*43758.5453123);
}

float noise( in vec2 p )
{
    const float K1 = 0.366025404; // (sqrt(3)-1)/2;
    const float K2 = 0.211324865; // (3-sqrt(3))/6;
    
    vec2 i = floor( p + (p.x+p.y)*K1 );
    
    vec2 a = p - i + (i.x+i.y)*K2;
    vec2 o = (a.x>a.y) ? vec2(1.0,0.0) : vec2(0.0,1.0);
    vec2 b = a - o + K2;
    vec2 c = a - 1.0 + 2.0*K2;
    
    vec3 h = max( 0.5-vec3(dot(a,a), dot(b,b), dot(c,c) ), 0.0 );
    
    vec3 n = h*h*h*h*vec3( dot(a,hash(i+0.0)), dot(b,hash(i+o)), dot(c,hash(i+1.0)));
    
    return dot( n, vec3(70.0) );
}

float fbm(vec2 uv)
{
    float f;
    mat2 m = mat2( 1.6,  1.2, -1.2,  1.6 );
    f  = 0.5000*noise( uv ); uv = m*uv;
    f += 0.2500*noise( uv ); uv = m*uv;
    f += 0.1250*noise( uv ); uv = m*uv;
    f += 0.0625*noise( uv ); uv = m*uv;
    f = 0.5 + 0.5*f;
    return f;
}

// no defines, standard redish flames
//#define BLUE_FLAME
//#define GREEN_FLAME

void main()
{
    //归一化坐标
    vec2 uv = gl_FragCoord.xy / resolution;
    vec2 q = uv;
    q.x *= 5.;
    q.y *= 2.;
    float strength = floor(q.x+1.);
    float T3 = max(3.,1.25*strength)*time;
    q.x = mod(q.x,1.)-0.5;
    q.y -= 0.25;
    float n = fbm(strength*q - vec2(0,T3));
    float c = 1. - 16. * pow( max( 0., length(q*vec2(1.8+q.y*1.5,.75) ) - n * max( 0., q.y+.25 ) ),1.2 );
//  float c1 = n * c * (1.5-pow(1.25*uv.y,4.));
    float c1 = n * c * (1.5-pow(2.50*uv.y,4.));
    c1=clamp(c1,0.,1.);

    vec3 col = vec3(1.5*c1, 1.5*c1*c1*c1, c1*c1*c1*c1*c1*c1);
    
#ifdef BLUE_FLAME
    col = col.zyx;
#endif
#ifdef GREEN_FLAME
    col = 0.85*col.yxz;
#endif
    
    float a = c * (1.-pow(uv.y,3.));
    fragColor = vec4( mix(vec3(0.),col,a), 1.0);
}

使用sfml加载着色器并且运行效果：

#include <SFML/Graphics.hpp>

int main()
{
    // 创建窗口
    sf::RenderWindow window(sf::VideoMode(800, 600), "SFML Shader Example");
    window.setFramerateLimit(30);
    // 加载着色器
    sf::Shader shader;
    if (!shader.loadFromFile("frag.shader", sf::Shader::Fragment))
    {
        getchar();
        return -1;
    }

    // 设置着色器参数
    shader.setUniform("resolution", sf::Vector2f(window.getSize()));

    // 创建一个矩形来覆盖整个屏幕
    sf::RectangleShape rect(sf::Vector2f(window.getSize()));
    rect.setPosition(0, 0);
    sf::Clock clock;
    // 主循环
    while (window.isOpen())
    {
        sf::Event event;
        while (window.pollEvent(event))
        {
            if (event.type == sf::Event::Closed)
                window.close();
        }
        
        shader.setUniform("time", clock.getElapsedTime().asSeconds());
        window.clear();
        window.draw(rect, &shader);
        window.display();
    }

    return 0;
}

效果

片段着色器代码，下面是deepseek对它的解释

这段代码是一个基于GLSL（OpenGL Shading Language）的片段着色器，用于生成一个火焰效果。以下是对代码的详细解释：

1. 变量声明

2. 噪声函数

3. 主函数 main()

4. 总结

这段代码通过使用分形布朗运动噪声和简单的数学函数，生成了一个动态的火焰效果。火焰的颜色、形状和透明度都可以通过调整代码中的参数来控制。通过预处理器指令，还可以轻松地切换火焰的颜色为蓝色或绿色。

我在www.shadertoy.com找到了另一段逼真的火焰片段着色器代码，和网站着色器代码几个变量不同，我修改了几个变量以便在本地使用相同的sfml代码运行。

#version 330 core

out vec4 fragColor;

uniform float time;//时间
uniform vec2 resolution; // 屏幕分辨率
//
// Description : Array and textureless GLSL 2D/3D/4D simplex 
//                           noise functions.
//          Author : Ian McEwan, Ashima Arts.
//  Maintainer : ijm
//       Lastmod : 20110822 (ijm)
//       License : Copyright (C) 2011 Ashima Arts. All rights reserved.
//                           Distributed under the MIT License. See LICENSE file.
//                           https://github.com/ashima/webgl-noise
// 

vec3 mod289(vec3 x) {
    return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec4 mod289(vec4 x) {
    return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec4 permute(vec4 x) {
         return mod289(((x*34.0)+1.0)*x);
}

vec4 taylorInvSqrt(vec4 r)
{
    return 1.79284291400159 - 0.85373472095314 * r;
}

float snoise(vec3 v)
    { 
    const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
    const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);

// First corner
    vec3 i  = floor(v + dot(v, C.yyy) );
    vec3 x0 =    v - i + dot(i, C.xxx) ;

// Other corners
    vec3 g = step(x0.yzx, x0.xyz);
    vec3 l = 1.0 - g;
    vec3 i1 = min( g.xyz, l.zxy );
    vec3 i2 = max( g.xyz, l.zxy );

    //   x0 = x0 - 0.0 + 0.0 * C.xxx;
    //   x1 = x0 - i1   + 1.0 * C.xxx;
    //   x2 = x0 - i2   + 2.0 * C.xxx;
    //   x3 = x0 - 1.0 + 3.0 * C.xxx;
    vec3 x1 = x0 - i1 + C.xxx;
    vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
    vec3 x3 = x0 - D.yyy;           // -1.0+3.0*C.x = -0.5 = -D.y

// Permutations
    i = mod289(i); 
    vec4 p = permute( permute( permute( 
                         i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
                     + i.y + vec4(0.0, i1.y, i2.y, 1.0 )) 
                     + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));

// Gradients: 7x7 points over a square, mapped onto an octahedron.
// The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
    float n_ = 0.142857142857; // 1.0/7.0
    vec3    ns = n_ * D.wyz - D.xzx;

    vec4 j = p - 49.0 * floor(p * ns.z * ns.z); //  mod(p,7*7)

    vec4 x_ = floor(j * ns.z);
    vec4 y_ = floor(j - 7.0 * x_ );     // mod(j,N)

    vec4 x = x_ *ns.x + ns.yyyy;
    vec4 y = y_ *ns.x + ns.yyyy;
    vec4 h = 1.0 - abs(x) - abs(y);

    vec4 b0 = vec4( x.xy, y.xy );
    vec4 b1 = vec4( x.zw, y.zw );

    //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
    //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
    vec4 s0 = floor(b0)*2.0 + 1.0;
    vec4 s1 = floor(b1)*2.0 + 1.0;
    vec4 sh = -step(h, vec4(0.0));

    vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
    vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;

    vec3 p0 = vec3(a0.xy,h.x);
    vec3 p1 = vec3(a0.zw,h.y);
    vec3 p2 = vec3(a1.xy,h.z);
    vec3 p3 = vec3(a1.zw,h.w);

//Normalise gradients
    //vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
    vec4 norm = inversesqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
    p0 *= norm.x;
    p1 *= norm.y;
    p2 *= norm.z;
    p3 *= norm.w;

// Mix final noise value
    vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
    m = m * m;
    return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3) ) );
    }

//////////////////////////////////////////////////////////////

// PRNG
// From https://www.shadertoy.com/view/4djSRW
float prng(in vec2 seed) {
    seed = fract (seed * vec2 (5.3983, 5.4427));
    seed += dot (seed.yx, seed.xy + vec2 (21.5351, 14.3137));
    return fract (seed.x * seed.y * 95.4337);
}

//////////////////////////////////////////////////////////////

float PI = 3.1415926535897932384626433832795;

float noiseStack(vec3 pos,int octaves,float falloff){
    float noise = snoise(vec3(pos));
    float off = 1.0;
    if (octaves>1) {
        pos *= 2.0;
        off *= falloff;
        noise = (1.0-off)*noise + off*snoise(vec3(pos));
    }
    if (octaves>2) {
        pos *= 2.0;
        off *= falloff;
        noise = (1.0-off)*noise + off*snoise(vec3(pos));
    }
    if (octaves>3) {
        pos *= 2.0;
        off *= falloff;
        noise = (1.0-off)*noise + off*snoise(vec3(pos));
    }
    return (1.0+noise)/2.0;
}

vec2 noiseStackUV(vec3 pos,int octaves,float falloff,float diff){
    float displaceA = noiseStack(pos,octaves,falloff);
    float displaceB = noiseStack(pos+vec3(3984.293,423.21,5235.19),octaves,falloff);
    return vec2(displaceA,displaceB);
}

void main() {
    vec2 offset = vec2(0.5,0.5);
        //
    float xpart = gl_FragCoord.x/resolution.x;
    float ypart = gl_FragCoord.y/resolution.y;
    //
    float clip = 210.0;
    float ypartClip = gl_FragCoord.y/clip;
    float ypartClippedFalloff = clamp(2.0-ypartClip,0.0,1.0);
    float ypartClipped = min(ypartClip,1.0);
    float ypartClippedn = 1.0-ypartClipped;
    //
    float xfuel = 1.0-abs(2.0*xpart-1.0);//pow(1.0-abs(2.0*xpart-1.0),0.5);
    //
    float timeSpeed = 0.5;
    float realTime = timeSpeed*time;
    //
    vec2 coordScaled = 0.01*gl_FragCoord.xy - 0.02*vec2(offset.x,0.0);
    vec3 position = vec3(coordScaled,0.0) + vec3(1223.0,6434.0,8425.0);
    vec3 flow = vec3(4.1*(0.5-xpart)*pow(ypartClippedn,4.0),-2.0*xfuel*pow(ypartClippedn,64.0),0.0);
    vec3 timing = realTime*vec3(0.0,-1.7,1.1) + flow;
    //
    vec3 displacePos = vec3(1.0,0.5,1.0)*2.4*position+realTime*vec3(0.01,-0.7,1.3);
    vec3 displace3 = vec3(noiseStackUV(displacePos,2,0.4,0.1),0.0);
    //
    vec3 noiseCoord = (vec3(2.0,1.0,1.0)*position+timing+0.4*displace3)/1.0;
    float noise = noiseStack(noiseCoord,3,0.4);
    //
    float flames = pow(ypartClipped,0.3*xfuel)*pow(noise,0.3*xfuel);
    //
    float f = ypartClippedFalloff*pow(1.0-flames*flames*flames,8.0);
    float fff = f*f*f;
    vec3 fire = 1.5*vec3(f, fff, fff*fff);
    //
    // smoke
    float smokeNoise = 0.5+snoise(0.4*position+timing*vec3(1.0,1.0,0.2))/2.0;
    vec3 smoke = vec3(0.3*pow(xfuel,3.0)*pow(ypart,2.0)*(smokeNoise+0.4*(1.0-noise)));
    //
    // sparks
    float sparkGridSize = 30.0;
    vec2 sparkCoord = gl_FragCoord.xy - vec2(2.0*offset.x,190.0*realTime);
    sparkCoord -= 30.0*noiseStackUV(0.01*vec3(sparkCoord,30.0*time),1,0.4,0.1);
    sparkCoord += 100.0*flow.xy;
    if (mod(sparkCoord.y/sparkGridSize,2.0)<1.0) sparkCoord.x += 0.5*sparkGridSize;
    vec2 sparkGridIndex = vec2(floor(sparkCoord/sparkGridSize));
    float sparkRandom = prng(sparkGridIndex);
    float sparkLife = min(10.0*(1.0-min((sparkGridIndex.y+(190.0*realTime/sparkGridSize))/(24.0-20.0*sparkRandom),1.0)),1.0);
    vec3 sparks = vec3(0.0);
    if (sparkLife>0.0) {
        float sparkSize = xfuel*xfuel*sparkRandom*0.08;
        float sparkRadians = 999.0*sparkRandom*2.0*PI + 2.0*time;
        vec2 sparkCircular = vec2(sin(sparkRadians),cos(sparkRadians));
        vec2 sparkOffset = (0.5-sparkSize)*sparkGridSize*sparkCircular;
        vec2 sparkModulus = mod(sparkCoord+sparkOffset,sparkGridSize) - 0.5*vec2(sparkGridSize);
        float sparkLength = length(sparkModulus);
        float sparksGray = max(0.0, 1.0 - sparkLength/(sparkSize*sparkGridSize));
        sparks = sparkLife*sparksGray*vec3(1.0,0.3,0.0);
    }
    //
    fragColor = vec4(max(fire,sparks)+smoke,1.0);
}

调用的sfml代码和之前的是一样的，运行结果：

这是deepseek对这段着色器代码的解释，代码很复杂我开启了它的深度思考功能

这段GLSL着色器代码实现了一个动态的火焰效果，结合了烟雾和火花粒子。以下是关键部分的逐步解释：

  1. 噪声基础
  1. 坐标预处理
vec2 coordScaled = 0.01*gl_FragCoord.xy - 0.02*vec2(offset.x,0.0);
vec3 position = vec3(coordScaled,0.0) + vec3(1223.0,6434.0,8425.0);
  1. 火焰动态模拟
vec3 flow = vec3(4.1*(0.5-xpart)*pow(ypartClippedn,4.0),
          -2.0*xfuel*pow(ypartClippedn,64.0),0.0);
  1. 多层噪声混合
vec3 noiseCoord = (vec3(2.0,1.0,1.0)*position + timing + 0.4*displace3)/1.0;
float noise = noiseStack(noiseCoord,3,0.4);
  1. 颜色生成
vec3 fire = 1.5*vec3(f, fff, fff*fff);
  1. 烟雾效果
vec3 smoke = vec3(0.3*pow(xfuel,3.0)*pow(ypart,2.0)*(smokeNoise+0.4*(1.0-noise)));
  1. 火花系统
sparkCoord += 100.0*flow.xy;
float sparkLife = min(10.0*(1.0-min(...)),1.0);
  1. 最终合成
fragColor = vec4(max(fire,sparks)+smoke,1.0);

这个着色器通过多层噪声混合、动态坐标变换和物理模拟，实现了包含火焰主体、飘散烟雾和迸发火花的复杂燃烧效果。数值参数经过精心调整，在性能与效果间取得平衡。