My outer convexhull hides my inner convexhulls during rotations

Questions
,
1

Hi friends,

I have a cell with chromosomes in it. The inner chromosomes in the cell have two different cluster of points each with a convexhull around them as below screenshot:

Screenshot 2026-08-26 220547
Screenshot 2026-08-26 2205471099Ă—618 43.9 KB

As you can see there is two clusters each having its own convex hull. This is for chromosome 2 inside this cell.

There is an outher convex hull that covers these inner convex hulls. Once turned on per below screenshot:

Screenshot 2026-08-26 220609
Screenshot 2026-08-26 2206091055Ă—630 45.6 KB

The issue that I am having in this case is that during rotations some of the inner convex hulls disappear as you can see compare to the above picture both same cell. The first scrrenshot has the outer convexhull turned off and the second one is turned the outer convexh hull.

How can we fix this issue so even if the outer convex hull is on during all rotations we will always see both of these convex hulls showing.

This is a 3d volumetric cell by the way.

Thanks in advance for your help

2

There’s a few things at play.

In threejs rendering is done in 2 passes.. one for “solid” material objects, and one for “transparent”.

With transparent objects (material with transparent:true), they get sorted by their positions distance to the camera before rendering, so that the “furthest” renders first, followed by the next nearest etc.

This is a best guess as to what order transparent objects need to layer in.

There isn’t really a 100% reliable solution for all cases, so the fix depends on what your requirements are.

The lowest effort fix is to set material.transparent: false, and material.depthWrite:false on the large gray hulls material, and on the red hulls, set material.depthTest = false; and material.transparent=true;

what this does is make the gray hull render first (as a “solid” object)
Then the “transparent” (red) hulls will render next.. and they will ignore the depth buffer (written to by the solid objects) and thus always render on top.

It’s a large topic, and a few interacting systems involved… namely depth sorting, and z-buffering.
It’s TMI for me to write here, but if you want to learn more, you can google these terms, or ask an LLM to explain it to you like:
“Explain depth sorting and z-buffering in threejs to me.”

You could even just send it a link it to this thread and it should be able to expand on any aspects you’re unclear on.

3

Many thanks @manthrax for the detailed information and your solution. It worked when I added this flag to the outer convexhull: materialcell.depthWrite = false;

Much appreciate it.