Question Lag when filling overlaid images

I'm having an issue where my UI lags if I try to fill an image that is placed in front of another image. Here is the effect I am trying to achieve:



As you can see I have an image in the background (dashed line) and I am attempting to fill another image in front of it (green line). It's hard to see in the GIF but my game is 60 FPS and the fill animation is noticeably jittery. It took me a while to figure out that the background image is what is causing the stutter, but I am certain it is.

As soon as I disable the background image (or set its fill to zero) the green line animates buttery smooth:



Again, it is quite hard to see in the GIF but I can confirm that without the dashed line, the animation is buttery smooth at 60 FPS.

Does anyone know how I can overcome this jitter? I need to be able to keep the background image and overlay one on top. I potentially even need to animate more images on top of the green line, so I fear the jitter will get even worse.

Here is what I am doing right now:

• I have one canvas and two images. Both images are positioned in the same world space
• I have disabled costly features like graphics ray-casting, transparency culling etc.
• I am deploying to iOS but the lag is happening on both my Desktop and iOS devices.

• I have even tried splitting both images into two separate canvases and putting one canvas underneath the other in world space. But this has no effect.

Any advice on how to overcome this lag would be appreciated. I find it surprising that something as simple as this would be so taxing as to create stutter.

 

I can confirm that the images are only 512x512 so it’s not like they are super high resolution either.

Furthermore, I have been profiling this and it looks like the solid line is breaking the batch, causing a second batch to be created. This only occurs in the first GIF when I am overlaying the solid line. So I guess I need to find a way to prevent this batch-breaking.

 

After researching the above I have updated my project to use a sprite atlas, which contains both images. I can confirm after profiling the UI that there is no longer any batch breaking taking place. In fact, the same number of batches are now achieved in both scenarios. Yet I am still seeing the stuttering when I try to overlay the image (first gif).

Sucks that nobody is willing to offer any advice on this.

 

In case anyone wants to have a look at this I have attached a package. You can clearly see that by animating the solid line without the dashed line present, the fill is smooth. As soon as the dashed line is in the background and the solid line is animated on top, the stutter occurs. This is despite using a sprite atlas to prevent any re-batching.

I'd welcome any thoughts?

 

As stated in the other thread, I still hold that it is something else in your project.

To prove me wrong, extract the assets and just enough code from the script(s) you are using above into an empty project and run it, with the dashed line under the solid. You'll find it is almost certainly buttery smooth.

As I said in the other thread, check what you're doing in FixedUpdate(), or just eliminate ALL FixedUpdate() code (rename the method to FOO_FixedUpdate() globally) and see if the problem persists.

 

This is exactly what I have done in the attached package. I created a blank project and the same problem is still happening. Open the package and try it for yourself, I am certain you will see the same thing.

 

Further to the above, I've even tried adding the dashed line as a quad using the standard unlit shader. This way it is not a UI or image element. If I then animate the solid line over this as a UI image, it still stutters. Part of me think it might be a limitation with the default UI shader, perhaps relating to how it handles transparency. I know little about shaders though so I could be wrong.

It would be really helpful to know if you experience the same issues when trying the package I attached.