GODOT TUTORIAL: Shockwave shader for noobs

[@uheartbeast]

Great tutorial! Subbed.

[@Nolkaloid]

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

[@daniridao]

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

[@getaproductions1415]

For anyone wondering how to set the chromatic effect you can do that by: first making a uniform called offset and offseting the r and b value by that offset: heres the code for that uniform float offset; void fragment(){ # paste this after you define your color COLOR.r = texture(SCREEN_TEXTURE,vec2(SCREEN_UV.x + offset, SCREEN_UV.y) - display).r; COLOR.g = texture(SCREEN_TEXTURE,SCREEN_UV - display).g; COLOR.b = texture(SCREEN_TEXTURE,vec2(SCREEN_UV.x - offset, SCREEN_UV.y) - display).b; } then you can animate it by animating the offset value using a animationplayer node... note: if your having problemes with the effect not showing up try using a low offset value like 0.002

[@me551]

how do i define the color?

[@herrlehrer1479]

@@me551did you even watch. The video?

[@me551]

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

[@averagemilffan]

@@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

[@TannerCh]

@@averagemilffan I believe this will work. You just need to add these color values to the existing color after having the same mask applied rather than having them replace them entirely: float r = texture(SCREEN_TEXTURE, vec2(SCREEN_UV.x + color_offset, SCREEN_UV.y) - disp).r * mask; float g = texture(SCREEN_TEXTURE, SCREEN_UV - disp).g * mask; float b = texture(SCREEN_TEXTURE, vec2(SCREEN_UV.x - color_offset, SCREEN_UV.y) - disp).b * mask; COLOR += vec4(r,g,b, COLOR.a);

[@Pengoony]

Man, shaders are crazy. I understand all the little individual bits, but I never have any clue how to begin making my own original shader. Like, if I wanted to make a shockwave on my own, I would be stuck figuring out how to get the distortion a donut shape.

[@volatus2354]

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.

[@tschichpich]

@@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.

[@volatus2354]

​@@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.

[@Sk4lli]

Well done! You don't just explain what you do, as many other there, but WHY. That's much more important in my opinion. And then you explain how you reach that goal. Nicely broken down in easy to understand steps. A really great tutorial.

[@yacoobsc.m3269]

Sabes es de los pocos tutoriales, que sin escuchar tu voz, entiendo perfectamente lo que estas haciendo en todo momento. Es una perfecta forma de explicar, hasta para una persona sorda. Felicidades gran tutorial 😅 saludos

[@MrNybbles]

This is a very nice tutorial. Because we can skip the inner circle part this actually gives us two useful effects.

[@june_rain_video_game_company]

Dude. This is very good video. Dont Stop making Godot videos. The godot community needs people like you.

[@robertmeyer5985]

Absolutely phenomenal, thank you.

[@tschichpich]

I like that you don't just made the tutorial, but also gave some homework for us :)

[@jena_thornwyrd]

First time I feel like I grasped how shaders work ! Subbed !

[@bitbraindev]

This is so cool! Could you maybe do a similar one but for fire/heat distortion?

[@delqyrus2619]

Rarely seen a tutorial of that quality. Great work!

[@beebster7]

Great stuff, thanks for sharing and the level of detail. One of the few examples on this subject that make sense to me :)

[@BramwellWilliams]

Really great stuff! Very diligent explanations c:

[@NeZversSounds]

The thing I've been waiting for.

[@pinggouproductions]

You explain nicely what we do need to do and how everything works, really nice, please continue makeing tutorials👍👍👍👍😘

[@gauravdubey2765]

Best shader tutorial I have looked till now. You explain well

[@jessejburton]

Super great tutorial! Thanks, excited to try it out and do my homework haha :)

[@naruto3zo]

This tutorial is just great! I'm trying to replicate everything with visual shaders and it's working

[@that_guyu_know6019]

Is there anyway I could anchor the center of the shockwave to a specific node? instead of it being anchored the the screen's UV?

[@Nolkaloid]

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

[@that_guyu_know6019]

@@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

[@FencerDevLog]

