TAA with ACES and fixed background

Hello

I am trying to achieve 3 things:

  • Implement ACES Tonemapping
  • Implement Temporal Anti Aliasing (TAA)
  • Have a fixed background color that matches the UI, without being affected by the tone mapping

I have all the parts working separately, but not combined.

This is what I got so far. Click on the canvas to toggle TAA.
There’s a strange artifact above the sphere when TAA is enabled for the first time (can be difficult to see on some monitors), and the background layer is not visible with TAA

The technique for background layers is stolen from this PG

The mentioned artifact with brightness adjusted, in case it doesn’t show

cc @sebavan, but it may be a bit before we get a response, as it is just about the weekend for him. I’ll see what I can find out in the meantime :slight_smile:

You should try and use Spector.js to evaluate the potential pipeline issues you are having.

1 Like

Just spent some time looking into this. The artifact can be reproduced with other TAA pipelines. E.g., in this TAA demo playground, you’ll see the the same ghosting effect if you start instead with let disableTAA = true; and toggle on the “Enable TAA” checkbox.

Judging from this line in the source for TAARenderingPipeline, it seems there is indeed special handling for the first application of TAA (see _firstUpdate). The blend factor of the TAA is being temporarily set to 1, I assume, to instantaneously blend any artifacts so that you don’t see them.

But I think this isn’t always working as intended? cc @Evgeni_Popov

Anyway, for the time being, you could simulate the same effect described above.
TAA ghosting workaround | Babylon.js Playground (babylonjs.com)

3 Likes

The problem is that the first pair of the Halton sequence is incorrectly initialized due to wrong width/height. This PR corrects this problem:

4 Likes