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.
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.
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.
Hello, I’m new to Lightning and I’m really excited to use it. The work you guys have done here is amazing and really appreciated. I’m having the flickering issue on my UE43TU7100U model Samsung Tv which is really fast but its flickering when creating new items I think, also its giving this error which I think its not related.
[.WebGL-0xaae8dce8]RENDER WARNING: there is no texture bound to the unit 0
I tried the glReadPixels by passing "readPixelsBeforeDraw":true, "readPixelsAfterDraw":true to stage settings and its not working. Also can you help me on avoid using Render to Texture.
Thanks for your continued support thus far. Below is an update on the topics discussed.
regarding the first issue with the blackened letters, it seems that reverting to the old version 2.5 solves the issue, but we want to be up to date. Is there anything we can do to avoid the issue and still use the latest version?
The second issue with the flickering animations is no longer occurring, we will keep an eye on performance and let you know if we find anything else.
We still have a few open issues:
We noticed that the SVG textures are a bit pixelated, we could not find out in the documentation if there is a way to improve this, if you know something about similar issues please let us know.
We are trying to create a custom animation of a circle countdown and could not find anything in the documentation. So currently it is just pure canvas texture that is updated to the animation frame to draw the arc. It works fine, but sometimes we see the entire area that “masterpiece” is blacked out. Let me know if you know anything that can help us get rid of this problem.
We have a custom font that contains icons and we render it as a text texture so each letter is an icon, it works fine in the normal browser but not on the target device (X1), instead of icons we see the ‘□’ Symbol as if the letter is not supported by the font, we tried to add the text as follows: text: unescape(’\ue900’) or ‘’. Both work in the browser on PC, but not on the device.
I just wanted to see if all is clear on the ticket we submitted on June 13 and if you can help us get answers as soon as possible, as these are the final issues to kickstart the first phase of the POC with Comcast.
In addition, there is a specific limitation around certain animations for which we need to meet the expectations in Lightning. The animation options we would like to see in Lightning are as follows:
Hi @seenspire ! Doing great, hope you are doing well too.
Okay here goes:
Text issue
The black/incomplete text issue should be solved by this option:
It’s still a patch that needs to be merged in, but you could take that branch and validate if it rememdies your issue. I hope to get this merged in soon.
With that change enabling forceTxCanvasSource on the stage config should remedy the text issue.
SVG issue
Are you testing this on devices that run a very old browser, like pre-Chrome 46? Else its very similar to SVG rendering issues in older browsers · Issue #381 · rdkcentral/Lightning · GitHub
Though I do not have a real solution for that right now. Dealing with old browser related issues is usually very hard for us to reproduce/resolve.
Is there a way to avoid the SVGs? I know this isn’t a real solution, but a temp workaround would be to fall back to png/jpgs instead.
Animations
It should be very easy, and much more efficient, to do a similar “loader” in Lightning, I’m no pro. But you could take your base image of a loader and use an animation that changes the rotation of the element pretty easily.
const myAnimation = this.tag('MyCoolLoader').animation({
duration: 1, //duration of 1 second
repeat: 1, //Plays only once
actions: [
{p: 'rotation', v: {0: 0, 1: 360}},
]
});
Custom font
Are you loading the custom font? Make sure it gets loaded properly. If it still loads up those □’s it typical has issues resolving the character. Does the same character in a default font work? Or does even the default font give those □’s?
other Q’s
These properties:
3D transform
RotateX & RotateY
Rotate with perspective
Are all available properties in the Element, such as:
rotation
pivot, pivotX, pivotY
scale, scaleX, scaleY
mount, mountX, mountY
And ofc regular properties such as x, y, w, h
And please send me a ping of your POC once it’s ready, we enjoy looking at projects/creations
Text issue
So far this problem has not reoccurred.
SVG issue
For now, we will indeed fall back to PNGs.
Animations
Just to give more details, what we are looking for is to animate the SVG path, see an example here: Document - "SVG path animation
But we could not find this feature in Lightning. Instead, we use a custom canvas and a custom animation function that draws the arc in each frame with a new start and end angle, so it looks like a countdown. However, since this is not natively supported by Lightning, sometimes a black box is flashing.
Custom font
Yes, we load a custom font (“\ue900”) that works fine on PC, but on the X1 it sometimes fails to display the correct symbols. The alternative would be to use icons instead of a custom font, but that would add extra work and provide less flexibility in terms of customizations like colors. Hereby the the custom font we are using: Document. Please let us know if you can figure out what is causing the problem.
3D transform
The properities you’ve provided would still not allow for perspective rotation, which is required for the 3D effect. See example here: Document - ‘3D Transform’ section
To achieve this effect we would need a combination of: rotateX, rotateY, rotateZ with perspective.
Is this something you could support in Lightning? It is one of the most important animations that make the difference in the viewing experience.
Could you let us know when we can receive feedback on our latest response? We would like to resolve the above outstanding issues, as we have a meeting with the Xfinity product team on Wednesday this week for them to test before the trial.
