Wave Shader

[Foaly]

Hi I would like to apply a wave shader (just like the one in the examples) to a texture. But since a texture only has 4 vertices I don't think I can use the one from the examples. I'm not very good at shader programming, so I don't really know how to implement the effect as a fragment shader... can anybody help me out?

Another small question: What's the name of the blur effect that is used in the example?

[Laurent]

But since a texture only has 4 vertices

Texture and geometry are two different things. You can map a texture on a 4-vertex sprite, but also on a subdivided quad with a lot more vertices.

What's the name of the blur effect that is used in the example?

What do you mean?

[Foaly]

Yes but to do that I would have to either use a geometry shader to subdivide my rendertexture or I would have to implement a class that displays a texture, but has a lot more quads. To specify my question: Does anybody know how to achieve the effect with a fragment shader?

What do you mean?

Well what kind of a blur is it? (i.e.: gaussian blur,...?)

[Laurent]

Why do you think it is so complicated? Just create your own vertex array, with all the vertices you need in it, and map your texture on it. Very easy.

Does anybody know how to achieve the effect with a fragment shader?

When you compute pixel (x, y) in your shader, instead of looking up pixel (x, y) in the source texture, lookup pixel (x + a, y + b) where (a, b) are coefficients that simulate a wave.

Well what kind of a blur is it? (i.e.: gaussian blur,...?)

Yes, a Gaussian blur.

[Foaly]

Ok thanks. I'll try and implement a fragment shader myself. But I got another question: in your vertex shader, why do you use cos(calculations) and add sin(calculations) * 0.3 to it?

Yes, a Gaussian blur.

Great, thanks. Is it a vertical and a horizontal gaussian blur? And if it is are the step after each other or is it a bilinear gaussian blur?

[Laurent]

But I got another question: in your vertex shader, why do you use cos(calculations) and add sin(calculations) * 0.3 to it?

That's the wave equation. Can you be more specific?

Great, thanks. Is it a vertical and a horizontal gaussian blur? And if it is are the step after each other or is it a bilinear gaussian blur?

Why are you asking so many questions?
The code reads neighbour pixels, and makes a weighted average of them. I just used coefficients that made it look ok. There's really nothing else to know.

[Foaly]

I'm sorry I didn't mean to bother or annoy you. It's just that I haven't worked with blur before and your Gaussian blur shader looks different from the other implementations that I've seen. Like this one http://www.gamerendering.com/2008/10/11/gaussian-blur-filter-shader/ for example. So I was wondering what type it is and why it looks different.

About the wave equation. It's pretty much the same thing. I haven't worked with a wave shader before. The only explanation I found was this one http://www.gamedev.net/topic/607082-sine-wave-shader/ (scroll to the bottom). And that one only uses sin. So I was wondering why yours uses sine and cosine. Could you explain that to me?

Thanks for the help!

[Laurent]

I'm sorry I didn't mean to bother or annoy you

You don't

I just mean that you should probably look at my shaders (they are really simple to understand) and start experimenting with your own formulas, rather than asking so many questions first. I can't answer all your questions, because when I wrote these shaders I just did a lot of tests and adjustements to make them look good. I didn't try to understand what kind of Gaussian blur or wave equation I used.

Don't take these formulas too seriously, they are just hacks. The important thing to remember is that:
- a blur effect works by taking a weighted average of neighbour pixels
- a wave formula is made of one or more cos/sin terms (using more terms makes the wave less "symetric")

Which coefficients you use is really up to you, and are generally found by testing and hacking.

[Foaly]

Thanks that's exactly what I needed to know. When I start on a new topic, I usually look at existing code. That's why I looked at the examples. I didn't understand if you implemented a certain algorithm or if you where just hacking till it looked good. That's why I was asking.
Thanks for clearing it up and the useful information. I will read some more about blur techniques then and experiment with the sin equation then.
On thing I still don't understand and I couldn't find an explanation on the internet for. How does adding a cosine wave make the wave less "symetric"?

[Laurent]

cos and sin are the same, they are just offseted by Pi/2, so it doesn't make a big difference here. What's important is the number of coefficients: the more sin/cos terms you add to the equation, the less it looks like a regular sine curve.