Very nice video. I especially like the way you explain everything from the basics. I'm looking forward to more tutorials. 😎

[@user-og6hl6lv7p]

When you are drawing the circle using length(scaledUV-center), it's using a square root calculation. In this one instance it's fine however if you start adding more and more circles it can become quite expensive. You can use "dot(scaledUV - centre, scaledUV - centre) * 4.0" for better performance.

[@Nolkaloid]

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 :)

[@Nolkaloid]

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.

[@piratesephiroth]

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); }

[@danielhaup599]

this is epic

[@neilwalker4277]

thanks, it's in the game :) there a lot of fine tuning required for those parameters. A hundredth out seems to drastically change it from a doughnut to a solid to nothing.

[@Dark_Peace]

Thanks for the tutorial ! It's gonna be useful for the GMTK jam !

[@ron0studios]

what game did you make?

[@Dark_Peace]

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

[@ron0studios]

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!

[@Dark_Peace]

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

[@CarbsCode]

Lot's of great info! Awesome video :)

[@Nolkaloid]

Thanks!

[@JuanUys]

Not sure if this is only me, but if I set center's x component to 0 or 1, then the shockwave doesn't originate on the edge of the screen. Has this something to do with the ratio calculation?

[@JuanUys]

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)

[@Playburger1337]

Cool that u coded this shader effect by urself :)!

[@vohoff]

VERY good video !

[@IngresaElNombreDelCanal]

Extraño tus videos, me siguen ayudando...

[@websterferro4025]

How do you do the chromatic aberration

[@us3s]

Hi i'm super new to shaders. Is there a way to make this spawn on specific objects and have it be relative to that object instead of the screen? Or how woul dI have the shader follow an object?

[@RyanScottForReal]

One of best tutorials yet

[@lemonine907]

3rd day of learning shaders and I translated it to HLSL and it works!

[@fatihs.solmaz5645]

Thank you, this is a awsome tutorial. I like to see more shader tutorial for godot, it helps a lot. I am looking for fisheye shader tutorial...

[@luketyler5728]

Great tutorial! Also I loved your game for GWJ 21!

[@Nolkaloid]

Thanks ! I really appreciate it.

[@nsrosenqvist]

Thanks for putting this up, it helped a lot!

[@jackmakmorn]

Cool stuff, funny that I found it now, cause I thought I need somewhen later and had no idea how to do this; after watching your tutorial I think I have to do it tomorrow - subscribed today 😁

[@RivenbladeS]

Can you do a tutorial on space distortion with physics maybe just like in geometry wars game where you throw a projectile and the lines behind warps?

[@srijanpaul]

Amazing video ! Just what I needed.

[@FelipeOliveira-ph2uq]

What a nice video! Watched the whole thing! You just got a sub!!

[@VolpeJosesk]

Managed to make my own wich will increase a pixelated circle mask (circle transition that will increase to show a Sprite while it grows), with a little distortion, from this. Thanks ❤❤❤

[@renji-hjk]

yes yes yes yes the perfect shader to make dios the world just need a simple one to make black and white after the efect and perfect

[@kagof2354]

Fantastic tutorial!

[@musiquemaker1207]

wow this is super cool !!!! Really cool video :)

[@richardlongshaw8079]

Great Tutorial. Any more Shader tutorials would be appreciated. Subscribed too!

[@cenullum]

I used backbuffer node for making multiple explosion effect

[@Nolkaloid]

Nice!

[@quinndepatten4442]

lowkey a cracked tutorial.

[@Nolkaloid]

downloading tutorials from piratebay

[@Chevifier]

Shaders are so freaking cool and scary at the same time😭😭

[@michaelneumair]

Super well explained!!!

[@Rai2M]

Very well explained.

[@cmds.learning7426]

really cool! easy to understand for tecah art . can use it for any engine

[@gronko_chug_butter]

How did you make it so you can view both the shader code and the inspector for the texturw? Whenever I have shader code open the inspector will only show me the shader itself so i cant edit any of the uniforms from the inspector without closing the shader code.

[@bigboss7292]

Sir, may I ask what skills you have acquired to be able to program shaders so masterfully?

