Is it possible to catch a signal when HeatmapMesh is fully rendered? (for animation purposes)

[pedrobenetton]

Hi there!

I am rendering a HeatmapMesh inside a VisCanvas, from @h5web/lib, with other components such as a TooltipMesh and other Annotations, in here: https://github.com/cnpem/arara/blob/main/image-viewer-web/src/components/viewer/Viewer.tsx

I have been requested to display these images in an animation style with a logic such as:
1 - render the first heatmap
2 - wait a small amount of time
3 - render the next heatmap, etc..

So that users can visualize their datasets more efficiently in a sort of time-lapse style.
I would like to know if it is possible to know exactly when a HeatmapMesh has fully loaded. This would allow me to wait the correct amount of time before moving on to the next image. If I use something such as a useEffect, it says that the component is mounted, but the actual visual rendering (which I think is in the canvas/WebGL layer) can lag by a second or two — so I end up moving to the next image too early.
Is it possible to know when the HeatmapMesh is totally showing up on the screen?

Thanks a lot in advance!

[loichuder]

Hello !

HeatmapMesh uses Three.js' Mesh underneath (via a VisMesh abstraction). All Three.js' Object3D have a onAfterRender callback property, which might do the trick: https://threejs.org/docs/?q=mes#api/en/core/Object3D.onAfterRender

In your case, you can try to pass visProps with an adequate onAfterRender property:

        <HeatmapMesh
          values={valuesArray}
          domain={domain}
          scaleType={scaleType}
          colorMap={colorMap}
          visProps={{onAfterRender: ...}}
        />

I never used this callback myself so be please do tell if it works for you or not.

[pedrobenetton]

It ended up working like this:

const renderOnce = useRef(false)

<HeatmapMesh
  values={valuesArray}
  domain={domain}
  scaleType={scaleType}
  colorMap={colorMap}
  onAfterRender={() => {
    if (!renderOnce.current) {
      renderOnce.current = true;
      console.log('rendered');
    }
  }}
/>

I did it this way because onAfterRender was firing a lot of times, and I only need one.
Despite firing a lot of times, it in fact only starts firing after the image is fully showing on the screen, which is what I need.

Thanks a lot!