Page 1 of 1

Fire with GLSL

Posted: Tue Oct 22, 2013 10:34 pm
by Etn
Hello !
I want to make a fire effect like this one : https://glsl.heroku.com/e#11669.0
I tried to do it in Lua, but it don't work : there is no waves, just a color :(
Can you help me please ? :)

feu.glsl :

Code: Select all

extern number time;
extern vec2 resolution;

vec3 iResolution = vec3(resolution.x, resolution.y, 100.0);
number iGlobalTime = time;

number rand(vec2 n) { 
  return fract(cos(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
}

// Genera ruido en función de las coordenadas del pixel
number noise(vec2 n) {
  const vec2 d = vec2(0.0, 1.0);
  vec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), 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);
}

// Fractional Brownian Amplitude. Suma varias "capas" de ruido.
number fbm(vec2 n) {
  number total = 0.0, amplitude = 1.0;
  for (int i = 0; i < 4; i++) {
    total += noise(n) * amplitude;
    n += n;
    amplitude *= 0.5;
  }
  return total;
}

vec4 effect(vec4 color, Image texture, vec2 texture_coords, vec2 pixel_coords)
{
  texture_coords = texture_coords - 0.5;
  
  const vec3 c1 = vec3(0.1, 0.0, 0.0); // Rojo oscuro.
  const vec3 c2 = vec3(0.7, 0.0, 0.0); // Rojo claro.
  const vec3 c3 = vec3(0.2, 0.0, 0.0); // Rojo oscuro.
  const vec3 c4 = vec3(1.0, 0.9, 0.0); // Amarillo.
  const vec3 c5 = vec3(0.1); // Gris oscuro.
  const vec3 c6 = vec3(0.9); // Gris claro.
  
  vec2 p = texture_coords.xy * 16.0 / iResolution.xx; // Desfasa las coordenadas para que haya más cambio de un resultado a los colindantes.
  number q = fbm(p - iGlobalTime * 0.5);
  vec2 r = vec2(fbm(p + q + iGlobalTime * 0.7 - p.x - p.y), fbm(p + q - iGlobalTime * 0.4));
  vec3 c = mix(c1, c2, fbm(p + r)) + mix(c3, c4, r.x) - mix(c5, c6, r.y);
  return vec4(c * 
          cos(1.57 * texture_coords.y / iResolution.y), // Gradiente más ocuro arriba.
          1.0);
}

main.lua :

Code: Select all

local lg = love.graphics
local swidth, sheight = lg.getWidth, lg.getHeight

function love.load()
   lg.setBackgroundColor(35, 30, 65)
   time = 0
   lg.setDefaultImageFilter("nearest", "nearest")
   
   effect = lg.newPixelEffect "feu.glsl"
   effect:send("resolution", {1, 1})
   effect:send("time", time)
end

function love.update (dt)
   time = time + dt
   effect:send("time", time)
end

function love.draw ()
   lg.clear()
   lg.setPixelEffect(effect)
   lg.setColor(0, 0, 0, 0)
   lg.rectangle('fill', 0, 0, swidth(), sheight())
   lg.setPixelEffect()
end
Sorry for my english.

Re: Fire with GLSL

Posted: Wed Oct 23, 2013 12:42 am
by Ref
Probably off base but what about one of these?

Re: Fire with GLSL

Posted: Wed Oct 23, 2013 11:54 pm
by Etn
Thank you ! fire2.love is what i'm looking for.