LogoLogo
  • Home
  • Projects
  • About
  • Contact

Unity Ripple or Shock Wave Effect

Devon O. · September 24, 2017 · Shaders, Unity3D · 20 comments
65

So, here’s another quick Unity3D tip. Incidentally, speaking of Unity, for anyone wondering what happened to the multi part endless runner posts I started, I decided to quit that since the folks at Unity released their own endless runner game which is much more fully featured. You can check it out here – it’s a great source.

Anyway, here’s a little image effect shader that can create a nice ripple or shockwave or etc type of effect:

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
/**
*    Copyright (c) 2017 Devon O. Wolfgang
*
*    Permission is hereby granted, free of charge, to any person obtaining a copy
*    of this software and associated documentation files (the "Software"), to deal
*    in the Software without restriction, including without limitation the rights
*    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
*    copies of the Software, and to permit persons to whom the Software is
*    furnished to do so, subject to the following conditions:
*
*    The above copyright notice and this permission notice shall be included in
*    all copies or substantial portions of the Software.
*
*    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
*    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
*    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
*    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
*    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
*    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
*    THE SOFTWARE.
*/
 
Shader "PostEffects/Ripple"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _CenterX ("Center X", float) = 300
        _CenterY ("Center Y", float) = 250
        _Amount ("Amount", float) = 25
        _WaveSpeed("Wave Speed", range(.50, 50)) = 20
        _WaveAmount("Wave Amount", range(0, 20)) = 10
    }
    SubShader
    {
        // No culling or depth
        Cull Off ZWrite Off ZTest Always
 
        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            
            #include "UnityCG.cginc"
 
            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };
 
            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };
 
            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                return o;
            }
            
            sampler2D _MainTex;
            float _CenterX;
            float _CenterY;
            float _Amount;
            float _WaveSpeed;
            float _WaveAmount;
 
            fixed4 frag (v2f i) : SV_Target
            {
                fixed2 center = fixed2(_CenterX/_ScreenParams.x, _CenterY/_ScreenParams.y);
                fixed time = _Time.y *  _WaveSpeed;
                fixed amt = _Amount/1000;
 
                fixed2 uv = center.xy-i.uv;
                uv.x *= _ScreenParams.x/_ScreenParams.y;
 
                fixed dist = sqrt(dot(uv,uv));
                fixed ang = dist * _WaveAmount - time;
                uv = i.uv + normalize(uv) * sin(ang) * amt;
 
                return tex2D(_MainTex, uv);
            }
            ENDCG
        }
    }
}

Apply that shader to a material then add that material to this post processor script (which should be added as a component of the Main Camera).

Ripple Image Post Processor Component
C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/**
*    Copyright (c) 2017 Devon O. Wolfgang
*
*    Permission is hereby granted, free of charge, to any person obtaining a copy
*    of this software and associated documentation files (the "Software"), to deal
*    in the Software without restriction, including without limitation the rights
*    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
*    copies of the Software, and to permit persons to whom the Software is
*    furnished to do so, subject to the following conditions:
*
*    The above copyright notice and this permission notice shall be included in
*    all copies or substantial portions of the Software.
*
*    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
*    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
*    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
*    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
*    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
*    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
*    THE SOFTWARE.
*/
 
using UnityEngine;
 
public class RipplePostProcessor : MonoBehaviour
{
    public Material RippleMaterial;
    public float MaxAmount = 50f;
 
    [Range(0,1)]
    public float Friction = .9f;
 
    private float Amount = 0f;
 
    void Update()
    {
        if (Input.GetMouseButton(0))
        {
            this.Amount = this.MaxAmount;
            Vector3 pos = Input.mousePosition;
            this.RippleMaterial.SetFloat("_CenterX", pos.x);
            this.RippleMaterial.SetFloat("_CenterY", pos.y);
        }
 
        this.RippleMaterial.SetFloat("_Amount", this.Amount);
        this.Amount *= this.Friction;
    }
 
    void OnRenderImage(RenderTexture src, RenderTexture dst)
    {
        Graphics.Blit(src, dst, this.RippleMaterial);
    }
}

You can play around with the public properties of the material and the RipplePostProcessor component in the inspector, but here’s an example of what it can do – just click around the scene (again, using the fantastic Blacksmith’s Forge package).

Hope it may help out.

  Facebook   Pinterest   Twitter   Google+
