Still Error loading image for billboard: DeveloperError: Width must be less than ... maximum texture size

CesiumJS
1

Hi,

i wrote a testprogram that displays 1000 billboards around the world. The billboards have a svg-image defined in a symbol-library.

I got this error in several test cases independent of size and number of the images.

I see the report

https://groups.google.com/g/cesium-dev/c/JzpfPUvBdEA

and also the comments in

but I can’t solve the problem. Is the problem actually solved in chrome or not ?
Has someone a solution for this ?

The problem happens unpredictable - sometimes with thousand billboards but in other examples also with hundred.

Rüdiger

2

I have written an sandcastle and could reproduce the error:

var viewer = new Cesium.Viewer('cesiumContainer', {timeline : false, animation : false});

var b64 = "data:image/svg+xml;base64,";
var imagearray = [];

fetch('http://localhost:8080/Apps/SampleData/svgStrings.txt')
  .then(response => response.text())
  .then(data => {
    imagearray = data.split('|');
  
    var count = 0;
    var mysvg = b64 + btoa(imagearray[count]);
  
    for (var i=-0; i < 180; i++) {
      for (var j=-0; j <80; j++) {
        
        
        if (count <= imagearray.length-1) {
          mysvg = b64 + btoa(imagearray[count]);
          count++;
        }else {
          count=0;
          mysvg = b64 + btoa(imagearray[count]);
          count++;
        }
        
        viewer.entities.add({         
        name : 'mySVG',
        position : Cesium.Cartesian3.fromDegrees(i, j),
        billboard : { image : mysvg }
        });
      }

    viewer.zoomTo(viewer.entities);  
    }
  }
);

In the file svgStrings.txt there 11000 svg-images of different content separated by ‘|’ - it is not public.

image
image1007×128 7.14 KB

Why is this a developer-error ? In which way could I prevent this error ?
Is there a possibility to clean the textureAtlas - what are the consequences ?

Regards

Rüdiger

3

Hi,

has anyone solved this problem ?

We evade this message by setting the calculated size to the maximum and add the image nevertheless.

this works, but I don’t know if I loose texture information ?

Can anyone from Cesium help ?

Regards Rüdiger

4

Are you still experiencing this problem?

I don’t have access to your non-pubic SVG data so have modified your sandcastle demo code to include some SVG as literal strings within the imagearray. Also made some other minor changes but was unable to reproduce the problem.

const viewer = new Cesium.Viewer('cesiumContainer', {timeline : false, animation : false});

const b64 = "data:image/svg+xml;base64,";
const imagearray = [
  '<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><circle cx="5" cy="5" r="4" stroke="green" stroke-width="1" fill="yellow" /></svg>',
  '<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><circle cx="5" cy="5" r="4" stroke="red" stroke-width="1" fill="blue" /></svg>',
  '<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><circle cx="5" cy="5" r="4" stroke="orange" stroke-width="1" fill="pink" /></svg>',
  '<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"><circle cx="25" cy="25" r="20" stroke="white" stroke-width="2" fill="none" /></svg>',
  '<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"><circle cx="25" cy="25" r="20" stroke="cyan" stroke-width="2" fill="none" /></svg>',
  '<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="59" height="64" viewBox="41 26 118 128"><path d="M 45,150 L 45,30,155,30,155,150" stroke-width="4" stroke="black" fill="rgb(255,161,255)" fill-opacity="1" ></path><path d="M62,80 l30,0 0,-10 16,0 0,10 30,0 0,15 -30,0 0,25 10,0 0,5 -36,0 0,-5 10,0 0,-25 -30,0 Z M95,70 l0,-5 10,0 0,5" stroke-width="4" stroke="black" fill="rgb(239, 239, 239)" ></path></svg>',
  '<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="59" height="64" viewBox="41 26 118 128"><path d="M 45,150 L 45,30,155,30,155,150" stroke-width="4" stroke="black" fill="cyan" fill-opacity="1" ></path><path d="M62,80 l30,0 0,-10 16,0 0,10 30,0 0,15 -30,0 0,25 10,0 0,5 -36,0 0,-5 10,0 0,-25 -30,0 Z M95,70 l0,-5 10,0 0,5" stroke-width="4" stroke="black" fill="rgb(239, 239, 239)" ></path></svg>',
  '<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="59" height="64" viewBox="41 26 118 128"><path d="M 45,150 L 45,30,155,30,155,150" stroke-width="4" stroke="black" fill="rgb(255,161,255)" fill-opacity="1" ></path><text x="100" y="110" text-anchor="middle" font-size="35" font-family="Arial" font-weight="bold" stroke-width="3" stroke="black" fill="rgb(239, 239, 239)" >CIV</text></svg>',
  '<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="59" height="64" viewBox="41 26 118 128"><path d="M 45,150 L 45,30,155,30,155,150" stroke-width="4" stroke="black" fill="rgb(255,161,255)" fill-opacity="1" ></path><path d="M80,70 l10,10 M120,110 l-10,-10 M80,110 l10,-10 M120,70 l-10,10 M100,115 l0,20 M95,135 l10,0" stroke-width="4" stroke="black" fill="none" ></path><path d="m 113,90 c -0.3,8.8 -1.9,20.3 -10.8,24.6 -7.7,2 -12.3,-7.1 -13.8,-13.3 -2.6,-11.5 -2.3,-26 6.9,-34.6 6.0,-4.9 13.1,1.9 14.9,7.8 2,4.9 2.8,10.2 2.8,15.5 z" stroke-width="4" stroke="black" fill="rgb(239, 239, 239)" ></path></svg>',
  '<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="59" height="64" viewBox="41 26 118 128"><path d="M 45,150 L 45,30,155,30,155,150" stroke-width="4" stroke="black" fill="cyan" fill-opacity="1" ></path><path d="M80,70 l10,10 M120,110 l-10,-10 M80,110 l10,-10 M120,70 l-10,10 M100,115 l0,20 M95,135 l10,0" stroke-width="4" stroke="black" fill="none" ></path><path d="m 113,90 c -0.3,8.8 -1.9,20.3 -10.8,24.6 -7.7,2 -12.3,-7.1 -13.8,-13.3 -2.6,-11.5 -2.3,-26 6.9,-34.6 6.0,-4.9 13.1,1.9 14.9,7.8 2,4.9 2.8,10.2 2.8,15.5 z" stroke-width="4" stroke="black" fill="rgb(239, 239, 239)" ></path></svg>',
];

var count = 0;
var total = 0;

for (let i=-180; i < 180; i+=2) {
  for (let j=-80; j < 80; j+=2) {
    
    if (count > imagearray.length-1) {
      count=0;
    }
    const svgText = imagearray[count];
    const mysvg = b64 + btoa(svgText);
    viewer.entities.add({         
        name : `mySVG_${count}`,
        position : Cesium.Cartesian3.fromDegrees(i, j),
        billboard : { image : mysvg }
    });
    count++;
    total++;
  }
}
console.log(`total=${total}`);
viewer.zoomTo(viewer.entities);