Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

"Simply" apply a shader to the whole display

edited October 2013 in Shaders Posts: 277

I was feeling reasonably brave today in my slow but exciting quest to learn codea, and decided to take a look at shaders.
I got the main concepts of what it's for, I think, but I'm still stuck to a very simple application: how to apply a simple example shader, let's say, blur, to the whole display? Not a single sprite or a specific texture, but everything that is rendered and ultimately drawn on the ipad screen.
Cheers!

Tagged:

Comments

  • IgnatzIgnatz Mod
    Posts: 5,396

    You can only apply shaders to meshes, so either

    1. Everything you draw needs to be in the same mesh, or

    2. You draw everything to an image in memory instead of the screen, using setContext, then put this image into a mesh with the shader and draw it to the screen

    I suggest #2 is the way to go

  • Posts: 277

    Alright, thanks @Ignatz, I'll try #2 on a small example...

  • Posts: 277

    I tried #2 and it most works great! Thanks!

    One question though, is there real dramatic differences in render time depending on the shader we use? I'm guessing that would be the case, but ripple, which seems complicated doesn't drop a frame while radial blur, which may seem simpler, cuts frame rate by two or three.

    Am I doing something wrong?

  • IgnatzIgnatz Mod
    Posts: 5,396

    Blur loops 10 times in the fragment shader. That's probably the cause

  • Posts: 277

    That makes sense... Does anyone know how to perform a blur, or radial blur in a more efficient way?

    Limbo for ipad does it quite well ( http://iphonesoft.fr/images/_072013/limbo-iphone-ipad-2.jpg ), for instance.

  • IgnatzIgnatz Mod
    Posts: 5,396

    That's probably photoshopped beforehand

    I'm not sure there is a faster way, because blur needs to average neighbouring pixels. Maybe you could change the number of loops

  • Posts: 277

    That's a good idea, I'll try playing with the loops. I'm pretty sure limbo does blurring real time, though. They must have smart algorithms going on. I found this article, but it's a tad over my head :D http://www.gamasutra.com/view/feature/3102/

  • Posts: 1,595

    This might help, bit more understandable: http://en.wikibooks.org/wiki/OpenGL_Programming/Post-Processing
    You're looking for post processing which is used in a lot of games to provide a faster way of changing how colours appear on the screen. Bearing in mind what @ignatz said, this only works with a texture, which in this case is the screen, but not the screen. Everything you would draw to the screen you draw to an image as a texture to be used in the fragment shader.

  • IgnatzIgnatz Mod
    Posts: 5,396

    An alternative is not to blur, but just to fade the screen, and this is very easily done by drawing normally, then overlaying a partly transparent rect on the whole screen.

    I think that's just as good!

  • Posts: 1,595

    Or draw an alpha-fied version of the image 5 times with a random difference in position of a few pixels?

  • How to use blur shader? Even example code doesn't work. My mesh draws perfectly, but if I add myMesh.shader = shader("Basic:Blend Images") line, my mesh disappear. Thanks

  • IgnatzIgnatz Mod
    edited February 2014 Posts: 5,396

    @Cabernet - it's probably because you need to provide additional parameters to the shader (see the Bindings tab in the Blend shader, in the Shader lab), like so

    myMesh.texture = image1 --your basic image, I presume you already have this
    myMesh.shader = shader("Basic:Blend Images") 
    --now the extra parameters, attached to the shader not the mesh
    myMesh.shader.texture2 = image2 --the image you want blended
    myMesh.shader.mixAmount = a
    --where a is between 0 and 1 and tells the shader what proportion of each image to use 
    

    If you want the mix to change over time, you can put the mixAmount line in the draw function and update it as often as you like.

  • @Ignatz thank you, works perfectly!

Sign In or Register to comment.