Using a ConvexGeometry for a dynamic cluster "ring"

[neil-morrison44]

Screen.Recording.2023-07-19.at.18.46.28.mov

Hi again,

I was having a look at the 3D clustering and thought it was let down a little by the ring still being 2d & not strictly following the bounds of the nodes within.

I wasn't able to get anything close to good enough to raise a PR, but it's probably worth thinking about.

It'd be a big change, but I think there'd be an approach in having the React component tree lay itself out dynamically so the nodes etc are supplied to their containing Cluster as children. The Cluster would render a group, (with the label & "ring" element also children) - meaning you can use ConvexHull.setFromObject on a ref of the root and it'd follow the shapes of the contained nodes exactly. With a little bump to the scale it'd probably end up looking nice and smooth. Then there'd be some post-processing step to only draw the outline of the cluster "ring".

I've included the code for the above example below, there could be something in there if it was improved, used ConvexGeometry as a registered ReactThreeFiber component & subdivided itself somehow to smooth out the weird angles - but it's only seeing the centre points of the nodes so it'll never be as nice as the children & setFromObject approach.

Code here (symbols/Cluster.tsx)

import React, { FC, useEffect, useMemo, useRef } from 'react';
import { ClusterGroup, animationConfig } from '../utils';
import { useSpring, a } from '@react-spring/three';
import { Color, DoubleSide, Mesh, Vector3 } from 'three';
import { useStore } from '../store';
import { Label } from './Label';
import { ConvexGeometry } from 'three-stdlib';

export interface ClusterProps extends ClusterGroup {
  /**
   * Whether the circle should be animated.
   */
  animated?: boolean;

  /**
   * The opacity of the circle.
   */
  opacity?: number;

  /**
   * The radius of the circle. Default 1.
   */
  radius?: number;

  /**
   * The padding of the circle. Default 20.
   */
  padding?: number;

  /**
   * The url for the label font.
   */
  labelFontUrl?: string;
}

export const Cluster: FC<ClusterProps> = ({
  animated,
  opacity,
  position,
  padding,
  labelFontUrl,
  radius,
  nodes,
  label
}) => {
  const theme = useStore(state => state.theme);
  const rad = Math.max(position.width, position.height) / 2;
  const offset = rad - radius + padding;

  const { circleOpacity, circlePosition, labelPosition } = useSpring({
    from: {
      circlePosition: [0, 0, -1],
      circleOpacity: 0,
      labelPosition: [0, 0, 2]
    },
    to: {
      labelPosition: [0, -offset, 2],
      circlePosition: position ? [position.x, position.y, -1] : [0, 0, -1],
      circleOpacity: opacity
    },
    config: {
      ...animationConfig,
      duration: animated ? undefined : 0
    }
  });

  const normalizedColor = useMemo(
    () => new Color(theme.cluster.stroke),
    [theme.cluster.stroke]
  );

  const meshRef = useRef<Mesh | null>(null);
  const convexGeoRef = useRef<ConvexGeometry>(new ConvexGeometry());

  useEffect(() => {
    convexGeoRef.current = new ConvexGeometry(nodes.map(n => {
      const {x, y, z} = n.position;
      return new Vector3(x, y, z);
    }));
    convexGeoRef.current.computeBoundingBox();
    convexGeoRef.current.center();
    convexGeoRef.current.scale(1.33, 1.33, 1.33);
  }, [nodes]);

  return (
    <>
      {theme.cluster && (
        <a.group position={circlePosition as any}>
          <mesh ref={meshRef} geometry={convexGeoRef.current || undefined}>
            <a.meshBasicMaterial
              attach="material"
              color={normalizedColor}
              transparent={true}
              depthTest={false}
              depthWrite={false}
              opacity={0.2}
              side={DoubleSide}
              fog={true}
            />
          </mesh>
          {theme.cluster?.label && (
            <a.group position={labelPosition as any}>
              <Label
                text={label}
                opacity={1}
                labelFontUrl={labelFontUrl}
                stroke={theme.cluster.label.stroke}
                active={false}
                color={theme.cluster.label.color}
                fontSize={12}
              />
            </a.group>
          )}
        </a.group>
      )}
    </>
  );
};

Cluster.defaultProps = {
  opacity: 1,
  radius: 2,
  padding: 40
};

[amcdnl]

This is really nice; thank you for sharing! Actually this was on my list for later on but wasn't sure on the best approach for it. If you are up for it, i'd love to work on a PR with you!

[neil-morrison44]

I was meaning to look into this more but completely forgot. Which is lucky since this has just been released & it seems perfect for doing the outlines (and lightweight): https://twitter.com/0xca0a/status/1698429063776325745

[amcdnl]

Thats awesome! I need to upgrade to the latest version anyway so good timing as you say.