shaders
  • FOTB in Review – Day 2
    September 22, 2009 · 5 comments
    2173
    4
    Read more
  • And Never Again, I’ll Go Sailin’
    September 16, 2008 · 6 comments
    1944
    3
    Read more
  • Magic Mirror – Halloween Terror
    October 26, 2009 · 0 comments
    1617
    2
    Read more
20 Comments:
  1. I used your shader as a reference to make an effect I wanted(ring shockwave on contact) however there is some weird phenomenon I encountered on mobile.
    Whenever I set a ripple’s location there is a small constant black and white BMW style circle in the point of origin(about 10-20 pixels in diameter).
    The effect works perfectly otherwise and does not do this on the computer.
    Any leads on why this thing appears?
    (amnt size and speed doesn’t matter it is there even after the effect has settled)

    yossi cohen · February 17, 2018
  2. Sorry to wait 4 months to get back to this, but I finally built and ran this on a mobile device (Samsung Galaxy S8) and am not seeing any issues. I know you said you didn’t have any issues in the editor, but it could possibly be something in the scene (pixels are stretched when the effect is applied so anything white in the scene may stretch out to a white circle potentially). Of course, you’ll probably not see this reply anyway :)

    Devon O. · June 22, 2018
  3. “The above copyright notice and this permission notice shall be included in
    * all copies or substantial portions of the Software.”
    Hi , I want to use this effect in my android game . But I don’t know where to put the copyright statement. Can you please tell me where should I put this.

    Rishabh M. · October 30, 2018
  4. Hey Rishabh,
    That’s just standard MIT license. You can just leave it right in the class or shader files as is. Honestly, no one’s ever going to check or really care – I just include it here to make it clear that it’s usable by anyone reading (in theory, code posted online without an explicit license is not legally usable – but, again, no one really cares).
    d.

    Devon O. · November 03, 2018
  5. Hello, this did not work on my computer, I followed every single step, but nothing happened.Is there a way to solve this?

    Andy · November 29, 2018
  6. Hi! I loved the shader and I really want to have the effect in my game, but I am having the same issue as yossi cohen, where on mobile I am getting a weird circle rendering at the center of the ripple, it changes color based on whats behind it so I am assuming it has something to do with the stretching of pixels done, but it does not leave even after the effect has player (it also displays at the very start of the scene and follows the camera keeping its position in pixel coordinates). I am testing on a Galaxy S8+ and I have no fix, if you see this please reach out, I have looked everywhere for this kind of shader and can’t find any, thank you!

    Notifind · December 13, 2018
  7. Great shader. I also noticed the small discoloration in the center of the ripple as well. I am testing on a LG4. One question, any advice on how I could add a mask of a specific shape? I want the ripple to distort only specific sections of the screen, not the entire screen. Specifically, I want the ripple to look like a 2D shock wave moving through 3D space.

    Sean · June 18, 2019
  8. Hi, first of all awesome shader, thank you very much!

    I’m having a problem where if i use the new unity Lightweight Renderer Pipeline, so i can use 2D lights, the ripple effect does not work, is there a way where i can use both?

    Elias · September 03, 2019
  9. Sounds like an interesting problem worth another post. I’ll take a look at that, but may not have it written up until next week. I’m assuming the main thing will be to port the shader from CG to HLSL, but there may be some bits and bobs along the way. May not be until next week, but I’ll try to write this up later.

    Devon O. · September 08, 2019
  10. Devon O. or Elias, have you solved the Lightweight RP problem yet? I know this is a hobby thing for you Devon, and I appreciate you offering it out to us. It’s just that Noa over at BlackThorn Prod has put this page in one of his tutorials a year ago (https://www.youtube.com/watch?v=UsGuN69g2NI) and so I’m sure you will get this question more and more with the new Pipeline and 2D game makers lighting up their sprites. At the same time, Asbjorn at Brackeys is teaching how to light sprites with the new Pipeline. So you see where the two areas will probably converge here.
    Any help would be great.

    James Haidle · December 16, 2019
  11. Nevermind … I found it! Thanks!

    https://blog.onebyonedesign.com/unity/custom-post-processing-with-the-lwrp/

    James Haidle · December 16, 2019
  12. Glad you found it. I hope it’s helpful.

    -d.

    Devon O. · December 21, 2019
  13. Is there any way to make with the post prosessing stack? I have some effects applied there but this shader wont work when its enabled.

    Topi K. · January 30, 2020
  14. I have a problem with this. Its not working if i use the post prosessing stack asset. I have some effects set on there but if its enabled this wont do anything. Without it works fine.

    Topi K. · January 30, 2020
  15. Check out this later post – it may help out. https://blog.onebyonedesign.com/unity/custom-post-processing-with-the-lwrp/

    Devon O. · February 01, 2020
  16. Hey,
    First of all thanks! I was looking for an effect like this for a long time!
    I got the same problem as Yossi unfortunately…
    It only occurs when I build on Samsung S4 tab, not in the editor and even not on my personal phone (S7 edge).
    I’m really new to shaders so I’m trying to find where this come from but I just can’t figure it out…
    Hope you’ll see this :/

    Luca G · February 18, 2020
  17. To anyone coming across this and having the texture tearing effect mentioned in the comments you can fix it by adding the following just before the return statement in the frag shader

    if(i.uv.x > center.x && uv.x center.y && uv.y < center.y){
    uv.y = center.y;
    }
    if(i.uv.x center.x){
    uv.x = center.x;
    }
    if(i.uv.y center.y){
    uv.y = center.y;
    }

    I am sure there is a way to optimize it to avoid conditionals (probably some 1 – value black magic) but this will remove the tearing

    Feral_Pug · October 30, 2020
  18. Hey FP, I tend to avoid branching in shaders like Covid 19 – but thank you for that tip. Much appreciated.

    Devon O. · October 31, 2020
  19. Does this effect work in unity 2020.1, the function is called but for some reason the image effect is not happening

    MainDepth · February 09, 2021

Leave a Comment! Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Devon O. Wolfgang

AIR | Unity3D | AR/VR

Unity Certified Developer

Technical Reviewer of “The Essential Guide to Flash CS4 AIR Development” and “Starling Game Development Essentials”

Reviewer of “The Starling Handbook”

Unity Engineer at Touch Press.

Categories
  • Actionscript (95)
  • AIR (16)
  • Flash (99)
  • Games (7)
  • Liberty (13)
  • Life (53)
  • Shaders (20)
  • Unity3D (21)
Recent Comments
  • MainDepth on Unity Ripple or Shock Wave Effect
  • Devon O. on Unity Ripple or Shock Wave Effect
  • Feral_Pug on Unity Ripple or Shock Wave Effect
  • bavvireal on Unity3D Endless Runner Part I – Curved Worlds
  • Danielius Vargonas on Custom Post Processing with the LWRP
Archives
  • December 2020 (1)
  • December 2019 (1)
  • September 2019 (1)
  • February 2019 (2)
  • December 2018 (1)
  • July 2018 (1)
  • June 2018 (1)
  • May 2018 (2)
  • January 2018 (1)
  • December 2017 (2)
  • October 2017 (1)
  • September 2017 (2)
  • January 2017 (1)
  • July 2016 (1)
  • December 2015 (2)
  • March 2015 (1)
  • September 2014 (1)
  • January 2014 (1)
  • August 2013 (1)
  • July 2013 (1)
  • May 2013 (1)
  • March 2013 (2)
  • December 2012 (1)
  • November 2012 (1)
  • September 2012 (3)
  • June 2012 (2)
  • May 2012 (1)
  • April 2012 (1)
  • December 2011 (2)
  • October 2011 (3)
  • September 2011 (1)
  • August 2011 (1)
  • July 2011 (1)
  • May 2011 (2)
  • April 2011 (2)
  • March 2011 (1)
  • February 2011 (1)
  • January 2011 (2)
  • December 2010 (3)
  • October 2010 (5)
  • September 2010 (1)
  • July 2010 (2)
  • May 2010 (5)
  • April 2010 (2)
  • March 2010 (7)
  • February 2010 (5)
  • January 2010 (5)
  • December 2009 (3)
  • November 2009 (1)
  • October 2009 (5)
  • September 2009 (5)
  • August 2009 (1)
  • July 2009 (1)
  • June 2009 (2)
  • May 2009 (6)
  • April 2009 (4)
  • March 2009 (2)
  • February 2009 (4)
  • January 2009 (1)
  • December 2008 (5)
  • November 2008 (2)
  • September 2008 (1)
  • August 2008 (6)
  • July 2008 (6)
  • June 2008 (9)
  • May 2008 (4)
  • April 2008 (3)
  • March 2008 (4)
  • February 2008 (9)
  • January 2008 (7)
  • December 2007 (6)
Copyright © 2021 Devon O. Wolfgang