free TextureAtlasNode when billboard image is changed or destroyed / prevent texture atlas overflow (allow dynamic billboards)

[Nadav42]

related issues: #6477 #4413 #172 #2319

I want to make the TextureAtlas clear unused nodes (when no billboard is using that resource anymore).
this is in order to allow dynamic billboards with images that change very frequently, currently dynamic billboards are causing the TextureAtlas to fill very quickly and lead to atlas resize exception WebGL: INVALID_VALUE: texImage2D: width or height out of range

The test I used for the clips

50 billboards generate random canvases of width and height between 100px-300px, each billboard generates a new image 20 times per second

Current state of cesium

Rapidly changing dynamic billboard will quickly make the TextureAtlas run out of space and billboards will disappear or become black as shown in this clip:

cesium-dynamic-billboards-current-state.mp4

This can be visualized in the atlas by setting billBoardCollection.debugShowTextureAtlas to true, as shown in the following clip:

cesium-atlas-visualization-current-state.mp4

State after pull request

I made it so billboard images that are no longer used are freed from the atlas, allowing dynamic billboards to work as they should:

cesium-dynamic-billboards-after-pr-state.mp4

This atlas visualization shows how new billboards use empty spaces freed by previous billboards:

cesium-atlas-visualization-after-pr-state.mp4

PR progress:

• only free image resources with random guid
• free dead TextureAtlasNodes so that other billboards can use that space
• when resizing texture atlas and reached webgl max texture size then reset the atlas
• on node free merge children with parent if all are empty

[cesium-concierge]

Thanks for the pull request @Nadav42!

• ✔️ Signed CLA found.
• ❔ CHANGES.md was not updated.
  • If this change updates the public API in any way, please add a bullet point to CHANGES.md.
• ❔ Unit tests were not updated.
  • Make sure you've updated tests to reflect your changes, added tests for any new code, and ran the code coverage tool.

Reviewers, don't forget to make sure that:

• Cesium Viewer works.
• Works in 2D/CV.
• Works (or fails gracefully) in IE11.

[Nadav42]

added visualization clips to the PR, need review

[ItayBa]

Hi, why did you closed the issue? Is there any other solution?

[Nadav42]

Hi, why did you closed the issue? Is there any other solution?

this solution works fine, I switched to using my other solution that solves this without changing cesium code

[ItayBa]

What did you do to solve it?

[Nadav42]

What did you do to solve it?

I posted my solution here:

#6477

[maxizrinUX]

I had the same issue of atlas overflow, but for a handful of generated images.
18 images 512*512 each, generated once.

Seems when a billboard is created with a Canvas element, it just keeps growing the atlas for no reason.
I changed this:
DrawCircle(512, 5); // Returns canvas.
To this:
DrawCircle(512, 5).toDataURL();
Initializing the Billboards with a URL solved the problem.

[Nadav42]

I had the same issue of atlas overflow, but for a handful of generated images. 18 images 512*512 each, generated once.

Seems when a billboard is created with a Canvas element, it just keeps growing the atlas for no reason. I changed this: DrawCircle(512, 5); // Returns canvas. To this: DrawCircle(512, 5).toDataURL(); Initializing the Billboards with a URL solved the problem.

Since you only have 18 constant images then yeah, providing cesium with the toDataUri() will make cesium cache it by the URL string so it will work just fine

But in my case I need dynamic textures all different from each other (hundreds) so it won't work (the atlas will fill eventually)

[Jeggery]

So is there a perfect solution to this problem? This is a very common function. Threejs and Babylon have dynamic textures. Why can't cesium implement them?