GODOT TUTORIAL: Shockwave shader for noobs 

Thanks! I got into Godot thanks to Happie Cat's video, and the first tutorials I watched were yours, about 4 years ago^^

HeartBeast subbing means I sub as well. Everything Benjamin touches with his eyes is GOLD!!

how do i define the color?

@@me551did you even watch. The video?

@@herrlehrer1479 ya. I am just a noob at coding especially shaders so it will make sense if I would understand

@@herrlehrer1479 how would one go about disabling the offset everywhere except the shockwave? I followed the code and it works just the chromatic abberation applies to the whole screen

It's been a year, but keep in mind shaders are basically maths applied to visuals, and although many people have lost this view because of bad teachers and the failure of schools, mathematics is just as artistic as drawing is. It has to do with understanding numerical relationships in the same way one needs to understand the interaction between colours, and has to do with creativity in the same way. But what I want you to get from this is that no drawing artist ever begun their career knowing how to draw. They tried, and failed, and learned, and repeated this process in an infinite effort to achieve perfection. You'll get there, as long as you try enough and hard enough. And if anything, failure is an opportunity to become capable of not failing anymore.

@@volatus2354 I have to disagree Math is not artistic in it self. It's a language for science. But I agree that school often fails to show how math is used in the real word and how to express with it. I had a good education with math in school but when it came to vectors/matrixes I feel like my teacher really lost the connection and we only learned a bit about the operations and no usecases. To this day I calculating with vectors and matrixes is very magical to me. And I hope I will get a better feeling for them. (I mean vectors alone are not the big problem but yeah). Similar but still different is CSS. When I learned I loved css sucks. And css was just this strange thing that doesn't make sense. But after more intense working with it for month and having to press the html to look like the image I got, I learned more than just how to write css but also to understand it and have a feeling for it that's not explainable.

​@@tschichpich I'll make a correction. Mathematics is much more than a language. Part of mathematics is mathematical language. But mathematics is also concepts and the human efforts to reach and expand the boundaries of our understanding. The concept of permutations or the concept of higher-than-three dimensions are not linguistic, but the attempt to confine these into symbols is, and mathematics is the two, not just the second, of these. Is mathematics not artistic? You can observe patterns to find solutions, there are hundreds of ways of reaching the same goal and each person finds their own, creativity is an important aspect of being a good mathematician, someone's ability to visualize in a simpler manner that which they read or think about is another. Different people find out different things and then find out different ways to share that with other people. Things which were seemingly invisible are suddenly visible and you figure out they were never hidden, you now see them because you changed the way you see things, therefore perspective is fundamental. You can tell me, as others have, that mathematics is too objective to be artistic, but I argue that drawing is also objective. I can look at a drawing and tell whether or not it looks like a door. The artist can succeed or fail at expressing it is a door. And although there are many ways to express "a door", some of these do so to a very little degree of success, consequently making me not see it as a door. From what I see drawing is about representing things and ideas and finding ways for others to see it as well as you do. So, I keep my statement. Mathematics, for me, is as artistic as drawing is.

Thanks!

Thanks ! I really appreciate it.

what game did you make?

@@ron0studios Spleen. A game about a héro who gas panic attacks It's still on Itch.io ;)

Oh wait, I remember that game XD! You can find my comment on the second page of the comment section lol. 76 ratings is awesome, congrats!

@@ron0studios thx ! I probably played your game too then 😁

Thanks! Reflective 2D water comes next!

@Nolkaloid how do you make it respond to mouse position

gist.github.com/Nolkaloid/62d6960279ce9c8fda555bca9603751b

Thanks 😊

Hey! Of course we can use the dot product, but you see, it's a beginner tutorial and using length is much more intuitive. Furthermore modern GPUs are optimized for such operations, so I wouldn't worry about it so much :)

In the end it really depends on what you want to achieve, using the dot product is much faster because it involves only multiplications, but it's not precise as we end up with the squared length that you multiply by 4 for an approximation.

That doesn't look right though. If you don't want square root and divisions then maybe you could use this to normalize instead: vec2 normalize_alt(vec2 vec) { return vec * inversesqrt(vec.x * vec.x + vec.y * vec.y); }

downloading tutorials from piratebay

Nice!

Hey! That's very kind of you. I have a lot of work to do at university and to be honest I struggle with motivation.

It's pretty simple, you see when you sample the texture it returns the RGBA channels as a vec4. But you can easily isolate each channel and thus offset each channel. COLOR = vec4( texture(SCREEN_TEXTURE, SCREEN_UV + offset).r, texture(SCREEN_TEXTURE, SCREEN_UV).g, texture(SCREEN_TEXTURE, SCREEN_UV - offset).b, 1.0);

@@Nolkaloid Thanks!

@@Nolkaloid thank you for your tutorials :) I have a question, how do we get the chromatic aberration to only show where the effect / mask are? right now my whole screen is affected from the chromatic aberration :P

@@chris_gamedev Use the mask to multiply the offset : offset * 0.0 (black) will not offset the channel. Buth when it will be on white : offset * 1.0 (white)

@@Nolkaloid thanks ! Very nice 😁

I recommend the book of shaders. Otherwise once you get a basic understanding of how shaders work, it's pretty straight forward to create your own shaders while still learning techniques to add to your skill set. And that's what I'm trying to do with my tutorials. Of course I could just give the shader code or project file and leave. But that's not my goal. I want more people to actually know what's happening and thus gain in creativity.

workaround: vec2 center2 = center; center2.x = (center2.x - 0.5) / ratio + 0.5; // and use center2 throughout... (I can't modify center directly, as it's a uniform)

Yup: I have made a guide for this gist.github.com/Nolkaloid/62d6960279ce9c8fda555bca9603751b

