Trasparency fluctuates per camera position

[obsius]

Description

This may be more of a "bug" in the migration guide from 151 -> 152 then the code itself, but in r152, the following change (and corresponding PR) are mentioned in the release notes:

Sort on bounding sphere center, not origin. https://github.com/mrdoob/three.js/pull/25913 (@donmccurdy)

What used to be stable sorting for transparency now fluctuates as the camera is rotated:

It's not immediately clear to me if this is a preexisting issue with my use of THREE.js now revealed, or if this is a known and intended consequence of the change. Is there something I should be doing to restore r151 and earlier behavior? Also, I think it would be beneficial to mention this new behavior in the migration guide to save others the trouble.

Thanks.

Reproduction steps

Update from r151 to 152.

Code

Concerning aforementioned PR.

Live example

See gif above.

Screenshots

No response

Version

152

Device

Desktop

Browser

Chrome

OS

Windows

[donmccurdy]

There's a longer discussion in #25913 that may be helpful here. Realtime renderers use Painter's sort to order objects by distance from the camera, as that tends to be best for both performance and transparency. The changes in #25913 allow three.js to find that order in some cases where it previously could not.

There do exist cases where you don't want Painter's sort – particularly where a stable order is critical, or transparent objects are nested within one another. No one-size-fits-all answer there, but renderer.sortObjects = false might be what you're looking for.

Upcoming work in #24271 may also be helpful for scenes like yours, with nested or interlocked transparent surfaces.

[obsius]

Thanks. Disabling sortObjects helped to an extent, but setting render orders on the topographies and leaving the new sort in place worked best. Look forward to your upcoming PR for overlapping transparent surfaces. Thanks again for the hard work you and the rest of the THREE.js team do.