Multiple Physics or limiting interaction with certain objects

[birdm4n]

I am working on a dynamic system that needs to display "streams" of little objects that are thrown in an arch and land on different piles to visualize some data. Those objects (simple spheres, boxes etc.) are emitted from the same position in the center and only those going to the same pile should interact with each other. If they interact at the starting point, they will of course repel each other chaotically and not land on the respective pile.

What's the best practice to have multiple physics systems in one app? Right now I am defining multiple -Blocks in one . Or is there another way of limiting the interaction with a group of certain objects?

[stockhuman]

What does " Right now I am defining multiple -Blocks in one ." mean? Do you have two Physics systems like so?

<Physics>
  <BlockStream />
</Physics>
<Physics>
  <BlockStream />
</Physics>

[birdm4n]

Yes exactly like that. It works but I'm not sure if that's the best way to do this.

[stockhuman]

If they're fully independent physics systems that are merely being represented at the same time, your approach semantically suggests this, and is straightforward enough. The alternative would be collision filters. I think this is a novel use case, are you seeing significant performance penalties?

[birdm4n]

Just thought, that sometimes the semantic most straightforward approach would perhaps not be the best as I am not completely aware of where/when specific calls happen and so on.
Overall performance is fine so far but I am experiencing some flickering from time to time. Object visually disappear for the fraction of a second and appear again. Physics don't seem to be influenced by that.

Here's the full code of the component that draws the above image. Hope it's not to messy but in this case it's probably better to include everything that could play a role here.

import React, { useEffect, useRef, useState, useMemo, Suspense } from "react";
import * as THREE from "three";
import { Canvas, useFrame, Group } from "react-three-fiber";
import { Physics, usePlane, useBox } from "@react-three/cannon";
import useStore from "../../store.js";
import { map } from "../../util/methods.js";
import Molekuel from "./Models/Molekuel";

const ADD_AMOUNT = 1;
const ADD_TIMING = 0.08;
const G = [0, -10, 0];

const TARGET_X = 5;
const TARGET_Z = 5;

function Plane(props) {
  const [ref] = usePlane(() => ({ rotation: [-Math.PI / 2, 0, 0], ...props }));
  return (
    <mesh ref={ref}>
      <planeBufferGeometry attach="geometry" args={[10, 10]} />
      <shadowMaterial attach="material" color="#171717" opacity={0} />
    </mesh>
  );
}

function Particle(props) {
  // const [ref, api] = useBox(() => ({ mass: 1 }))
  const v0y = 5; //map(Math.random(), 0, 1, 5, 5.2)
  const start = props.start ? props.start : [0, 0, 0];
  const p0 = [
    start[0] + map(Math.random(), 0, 1, -0.1, 0.1),
    start[1] + 0.1,
    start[2] + map(Math.random(), 0, 1, -0.1, 0.1),
  ]; 
  
  const pT = props.target ? props.target : [0, 0, 0];

  const t = (-v0y - Math.sqrt(v0y * v0y - 2 * (p0[1] - pT[1]) * G[1])) / G[1];

  const v0x = (pT[0] - p0[0]) / t;
  const v0z = (pT[2] - p0[2]) / t;

  const v0 = [v0x, v0y, v0z];

  const color = props.color ? props.color : "black";

  const variation = props.variation
    ? map(Math.random(), 0, 1, 1, props.variation)
    : 1;
  const size = props.size ? props.size * variation : 1 * variation;

  const repel = props.repel ? props.repel : 1.5;

  const [ref, api] = useBox(() => ({
    mass: 100,
    args: [size * 0.05 * repel, size * 0.05 * repel, size * 0.05 * repel],
    position: p0,
    velocity: v0,
    rotation: [
      Math.PI * Math.random(),
      Math.PI * Math.random(),
      Math.PI * Math.random(),
    ],
    material: {
      friction: 10,
      restitution: 0.1,
    },
    ...props,
  }));

  switch (props.type) {
    case "line":
      return (
        <instancedMesh
          receiveShadow
          castShadow
          ref={ref}
          args={[null, null, 1]}
        >
          <boxBufferGeometry
            attach="geometry"
            args={[size * 0.01, size * 0.1, size * 0.01]}
          />
          <meshBasicMaterial attach="material" color={color} />
        </instancedMesh>
      );
      break;

    case "tetraeder":
      return (
        <instancedMesh
          receiveShadow
          castShadow
          ref={ref}
          args={[null, null, 1]}
        >
          <sphereBufferGeometry
            attach="geometry"
            args={[size * 0.05, 1, 1]}
          ></sphereBufferGeometry>

          <meshBasicMaterial attach="material" color={color} />
        </instancedMesh>
      );
      break;

    case "molekuel":
      return (
        <Suspense fallback={null}>
          <Molekuel
            ref={ref}
            scale={[0.02, 0.02, 0.03]}
            args={[null, null, 1]}
          />
        </Suspense>
      );
      break;

    case "sphere":
      return (
        <instancedMesh
          receiveShadow
          castShadow
          ref={ref}
          args={[null, null, 1]}
        >
          <sphereBufferGeometry
            attach="geometry"
            args={[size * 0.05, 12, 12]}
          />
          <meshBasicMaterial attach="material" color={color} />
        </instancedMesh>
      );
      break;

    default:
      return (
        <instancedMesh
          receiveShadow
          castShadow
          ref={ref}
          args={[null, null, 1]}
        >
          <boxBufferGeometry
            attach="geometry"
            args={[size * 0.05, size * 0.05, size * 0.05]}
          />
          <meshBasicMaterial attach="material" color={color} />
        </instancedMesh>
      );
  }
}

