PixelPerfect: Sketch #20 WIP

[PixelPerfect]

Hello everyone, I’m new for this community, this is my first post
I’ve got a shader fever 2 years ago when I asked myself: “how those hearthstone card effects are done?”, and I can’t stop learning realtimevfx magic.

My goal is to create a cute magical-flame creature.
As 100% procedural shader.
No particles, no geometry, no input textures - just one quad and pure math.

Here is what I have so far:
(it is impossible to make a smooth gif, those rings at the background is a compression artifact)

And this is what I had at the stat:

https://imgur.com/a/Ni9isHn

imgur removed the sound from video,
but it is fun: when I was capturing the video I’ve forgotten to turn off audio and got a sound from a movie that was playing on other display, accidentally there was something about drugs and fire with anxious sounds, and IMO it fits really well

you can check version with sound here: (until I’ll figure out how to post a video with sound)

Good

---

Update 14.02

Some experiments to make a flame without procedural noise
This isn’t random at all

A good thing about it is that it’s very very cheap to compute
no texture sampling cost, no noise, most costly operations here are 1x rotation (sine + cosine) and 2x length (square root) the rest is just multiplication and addition

https://youtu.be/KHOvKUD2PFA

---

Update 17.02

More progress on noiseless flame
the result is much more realistic than flame based on Perlin noise

there is a lot more turbulence now, I achieved that by mixing 2 differently scaled grids of circles rotating with different speed

and then i’m using this pattern to displace uv

see a high-res screenshot of nodes graph in comments below

now there is a lot of parameters that allow controlling turbulence speed and intensity, it is easy to make a quiet candle or an intense blaze

[PixelPerfect]

It is made with unity’s Shader Graph

and it looks like I’m close to its limits, it is getting to run slow when adding/connecting new nodes.
So to continue improving it I’ll probably have to switch to good old code editor…

(Technique1: SDF)
Actually, it is super simple to create a circle with math, so there is absolutely no reason to use a texture.
I use both soft and hard procedural SDF circles:

hard:

and soft:

The math behind the circle is ultra simple:

   float circle(vec2 pos, float radius){	
       return length(pos) - radius;
   }

(Technique2: UV-scroll)
next, I’ve taken a procedural noise and made it move with UV-scroll:

(Technique3: UV-displacement)
and used it to displace UV, and also added a small sine(time) displacement to the vertical axis of UV (it is a big graph but for real only few lines in a shader)

as a result, now I have a breathing circle:

(WIP on explanations)

do you like it so far?

[PixelPerfect]

And now, after few hours of work on a shader and writing this post, I remembered that there already was a cute flame character, in “Howl’s Moving Castle” by Miyazaki

[AlexFedorov]

That’s cool! I like it!
Nice eyes movement. =)

[simonschreibt]

sooooooo cuuuute! <3

[PixelPerfect]

Highres shader graph screen for noiseless flame

[PixelPerfect]

Turbulence patternt generation for noisless flame

[simonschreibt]

that’s very cool! learned a lot from your examples!

[Shr1mpsy]

Aawwww, this is so cute! I wish I could hug it!
Thanks for the breakdown

[TitanLeGrand]

It’s my favorite sketch for this contest by now. Can I ask how you did the eyes? If so, a short explanation will do.

You are Probably just scaling the spheres in the V coordinates for the eyes and them offsetting in the U.
Or is there more going on?

[PixelPerfect]

All of this is UV manibulation and SDF

Adjust UV (uv+eyePosition) to the center of eye, draw small circle using that UV, do same for second eye, and sum both eyes. Left-right eyes movement is based on sin(time * speed) as well applyed to UV.x. Blinking is sin(remap(noise(time * speed))) appyed to circle height (UV.y scale).

I’ll post detailed explnaitions later with screenshots or video

[PixelPerfect]

Small update
it is getting more and more realistic

made little tweaks to make it smoother and
added a bit more randomness by sliding even rows of circles over time

[RodyMuijrers]

Really clever UV distortion! Works really well, it makes for some great shapes in the flares coming off the flame.

[TitanLeGrand]

I love the sliding rows I tried to recreate it but I don’t seem to figure how you did it with 1 fraction node only. I’m using 2 frac nodes and lerp them with a mask). At the moment I think that mine is too expansive. Any tips?

[PixelPerfect]

It is really simple and well explained in the book of shaders
Also, you can find a lot of coolness by searching shadertoy for “polka dots”

Here is my setup, in a shader it’ll be one line of HLSL

Fract and step are very cheap operations, so computation cost for this shift is close to nothing

[PixelPerfect]

In HLSL all this much more compact

    float2 rotate(float2 p, float a){
        float c = cos(a);
        float s = sin(a);
        return mul(p,float2x2(c,-s,s,c));
    }
    
    float2 turbulenceUV(float2 uv, float tiles, float shiftSpeed, float2 rotCenter, float rotSpeed){
        uv = rotate(uv-rotCenter, _Time.y*rotSpeed); // rotate over time 
        uv *= tiles; // uv scale 
        uv.g += step(.5, frac(uv.r/2.0))*_Time.y*shiftSpeed; // shift even rows   
        return frac(uv);
    }

[TitanLeGrand]

owh great thanks for the extra info!

[PixelPerfect]

A bit more smothnes
using polynomial smooth min by Iq

[PixelPerfect]

now I’m happy about flame itself
the latest version does not use node editor - this is about 20 lines of hlsl

no textures, no procedural noise, no random, no particles, no dirty autogenerated shader code
only one quad and pure math

unfortunatley no time left for character part
anyway it was fun and i’ll post more details later

[Disturbed]

Hey Pixel! I have been working on my version of this flame shader! And this is what i came up with

Gyazo

Gyazo

My question is: How did you make the blinking? Ive tried for a while now but nothing seems to work! Can you give me some help?

Thank you!