Intermittent black line rendering artifacts when adding images via Entity

CesiumJS
4

Hi @darcyvdd,
Thanks for your reply.

Let me clarify point 3 first:

Are you drawing to the same canvas object in place each frame, or swapping references?

I’m intentionally using a double-buffered canvas approach (swapping between two canvas instances) to work around a known issue reported in the Cesium community:

BUG: CallbackProperty for ImageMaterialProperty image doesn’t update image

In my implementation, I alternate canvases like this:

curCanvas = curCanvas === 'a' ? 'b' : 'a';

This is necessary because updating the same canvas in-place does not reliably trigger texture refresh in Cesium in my case.

Point 2: Is it a video element or some other image source?

It’s an image source (bitmap), rendered via:

activeCtx.drawImage(bitmap, 0, 0);

Point 1: Is it a element drawn each frame in a requestAnimationFrame loop?

It’s not strictly requestAnimationFrame. I’m using a timed update loop:

setTimeout(() => {
    // Alternate canvases
    const activeCanvas = useCanvasA ? canvasA : canvasB;
    const activeCtx = useCanvasA ? ctxA : ctxB;
    activeCtx.drawImage(lastBitmap, 0, 0);
    currentCanvas = activeCanvas;
    useCanvasA = !useCanvasA;
    // Ensure it is initialized only once.
    if (!fmvEntity) {
      fmvEntity = cesiumViewer.entities.add({
        polygon: {
          hierarchy: new Cesium.CallbackProperty(() => currentHierarchy, false),
          material: new Cesium.ImageMaterialProperty({
            image: new Cesium.CallbackProperty(() => currentCanvas, false)
          }),
          classificationType: Cesium.ClassificationType.TERRAIN,
        }
      });
    }
  cesiumViewer.scene.requestRender();
}, 33);

I also explicitly call scene.requestRender() to force re-rendering in request render mode.

And this is my sandcastle. After starting it, when I zoom in and out on the map, I can clearly see flickering black lines.