Postprocessing adds a lot of pixelation

Questions
1

I am trying to optimize the visual appearance of my scene and faced another interesting effect of post processing, for some reason OutputPass makes my GLTF very pixelated as shown below. I use 3 post-processing passes in the following order: RenderPass → SSAA → OutputPass.

Default config is:

SSAA.level = 3;
renderPass.enabled = false;

To optimize performance on slower devices I analyze FPS and either reduce SSAA level up to level 1 or disable SSAA as following:

postPasses.ssaaRenderPass.enabled = false;
postPasses.renderPass.enabled = true;

As you can see OutputPass remains enabled and it results into pixelation. For some reason, when I disable OutputPass the lighting changes (worsens) and the level of pixelation visibly lowers. Please see below:

Output pass enabled:
Enabled
Output pass disabled:
Disabled

It seems it is visible only on a very small objects, like watch hands that are less than 1 mm thick.

We have discussed OutputPass with @Mugen87 in one of our previous conversations and in the fiddle we used this effect is almost invisible: Edit fiddle - JSFiddle - Code Playground. But with the right level of zoom and proper angle you can find the difference as shown below.


Pay attention to the area around the mouse cursor.

Could you please suggest what can cause this effect and how to fix it?

Thank you in advance!

2

I don’t see any visual differences in the fiddle. Do you mind sharing a different example that shows the issue more clearly?

3

To optimize performance on slower devices I analyze FPS and either reduce SSAA level up to level 1 or disable SSAA as following:

Sorry I can’t help with your question, but was wondering if you could share how you are doing this?

4

Hi @Mugen87. This one is a little better: Edit fiddle - JSFiddle - Code Playground
You can rotate it to see the model on a dark background to make it more visible.
Thanks.

5

@user123 just count a number of animationLoop executions against some predefined time, for example, 1 second to get frames per second count. Define your thresholds and it FPS drops below the threshold then do ssaa.level -= 1; or ssaa.enabled = false;. I hope it helps.

1 Like
6

Relevant ? : How to set antialiasing while using EffectComposer in Three.js r130

7

Not really, but thank you anyways. I use SSAA for antialiasing, but my question is why does output pass worsen pixelation?

8

Specifically this part:

let target
if (isWebGL2Available()) {
  target = new WebGLMultisampleRenderTarget(size.width, size.height, {
    format: RGBAFormat,
    encoding: sRGBEncoding,
  })
  target.samples = 8
}

const composer = new EffectComposer(gl, target)

To enable antialising on the EffectComposers renderTarget.

Then you should be getting the same antialising you see on the screen rendertarget…

And you might not even need your antialising pass…

9

This code is actually obsolete. WebGLMultisampleRenderTarget has been removed, the render target should be of type half float and the color space should be linear-srgb. Ideally users do not pass in custom render targets to the composer since they are often not configured correctly.

I’ll have a closer look at the new fiddle in the next days.

2 Likes
10

@new I can reproduce the white pixels but interestingly only in Chrome and Safari. Not in Firefox. Can you please make a test with Firefox as well? Besides, make sure you test on macOS if possible. There could be an issue in ANGLE and afaik Firefox uses this component on Windows.

BTW: This issue is not exclusive to OutputPass. Any RTT setup produces these white pixels (even a simple copy pass).

11

use ftaa instead of ssaa, this artifact also be eliminated if u decrease further the camera near value down to .001

12

What is FTAA?

13

sorry my mistake, what i meant is TRAAEffect not FTAA

Screenshot 2023-09-10 150614
Screenshot 2023-09-10 1506141920×1080 201 KB

This threejs project uses TRAAEffect to sharpen gaussian bluring after implementing lens distortion. eleminating jittering and blur artifacts from the lens disturtion.

You can observe the farther part of the rendering is blur and the closer part is sharper simulating a real world camera using the TRAAEffect.

Visit Edge Apartment
Other Apartment

Resources:
GIthub Realism
Download from Sketchfab
Download Source Code

14

@Mugen87 you are right, it works well on Firefox MacOS. However, the issue can be reproduced on Safari and Chrome on MacOS, also Chrome Android and iOS, and Safari iOS.

@Umbawa_Sarosong thanks. I played with camera near value and in my case decreasing it further actually worsens the issue. Decreasing it down to 0.0001 makes the issue 10x stronger. Also, when I use SSAA issue disappears, but my intention is not to use any antialiasing on mobile devices while maintaining proper colors with OutputPass. Could you please suggest how good is TRAAEffect’s performance? Would it work on mobile without draining the battery?

1 Like
15

TRAAEffect using realism.js is better performance than SSAA, on mobile I disabled TRAAEffect as well, in my case I let that (artifact) slide on mobile mode.

1 Like
16

I suspect there is an issue in ANGLE so it’s probably best to file an issue at the Chromium bug tracker.

1 Like
17

Chromium bug: 1480965 - chromium - An open-source project to help move the web forward. - Monorail

2 Likes
18

@Mugen87, thanks a lot! Appreciate your help! I hope they will resolve it quickly.

19

After playing with this thing for a while I realized that it is not only post-processing that is affected by the issue, it just makes it worse, but the issue itself if present always and highly depend on the camera near value. If we set it low enough, everything becomes super ugly as can be seen here: Edit fiddle - JSFiddle - Code Playground

20

These artifacts can be fixed with a logarithmic depth buffer: Edit fiddle - JSFiddle - Code Playground

However, when using RTT the white pixels are still present.