@@Nolkaloid I got it working! >:0 Thank you, I've been reading the Godot docs all night last night and couldn't find anything helpful! Your a genius

To do the chromatic aberration you have to read the r g b channels separately with a slight UV offset (different for each) and then recombine them.

Hey! In the tutorial I showed how you can change the position of the shockwave, in scaled UV coordinates). In your script you need to change the center uniform accordingly to where is your Position2D.

@@Nolkaloid Thank you very much for your answer. I will give it a try! Please, more Godot tutorials! You're great! :)

@@Nolkaloid Doesnt seem to work, when I change the position2D (using by example mouse coordinates) the circle makes an arc between the top left corner and bottom right corner, but only moves in a circular position, so I can't use it as an effect on a smaller node.

Did anyone get this working correctly? I'm trying to "deploy" a shockwave at my player position by instancing it with a key press and just can't get the position right. It's usually following my camera (which is always scrolling) and at the bottom of the screen.

@@measurableharmstudio1064 For anyone struggling to get this working, the position property of you Node is in local coordinates, what we want is the its position on screen, normalized {0.0, 1.0}, and scaled according to some aspect ratio. This should work, you may need to adjust it according to your scene setup : ___ var transformed_position = (get_global_transform_with_canvas().origin/ get_viewport_rect().size) var aspect_ratio = get_viewport_rect().size.aspect() transformed_position.x = (transformed_position.x - 0.5) * aspect_ratio + 0.5 $ShockwaveEffect/ColorRect.material.set_shader_param("center", Vector2(transformed_position.x,1.0-transformed_position.y)) ___

Hi, short answer : shaders are only for visual stuff. If you want to add a collision to the shockwave you'll need to use a collision shape and change it's size in sync with the shader.

It should be explained around 8:20

@@Nolkaloid yeah I got it. It seems that I just forgot to put scaleuv instead of screenuv. Thanks. Also is there a way to exclude an object from getting affected by this shader?

@@noureddinealjazairi6063 Put your node over the node that has the screen shader : deeper in the scene tree or with a higher z-index.

@@Nolkaloid I think with a higher z index will work because my node is global. Thank you so much!

@@Nolkaloid but for some reason I tried it and it didn't work. Is that related to it being a global node

I don't think it makes much of a difference. The advantage of making the circle procedural is that you can change it's parameters on the fly.

Here you go: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-SCHdglr35pk.html&lc=UgwjbM8MwdXcK9qPAqx4AaABAg.99pZ5vU3O9U9D-CrAMI1U-

Seems that the link doesn't work very well, so here is my explanation again: gist.github.com/Nolkaloid/62d6960279ce9c8fda555bca9603751b

That's weird... I tested it on beta4 and it worked alright.

Are you getting a black screen? I had that issue and had to switch my project settings>rendering>quality>framebuffer allocation from 2D Without Effects to 2D and it fixed it

Look at Abel's comment

@@tavenolsson9395 thanks bro!

Of course it can, you need to use a full screen quad, see docs.godotengine.org/en/stable/tutorials/shaders/advanced_postprocessing.html#full-screen-quad

Well the goal was to give you an insight on how shaders work by using the shock-wave as an example. If you have understood what was going on, you have technically the ability to make a chromatic aberration effect. Basically the idea is to offset the R G B channels so they don't overlap perfectly.

Fixed already! Thanks

@@marcosadrian65 How did you do it? I cant get it to center on my character when he moves, but also I think i'm adding it wrong in the animationplayer.. I go add track > property track > modulate and pick it from there. but it wont allow me to animate the values at all, it doesnt really show up.

@@mrtopaz I did it creating a dedicated scene using a colorect whyt the shader then an animation player for animate the shader param and free the resource at the end

@@mrtopaz you must go to material - bellow "visibility" and then to shader param to allow animate keys.

@@mrtopaz ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-wX365br511U.html here I attached to my player when it started dashing.

This is a bit complicated in Godot 3.x : - you could either use multiple full screen objects and the BackBufferCopy node to apply the shader multiple times. But this is clunky and hits performance pretty quickly. - you could create some kind of coordinate texture in a script and pass it to the shader. The shader would read from it and compute the distortion according to the different points. I'm prettytty hyped for Godot 4 where uniform arrays are available : github.com/godotengine/godot/pull/49485

@@Nolkaloid could i not do a queue? where I record the times of clicks and the shader takes that variable and chews through it? and the queues variable controls the number of for loops the shader has to run and for every for loop the shader animates the ripple from 0 to number for the size value over time? or is this not going to work?

Think of a water cavern where drops fall from the ceiling. So I need some way to trigger a shockwave that goes from 0 to some amount of size. however, if there are multiple droplets incoming delayed I need to create multiple shockwaves that all get triggered at different points in time

@@adriankohres5623 what do you mean by queue ? Like a queue data structure? How would you use it?

@@Nolkaloid A drop drops onto the texture. The shaders shockwave code is triggered. 3 sequentially drops are dropping onto the texture. now the shader has to create 3 shockwaves. so the code for the mask needs to run now 3 times but with different size values as the drops reach the texture with a time offset. So my idea was to use a queue but no idea how. I bet there is an easier way...

Note: I can't use my position to UV, so if there's a way you can help with that it would be amazing

I'm not quite sure I understand your issue... could you please give more details and maybe screenshots ?

@@Nolkaloid do you have a discord or social media handle or a way we could communicate better, or a way I could send you a screenshot?

Yes, but you will have to modify it a bit.

Hey! The mask is only a value that is between 0.0 and 1.0, so you can pass it to the alpha.

Actually, to answer myself no trickery is needed. Changing the SCREEN_UV we used to set the scaled uv for UV will do the trick. But the SCREEN_UV in the last line needs to remain to grab the colour of the screen. That should do the trick!