I dont really have any good resources on shaders, but I can explain how cocos2d handles shaders.
In general, for everything you draw on the screen, you need a shader. It is basically just a small program, drawing the actual pixels on the screen. Each program consists of two parts
- Vertex shader, (cocos2d uses vsh file extension, but it could be anything)
- Fragment shader, (cocos2d uses fsh file extension, but it could be anything)
The vertex shader is executed once for each vertex, and the fragment shader once for each fragment (pixel). So a fragment shader is called hundreds or thousands of times more often than a vertex shader, and thus more important to keep short and fast.
Cocos2D loads the shaders pr. sprite, so you can customise any sprite simply by attaching a new shader (The two small programs). There is a convenience function name shaderNamed.
mySprite.shader = [CCShader shaderNamed@"shader.greyscale"];
This will load the vsh and fsh files, and use them for that sprite. Easy Peasy.
In the shader, you will notice variables like cc_MainTexture etc. These are automatically added to your file, so you do not have to add them manually each time. Just use them. For a list of what is included, look around line 60 in CCShader.m
Shaders are mighty powerful once you get the hang of them, and please dont hesitate to ask if you run into problems.