Hello,
I am writing to inquire about an issue I’m facing. I would appreciate any answers or advice you can provide.
I am currently developing a GIS Digital Twin-style program. The setup involves a 3D Map implemented with HTML and JavaScript, which is then loaded into an MFC Program using WebView2. The program’s purpose is to map the positions of objects recognized by the MFC application onto this 3D map.
The objects are displayed using markers created with Cesium.Entity.Billboard. The application tracks vehicles on a road in real-time via an IP camera, displaying a marker for each successfully tracked object. The maximum number of concurrently displayed objects is 128. Markers for vehicles that are no longer tracked are removed after a certain period (10 seconds), while new markers are added for newly tracked vehicles. The core of the process is that the MFC application crops an image of the recognized vehicle, saves it to a specific path, and the web page then reads the image from that path to use as the marker’s image.
The Problem
The issue I’m facing is a WebGL texture creation error that occurs after approximately 30,000 cumulative updates to the marker images (this includes updating existing markers or assigning images to new ones). After the error occurs, the images for all existing and newly created markers turn into black squares. All other functionalities of the application continue to operate normally. I have made numerous attempts to resolve this issue, but none have been effective. I would be grateful for any solutions, advice, or insights you might have.
Below is a summary of the current situation and the solutions I have attempted so far.
Current Situation
- Object recognition and tracking are handled by the MFC Program, which then sends the tracked object’s ID, transformed coordinates, and the saved image path to the web page.
- The web page is responsible for registering and updating the markers.
- I have tried explicitly removing the image resource using
const imageResource = entity.billboard.image.getValue(); if (imageResource) Cesium.destroyObject(imageResource);, but adding or removing this logic has no effect on the outcome. - Markers for objects that are no longer tracked are removed using
viewer.entities.remove(entity);. - Race conditions between the image being saved (by MFC) and loaded (by the page) are handled with exceptions, and the image loads correctly on subsequent attempts.
- Monitoring GPU-related variables in the console and analyzing memory in the process window do not indicate any memory leaks.
- The cropped images have a fixed size of 64x64 pixels.
- The texture creation error occurs more quickly if the size of the cropped images is increased.
- Since the application must continuously use images of new vehicles, the
ImageURLprovided to the markers is always changing.
Solutions Attempted So Far
- Managing markers using a
BillboardCollection. - Manually creating and managing a texture
Atlas. - Using an object pool pattern where entities are pre-allocated, and only their images are updated.
Actual Error Message (Copied from Console)
WebGL: INVALID_VALUE: texImage2D: width or height out of range WSViewerStartup.js:3504
[.WebGL-0x162400898600] GL_INVALID_VALUE: glCopyTexSubImage2D: Offset overflows texture dimensions. Mapping_3D_Image.html:1
[.WebGL-0x162400898600] GL_INVALID_OPERATION: glTexSubImage2DRobustANGLE: Texture level does not exist.
My main question is: could it be that every time a new image is loaded, it is being cached internally, and the accumulation of these cached images eventually leads to a failure in texture creation?
Thank you for taking the time to read through my detailed problem description.