Trailing fade to complete black with PIXI.js and WebGLRenderer

[apexearth]

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

[ivan.popelyshev]

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.

[apexearth]

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...

[ivan.popelyshev]

You can use custom blend modes with this branch: https://github.com/pixijs/pixi.js/pull/4049 , just use pixijs.download/dev-blendmodes-class/pixi.js and write it llike in the sample.