Question

I’m developipng an 2D live wallpaper for Andoid using libgdx and its SpriteBatch class. This is a watch, so all I need, from libgdx is just drawing multiple textures, rotating them to specific angle.

I’ve solved this problem using SpriteBatch class and all was fine.

But now I need to add magnifying lens effect to my scene. Task is to magnify specific area with specific ratio to simulate real lens.

I’ve solved this by rendering to FrameBuffer, getting texture region from FrameBuffer and finally, drawing this region with custom shader, using SpriteBatch.

THE PROBLEM: on Samsung devices (I’ve tried on galaxy note N7000, and on Galaxy Tab 10.1) there is a small rectangle in the center of magnifying area about 16x16px, where magnification ratio slightly increases. Sorry, I can’t post a screenshot now, because I don’t have Samsung device.
On other devices all works fine, tried in HTC Vivid, Acer A500, Google Nexus One.

I think, the problem if in Mali GPU on Samsung devices, but don’t know, how to fix it.

I’ve adapted fragment shader code from this question to SpriteBatch Add Fisheye effect to images at runtime using OpenGL ES
Here is it:

#ifdef GL_ES
#define LOWP lowp
precision mediump float;
#else
#define LOWP
#endif

varying LOWP vec4 v_color;
varying vec2 v_texCoords;
uniform sampler2D u_texture;

void main() {
vec2 m = vec2(0.622 , 0.4985); // lens center point, note that in live wallpaper center of texture is (0.5,0.5)
float lensSize = 0.045; //diameter of lens
float lensCut = 0.0342; //length of cut lines

vec2 d = v_texCoords - m;
float r = sqrt(dot(d, d)); // distance of pixel from mouse
float cuttop = m.y + lensCut;
float cutbottom = m.y - lensCut; 

vec2 uv;
if (r >= lensSize) {
    uv = v_texCoords;
} else  if ( v_texCoords.y >= cuttop) {
    uv = v_texCoords;
}  else  if (v_texCoords.y <= cutbottom) {
    uv = v_texCoords;
} else {
    uv = m + normalize(d) * asin(r) / (3.14159 * 0.37);
}

gl_FragColor = texture2D(u_texture, uv);
}

Vertex shader is default from SpriteBatch sources:

attribute vec4 a_position;
attribute vec4 a_color;
attribute vec2 a_texCoord0;

uniform mat4 u_projTrans;

varying vec4 v_color;
varying vec2 v_texCoords;

void main() {
    v_color = a_color;
    v_texCoords = a_texCoord0;
    gl_Position = u_projTrans * a_position;
}

Here is my render() method:

    GL20 gl = Gdx.graphics.getGL20();
    gl.glEnable(GL20.GL_TEXTURE_2D);
    gl.glActiveTexture(GL20.GL_TEXTURE0);

    gl.glClearColor(WallpaperService.bg_red, WallpaperService.bg_green, WallpaperService.bg_blue, 1f);
    gl.glClear(GL20.GL_COLOR_BUFFER_BIT);


    // Creating framebuffer, if it has gone
    if (mFrameBuffer == null) {
        mFrameBuffer = new FrameBuffer(Format.RGBA4444, BG_WIDTH, BG_HEIGHT, true);

        mFrameBufferRegion = new TextureRegion(mFrameBuffer.getColorBufferTexture());
        mFrameBufferRegion.flip(false, true);

    }

    //Camera setting according to background texture
    camera = new OrthographicCamera(BG_WIDTH, BG_HEIGHT);
    camera.position.set(BG_WIDTH / 2, BG_WIDTH / 2, 0);
    camera.update();
    batch.setProjectionMatrix(camera.combined);

    //Rendering scene to framebuffer
    mFrameBuffer.begin();
    batch.begin();
    //main Drawing goes here
    batch.end();

    //Drawing frame to screen with applying shaders for needed effects
    if (mFrameBuffer != null) {
        mFrameBuffer.end();

        camera = new OrthographicCamera(width, height);
        camera.position.set(width / 2, height / 2, 0);
        camera.update();
        batch.setProjectionMatrix(camera.combined);

        batch.begin();
        batch.setShader(null);

        batch.setShader(shader);

        batch.draw(mFrameBufferRegion, width / 2 - (BG_WIDTH / 2) + (MARGIN_BG_LEFT * ratio), height / 2
                - (BG_HEIGHT / 2) + (MARGIN_BG_TOP * ratio), (float) BG_WIDTH / 2, (float) BG_HEIGHT / 2,
                (float) BG_WIDTH, (float) BG_HEIGHT, (float) ratio, (float) ratio, 0f);

        batch.setShader(null);
        batch.end();
    }

Answer 1

I’ve managed to fix this issue. The problem is in Mali gpu.
Mali doesn’t support high precision float calculations in fragment shader.
When distance from center to point was near zero – r variable became zero.

So I’ve added constant coefficient to my calculations and this did the trick.

Here is working fragment shader:

precision mediump float;

varying lowp vec4 v_color;
varying vec2 v_texCoords;


uniform sampler2D u_texture;

const float PI = 3.14159;
const float koef = 10.0;
void main() {
     vec2 uv;     
    vec2 m = vec2(0.622 , 0.4985); // lens center point, note that in live wallpaper center of texture is (0.5,0.5)
    float lensSize = 0.045; //radius of lens
    float lensCut = 0.0342; //height of cut

    float cuttop = m.y + lensCut;
    float cutbottom = m.y - lensCut;
    float cutleft = m.x-lensSize;
    float cutright = m.x+lensSize;

//don't transform pixels, that aren't in lens area
     if ( v_texCoords.y >= cuttop) {
        uv = v_texCoords;
    }  else  if (v_texCoords.y <= cutbottom) {
        uv = v_texCoords; 
           }  else  if (v_texCoords.x <= cutleft) {
        uv = v_texCoords; 
           }  else  if (v_texCoords.x >= cutright) {
        uv = v_texCoords; 
        } else {
    vec2 p = v_texCoords*koef; //current point 
    vec2 d = p - m*koef; //vector differnce between current point and center point
    float r = distance(m*koef,p); // distance of pixel from center

    if (r/koef >= lensSize) {
        uv = v_texCoords;
      } else {
    uv =m + normalize(d) * asin(r) / (PI*0.37*koef);
    }  
    }

   gl_FragColor = texture2D(u_texture, uv);
}