I’m currently experiencing an issue with flickering on my geometry. It seems that when I apply low transparency to the objects and move the camera, the flickering occurs consistently. Surprisingly, this problem persists whether I have multiple geometries or just a single one.
I would greatly appreciate any help or insights you can provide to resolve this issue.
Thank you in advance for your assistance!
Long story short - avoid using transparency whenever possible, especially transparent objects overlapping other transparent objects.
Adject your camera near parameter to the lowest value, this will solve the issue of flickering
How is it possible that old version of Three.js has no problem with this scene but when I switched to new one and implemented same logic I got this
You’ll figure it out, just keep tweaking, also I keep all my threejs apps updated every new release so i don’t get left behind. I have the same issue where the mesh flickers, then i gradually adjust the camera near til i get the value of .01, then the flickering disappears. Just keep adjusting until you find the value that works.
Newer versions of three.js have changes that improve transparency rendering in many cases, though it seems to be worse in the scene you’ve shared here, given all the interlocked transparency. You may want to disable or override sorting to get around that, see Trasparency fluctuates per camera position · Issue #26221 · mrdoob/three.js · GitHub.
The next version of three.js will also include a
material.alphaHash = true property you can use as an alternative to
.transparent = true for cases like this; it has no sorting problems. Alpha hashing does introduce some grain in the surface, which can be reduced (if required) with methods like TAA or TRAA: Material: Add "material.alphaHash" transparency mode by donmccurdy · Pull Request #24271 · mrdoob/three.js · GitHub
I appreciate your response. However, using the “sortObject=false” option does resolve the flickering issue with the glb model. Nevertheless, it introduces another problem where the ground becomes invisible, and geometries affected by low transparency no longer exhibit true transparency. This means that I cannot see the sides of other geometries that are closer to the affected geometry.
The solution I found was to individually write the .renderOrder for EACH geometry, which might be a pain for a large scale.
Thanks guys for ur help!