Question

I’m making a simple application/wallpaper, that adds simple water ripple effect to background image.

I’m testing on HTC Desire (Android 2.2).

I have found this explanation of how this is done and implemented it for android Adrian Boeing: Blog.

The problem now is very low performance. If I have still image (with normal shader) the fps is around 40-50fps. If I add the part that calculates sinc function and than use new calculated value for texture fps drops to 20fps.

Problem is I want to add more than just 1 ripple, and fps drops /2 by number of ripples (t.i 2 ripples = 10fps, 3 ripples 5 fps etc…).

Have I badly implemented this shader and it there some room for drastically optimization, or are effects like this done in some other way?

The effect is similar to that default live wallpaper on Android called Water (Autumn leaves tumble to rippling pond below).

Here is code of my shader:

    private final String fragmentShaderCode = 
        "precision mediump float;" + 
        "uniform sampler2D uTexture;"+ 
        "varying vec2 vTexCoordinate;"+ 
        "uniform float mTime;"+ //time variable 
        "uniform float offX;"+//center of wave 
        "uniform float offY;"+//center of wave 
        "uniform float size;"+//size of wave (so you can make it smaller over time) 
        "void main() {" + 
        "        vec2 off2 = vec2(offX,offY);"+ 
        "        vec2 cPos = -1.0 + 2.0 * vTexCoordinate.xy;" + //bring coordinate to middle of screen 
        "        vec2 ofvec = cPos+off2;"+ //doda offset 
        "        float r = length(ofvec);"+ //length of vector 
        "        cPos = vTexCoordinate + (size)/(r*2.0)*sin(r*100.0-mTime); "+ //sinc function for wave simulation 
        "        gl_FragColor = texture2D(uTexture,cPos);" + //draw texture 
        "}"; 

Note: I added this code for it’s simplicity to read. The code that uses multiple touch events, just uses vector for offX,offY, and does the code below in for loop.

Answer 1

A lot of heavy computations in fragment shaders badly affects performance. The quite common practice for optimization for mobile OpenGL ES devices is to move heavy computations to vertex shaders.

In this case you will need to reconsider logic of shaders and modify geometry too. I propose to make a mesh with good enough tessellation to simulate water waves, and alter vertex positions to make ripple effect.

Alternatively, you can leave all logic within fragment shader but alter computation of UV offset using external baked texture with offset data. This way you will have the same quality of effect but with significantly improved performance. You have to store in separate texture baked data for UV deltas for given distances and read ready pre-computed value from this texture. All mobile devices GPUs has at least 2 texture samplers so additional texture2D() call is almost free.

To have an idea how it works, please read this article http://prideout.net/blog/?p=56 It is about path deform, but you should take a look at the method of sampling certain pre-calculated data from texture.