How to rerender manually with requestRenderMode ?

[davidbourrel]

Hi !

I'm a developper and I'm working on a React (Vite) project with Cesium/Resium.

Everything works pretty well but I noticed that Cesium consumes a lot of resources (memory etc...) with the automatic render (without requestRenderMode={true} ). So I want to only rerender manually when something change and I have some issues to do that.

When I fetch orbits and display it, nothing happens. I have to hover the map to see rerender and see finally my entities. (no problem with requestRenderMode={true}) so I wonder how to do that.

• Cesium: 1.113.0
• Resium: 1.17.2
• Vite: 5.0.8
• React: 18.2.0

Cesium Viewer :

import { Viewer } from 'resium';

<Viewer
  ref={viewerRef}
  style={{
    position: 'relative',
    display: 'block',
    height: 'calc(100vh - 4rem)',
    cursor: hoveredEntityId ? 'pointer' : '',
  }}
  baseLayer={baseLayer}
  baseLayerPicker={false}
  geocoder={false}
  animation={false}
  shouldAnimate={false}
  timeline={false}
  fullscreenButton={false}
  full={true}
  requestRenderMode={true}
  targetFrameRate={30}
  selectionIndicator={false}
  infoBox={false}
>
  <OrbitsComputationEntities />
</Viewer>

Handle submit :

import { useCesiumViewerRef } from '@/features/cesium/context/useCesiumViewerRef';
import { useCesium } from 'resium';

const viewerRef = useCesiumViewerRef();
const { scene } = useCesium();
  
const handleSubmit = async () => {
  const orbits = await fetchOrbitComputation();
  
  orbits.data && dispatch(updateOrbitsComputation(orbits.data));
  
  // All methonds below doesn't work
  if (viewerRef?.current && viewerRef.current.cesiumElement) {
    viewerRef.current.cesiumElement.scene.requestRender();
    viewerRef.current.cesiumElement.scene.render();
    viewerRef.current.cesiumElement.render();
  }
  scene?.requestRender();
  scene?.render();
};

Orbits entites :

export const OrbitsComputationEntities = memo(() => {
  const { orbitsComputation } = useAppSelector((state) => state.orbits);
  const userConfig = useAppSelector((state) => state.userConfig);

  const orbitsEntities = useMemo(
    () => OrbitService.getOrbitEntitiesFromComputation(orbitsComputation, userConfig),
    [orbitsComputation, userConfig]
  );

  return (
    <>
      {orbitsEntities.map((orbitEntity) => (
        <OrbitEntity
          key={`${orbitEntity.satName}-orbit`}
          orbit={orbitEntity}
          color={orbitEntity.color}
          showGroundTrack={true}
          showCorridor={true}
        />
      ))}
    </>
  );
});

Thanks for your help !