Page 1 of 2
Shockwave effect
Posted: Mon Mar 06, 2017 5:52 pm
by UltraRPG
Hello! Yesterday I watched
this video and was inspired to make a shockwave shader. It turned out alright but I feel that I am doing something wrong. It just feels that way. Most of my projects that I have started don't have any graphics yet. Most of my time I've spent coding the gameplay stuff so I have no experience in drawing to the screen. I would be happy if someone could take a look at my code and tell me if I am doing something wrong. Thank you in advance.
------
How it works:
I have a canvas where I store the displacement data:
Pixel's red and blue values represent a direction vector of displacement, green value is the distance of displacement, and alpha is just the strength of the displacement. I draw to the canvas using a shader that generates the data I need. When the shockwave data is drawn to the canvas I send the canvas to the displacement shader and then draw the background. The background image is not mine. It's just a screenshot I found on google.
------
Controls:
Mouse 1 to spawn a shockwave.
Hold space to keep spawning shockwaves.
R to toggle displacement shader.
Re: Shockwave effect
Posted: Mon Mar 06, 2017 6:59 pm
by evgiz
Looks awesome! I used a similar effect in an old project of mine using a modified fisheye-effect shader. This method however seems much better, I'll remember this if I ever need something similar!
There was one thing I didnt quite understand though. When holding down space while the displacement shader is toggled, it looks quite different than the displacement "circle" texture with regular clicks. What are the cyan/pink lines, and how come the rest is completely white?
Re: Shockwave effect
Posted: Mon Mar 06, 2017 7:12 pm
by UltraRPG
evgiz wrote: ↑Mon Mar 06, 2017 6:59 pm
Looks awesome!
Thanks!
evgiz wrote: ↑Mon Mar 06, 2017 6:59 pm
There was one thing I didnt quite understand though. When holding down space while the displacement shader is toggled, it looks quite different than the displacement "circle" texture with regular clicks. What are the cyan/pink lines, and how come the rest is completely white?
Oh, I forgot to explain one thing. Direction vector's range is (-1;1) but colour value range is (0;1). So I have to convert between those in the shaders. The cyan, pink, and white colours are a result of the screen blend mode. The screen blend mode is not suitable for this thing. It just ruins everything but at least it looks better than the alpha blend mode. You can clearly see what's wrong if you slow down the speed of expanding (the v.t = v.t + dt*1000 part) and spawn some shockwaves near each other. If there's a way to make your own blend mode I would make one that takes into account that we are not really working with colours but with vector data.
Re: Shockwave effect
Posted: Mon Mar 06, 2017 7:13 pm
by Nixola
Aren't shaders basically custom blend modes?
Re: Shockwave effect
Posted: Mon Mar 06, 2017 7:20 pm
by UltraRPG
Nixola wrote: ↑Mon Mar 06, 2017 7:13 pm
Aren't shaders basically custom blend modes?
I would guess that blend mode takes into account the pixel values of the image you are drawing and the pixel values of the image you are drawing onto. I'm new to shaders, but I think that if you wanted to make your own custom blend mode you had to pass additional image data to the shader each time you want to draw something which would be a hit on performance. Like I said I don't know much about drawing but maybe the built-in blend modes also give you a performance hit.
Re: Shockwave effect
Posted: Mon Mar 06, 2017 7:30 pm
by nice
This is super cool!
It felt like I was pulling a water-blob around the screen!
Re: Shockwave effect
Posted: Mon Mar 06, 2017 7:53 pm
by UltraRPG
nice wrote: ↑Mon Mar 06, 2017 7:30 pm
This is super cool!
It felt like I was pulling a water-blob around the screen!
Thank you!
Re: Shockwave effect
Posted: Mon Mar 06, 2017 7:54 pm
by Jasoco
Oh my, I've been looking for something like this to use when an explosion goes off. I'll have to see if I can implement it in when I redo bombs.
Re: Shockwave effect
Posted: Mon Mar 06, 2017 8:32 pm
by zorg
UltraRPG wrote: ↑Mon Mar 06, 2017 7:20 pm
Nixola wrote: ↑Mon Mar 06, 2017 7:13 pm
Aren't shaders basically custom blend modes?
I would guess that blend mode takes into account the pixel values of the image you are drawing and the pixel values of the image you are drawing onto. I'm new to shaders, but I think that if you wanted to make your own custom blend mode you had to pass additional image data to the shader each time you want to draw something which would be a hit on performance. Like I said I don't know much about drawing but maybe the built-in blend modes also give you a performance hit.
When you activate a shader and call love.graphics.draw on a drawable, guess what gets passed into it.
Yes, the thing that needs to be drawn, be it an image, a text object, a canvas, etc.
No need to manually supply it, since it's already there. This means that making (simpler) custom blendmodes is easy, and not at all taxing on the GPU.
The "normal" blendmodes shouldn't have a huge performance hit either, but i didn't look into what they did exactly, but i'm guessing that instead of defining a custom shader, they use the old gl blendfunctions and such. (in a constrained manner, though; if you want XOR or any other not available, then you'll have to go with shaders)
Re: Shockwave effect
Posted: Mon Mar 06, 2017 8:42 pm
by UltraRPG
zorg wrote: ↑Mon Mar 06, 2017 8:32 pm
When you activate a shader and call love.graphics.draw on a drawable, guess what gets passed into it.
Yes, the thing that needs to be drawn, be it an image, a text object, a canvas, etc.
For example, I have a canvas with a tree drawn in it, let's call it TreeCanvas, and I want to draw an apple (ImageApple) onto it using a shader (SomeShader).
Code: Select all
love.graphics.setCanvas(TreeCanvas)
love.graphics.setShader(SomeShader)
love.graphics.draw(ImageApple)
love.graphics.setShader()
love.graphics.setCanvas()
Will the shader get the TreeCanvas passed to it? Because you need two pictures for a blend mode to work. In this example, we need TreeCanvas and ImageApple to be passed into the shader.