function Particles(props) {
  const [particles, setParticles] = useState([]);
  const [lastAdd, setLastAdd] = useState(0);
  const [cubeCount, setParticleCount] = useState(0);
  const number = props.number;
  const ref = useRef();

  const addParticles = (num) => {
    const newParticles = [];
    for (let i = 0; i < num; i++) {
      newParticles.push(<Particle key={cubeCount + i} {...props} />);
    }
    return newParticles;
  };

  useFrame((state) => {

    if (
      particles.length < number &&
      state.clock.getElapsedTime() - lastAdd > ADD_TIMING
    ) {
      setParticles([...particles, ...addParticles(ADD_AMOUNT)]);
      setLastAdd(state.clock.getElapsedTime());
      setParticleCount(cubeCount + ADD_AMOUNT);
    } else if (
      particles.length >= number &&
      state.clock.getElapsedTime() - lastAdd > ADD_TIMING
    ) {
      const newList = particles.slice();
      newList.splice(0, ADD_AMOUNT);
      setParticles(newList);

      setLastAdd(state.clock.getElapsedTime());
    }
  });

  return <mesh ref={ref}>{particles}</mesh>;
}

const ParticleCanvas = (props) => {
  // Check if Station is Idle
  //   const idle = useStore((state) => state.idle);
  // 
  //   useEffect(() => {}, [idle]);

  return (
    <Canvas
      className="ParticleCanvas"
      gl={{ alpha: true }}
      orthographic
      camera={{ zoom: 200, position: [0, 10, 0] }}
    >
      {false && (
        <Physics>
          <Plane />
          <Particles number={50} type={"molekuel"} target={props.target} />
        </Physics>
      )}

      <Physics>
        <Plane />
        <Particles number={100} type={"tetraeder"} target={[3, 0, 0]} />
      </Physics>

      <Physics>
        <Plane />
        <Particles
          number={50}
          type={"sphere"}
          target={[1.5, 0, 1]}
          start={[1.5, 0, 0]}
          size={0.2}
          repel={2.5}
        />
      </Physics>

      <Physics>
        <Plane />
        <Particles
          number={50}
          type={"sphere"}
          target={[1.8, 0, -1]}
          start={[1.5, 0, 0]}
          size={0.2}
          repel={2.5}
        />
      </Physics>

      <Physics>
        <Plane />
        <Particles
          number={50}
          type={"sphere"}
          target={[1.2, 0, -1]}
          start={[1.5, 0, 0]}
          size={0.2}
          repel={2.5}
        />
      </Physics>

      <Physics>
        <Plane />
        <Particles
          number={100}
          type={"sphere"}
          target={[0, 0, 2]}
          variation={[0.1]}
          repel={2}
          size={0.5}
        />
      </Physics>

      <Physics>
        <Plane />
        <Particles
          number={100}
          type={"cube"}
          target={[0, 0, -2]}
          color={0x9c9c9c}
        />
      </Physics>
    </Canvas>
  );
};

export default ParticleCanvas;