How do I apply multiple shaders at the same time?

[Netcode]

Im currently working on a top down shooter and want to apply multiple shaders when the game is paused (black and white-shader and a blur-shader). Can someone pls give me a lil code snippet explaining how that would work? (I have little to no experience with canvases but the wiki isn't providing too much about it)

thanks in advance, Netcode

[Fenrir]

To apply multiple shaders, you'll need to setup a multipass system, meaning that you'll first render your scene on a canvas applied as a texture to a mesh or quad, and apply your first shader on it, then you'll also render this result in a canvas, also applied on a mesh or quad with another shader applied on it, and so on... For an example you can have a look to shine (https://github.com/vrld/shine), and mostly to the gaussian blur effect, as it needs multiple pass to work.

The simple route for you if you don't want to go for such a system is to try to merge all your shaders into only one doing everything (if it's possible, as anyway if you want a gaussian blur you'll need multiple pass).

[pgimeno]

For performance, the desaturation could be done during the first pass. Then you would only need two passes instead of three.

[Positive07]

Yes, first shader does (input -> black and white -> blur horizontal) and draws the result to a canvas, then you activate the second shader which does (input -> blur vertical) and draw the canvas with that shader to the screen.

How you write the shaders is up to you. You can search here in the forums for similar shaders, and in the web, I'm pretty sure you'll find something

[zorg]

One can also do a 1-pass blur as well (and so doing the whole desaturate+blur in one pass), though it'll probably tank performance more than if you did it in two passes.
https://www.shadertoy.com/view/XdfGDH

[Positive07]

Blur in one pass... interesting! I'll bookmark that

[slime]

Yes, the reason blur is typically done in two passes is for improved performance rather than because the algorithm requires it to look proper.

[Positive07]

Oh I see, I haven't checked the implementation (but if someone can answer maybe it's better) why is a single pass slower? What is the bottleneck? Isn't it the same? Don't you render to a separate texture or something like that (I'm not sure if this can be done in a shader)?

[slime]

why is a single pass slower? What is the bottleneck? Isn't it the same?

With a gaussian blur, a single pass will need to operate on N^2 (N squared) source pixels for every destination pixel. But the algorithm can be split up into separate horizontal and vertical passes and end up with the same result, which only needs to operate on N*2 source pixels for every destination pixel.

Some more information (including even more optimizations) here: http://rastergrid.com/blog/2010/09/effi ... -sampling/

[Positive07]

Cool! ... Awesome slime thank you I'll make sure to read all that