In my Cesium application, I am using Cesium Billboards to display popups with content by embedding html canvas objects in them. However, after sometime of the popups running, the billboards turn black and remain so until the webpage is refreshed and ultimately causing the application to restart.
We are refreshing these popups to display new data by use of a synchronous ajax requests to our backend every 3-5 seconds. In our code, we are basically recreating the canvas that holds this content and re rendering the Billboard.
Here is some relevant code:
//creates the popup first
function loadPopup(id, type, name, data) {
viewer.entities.add({
id : id,
name : name,
position : data.position,
billboard : {
image : createPopupCanvas(id, type, name, data),
verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
scaleByDistance : new Cesium.NearFarScalar(1500, 2, 80000000, 0.25)
}
});
}
//updates popup synchronously
function updatePopup(id, type, name, data) {
var newPosition = Cesium.Cartesian3.fromDegrees(data.lon, data.lat, 99999);
var currPopup = viewer.entities.getById(id);
if (currPopup != undefined) {
currPopup.position = newPosition;
//new popup content generated here
currPopup.billboard = {
image : createPopupCanvas(id, type, name, data);
};
}
}
//creates a canvas element to display some stuff from the data table
function createPopupCanvas(id, type, name, data) {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
context.fillText(data.stuff1, id, 105, 60);
context.fillText(data.stuff2, id, 105, 70);
return canvas;
}
The following contains the console log information that was printed when the issue occurred:
Error in parsing value for ‘image-rendering’. Declaration dropped. index.html
Error: WebGL: texImage2D: Incurred CPU row conversion, which is slow. Cesium.js:440:27455
Error: WebGL: texSubImage2D: Incurred CPU row conversion, which is slow. Cesium.js:440:29984
Error: WebGL: texImage2D: Incurred CPU-side conversion, which is very slow. Cesium.js:440:27694
Error: WebGL: texImage2D: Incurred CPU pixel conversion, which is very slow. Cesium.js:440:27694
Error: WebGL: texImage2D: Chosen format/type incurred an expensive reformat: 0x1908/0x1401
Does anyone know a fix for this or has encountered this before?
Also, for reference I am using version 1.27, on firefox, on Ubuntu.