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 https://codepen.io/Pierre33300/pen/MWoNKxv
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.
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.
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.
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.
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.