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:
|
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).
|
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.
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)
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 :)
“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.
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.
Hello, this did not work on my computer, I followed every single step, but nothing happened.Is there a way to solve this?
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!
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.
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?
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. 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.
Nevermind … I found it! Thanks!
http://blog.onebyonedesign.com/unity/custom-post-processing-with-the-lwrp/
Glad you found it. I hope it’s helpful.
-d.
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.
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.
Check out this later post – it may help out. http://blog.onebyonedesign.com/unity/custom-post-processing-with-the-lwrp/
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 :/
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
Hey FP, I tend to avoid branching in shaders like Covid 19 – but thank you for that tip. Much appreciated.
Does this effect work in unity 2020.1, the function is called but for some reason the image effect is not happening