[@ViniCavin]

This is awesome! Thank you!

[@FromNewRadius]

Is there any way to make it transparent white-transparent so it can be seen in backgrounds without details?

[@SaiponathGames]

Subscribed! Cool tutorial!

[@danielaguirre5078]

Thanks, i use individual nodes to make multiples ripples on screen (explosions), not the optimal way but it works for me.

[@loot6]

One of very few videos I really wish I could give more than one upvote, like add on a few hundred or something.

[@halobread]

i have no idea to make the chromatic effect, u didn't teach anything about that

[@Nolkaloid]

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.

[@websterferro4025]

Can you help me, put chromatic abberation? It's been weeks and I still don't how to do it :(

[@tavenolsson9395]

Look at Abel's comment

[@websterferro4025]

@@tavenolsson9395 thanks bro!

[@sigitsatriap6505]

Subscribed !! your tutorial is easy to understand for beginner like me please do more shader tutorial for Godot ! like water , fog or other would like to see that

[@Nolkaloid]

Thanks! Reflective 2D water comes next!

[@bonbonpony]

My guess is that for the chromatic aberration, one just needs to use different scales for the offsets of each R,G,B channel? But this way of doing it doesn't produce the full rainbow, just the three components, as if we looked at a picture on a TV screen which uses only red, green and blue light for pixels, not a real-life image in sunlight. Is there any way to produce something more sunlight-like?

[@chocolatecoveredgummybears]

great tutorial. would love more skill based shaders, think of diablo and poe! i have created some skills like frozen orb and whatnot, but warcry is pretty hard. not just in shaders, but for the effect. i use other nodes as well

[@totalcasino3597]

Your tutorials about shaders are glourios, where did you learn it? can you recommend some resources about shaders 2d?

[@Nolkaloid]

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.

[@drac8854]

Thanks for making this

[@timandersen8030]

Why does UV - vec2(0.5, 1.0) shift the texture to the right? Shouldn't it shift it to the left because the farthest x is 1 and 1 - 0.5 = 0.5 and the smallest x is 0 and 0 - 0.5 = -0.5. So shouldn't the new texture be placed from x=-0.5 to x=0.5 ? Instead it seemed to have shifted to the right between x=0.5 and x=1.5.

[@longuemire748]

How can we manage the pixels per line? In all the examples I've seen, I don't see a way to split a (line, cube, etc) and then manage them independently. It's very confusing I think.

[@yPhil]

Can it be added to a 3d scene? Apparently not, I've been trying for days now.

[@Nolkaloid]

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

[@snarkbucham4077]

Very good, thanks.

[@davidosaro6818]

Just what i needed thanks

[@davidosaro6818]

@Nolkaloid how do you make it respond to mouse position

[@Nolkaloid]

gist.github.com/Nolkaloid/62d6960279ce9c8fda555bca9603751b

[@davidosaro6818]

Thanks 😊

[@rix0r222]

I watched the whole thing to see how you did the chromatic aberration. Tease!

[@Nolkaloid]

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.

[@DaveAlexKD]

More shaders tutorials please!

[@taoliu7312]

Awesome! ! !

[@Gabondalf]

really cool

[@PattleBass]

Thank you!

[@willirittmann1917]

Newbie question: I wanna create a collision for this, to make it I need to create a collision that changes it's shape (e.g: radius) over the time, or shaders also support smt like it? I believe that they only support "visual" stuffs

[@Nolkaloid]

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.

[@OLIV3R_YT]

Thanks!

[@cenullum]

Does using a circle texture instead of creating circle in shader give better performance or opposite?

[@Nolkaloid]

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.

[@bugseater1]

Is there a way to make the center be offset to position rather than a ratio? (Like 500, 500, being in the center of a 1000, 1000 screen)

[@Nolkaloid]

Here you go: kzbin.info/www/bejne/iXSrlZqip5hops0&lc=UgwjbM8MwdXcK9qPAqx4AaABAg.99pZ5vU3O9U9D-CrAMI1U-

[@Nolkaloid]

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

[@WhalesState]

it's been a long time since your last video , missing the great content you make :) hope you are fine

[@Nolkaloid]

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.

[@monaime]

Thanks for the excellent tutorial, i'm really interested in how you approached the chromatic aberration, a tutorial would be greatly appreciated.

[@Nolkaloid]

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);

