Render to same screen VfxManager and SpriteBatch

[m-tosch]

I successfully got the basic ShapeRenderer example to work but how can you combine it with a SpriteBatch that is also drawing stuff?

My issue is that everything i draw before using VfxManager's "renderToScreen()" is not showing at all. The screen is just black.

public void render(float dt){

    // this does NOT show on screen
    batch.setProjectionMatrix(...);
    batch.begin()
    batch.draw(...)
    batch.end()

    // this shows on screen
    vfxManager.beginInputCapture();
    sr.setProjectionMatrix(batch.getProjectionMatrix());
    sr.begin(ShapeRenderer.ShapeType.Line);
    sr.setColor(Color.WHITE);
    sr.circle(10, 5, 3, 32);
    sr.end();
    vfxManager.endInputCapture();
    vfxManager.applyEffects();
    vfxManager.renderToScreen();

    // this shows on screen
    batch.setProjectionMatrix(...);
    batch.begin()
    batch.draw(...)
    batch.end()
}

Any tip would be very much appreciated. Apologies if i'm missing something fundamental here 👀

[metaphore]

Well, I think you're just missing one small detail...

First of all, make sure you clean up the buffers (just like in the example). While it's most likely not gonna change anything, it will definitely help to figure out at which stage the rendering goes to the wrong buffer.

// Add this to the very beginning of the render() method.
Gdx.gl.glClearColor(0f, 0f, 0f, 1f);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

// Put this before vfxManager.beginInputCapture()
vfxManager.cleanUpBuffers();

And then the actual problem comes to the surface - when you draw using vfxManager.renderToScreen() you draw an opaque picture to the screen (with black background). No wonder the old data get lost.

To solve this, you need to clean up the vfxManager buffers with transparent color. But keep in mind, that most of the built-in effects are implemented to be full-screen post effects. This means they are primarily designed to work with opaque images and output another opaque image. But I've been off the library for too long and can't remember exactly which ones are transparency compatible, and which ones are not. So you better experiment or write your own effects if you're looking for a specific image processing case.

To make buffers transparent, enable blending and use the clear color:

vfxManager.setBlendingEnabled(true);
vfxManager.cleanUpBuffers(Color.CLEAR);

Please let me know if it helps.

[m-tosch]

Thanks for the help. I updated my code. I think i see what you mean by "transparency compatible"

vfxManager.cleanUpBuffers();

vfxManager.setBlendingEnabled(true);
vfxManager.cleanUpBuffers(Color.CLEAR);

In the second image my map tiles are rendered now, however the effect looks quite different. Is this what you mean by "transparency compatible"? Can i mess with the SpriteBatch blending to improve the result or is something i'd have to write my own effect for in gdx_vfx?

[metaphore]

Yeah, I think you'll have to play a little with how the effect output gets layered on top of the existing image to get the desired result. Luckily, in this particular case, it can be done with OpenGL blending modes and is completely outside of the gdx-vfx effect itself.

To me, the circle on the second image looks like it has premultiplied alpha qualities. It's worth trying to render it with different blending. Try to switch to the premultiplied mode before and reset the OpenGL state after rendering the effect to the screen.

// Enable PMA blending.
Gdx.gl.glBlendFunc(GL20.GL_ONE, GL20.GL_ONE_MINUS_SRC_ALPHA);

vfxManager.renderToScreen();

// Reset to non-PMA blending.
Gdx.gl.glBlendFunc(GL20.GL_SRC_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA);

[m-tosch]

I think it's still not the same as in the image above with the black background, but it looks a little better now. In the meantime i've been writing some of my own shaders and implemented them via the default libgdx ShaderProgram class. Most of what i need i can cover with this.

Since you answered my original question about the combination of gdx_vfx and SpriteBatch rendering i'll close this issue.

Thank you very much :)