Two pass blur shader using libgdx tile map renderer
- by Alexandre GUIDET
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?
