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:
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:
Output pass 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?
@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.
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.
@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).
@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?
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