Addons: TSL PostProcessing - Fix Pixelation Pass Output

[cmhhelgeson]

Description

The current version of PixelationPassNode outputs incorrect normal values, causing the background of the screen to brighten when the normalEdgeStrength is increased.

Normal Edge Strength: 0

Normal Edge Strength: 2

This PR fixes the issue by outputting the correct normals and aligning the normalEdgeStrength behavior with the original shader. It also adds more views to the inspector.

https://raw.githack.com/cmhhelgeson/three.js/fix_pixelation_pass/examples/webgpu_postprocessing_pixel.html

[Mugen87]

How about using something like this at the beginning of pixelation() to avoid side effects to the background:

const depth = sampleDepth( 0, 0 ).toVar();
depth.greaterThanEqual( 1.0 ).discard();

[cmhhelgeson]

How about using something like this at the beginning of pixelation() to avoid side effects to the background:

const depth = sampleDepth( 0, 0 ).toVar();
depth.greaterThanEqual( 1.0 ).discard();

This prevents the background from properly being rendered, so it would need to be different.

[Mugen87]

The current version of PixelationPassNode outputs incorrect normal values, causing the background of the screen to brighten when the normalEdgeStrength is increased.

I had the time for a closer look now and I can't reproduce this issue on latest dev. For comparison:

Normal strength: 0

Normal strength: 2

The background color is the same. Do I miss something?

[cmhhelgeson]

The background color is the same. Do I miss something?

I'm not sure, I've tried on multiple Windows computers with Chrome and the background color changes. I'm not sure if a separate browser and/or OS would produce a different effect.

https://raw.githack.com/mrdoob/three.js/dev/examples/index.html?q=pixel#webgpu_postprocessing_pixel

[cmhhelgeson]

@Mugen87 What browser/OS or what branch did you test on? I know that's likely not the issue but I'm trying to reconcile what may have caused the difference in results we both saw despite both testing the example on the current dev branch.

[Mugen87]

I'm testing with latest dev on macOS/Chrome. The behavior is equal across all browsers (Chrome, Firefox and Safari) and WebGL/WebGPU.

I'll try to test on a Window device when I have the chance.

[cmhhelgeson]

I'm testing with latest dev on macOS/Chrome. The behavior is equal across all browsers (Chrome, Firefox and Safari) and WebGL/WebGPU.

I'll try to test on a Window device when I have the chance.

Weird. Can you show the visual result on Mac when you output the normal of the pixelationPass to the inspector? Maybe that will surface the difference between the normals on Mac and normals on Windows if there is one.

[Mugen87]

It looks like so:

To be clear, this is from the current example on dev not from the PR.

[cmhhelgeson]

It looks like so:

To be clear, this is from the current example on dev not from the PR.

Pretty much the same thing I was seeing on unmodified code/dev.

[cmhhelgeson]

On Mac's WebGPU example does the effect of the normalPass correlate with its effect in the WebGL sample (i.e the lines produced by the normalEdgeStrength are of equivalent thickness and look the same?)

[cmhhelgeson]

Haven't found a solution yet, but just for testing purposes, this is the result on dev for Firefox on Windows

[Mugen87]

On Mac's WebGPU example does the effect of the normalPass correlate with its effect in the WebGL sample (i.e the lines produced by the normalEdgeStrength are of equivalent thickness and look the same?)

It's a 1:1 match between WebGPU and WebGL.

[Mugen87]

BTW: I have tomorrow the chance to check on a Windows laptop.

[Mugen87]

I can reproduce the issue with Chrome on a Window device as well as on Android. On the smartphone I have additionally tested with Firefox and the issue is present as well.

On Windows, WebGL is fine so there is only an issue with WebGPU.

We definitely have to find out why these deviations occur. The changes from this PR would only hide what's going wrong.

Since the background in webgpu_postprocessing_pixel is just a color, I wonder if this has something to do with clear values for the depth and normal attachments which might differ across platforms. This needs more investigation...