How to write your own custom shader effect

Custom effect can be written in just a few lines of GLSL shader code. A typical kameraku shader code will have similar form to the following example,

precision mediump float;
uniform sampler2D vTex;
varying vec2 vCoord;

void main(void)
{
gl_FragColor.rgba = texture2D(vTex, vCoord).bgra;
}

To understand how the whole thing works, let's get into details on how kameraku application works. Every time camera image is received by the application, it forwards the image data to graphics processor. Image data is an array of pixels which represents of what the camera sees. This array of colors is delivered to graphics processor as a 2D texture together with information about its coordinate. From your shader code these two information are accessible via variable vTex and vCoord.

One important thing to note is that camera image data is in BGRA order, so you may need to reorder it into RGBA order before processing and setting it to the final color to be displayed on the screen, which is stored in gl_FragColor variable.

In the earlier example, the shader code uses built-in texture2D function to lookup color value in vTex texture using given vCoord coordinate and set it as the final color to gl_FragColor after re-ordering it from BGRA to RGBA (note the .rgba and .bgra notation used). Since there is no color modification involved, the shader code basically simply passing through camera image data, which will produce unmodified or normal output.

Now, let's move to another example

precision mediump float;
uniform sampler2D vTex;
varying vec2 vCoord;

void main(void)
{
vec4 color = texture2D(vTex, vCoord).bgra;
gl_FragColor.rgba = vec4(color.r, 0.0, 0.0, color.a);
}

In the second example we modify the output color by only setting red channel and supressing the other color channels. The effect will produce output as shown in the left picture.

Well done! You have created your first custom shader effect. All you need to do is to save that code into a text file and store it in your phone memory.


Traps and pitfalls
One thing to remember when writing shader effects for kameraku is that OpenGL ES 2.0 shading language (also known as GLSL ES or ESSL) is based on desktop OpenGL GLSL version 1.20.

It is important to understand what the limitation are when porting shader code from desktop OpenGL. Make sure you read Appendix A from GLSL ES specification. One of them is the limitation when indexing samplers from within fragment shader code. Using index other than constant-index-expression is not guaranteed to work.

For example:

vec2 texPos = vCoord + vec2(0.5, 0.5);
vec4 col = texture2D(vTex, texPos); <= this may fail