3d (beta) does not handle `renderDone` correctly

Description The 3d (beta) panel calls render done in an effect on react render. https://github.com/foxglove/studio/blob/main/packages/studio-base/src/panels/ThreeDeeRender/ThreeDeeRender.tsx#L615-L617

However that is not when it has actually rendered the latest frame which happens on an animation frame call triggered here and run sometime later: https://github.com/foxglove/studio/blob/main/packages/studio-base/src/panels/ThreeDeeRender/ThreeDeeRender.tsx#L608-L610

The intent of calling renderDone is that you indicate to the message pipeline that you have rendered the frame of messages passed to you. This is how the pipeline keeps playback in-sync across the panels.

The 3d (beta) panel should be fixed to correctly call renderDone when the equivalent render frame has been rendered - in this case when the commands have been called for rendering the messages to the engine.

[jhurliman]

Reclassifying as ux since this does not appear to degrade the app experience or break functionality in a user-facing way.

As far as fixing this, the current code looks like this:

  // Render a new frame if requested
  useEffect(() => {
    if (renderer && renderRef.current.needsRender) {
      renderer.animationFrame();
      renderRef.current.needsRender = false;
    }
  });

  // Invoke the done callback once the render is complete
  useEffect(() => {
    renderDone?.();
  }, [renderDone]);

renderer.animationFrame() synchronously calls this.gl.render(this.scene, camera) which is as close as we can get to “the frame has been rendered” with WebGL. Under the hood, it’s just populating a frame buffer and the final compositing is asynchronously handled by the browser, but we don’t have access to that level of feedback. I don’t understand useEffect well enough to describe the situation reported in this ticket, where the second useEffect is called before or without the first useEffect. Can someone with a deeper useEffect understanding chime in here?

[jtbandes]

Moved to Linear