Fire shader help

Hey everyone, I’m looking for some help with a shader.

There is this fire shader Shader - Shadertoy BETA which I really like the effect of, however, instead of having the fire emit from the ‘planet’ in the bottom right corner like this image:

How could change the shader to instead emit from a custom path for instance like this:

Any help would be appreciated or even if you could point me in a direction of another fire effect or library/shader where a fire effect emits from a custom path…

(I also like this shader if it’s easier? however it looks even more complicated - Shader - Shadertoy BETA )

Thank you :slight_smile:

Get this sine path:

So you can pass a texture with the data of height to have something custom as the emitter :thinking:

Changed this:

vec2 p = (uv * 2.0 - 1.0) * aspect + vec2(-aspect.x * 0.6, 2.0);
	
vec2 polar = vec2(atan(p.x, p.y), length(p) * 0.4);

to this

vec2 p = (uv * 2.0 - 1.0) * aspect + vec2(0, 2. - sin(uv.x * PI2 * 4.) * 0.1);
vec2 polar = p * vec2(1, 0.5);
3 Likes

Hey @prisoner849 , that’s amazing! Thank you so much for taking a look at it. So just to understand what you’ve done there, ‘p’ is basically the ‘x’ axis base point right?

Secondly, how would I achieve this with a texture?

Would it be a black and white texture with the path being a white line?

I’ve worked with textures before in shaders but not to do any kind of height data like you mentioned?

I am converting this shader to be used in Three.js, so if you have any existing example of how to pass a texture in a height data, that would be so much appreciated :pray:

1 Like

You can use DataTexture. Pass it in a uniform and process in shaders :thinking:

1 Like