Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

AppGameKit Classic Chat / 2D shockwave/ripple effect (shader or not)

Author
Message
tmu
2
Years of Service
User Offline
Joined: 2nd Feb 2017
Location:
Posted: 16th Aug 2017 13:06
I am looking to create a 2D ripple/shockwave effect on given coordinates on the screen. Can't quite figure how to do it nicely. Maybe shaders would work but I have no shader skills, and did not find one quite like it in the shaders thread. The first page has some water ripples and Batwink asking a similar question but did not quite find this.

Of course, if someone has a nice idea how to do it without shaders that works too.

I found this reddit thread with a similar question:

https://www.reddit.com/r/Unity3D/comments/524z24/making_a_shockwaveheatwaveripple_effect_shader/

and an example link to the effect at:

https://youtu.be/pmSAG51BybY?t=18m17s

Optimally maybe it could do with multiple waves instead of just one.

Anyone with mad shader skills want to create one for me (Janbo?) ?

Basically something I could give screen coordinates as center and set it off. I guess that would be a fullscreen shader so it would affect all sprites as well? A way to know when the shockwave was done would be nice too...

Thx


janbo
10
Years of Service
User Offline
Joined: 10th Nov 2008
Location: Germany
Posted: 16th Aug 2017 17:33 Edited at: 16th Aug 2017 17:35
Well then try this first Shockwave shader

Using AGKv2 Tier1
tmu
2
Years of Service
User Offline
Joined: 2nd Feb 2017
Location:
Posted: 16th Aug 2017 20:11
Thanks! Exactly what I was looking for. Except it is for sprites not full screen.

Is there some specific trick to converting sprite shaders to full screen shaders? LoadFullScreenShader says the vertex shader is automatically generated but just dropping the vertex shader from your shockwave shader and using LoadFullScreenShader to load the pixel shader does nothing.

Mobiius
Valued Member
16
Years of Service
User Offline
Joined: 27th Feb 2003
Location: The Cold North
Posted: 17th Aug 2017 09:03
Quote: " Except it is for sprites not full screen."

Just make the sprite fullscreen?
Click here for VR Legend of Zelda stuff
MikeMax
AGK Academic Backer
7
Years of Service
User Offline
Joined: 13th Dec 2011
Location: Paris
Posted: 17th Aug 2017 09:34
i think he wants to apply the shader to the entire screen ... not only on a specific sprite ...?
--------------------------------
Join us on dedicated AppGameKit WeeKChat :
https://week.chat/room/AppGameKit
Markus
Valued Member
15
Years of Service
User Offline
Joined: 10th Apr 2004
Location: Germany
Posted: 17th Aug 2017 09:51
Quote: "Just make the sprite fullscreen?"

i think then the effect is only in sprite but not affects other sprites on screen.
AGK (Steam) V2017.08.16 : Windows 10 Pro 64 Bit : AMD (17.7.2) Radeon R7 265 : Mac mini OS Sierra (10.12.2)
janbo
10
Years of Service
User Offline
Joined: 10th Nov 2008
Location: Germany
Posted: 17th Aug 2017 10:18 Edited at: 17th Aug 2017 10:20
You need to render the scene to a render target, create a fullscreen quad and pass the image to the shader at stage 0.
Maybe the position is inverted on the y axis then.

Not tested shader code:


for multiple ripples add a for loop and blend the results like so:

Again not tested shader code:


Quote: "but just dropping the vertex shader"

Can't see why it should not work.

Using AGKv2 Tier1
Markus
Valued Member
15
Years of Service
User Offline
Joined: 10th Apr 2004
Location: Germany
Posted: 17th Aug 2017 11:01 Edited at: 17th Aug 2017 11:03
i tryed full screen shader with ShaderID=LoadFullScreenShader("Pixel.ps" )
but the sprite appear only at right,top (1/4 from screen!?) or other was invisible.
AGK (Steam) V2017.08.16 : Windows 10 Pro 64 Bit : AMD (17.7.2) Radeon R7 265 : Mac mini OS Sierra (10.12.2)
tmu
2
Years of Service
User Offline
Joined: 2nd Feb 2017
Location:
Posted: 17th Aug 2017 13:01
Thanks all!

So I tried to convert the previous version of the shockwave shader from sprite to fullscreen. I used baxslash's scanline shader from https://forum.thegamecreators.com/thread/214598?page=2 as a starting point. Since it has a pixel shader for fullscreen. This is what I got:

main.agc:



pixel.ps:




It seems to work. But the effect is not a circle any more but an oval. I guess this is because you wrote it to work on a square sprite and the full screen has different ratio? How do I scale it to the screen resolution so it will be the same circle every time? Don't quite get the details of the formula in the pixel shader to do it myself.

