Flickering in animation and text rendering issue

We have discovered a flickering in the animation that occurs randomly during playback.
Every time this happens, we see a warning in Lightning’s console.

WebGL: INVALID_OPERATION: bindFramebuffer: attempt to use a deleted object
WebGL: INVALID_OPERATION: bindTexture: attempt to use a deleted object

Furthermore, we have the issue that the text on the Xfinity devices is blacked out after about 30 minutes of playback. As you can see on the screenshot, the letters are blackened. The problem does not occur when the feed is played in the web browser on a laptop.

Here you can see how we configure the text in Lightning.

export default class TextSample extends Lightning.Component {
static _template() {
return {
w: 648,
h: 398,
x: 0,
y: 38.5,
text: {
fontFace: “NeoSans-Regular”,
fontSize: 66,
lineHeight: 79.2,
text: “Conquer Tax Day with these 5 crypto tax prep software packages by @anitaramaswamy
textColor: “0xff4d4e53”
}
};
}
}

Let me know if you would require additional information.
Thanks in advance!

Hi there! From what you describe you seem to be running into GPU memory limits.

As you probably know everything in Lightning is a texture, and those textures are uploaded to the GPU. When the GPU runs out of memory to upload new textures and not enough textures are being released, the GPU typically will render black blocks, where you’d normally expect an image or text. And it can display flickering during animation, simply because there’s not enough memory left to animate smoothly.

On your computer the memory of the GPU is pretty much unlimited, compared to that of a STB. That’s why you’re only seeing it there.

You might be interested in going through this long read on Memory leaks in Lightning - specifically the part about GPU memory leaks. The article explains in detail what memory leaks are, and how you can prevent and tackle them.

Hi @michiel,

Thanks for your prompt reply and the information provided.

We are aware of the GPU’s limitations, it’s just surprising that it can not render some images and text on the device. As for the leakage issue, we believe that it should not occur if we remove unused Lightning components as the GC frees up GPU resources - is that correct?

A few notes about our approach: we create and remove Lightning components that contain some images and text. However, the problem with warnings occurs very randomly, it can even be the first iteration, i.e. when the presentation has just been started. Therefore, we do not believe that it is a lack of resources, but we would still like to understand what could trigger these warnings.
It is also important to know that the issue also occurs on desktop systems with a lot of GPU memory.

We suspect that the Lightning engine is just freeing up the resources of some components that are off-screen and that this is causing these warnings and delays when the component should be on-screen during animation.

Please let us know what you think.

PS. I am happy to share the URL we are testing with you so you can investigate on your end as well, if possible. Is there any way to share this in a private message or email?

I think we should carefully split the two issues above.

Text render issue
This is due to the browser incorrectly telling the Canvas is done rendering to text, there for us taking a premature texture out of the canvas to render it in the main screen.

Please see:

More explicitly see if this helps on your platform:

Which I think is the similar problem, if you disagree let me know.

Flickering issue

Though still under investigation our current thoughts this has to do with scope creep on buffers, namely the color buffer. Clearing the color buffer on the Browser seems to reset the main texture buffer causing the entire screen to be cleared, then repainted causing a “flicker”.

Currently @erikhaandrikman is investigating the issue and working on a write up to see if we can get any help from our browser friends or to see if we’re doing something wrong with the buffer scopes.

One of the “hacks” you can apply is:

This will force the GL pipeline to be sync and avoid the flickering, however this negatively impacts the performance and best is to only apply this on sections/screens where it suffers the most.

Alternatively try to avoid using Render to Texture, as this seems to be the main trigger for the color buffer scope issue.

Tagging @Douwe & @erikhaandrikman to keep me honest on the flickering issue.