apexearth

Trailing fade to complete black with PIXI.js and WebGLRenderer

Recommended Posts

I have application made using Pixi.js and it uses a WebGLRenderer.

I'm preserving the drawing buffer and not clearing before render:

{ preserveDrawingBuffer: true, clearBeforeRender: false }

This allows me to create trails as objects move around. I want the trails to fade out over time, so I apply a transparent black rectangle on top over every rendering.
This works, but the fade out eventually rounds off to gray. I want a complete fade to black.

I've tried using a ColorMatrixFilter filter with a lowered brightness on my root container, hoping it would cause a fade effect.
It didn't cause any fade effect, instead just causing everything to be slightly darker.
If that had worked, then a custom filter could help to do the job.

How can I get a slow gradual fade to complete black for the trails of my rendered objects?

I've also asked this on StackOverflow: https://stackoverflow.com/questions/44866613/trailing-fade-to-complete-black-with-pixi-js-and-webglrenderer

Share this post


Link to post
Share on other sites

Any filtered container is rendered into separate renderTexture first. Its not possible to get main framebuffer into filter, it is webgl restriction.

Try use big rectangle of color "0xf0f0f0" with MULTIPLY blendMode. Or another non-complete-white color.

UPD. actually its possible with readPixels but that only adds problems: extra pass from GPU to CPU and then upload it back.

Share this post


Link to post
Share on other sites
10 hours ago, ivan.popelyshev said:

Any filtered container is rendered into separate renderTexture first. Its not possible to get main framebuffer into filter, it is webgl restriction.

Try use big rectangle of color "0xf0f0f0" with MULTIPLY blendMode. Or another non-complete-white color.

UPD. actually its possible with readPixels but that only adds problems: extra pass from GPU to CPU and then upload it back.

Thanks for the reply!

The multiply blend mode has a pretty good effect, but it does still leave a gray trail.

I've thought about directly reading and writing the pixels too but I think that pass through the CPU will kill performance too much.

I think a SUBTRACT blend mode might be able to do the trick for me, thought I don't see that available in Pixi.js.
I'm guessing that blend mode is left out for a reason. (?)

Update: 

Looking closer, the blend modes seem to all work in multiples. I'm not sure a subtract blend mode would work.
On the flip side, I'm able to get beautiful fades to white. If I could just invert that somehow...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.