CesiumJS非HTML方式绘制HUD式画布叠加层及动态数据闪烁问题求助

我现在遇到了一个CesiumJS的棘手问题，想请教各位大佬：我需要在Cesium的WebGL画布上绘制一个HUD叠加层，用来显示快速变化的数据（比如飞机的实时飞行速度）。我尝试用Cesium的Billboard组件，把自定义画布作为它的图像源，但当画布内容快速更新时，这个Billboard会出现闪烁，要是数据变化速度再快一些，它甚至会直接消失不见。

我已经写了一个最小复现示例，大家可以运行后拖动视角，就能看到明显的闪烁现象：

const viewer = new Cesium.Viewer("cesiumContainer");
const hudImageProperty = new Cesium.ConstantProperty();
const hudPositionProperty = new Cesium.ConstantPositionProperty();
let hudDisplayValue = 0;

setInterval(() => {
    // 模拟需要显示的数据快速变化
    // 数值更新越快，闪烁/消失的情况越严重
    const canvas = Cesium.writeTextToCanvas(hudDisplayValue.toString(),{font: "bold 64px sans-serif"});
    hudImageProperty.setValue(canvas);
    hudDisplayValue++;
}, 100);

const hud = viewer.entities.add({
    position: hudPositionProperty,
    billboard: {
        image: hudImageProperty,
        horizontalOrigin: Cesium.HorizontalOrigin.RIGHT,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        disableDepthTestDistance: Number.POSITIVE_INFINITY,
        scale: 1.0,
    },
});

viewer.scene.preRender.addEventListener((scene) => {
    // 这里是一些复杂计算，用来确保Billboard显示在屏幕的右上角位置
    const screenPosition = new Cesium.Cartesian2(200, 100);
    const ray = scene.camera.getPickRay(screenPosition);
    const direction = Cesium.Cartesian3.normalize(ray.direction, new Cesium.Cartesian3());
    const hudOffset = Cesium.Cartesian3.multiplyByScalar(direction, 1000, new Cesium.Cartesian3());
    const hudPosition = Cesium.Cartesian3.add(scene.camera.positionWC, hudOffset, new Cesium.Cartesian3());
    hudPositionProperty.setValue(hudPosition);
});

补充说明：我不想用HTML元素来做这个叠加层，因为我需要直接从Cesium的画布录制视频，所以必须把HUD内容直接绘制在Cesium的WebGL画布内。

有没有大佬能解释一下为什么会出现这种闪烁/消失的问题？以及有没有什么靠谱的解决办法？

内容来源于stack exchange