Grid Highliting

[distant belfry]

there's a code i just want to send to you

I think i've figured it out!
This post helped, but I didn't quite understand it at first: https://discourse.threejs.org/t/where-can-i-see-the-number-of-draw-calls-per-frame/4311/3

The solution in short is to disable autoReset and manually reset info at the beginning/end of each frame respectively - like so:

    <>
      <Canvas>
        <BeginFrame />
        <YourScene />
        <EndFrame />
      </Canvas>
      <t.Out />
    </>

BeginFrame:

export const BeginFrame = () => {
  useFrame(({ gl: { info } }) => {
    info.autoReset = false;
  });
  return null;
};

End Frame:

export const EndFrame = () => {
  const [geometries, setGeometries] = useState(0);
  const [textures, setTextures] = useState(0);
  const [calls, setCalls] = useState(0);

  useFrame(({ gl: { info } }) => {
    info.memory.geometries !== geometries ? setGeometries(info.memory.geometries) : null;
    info.memory.textures !== textures ? setTextures(info.memory.textures) : null;
    info.render.calls !== calls ? setCalls(info.render.calls) : null;
    info.reset();
  }, 999);
  return (
    <t.In>
      <ul className="absolute top-4 right-4 bg-gray-800 text-white">
        <li>Geometries: {geometries}</li>
        <li>Textures: {textures}</li>
        <li>Calls: {calls}</li>
      </ul>
    </t.In>
  );
};