Explicit renderOrder for the transparent mesh layers, bottom → top.
three.js sorts transparent objects back-to-front by bounding-sphere depth,
which changes with the camera. The full-hex water surface mesh overlaps the
shore strip, so without a fixed order it can composite OVER the shore and
wash out the foam for whole chunks. The liquid surface stays at the default
order 0; everything layered on top of it gets an explicit slot. Demo-level
overlays (hover, selection, …) start at 5.
Explicit renderOrder for the transparent mesh layers, bottom → top.
three.js sorts transparent objects back-to-front by bounding-sphere depth, which changes with the camera. The full-hex water surface mesh overlaps the shore strip, so without a fixed order it can composite OVER the shore and wash out the foam for whole chunks. The liquid surface stays at the default order 0; everything layered on top of it gets an explicit slot. Demo-level overlays (hover, selection, …) start at 5.