Jump to content

Trailing fade to complete black with PIXI.js and WebGLRenderer


apexearth
 Share

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

Link to comment
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.

Link to comment
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...

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...