Как создать HUD-подобное наложение на холсте Cesiumjs (не-HTML)? ⇐ Javascript

[Anonymous]

Я хочу нарисовать наложение HUD на CesiumJS (WebGL), который содержит некоторые быстро меняющиеся данные (такие как текущая скорость полета самолета). Однако, если холст на рекламном щите быстро изменяется, биллбаорд сначала мерцает, и если данные изменятся еще быстрее, он полностью исчезнет. Кто -нибудь понимает, почему, и как я могу это исправить? Перемещайте мир вокруг и увидите мерцание: Sandcastle < /p>

Код: Выделить всё

const viewer = new Cesium.Viewer("cesiumContainer");

const hudImageProperty = new Cesium.ConstantProperty();
const hudPositionProperty = new Cesium.ConstantPositionProperty();

let hudDisplayValue = 0;

setInterval(() => {
// simulating rapid change of the desired display value
// the faster we change the value, the more it will flicker / disappear completely
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) => {
// some complicated computation to make sure the billboard is displayed on the top right of the display
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 для наложения, поскольку я хочу иметь возможность записывать видео с холста Cesiumjs, поэтому его необходимо нарисовать непосредственно на холсте.


Подробнее здесь: https://stackoverflow.com/questions/797 ... s-non-html