Two pass blur shader using libgdx tile map renderer

Posted by Alexandre GUIDET on Game Development See other posts from Game Development or by Alexandre GUIDET
Published on 2013-12-07T16:32:07Z Indexed on 2014/08/25 16:29 UTC
Read the original article Hit count: 6983

Filed under:
|
|
|

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:

without effects

Using the OrthogonalTiledMapRenderer sprite batch like this:

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

I get the following render:

with blur X only

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:

using fbo for two pass blur shader

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?

© Game Development or respective owner

Related posts about libgdx

Related posts about tilemap