Sorting Transparent AABBs in Three.js

Your challenge with sorting transparent AABBs (Axis-Aligned Bounding Boxes) is a common issue when dealing with transparency in 3D rendering. Three.js does provide some built-in sorting mechanisms, but they may not be sufficient for your specific use case with non-overlapping AABBs of varying sizes.

Three.js Default Sorting

By default, Three.js uses a property called sortObjects in the WebGLRenderer which is set to true. This attempts to properly render objects with transparency by sorting them. However, as noted in the documentation:

Sorting is used to attempt to properly render objects that have some degree of transparency. By definition, sorting objects may not work in all cases. Depending on the needs of application, it may be necessary to turn off sorting and use other methods to deal with transparency rendering e.g. manually determining each object's rendering order.

For transparent objects specifically, Three.js uses a function called reversePainterSortStable by default, which you can customize using:

JAVASCRIPTCopied
renderer.setTransparentSort(customSortFunction);

Similarly, for opaque objects, you can set a custom sort function:

JAVASCRIPTCopied
renderer.setOpaqueSort(customSortFunction);

Custom Sorting Solution

For your specific case with non-overlapping AABBs, you might need a more sophisticated approach than simple distance-based sorting. Here are some approaches:

1. View-Space Depth Sorting: Instead of using Euclidean distance, sort based on the distance along the camera's view direction. This can be done by projecting the center of each AABB onto the camera's view vector.

JAVASCRIPTCopied
function customTransparentSort(a, b) {
  // Get the camera's view direction
  const viewDirection = camera.getWorldDirection(new THREE.Vector3());
  
  // Calculate the centers of the AABBs
  const centerA = new THREE.Vector3();
  const centerB = new THREE.Vector3();
  a.geometry.boundingBox.getCenter(centerA);
  b.geometry.boundingBox.getCenter(centerB);
  a.localToWorld(centerA);
  b.localToWorld(centerB);
  
  // Project centers onto view direction
  const depthA = centerA.clone().sub(camera.position).dot(viewDirection);
  const depthB = centerB.clone().sub(camera.position).dot(viewDirection);
  
  // Sort from back to front
  return depthB - depthA;
}

renderer.setTransparentSort(customTransparentSort);

2. BSP (Binary Space Partitioning): For more complex scenes, you might need to implement a BSP tree to correctly determine rendering order.

3. Depth Peeling: This is a more advanced technique that renders the scene multiple times, each time peeling away the nearest layer of transparent objects.

Optimization for Non-Overlapping AABBs

Since your AABBs don't overlap, you might be able to use a simplified approach:

1. For each AABB, compute the minimum and maximum distances along the camera's view direction.
2. If the minimum distance of AABB A is greater than the maximum distance of AABB B, then A should be rendered after B.
3. If there's no clear ordering (i.e., the AABBs overlap when projected onto the view direction), you might need to fall back to more complex methods.

Remember that Three.js's built-in sorting might not be sufficient for complex transparency scenarios, and you may need to manually manage the rendering order by organizing your objects into different render passes or layers.