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!
You can only apply shaders to meshes, so either
-
Everything you draw needs to be in the same mesh, or
-
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
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?
Blur loops 10 times in the fragment shader. That’s probably the cause
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.
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
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 
http://www.gamasutra.com/view/feature/3102/
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.
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!
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
@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.