Shader Flames

User Code & Projects mythruna
1

On the way to trying to rewrite my shader-based particle effects, I started looking into redoing my fire shader.

So the funny thing is that I didn’t end up using particles at all. Playing with a single flame texture and some noise got me started on this path where I now have just three flame textures, a noise texture, and some math. Thought some might find it interesting.

This is just one quad. The billboarding is also done in the shader so I can batch these up. I’m still tweaking it but I’m pleased with the progress so far. Next is to make my own flame atlas instead of the one flame I borrowed from someone elses demo.

[video]http://www.youtube.com/watch?v=2loPyyhv6uE&feature=youtu.be[/video]

7 Likes
2

Cool shader!
Looks like a SimpleSprite shader in ShaderBlow… But you rotate the polygon in shader… Looks cool!

Anyway, if you want to cntribute to ShaderBlow - you are welcome. :slight_smile:

3

Looking very nice for so “simple” setup! :slight_smile:

4

Another cool thing is that the repeat cycle is really long… I’m not even sure what it is anymore. Because of all of the different time cycles and how they sample the noise, it takes a while before the same set of variables line up again to produce the same frame.

…even more important, two flames sitting right next to each other would have different looks so it doesn’t look cookie cutter.

5

How does it look if you arrange 8 of those in a star pattern rather than billboarding?

6
@zarch said: How does it look if you arrange 8 of those in a star pattern rather than billboarding?

(Did you really mean 8 quads or a star with 8 points?)

Not sure yet. They’d have to be switched to AlphaAdd blending so they might accumulate funny if I didn’t tone down the brightness on them. Also, looking down on them might look even worse than it does now, maybe. I will play with it probably… I am trying to make them cheaper than my old 12 particle flames, though. :slight_smile: I will also try a three quads in a six pointed star.

The current billboarding actually leans the billboard back a little bit if you look at it directly from the top… but it still looks “wrong”… it just doesn’t completely disappear. :slight_smile:

7

Yes, 8 pointed star. Probably done as 4 quads with backface culling off but its 8 visible surfaces.

I’d also do a 5th quad for the “floor” as well and an embers effect rather than the flames…hopefully that should then cope with people looking “down” on things.

It’s just an idea though, what you have already looks awesome.

8

The problem with billboarding is that the flames rotate with the camera, so as you turn the flames turn too. If they are done to fixed quads then you should be able to walk past the fire and have the flames move naturally as you do.

9

I did some various versions and tweaks to try out some of the ideas here and some I had already.

First, I removed the internal “root glow” from the last one. There was a kind of glowy ball at the bottom but I think it aliases the rest of the textures oddly and is probably better done as a non-axis aligned billboard separately. Anyway… so these are all just flames and no internal bottom highlight.

More analysis after video…
[video]http://www.youtube.com/watch?v=rOpS5ifEyTo&feature=youtu.be[/video]

So, it was important to me to confirm that the multi quads thing was not a silver bullet. Even my own conventional wisdom kept trying to steer me in this direction. In fact, I was so paranoid about the “billboard effect” that I originally indexed into the texture atlas based on view direction so that the textures would change as you walked around the flame… but the flames are already cycling through the atlas so fast that you couldn’t even tell.

…indeed, to my eye, I can pretend that the star ones are also billboards and I don’t have any problem fooling myself until the edge-on artifacts show up… and that’s hardly a “good thing”. These artifacts could be removed with some clever alpha application based on view direction, etc… but then it would look just like the billboarded one. :slight_smile:

Also, the multi-quad versions have a significant downside for me in that I have to turn off depth writing. For batched geometry that is a significant down side.

You can also see that from the top, the star shaped ones look like a monkey’s behind. Covering that up is going to be significant. One thing that’s really nice about Mythruna’s current bubbly flames (based on round particles) is that they look good and 3D from all angles. So I don’t want to take too many steps back.

Finally, given the idea of trying multiple different effects (like an ember in the middle or whatever) I tried seeing what it would look like to combine two separate flames: a normal sized outer one using the lower intensity blending and a smaller inner one using the original internal additive blending. This one shows a lot of promise for the cost of just one more quad.

I may also try to add a “poof” particle flame where single flame rises from the bottom to the top as a single particle. I think it would create some nice variation and can help round out the top views also.

Anyway, I still need to make my own flame texture atlas and (for my purposes) make the whole effect look more like an illustration/painting and less photographic.

1 Like
10

Looking really nice, and I think it’s a convincing demonstration that billboard is better.

I wonder actually if you could first billboard to always be straight at camera…and then 2nd modify the shader based on the result of that billboarding.

If it’s billboarded vertical do the flames as above. If its billboarded horizontal do the “top down” thing with embers in the centre and a few flames flickering around.

Fade between the two (i.e. the less vertical the quad is the more embers you bring in at the bottom) and you can now look from any angle and see fire.

11
@zarch said: Looking really nice, and I think it's a convincing demonstration that billboard is better.

I wonder actually if you could first billboard to always be straight at camera…and then 2nd modify the shader based on the result of that billboarding.

If it’s billboarded vertical do the flames as above. If its billboarded horizontal do the “top down” thing with embers in the centre and a few flames flickering around.

Fade between the two (i.e. the less vertical the quad is the more embers you bring in at the bottom) and you can now look from any angle and see fire.

I’ve considered it… still considering it. The shader is already getting pretty leggy, though. :slight_smile:

12

That looks awesome!

13

Sometimes the videos don’t show these things off well, so I uploaded that test if anyone wants to play with it personally:

http://mythruna.com/temp/FlameTest-Linux.zip
http://mythruna.com/temp/FlameTest-MacOSX.zip
http://mythruna.com/temp/FlameTest-Windows.zip

Keep in mind if you go poking around in the data files that the flame texture I started with is from another fire demo I found online and of questionable pedigree for redistribution. All three flame textures are rotations of this one because I’m lazy and it was enough to develop the effect.

14

For reference, some real fire:

Got some ideas from these that I’ll play with after I’ve made my own flame textures.

15

Can’t stop tweaking… need to do real work, though. The fire videos inspired me a bit.

I turned on a red root glow and modified the speed of the two separate flame quads in this last one. They each have a different speed which kind of adds to the layering, I think.

1 Like
16

The flame with the red root glow has a really nice calming effect, almost hypnotizing, just like watching a real fire. ( I didn’t mean to imply any pyromaniac tendencies here. )

Will such a nice and smooth effect not stand out quite a bit from the pixelized look of Mythruna?

17

@pspeed you are writing sloppy shader code, or atleast my mac thinks so =P mixing ints and floats in expressions is not allowed and results in a exception on OS X…

18
<cite>@kwando said:</cite> @pspeed you are writing sloppy shader code, or atleast my mac thinks so =P mixing ints and floats in expressions is not allowed and results in a exception on OS X..

ACtually its not your mac, but the specification that forbids implicit casting ^^

19
@kwando said: @pspeed you are writing sloppy shader code, or atleast my mac thinks so =P mixing ints and floats in expressions is not allowed and results in a exception on OS X..

Yeah, sorry… I haven’t cleaned it up yet. I forget to add a .0 after number sometimes and I sort of think it’s stupid that glsl won’t upcast automatically when it’s f-ing obvious. :-/ :slight_smile:

20
@kwando said: @pspeed you are writing sloppy shader code, or atleast my mac thinks so =P mixing ints and floats in expressions is not allowed and results in a exception on OS X..

Actually, I had cleaned it up but I guess it was the #define I added at the last minute that did it. :-/