Antialiasing problem : thin light reflections on objects edges look jagged

Does anyone have an idea to apply antialias in this case ?
https://codepen.io/Pierre33300/pen/MWoNKxv

Aliasing is very disturbing when the objects are animated, especially when the reflect of the light is on the objects edges. It looks jagged and twinkling. Is there a way to fix it ?
I tried with smaaPass, taa, fxaa, webGLmultisampleRenderTarget but nothing works :weary:
https://codepen.io/Pierre33300/pen/MWoNKxv

Disable receiveShadow for the model. It helped me. Please try if it works.

model.traverse(o => {
if (o.isMesh) {
o.castShadow = true;
o.receiveShadow = false;
o.material = stmtl;
}

Thanks for your help :wink: but no, it doesn’t work

A couple things that come to mind that you could try:

  • Blur the environment map a little bit
  • Generate mipmaps / use PMREMGenerator for the environment map
  • Render image at a higher resolution and downsample – of course this will be a bit performance intensive
1 Like

In my experience this is usually caused by wrong settings for metalness/roughness. You’re modeling glass, so metalness should be zero - metal should always be 1 for metals and 0 for anything else. Roughness can be any value between 0 and 1, but no material will ever be perfectly smooth so try a value like 0.1 and work down from there.

Ok, why not, I’m gonna try this.
Thank you for your help, I’ll let you know if it works.

Thank you for your answer.
Yes, I know that the metalness should be zero but there are metallic part in the labels and I have to activate it. Or else, it’s not realistic. I don’t know how to do it otherwise.
I use substancepainter to make textures and export them in pbr. May be it’s not a good workflow.
The same textures works perfectly in blender, but I have to “cheat” to make them work in Three.js.
To ensure that the textures wasn’t the reason of the problem, I tried this simple textures and geometry, and the problem persists. You can see it here : https://codepen.io/PGAA/pen/MWoNKxv?editors=0010

Hmm, even with the envmap disabled (only the DirectionalLight in the scene) there are certain camera angles that show this issue.It looks physically incorrect to me, possibly some value getting blown out in the shader.

I’m talking about the bright jagged white line down the right side of the big cylinder . Zoom in to see it clearly - and if you move the camera even a fraction, or animate the model, it flickers in and out. @Mugen87, @gkjohnson, @donmccurdy what do you guys think about this? Is it an error in the shader?

I’ve noticed this effect with other models, too. I did not have the time to investigate the issue in more detail yet but at first glance the behavior looks buggy to me.

1 Like

not sure this is three related as it seems to occur with other engines:

also found this shader which seems to deal with same side effect:

Yep, I changed to PhysicalMaterial and used shininess settings at 2000 and a clearCoat to try and see if getting more light on the edge would make it stop flickering. It doesn’t. Its across materials. It does smooth out the line anti-aliasing some but the flicker continues. I think its in the lighting itself. It seems like its updating 2 different aspects of the lighting at a different timing.

Thank you for your interest. I hope you will have time soon to help to resolve it. :wink:

Yeah, I have seen this referenced before when using PBR materials with low roughness - specular aliasing/firefly pattern are the usual names I think.

One suggestion that comes up is to use TAA instead of MSAA.

EDIT: specular antialiasing from The Order 1886 seems to get referenced a lot - they claim it can be done at no runtime cost which would make it a better solution than TAA. Doesn’t look especially simple to implement though and would take some study to see whether it would fit the three.js PBR model.

s2013_pbs_rad_notes.pdf (selfshadow.com)

Thanks to Etienne, the render is much better now (postprocessing ssaaRenderPass). You can take a look here : https://codepen.io/PGAA/pen/ffd222a0ccc75ab96ac6824fccc957d2?editors=0010
However :

  • thin lines are still jagging when the reflections are very thin on the bottle (when we turn 180° around the objets). But it’s much better anyway.
  • the render is now very contrasted and dark (I usually use rendertarget with postprocessing to get color fidelity before and after postprocessing). I don’t know how to fix it for the moment.

Did you try TAA? It should also work here with less of a performance hit than SSAA.