I am struggling with controlling the display of two transparent, overlapping spheres in a webgl context. The issue arises when I want one sphere to be hidden behind the other during overlap. This problem can be observed on this page:
Specifically, I want the blue sphere to be concealed by the red sphere when they intersect.
Although rearranging the order in which the spheres are added to the scene (adding the big sphere first) resolves the problem and provides the desired outcome:
In my personal project, however, even adding the big sphere first does not eliminate the intersection issue.
The closest I have come to a solution is moving the smaller spheres closer to the camera. To demonstrate, I shifted the smaller spheres 10 units forward in this instance:
Yet, upon navigating with the arrow keys, occasional glimpses of the intersection occur and sometimes persist (especially noticeable with lateral flow of components).
Attempts such as applying depthWrite: false to both materials proved ineffective.
Tinkering with renderer.sortObjects = false gave unsatisfactory results as it disrupted the "natural" draw order that should take place within the broader scenery. The issue solely pertains to these spheres.
- Is there a method to dictate draw order of transparent objects in webgl / three.js? Even after shifting the smaller spheres 10 units nearer, they continue to z-fight.
- Alternatively, is there a way to enforce a specific behavior for overlapped transparent objects?