[@monaime]

@@Nolkaloid Thanks!

[@chris_gamedev]

@@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

[@Nolkaloid]

@@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)

[@chris_gamedev]

@@Nolkaloid thanks ! Very nice 😁

[@rafaelgpontes]

Hey, have you tried this shader code in the latest 3.2.2beta4? I set up the exact same code as you did and the result was a bit messed up here in my machine. I was wondering if it's related to that GLES2 modifications made in this version. Could you test it in the newer version?

[@Nolkaloid]

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

[@Saiklohit]

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

[@IustinNitza]

I've just added this to my game. Thanks a lot !

[@WoYoSenseiPL]

Great tutorial, really! I just have one question. Currently the shockwave appears at the middle of the screen, no matter what. What if I want it to appear as node (i.e. add_child(shockwave)) at some specific position, like, lets say, end of a barrel of a gun of my 2D character (using position2D). How can I achive that? I will be very grateful for the answer. And again, great video. Subbed!

[@Nolkaloid]

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.

[@WoYoSenseiPL]

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

[@ca3ca377]

@@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.

[@measurableharmstudio1064]

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.

[@Nolkaloid]

@@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)) ___

[@xuser8314]

How would I go on? How would I create multiple ripples on multiple clicks at the clicks destination that then animate until the ripples are gone?

[@Nolkaloid]

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

[@xuser8314]

@@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?

[@xuser8314]

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

[@Nolkaloid]

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

[@xuser8314]

@@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...

[@eruaiokoyomoh3177]

I am making a mobile game and my SCREEN_PIXEL_SIZE does not match my viewpoint so this shockwave shader effect doesn't work as well for me, please make a video for projects with different viewports, please respond

[@eruaiokoyomoh3177]

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

[@Nolkaloid]

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

[@eruaiokoyomoh3177]

@@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?

[@celsladroma8048]

this thing work on godot 4?

[@Nolkaloid]

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

[@noureddinealjazairi6063]

Thnx so much this tutorial was exactly what i was trying to find for a long while but for some reason its not in the center and its elliptical idk why?

[@Nolkaloid]

It should be explained around 8:20

[@noureddinealjazairi6063]

@@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?

[@Nolkaloid]

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

[@noureddinealjazairi6063]

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

[@noureddinealjazairi6063]

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

[@deadeagle-archived]

Me: ah yes hole punch easy ill wait for chromatic aberration Tutorial: homework figure it out Me: :(

[@budihartanto4222]

terima kasih

[@sanders296]

How could you change the colors of the mask for example instead of white I want it to be transparent I just saw your yt music player that shader is exactly what I want I will look at that. Thanks

[@Nolkaloid]

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

[@thomasrodriguez3107]

Looks awsome

[@gamingworld8564]

its Me That I Gave 1K Subs

[@marcosadrian65]

Amazing! How we can attach this to the player?

[@marcosadrian65]

Fixed already! Thanks

[@mrtopaz]

@@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.

[@marcosadrian65]

@@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

[@marcosadrian65]

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

[@marcosadrian65]

@@mrtopaz kzbin.info/www/bejne/rYmWZ2iYp5pkZ7c here I attached to my player when it started dashing.

[@user-fv8uv2us9r]

Жаль, что это для 2д( Да, база для 3д та же, но.. Как бы, сложнее Интересно как делать такое в 3д-пространстве вокруг бегущего персонажа..

[@daniridao]

Any chance you could explain how to make this shader work on any part of the screen despite where our camera is? I've tried doing something like taking get_global_transform_with_canvas().origin / get_viewport_rect().size in a colorect (no canvas layer) and setting that as the center (also playing with the rect_size to adjust it) but it doesn't seem to work so I'm a bit lost.

[@daniridao]

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!

[@rafaelgpontes]

Superb!!!!