Rigidbody not showing without key={index}

[tkdaj]

I'm working on a custom "cloth" implementation. I have pretty much everything working except for a couple things:

1. When I update the number of segments within the plane/cloth using the UI, the y direction works perfectly, but when changing the x segment count, the first row which is initialized using type={isInFirstRow ? 'kinematicPosition' : 'dynamic'} would stay static if I put the property directly on the <Rigidbody /> component. I ended up removing that prop from the <Rigidbody /> and putting that logic into an effect to make it work properly using: currVertex.raw().setBodyType(isInFirstRow ? 2 : 0);

2. Now that I have that updating BETTER (still not perfect), it only updates correctly as I lower the amount. If I increase the number of x segments, the top row does not increase and the physics becomes erratic. You can also see that the spheres are orange (representing type of 'kinematicPosition') in the top row, but also start to wrap down to the lower rows if I start increases the segments.

3. I had a feeling that the reason that both of the previous issues were happening because I am using the index of the array item for the key on the root React component when I iterate over the array of rigidbodies. I changed this from:

 clothRbVerticesRefs.current.map((item, i) => {
        return (
          <Fragment key={i}>
            <RigidBody

to this:

 clothRbVerticesRefs.current.map((item, i) => {
        return (
          <Fragment key={item?.handle ? `${item.handle}` : i}>
            <RigidBody

but as soon as I do that, the rigidbodies actually disappear from my screen when using <Debug />. Here is my full file:

import type { MeshProps } from '@react-three/fiber';
import { useFrame } from '@react-three/fiber';
import type { RigidBodyApi } from '@react-three/rapier';
import { Debug, RigidBody, useSphericalJoint } from '@react-three/rapier';
import { Fragment, useCallback, useEffect, useMemo, useRef } from 'react';
import type { Mesh } from 'three';

import { CollisionGroups } from '@app/constants';
import type { Vector3Object } from '@app/types';
import { getCollisionGroups, useElementArrayRef } from '@app/utils';

import { SphericalJoint } from './SphericalJoint';

interface ClothProps extends Omit<MeshProps, 'geometry'> {
  width: number;
  height: number;
  xSegments: number;
  ySegments: number;
  mass: number;
  windForce?: Vector3Object;
}

export function Cloth(props: ClothProps): JSX.Element {
  const { children, width, height, xSegments, ySegments, ...rest } = props;
  const { clothRef, clothRbVertices } = useCloth(props);

  return (
    <group>
      <Debug />
      <mesh ref={clothRef} receiveShadow castShadow {...rest}>
        <planeGeometry args={[width, height, xSegments, ySegments]} />
        {clothRbVertices}
        {children}
      </mesh>
    </group>
  );
}

const clothColliderGroups = getCollisionGroups(CollisionGroups.Cloth, ~CollisionGroups.Cloth);

function useCloth({ xSegments, ySegments, mass, width, height, windForce }: ClothProps) {
  const clothRef = useRef<Mesh>(null);

  const xVertexCount = xSegments + 1;
  const yVertexCount = ySegments + 1;
  const faceWidth = width / xSegments;
  const faceHeight = height / ySegments;
  const totalVertices = xVertexCount * yVertexCount;

  const {
    initialized: clothRbVerticesInitialized,
    refs: clothRbVerticesRefs,
    refFunction,
  } = useElementArrayRef<RigidBodyApi>(totalVertices, [totalVertices]);

  useEffect(() => {
    if (!clothRbVerticesInitialized) return;
    // initialize physics rb positions to match the plane mesh's vertices positions
    clothRbVerticesRefs.current.forEach((currVertex, i) => {
      if (currVertex != null && clothRef.current != null) {
        const { position: pos } = clothRef.current.geometry.attributes;
        currVertex.setTranslation({ x: pos.getX(i), y: pos.getY(i), z: pos.getZ(i) });
        const isInFirstRow = i < xVertexCount;
        // 2 is 'kinematicPosition' and 0 is 'dynamic'. Doing this here instead of on the component as props because it isn't updating properly there
        currVertex.raw().setBodyType(isInFirstRow ? 2 : 0);
      }
    });
  }, [clothRbVerticesInitialized, clothRbVerticesRefs, xVertexCount]);

  useFrame(() => {
    if (!clothRbVerticesInitialized) return;
    clothRbVerticesRefs.current.forEach((currentRb, i) => {
      if (currentRb != null && clothRef.current != null) {
        if (windForce != null) {
          currentRb.resetForces();
          const { x, y, z } = windForce;
          if (x !== 0 || y !== 0 || z != 0) {
            const randValue = Math.random();
            currentRb.addForce({
              x: x * randValue,
              y: y * randValue,
              z: z * randValue,
            });
          }
        }
        const { x, y, z } = currentRb.translation();
        clothRef.current.geometry.attributes.position.setXYZ(i, x, y, z);
        clothRef.current.geometry.attributes.position.needsUpdate = true;
      }
    });
  });

  const getJointToNextVertex = useCallback(
    (i: number) => {
      if (!clothRbVerticesInitialized) return null;
      const currVertex = clothRbVerticesRefs.current[i];
      const nextVertex = clothRbVerticesRefs.current[i + 1];
      if (currVertex != null && nextVertex != null && (i + 1) % xVertexCount !== 0) {
        const currVertexAnchorPos = {
          // the attaching joint should be the right side of the face
          x: faceWidth / 2,
          y: 0,
          z: 0,
        };

        const nextVertexAnchorPos = {
          // the attaching joint should be the left side of the face
          x: -faceWidth / 2,
          y: 0,
          z: 0,
        };

        return (
          <SphericalJoint
            body1={currVertex}
            body2={nextVertex}
            body1Anchor={currVertexAnchorPos}
            body2Anchor={nextVertexAnchorPos}
          />
        );
      }
      return null;
    },
    [clothRbVerticesInitialized, clothRbVerticesRefs, faceWidth, xVertexCount]
  );

  const getJointToBelowVertex = useCallback(
    (i: number) => {
      if (!clothRbVerticesInitialized) return;
      const currVertex = clothRbVerticesRefs.current[i];
      const belowVertex = clothRbVerticesRefs.current[i + xVertexCount];
      if (currVertex != null && belowVertex != null) {
        const currVertexAnchorPos = {
          x: 0,
          // the attaching joint should be the bottom side of the face
          y: -faceHeight / 2,
          z: 0,
        };

        const belowVertexAnchorPos = {
          x: 0,
          // the attaching joint should be the top side of the face
          y: faceHeight / 2,
          z: 0,
        };

        return (
          <SphericalJoint
            body1={currVertex}
            body2={belowVertex}
            body1Anchor={currVertexAnchorPos}
            body2Anchor={belowVertexAnchorPos}
          />
        );
      }
      return null;
    },
    [clothRbVerticesInitialized, clothRbVerticesRefs, faceHeight, xVertexCount]
  );

  const clothRbVertices = useMemo(
    () =>
      clothRbVerticesRefs.current.map((item, i) => {
        return (
          <Fragment key={item?.handle ? `${item.handle}` : i}>
            <RigidBody
              ref={(ref) => refFunction(ref, i)}
              colliders="ball"
              collisionGroups={clothColliderGroups}
              includeInvisible
              mass={mass / totalVertices}
              // TODO: test out higher linear dampening, high mass, with higher forces
              linearDamping={0.8}
            >
              <mesh visible={false}>
                <sphereGeometry args={[0.1]} />
                <meshBasicMaterial wireframe />
              </mesh>
            </RigidBody>
            {getJointToNextVertex(i)}
            {getJointToBelowVertex(i)}
          </Fragment>
        );
      }),
    [
      clothRbVerticesRefs,
      getJointToBelowVertex,
      getJointToNextVertex,
      mass,
      refFunction,
      totalVertices,
    ]
  );

  return { clothRef, clothRbVertices };
}

export function useElementArrayRef<RefType = unknown>(
  length: number,
  deps: DependencyList = emptyArray
): {
  refs: React.MutableRefObject<(RefType | null)[]>;
  refFunction: (ref: RefType | null, refIndex: number) => void;
  initialized: boolean;
} {
  const refs = useRef<(RefType | null)[]>(Array(length).fill(null));
  const initializedRefCount = useRef(0);
  const [initialized, setInitialized] = useState(false);

  useEffect(() => {
    if (refs.current.length !== length) {
      refs.current = Array(length).fill(null);
      setInitialized(false);
      initializedRefCount.current = 0;
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [length, ...deps]);

  const refFunction = useCallback(
    (ref: RefType | null, refIndex: number) => {
      if (!initialized && initializedRefCount.current < refs.current.length) {
        refs.current[refIndex] = ref;
        if (ref != null) {
          initializedRefCount.current++;
        }
        if (initializedRefCount.current === refs.current.length) {
          setInitialized(true);
        }
      }
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [initialized, ...deps]
  );

  return { refs, refFunction, initialized };
}

export const SphericalJoint = memo(function SphericalJoint({
  body1,
  body2,
  body1Anchor,
  body2Anchor,
}: {
  body1: RigidBodyApi;
  body2: RigidBodyApi;
  body1Anchor: Vector3Object;
  body2Anchor: Vector3Object;
}) {
  const { x: x1, y: y1, z: z1 } = body1Anchor;
  const { x: x2, y: y2, z: z2 } = body2Anchor;
  const aRef = useRef(body1);
  const bRef = useRef(body2);
  useSphericalJoint(aRef, bRef, [
    [x1, y1, z1],
    [x2, y2, z2],
  ]);
  return null;
});

Here is a video displaying the behavior:

Screen.Recording.2022-11-30.at.7.54.20.PM.mov

As a side note, would it be better for performance to create this component using InstancedMeshes and InstancedRigidBodies if I want to have multiple cloths which can be affected by physics in the world at once?