'Optimizing masked scrollbar

I have a scrollbar with a mask. Inside there are over 1000 UI elements scrolled - each has bg, icon, and text. on top there are several UI elements spreaded out

when static, it runs at arounf 80fps while scrollng, it runs at about 30fps

What i've tried

  1. Atlassing all images
  2. uniying materials - giving the same material to all elements (either 1 for all or 1 for the list and 1 for all the rest)
  3. seperating canvases - 1 for the list and 1 for all the rest (only increased batches).
  4. removed pixel perfect from canvas
  5. Changed canvas from screenspace: camera to overlay.

Issues:

  1. there are seperate batches for 2 objects under the reason "Different material instance" although both objects are under the same canvas, same Z same material and same Image (and both read the same image from the same atlas on start). From Batch 1 From Batch 9

  2. the list of elements all contain an image taken as an index from a unified atlas. However, I see 2 separate batches - 1 for the 15 elements not masked, and 1 for all the masked elements. is there a way to batch them together? all Images Images not masked

  3. I'm looking for a way to optimize the masking of the element (for this is the heaviest component) With the pixel perfect off - the fps moved from ~30fps while scrolling to anything between 60fps to 0.7fps enter image description here



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source