Shockwave Shader Graph - How to make a shock wave shader in Unity URP/HDRP

A shockwave shader graph (or shock wave shader graph) is a relatively simple effect, that can add a lot of pop to actions in your game.

The reason I'm doing this tutorial at all is because someone commented on one of my YouTube videos requesting it. I bring this up just to mention that if you have anything you'd like to see, please let me know below!

0:00 Intro
1:22 Sprite Shockwave
9:20 Full Screen Shock
11:12 Complex Model
14:06 Vertex Shockwave

Today I'm going to cover both how to do it as a fragment shader effect (for sprites or full-screen) and as a vertex shader effect (for more complex models).

References:

**** Update for Shader Graph 10.x
This video was made with Shader Graph 8.2
If you are using Shader Graph 10.x there are a couple key differences:

The create shader options have moved within a sub-menu called "Universal Render Pipeline, and some are renamed. So "Create--Shader--PBR graph" becomes "Create--Shader--Universal Render Pipeline--Lit Shader Graph"
The per-input settings that were in the blackboard are now in the "Graph Inspector" within the "Node Settings". You must have the input selected to see its settings in that window.
Some other settings that were on-node are now also in that Graph Inspector, though you can generally ignore these.
If you want to generate a code shader from the graph, you do so on the graph asset inspector (not on the master node as you did in 8.2). Now select the graph asset, and hit "View Generated Shader" button in its inspector.
****

A shockwave is just a single ripple of motion, emanating out from a point. Similar to a water ripple, it is intended to portray an energy field, but is simpler than the water case. Where a water ripple will have a negative ring behind the positive (bump, then dip), a shockwave generally just has the one. And a water ripple will generally have a few rings of decreasing strength inside each other.

In this video I cover, how to set up a 2D shockwave shader graph for a sprite, and for a full-screen effect. Then I move that 2D effect over to a model, and then set it up as a 3D shader effect instead.

[CheFisher]

Incredible introduction to shader graph and amazing explanations - have bookmarked this introduction and I'm sure I will be returning often just to get my bearings. Your comment at the end about driving the timing of the shock wave from a script instead of using the shader _Time actually solved my only remaining question. Thank you!

[sasquatchbgames]

For those interested in trying to apply this to a URP project with a 2D Renderer:

- You'll need to be on Unity 2021
- Add a new Sorting Layer. Make it render on top of everything else (bottom of sort layer list)
- In your 2D Renderer Data You'll want to change "Foremost sorting layer" (under "Camera Sorting Layer" to be the 2nd highest layer (the oldest high priority layer which rendered on top of everything else before you created your new layer)
-Create the shadergraph shown in this video, but at 05:57 instead of hooking up a 'UV' node to the add node, hook up a "Screen Position" node instead.
-Leave the "MainTex" texture as an exposed property, but disconnect it from the "Texture" input in the "Sample Texture 2D" and instead replace it with a 2D Texture called "_CameraSortingLayerTexture" (and ensure the Reference is called EXACTLY that. This Texture should NOT be exposed.)
-You won't be creating a blit, instead you'll apply a material with this shader onto a sprite in your scene large enough to cover the whole playing area. Now you can just enable/disable this sprite whenever you want to "trigger" the ripple to start.

Some of these steps may be changeable, I'm just writing what worked for me in my project.

Cheers!

[raingamedev]

Very cool, thank you a very straightforward and clear tutorial structure!

[sketh]

You are a savior!! Really helped me out on my project for my internship. Thanks a Ton for this tutorial.

[febo]

Perfect tutorial, exactly what I was looking for

[no]

Thanks man! You have helped a lot, especially with the blit on your site. Much appreciated!

[stPenokom]

this is awesome, thank you for the comprehensive tutorial

[geri]

Fantastic! Thanks for doing these. Would love to see more :D

[zakkaioken]

shockwave
get the distance from a point
clamped 0 to 1
put it through sin

clamp 0 to 1 again to discard negative values for black (maybe)
boom basic circle waves

just add time onto the result of the distance node and you get the wave moving out from that point

[breadfan]

How can we alter the sine wave like you mention around 9:00? Would love to have this work with multiple ripples.

[Barzie]

Such a great tutorial
thank you for your time making this

[phyzxengrmoore]

Can you post a pic of the complete 3d vector graph? OR post the shader file somewhere?

[burakkayalak]

I could not understand how you render this sprite without choosing MainTex, at 08:02 in the video sprite is rendering on scene with the shader effect but MainTex is empty in Inspection. Could you please help me to understand what is going on. When I choose MainText, it works fine as a material on plane but it is filling whole screen when I am using as screen effect.

[ThomasChen-urgt]

I'm not looking for this effect but just enjoy watching your video

[Wonder_Verse_Tech]

at 6:02 when I go to scene, nothing happened, I have done exactly same as you, Does anyone Has the same problem or know the solution?

[erosjagatpulagana]

Well explained! Thank you for the tutorial, Mr Bill :D

[PoRtCuLLiSuk]

Excellent tutorial. Keep them coming (especially 2D stuff!).

[jayantbarthwal]

What if i have 10 balls ( 2d sprites ) in my scene, and i want a shock wave go through them ?, we can only apply this shader to 1 sprite, whats the solution, i hope you understand

[salvatoreisabella]

Hi, thanks for your awesome tutorial! I only have one question: what about making it Fullscreen but in HDRP pipeline?

I'm trying to swith to a fullscreen-type material and use CustomPass, but I can't manage how to avoid using a specific texture (since I need instead the screen itself)! Could you please help me?

[PauloHF]

Hi, Hope you see this, I followed your tutorial until 7:50, after that I inverted the time, so it's a ring from outside to the center, but I wanted to the ring slowly faded near the center, so I added a Lerp after "One Minus" and "Multiply" with the A being the Wave effect and B Zero, but I'm having a problem with the T. Tried to link with all the Time Node and no one give me the effect that I wanted, tried to split the "Subtract" node and get the Alpha or RGB value, but didn't work either. Changing manually the X of Lerp I achieve the effect, but I can't find an automatic way to do that. I'm new in the Shader Graph, and I'm just playing around to learn, if you or someone else can help me, I'll be very grateful.