Also, is this the correct way to a fullscreen shader from a sprite shader? I looked at what the CreateObjectQuad() function does, and it says to create an object to draw for fullscreen shader. So do I really need that complex rendering pipeline takeover for it?

And what is the difference with the fullscreen quad approach vs if I just took a sprite shader, drew everything on that single sprite (setting render image..), and used the sprite shader on that sprite? It seems in both cases you need to overtake rendering and draw it twice. First all the different parts and then the final image to the actual screen. Is there some performance benefit in quads (whatever those are..)?

I will now try with Janbo's updates to see how that goes.
tmu
2
Years of Service
User Offline
Joined: 2nd Feb 2017
Location:
Posted: 17th Aug 2017 13:26
OK I tested Janbo's updates. The first shader code runs fine but I am not sure what is the difference to the previous one. The seconds one with the for loop gave me an error about arrays not being supported when the pixel shader is compiled. So I tried to unroll the loop and use two ripples. It looks a bit odd, with the whole image flickering. I do see what seems like multiple ripples there but can't say too well with the flickering.

Here is what I tried:

main.agc:



pixel3.ps




BTW, the "noscanline.png" image I use here is just downloaded from backslash's post I linked above..


janbo
10
Years of Service
User Offline
Joined: 10th Nov 2008
Location: Germany
Posted: 17th Aug 2017 15:35 Edited at: 17th Aug 2017 16:09
As I finished the documentation for my AppShaderKit today, I had some time to create you an example demo.
Nice you tried it yourself.

Demo
Shockwave

[Edit]I think the correction for resolution is a bit complicated, it should be easier to compensate for different aspect ratios... like divide it by the resolution only at the end or something...[/Edit]

Using AGKv2 Tier1

Attachments

Login to view attachments
tmu
2
Years of Service
User Offline
Joined: 2nd Feb 2017
Location:
Posted: 17th Aug 2017 22:38 Edited at: 17th Aug 2017 22:41
Thanks Janbo! This is very helpful.

The shockwave circle is good shape now.

The center coordinates seem a bit off. Change the resolution a bit bigger and click more towards to the right. Further right you go, the more off it is to the left.

Attachments

Login to view attachments
tmu
2
Years of Service
User Offline
Joined: 2nd Feb 2017
Location:
Posted: 19th Aug 2017 17:27

Don't quite understand what is causing the offset on the X-coordinate. Code below works if I set different multipliers on X on different devices. But obviously I cannot do that. Without those weird multipliers, the center X of the shockwave is always way off the the left from where I clicked. The more to the right of the screen I click, the more off to the left of the clicked point the X is. Changing aspect ratios does not change the amount of X offset. Changing devices does..

Y always seems about correct but that might be just some artifact of my test setup or so.


tmu
2
Years of Service
User Offline
Joined: 2nd Feb 2017
Location:
Posted: 19th Aug 2017 20:35
Time passes...

If you change the shader line from



to



and remove the X multipliers from my main.agc code in the above post as in



to



the center X (and Y) coordinates are correct. But then the shockwave loses the circular shape and becomes more of an oval again.

I guess this is because the shader line in question calculates the distance of the processed pixel to the shockwave center, and without aspect ratio scaling it will look different on different devices (oval). But with the scaling, it also shifts the calculation off the real shockwave center. Now I can't seem to figure how to fix the shader line to position the center X correctly. Any ideas?

tmu
2
Years of Service
User Offline
Joined: 2nd Feb 2017
Location:
Posted: 19th Aug 2017 21:00
Scaling the center X coordinate with the aspect ratio before setting it in the shader seems to make this work on both devices I tried it on... Let's see..
janbo
10
Years of Service
User Offline
Joined: 10th Nov 2008
Location: Germany
Posted: 19th Aug 2017 21:05 Edited at: 19th Aug 2017 21:06
Quote: "calculates the distance of the processed pixel to the shockwave center, and without aspect ratio scaling it will look different on different devices"

right
Quote: "But with the scaling, it also shifts the calculation off the real shockwave center"

should not happen in the first place

A bit cleaner now ...does this work for you ?
Set the virtual resolution equal to the window resolution.

Using AGKv2 Tier1
tmu
2
Years of Service
User Offline
Joined: 2nd Feb 2017
Location:
Posted: 20th Aug 2017 16:24
This works for some resolutions. For example, 1024x768 works. 640x480 works. 1920x1080 and 1440x1280 its off to the right.

But the previous one works fine on all these resolutions, as long as I scale the center X before setting it in the shader. So that is fine for me..

Thanks..

Login to post a reply

Server time is: 2019-07-19 12:19:16
Your offset time is: 2019-07-19 12:19:16