Two pass blur shader using libgdx tile map renderer

Question

I am trying to apply the following technique: blur effect using two pass shader to my libgdx game using the OrthogonalTiledMapRenderer. The idea is to blur the background wich is also a tilemap but rendered with another camera with a different zoom applied.

Here is a screen capture without effect:

Using the OrthogonalTiledMapRenderer sprite batch like this:

backgroundMapRenderer.getSpriteBatch().setShader(shaderBlurX);
backgroundMapRenderer.render(layerBackground);

I get the following render:

Wich is ok for X blur pass. I then try using frame buffer object like in this example. But the effect seems to be too much zoomed:

I may be messing up with the camera and the zoom factor. Here is the code:

    private ShaderProgram shaderBlurX;
    private ShaderProgram shaderBlurY;

    private int FBO_SIZE = 800;
    private FrameBuffer targetA;
    private FrameBuffer targetB;

---

    targetA = new FrameBuffer(Pixmap.Format.RGBA8888, FBO_SIZE, FBO_SIZE, false);
    targetB = new FrameBuffer(Pixmap.Format.RGBA8888, FBO_SIZE, FBO_SIZE, false);

---

    targetA.begin();
    Gdx.gl.glClearColor(1, 1, 1, 0);
    Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);

    backgroundMapRenderer.render(layerBackground);
    targetA.end();

    targetB.begin();
    Gdx.gl.glClearColor(1, 1, 1, 0);
    Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
    backgroundMapRenderer.getSpriteBatch().setShader(shaderBlurX);
    backgroundMapRenderer.render(layerBackground);
    targetB.end();

    TextureRegion back = new TextureRegion(targetB.getColorBufferTexture());
    back.flip(false, true);

    backgroundMapRenderer.getSpriteBatch()
        .setProjectionMatrix(backgroundCamera.combined);
    backgroundMapRenderer.getSpriteBatch().setShader(shaderBlurY);
    backgroundMapRenderer.getSpriteBatch().begin();
    backgroundMapRenderer.getSpriteBatch().draw(back, 0, 0);
    backgroundMapRenderer.getSpriteBatch().end();

I know I am making something the wrong way, but I can't find any resources about applying two passes shader using tile map renderer.

Does someone know how to achieve this?

Answer 1

I've been facing a similar problem recently and all was a matter of 'world' units vs pixel units.

Which units are you using for the camera and/or viewport? In case you defined such dimensions with 'world' units you should draw your back TextureRegion specifing the corresponding size in 'world' units.

backgroundMapRenderer.getSpriteBatch().draw(back, 0, 0, SCREEN_WIDTH_IN_WORLD_UNITS, SCREEN_HEIGHT_IN_WORLD_UNITS);