Godot 4: Line effect shader (tutorial)
Вставка
- Опубліковано 21 січ 2024
- 📖 Godot 4 book: filiprachunek.gumroad.com/l/g...
💡 Get exclusive content on Patreon: / fencerdevlog
The lightning effect tutorial: • Godot 4: Lightning Sha...
#godot #godot4 #godotengine #shaders
Hi everyone! Do you remember the lightning shader that I was creating in one of the previous videos? This time, we'll try something similar but less chaotic, so the code will be significantly shorter. I'll show you how to transform a simple line into something like this.
It would be great if you could make example of some spatial shape shader that follows terrain and its vertexes are always raycasted above terrain it follows. This channel is great! Thanks!
That would be a bit more difficult than a simple trick with lines. 😎 But I can try.
Absolutely awesome. Thanks for sharing your knowledge !!
Happy to help!
An excellent tutorial, thank you.
You are welcome!
I've been looking for something like this for a long itme now, thanks for this, truly great video and content man, i would love to see something like this for a Heart Beat movement on where you can change the color and frequency, i dont know how i can change it to make more hard curves like a digital sign or soundwave, that would be awsome
You are welcome. I'll think about more customizations.
I'm new to shaders. Is it a well known method to multiply uv.x by ratio in order to maintain aspect ratio on 03:25? Where can I read more about that? I just want to know where from this method is
It is a result of a simple calculation, as the UV coordinates are always in the range (0, 1), regardless of the shader container rectangle. Just try to comment out the line with uv.x multiplication, you should see that the effect stretches horizontally.
It's better visible with circular elements, like this one: ua-cam.com/video/215ON1LQ_7I/v-deo.html
These are really great, but im having a hard time combining this and the lightning effect from your previous tutorial. I am trying to make the lightning effect begin AND end at the 0.5 uv.y(so it is horizontal) but it is really all over the place, so I am trying to use this shader, but i am unsure how to plug in the FBM function and only operate on lets say the inner range of uv.x(0.25-0.75). Im not sure how to control the limits of which uv's to operate on with the FBM.
Well, since FBM usually operates on the whole canvas, it's expected to display the effect without any boundaries. However, there could be a workaround. For instance, you can try to multiply uv.x (apply a zoom factor) and then limit the draw_line result by the inverse smoothstep:
void fragment() {
vec2 uv = UV - 0.5;
uv.x *= resolution.x / resolution.y;
float shift = TIME * speed;
vec3 color = vec3(0.0);
uv.x *= 2.0; // zoom factor
for (float i = 0.0; i < iterations; i += 1.0) {
color += draw_line(uv, line_color, shift + i * 0.4, 1.0 + freq_coef) * IS(0.8, 1.0, abs(uv.x)); // boundaries
}
COLOR = vec4(color * brightness, 1.0);
}
@@FencerDevLogThank you for the reply, I got something working last night but looking forward to trying this change. Keep making great tutorials, you explain things well.
@@michaelhoover7689Thanks! I will.
As a tip, if you can bring the video image closer to the code when you are writing or explaining it. I have a large monitor, it can be very uncomfortable to reach to read the code. Greetings.
Sure, I can try. Thanks for the tip. 😎
I love shaders like this, they are so atractive.
I hoppe one day i can understand how to play with them like you.
Im starting with shaders and for me its too hard to understand the shader code when there are several lines in it.
I get your explication of each line but i lost it when i try to think the effect of the combination of various lines (for example the substraction to make the line's center thin, i would never visualize that)
Could you tell me some advise to work this?
Thanks for watching. 😎 Usually, I visualize only a few basic functions, such as the inverse smoothstep of the absolute value (horizontal line), which are the building blocks you will learn to use over time. It just takes experimenting with different configurations and observing the results. Perhaps I could create a video specifically about these basic elements, since almost all shaders are based on them.
Anyway, this page contains plenty of useful information: godotshaders.com/snippet/useful-code-snippets/
@@FencerDevLog
> Perhaps I could create a video specifically about these basic elements, since almost all shaders are based on them
It would be great to have a video explaining the concepts and origins of these "basic blocks" - how they work in terms of UV and all that. I haven't come across any videos on this topic that demonstrate and gives intuition how to create these fundamental building blocks. For instance, I don't understand why abs(uv.y) results in just a horizontal line. Thanks
AWESOME, crashed 4 times when writing the for loop, had to write in a text document and copy paste it
Unstable Godot?
@FencerDevLog Did not use the second monitor and switched between windows, my fish like memory could no go past "for(float i = 0.0; i < iterations; )"
I stopped to look 4 times and since the code is executed immediately after, something seems to not be alright and it crashed
I looked and it always happened at 16:23
I use Gadot v 4.2.1 stable
Please do some water shader tutorials :)
I have it in my long-term plan. 😎
@@FencerDevLog Nice 😎