4
\$\begingroup\$

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?

\$\endgroup\$
1
\$\begingroup\$

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);
\$\endgroup\$

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.