Performance Question

o.greil 2 years ago updated 2 years ago 6

Hey there,

I am doing a glowing border around my cards (in UI image) via shader weaver with the remap tool (to have it animate around the card) and UV mapping for the effect (like you did in the sword tutorial). 

Now the performance is fine on mobile - except when I am showing the card in full screen. Then size of the cards is around 700x1100 pixels large - the border of this shader material is behind the card (so I have to make it even bigger e.g. 800x1200) - in order to see the glow behind it going over the cards border. Thats when I see the performance degrades a lot. And I guess that is due to the fact that I am rendering this large picture - with the whole center of the picture being transparent.

But since I would only the to animate the border around (the area from the remap) - I wonder if there would be a better way to do it - so that it gets more performant. Maybe somehow tell the shader that he only processes the remapped border instead and ignoring the center of the full rect - but I have no clue about shaders myself - or do you have any ideas?

I tried to use smalles remap size 256x256 but it didn't help...

Thanks a lot,


What I was thinking too is that I could split it up into 4 UI images -> for each border (that would reduce fill rate alot) - but then I can't do a circle animation anymore - because having 4 seperate images....

Hmm but I think in UI image we are not able to use anything other then a full rect image - so how could we tell the shader to only process the remapped border and not rendering all the many transparents pixels inside?

Hope you understand my issue :)

Under review

I think this is a problem with transparent fill rate, especially full screen.Here are some ideas

[1] remove clip

     after sw, open shader file in mono/vs

     clip(result.a - 0);  ->  //clip(result.a - 0);

[2] blend off

    A quad area can match the rest part of card without blending. 

    1 use a quad for main card area

    2 in sw scale up so that main card can fill out. And border will not be render( out of quad)

    3 open shader file in mono/vs, Blend SrcAlpha OneMinusSrcAlpha -> Blend off

    4 match up main and border

[3] Border:chop

     Make a simple quad mesh and chop inner area, use sw as usual and ignore center.

They are just some ideas, might work or not. There might be some try and error. Hope they can provide some help.


And you can also check through project settings and graphic settings.

Hey there and thanks for the infos...

well nr (1) didn't work - at least it didn't show any improvement at all - would have been the easiest workaround thogh :(

With 2/3 you mean that instead of Using a UI Image - I will add a SpriteRenderer to the Canvas (?)- and render it with this - so I would get the benefit of chopping out the transparent inner area and I could only use the border (that would surely work) - but not sure how easy this is to implement within a canvas and mixing with UI images shaders.


Well. An easy way is to make your Canvas in the world space. And make all the cards with chopped mesh. Manage depth with world pos. UI and cards will work together. For me, a tcg game, I will choose these way.

If your cards have many effects. They will use different mat. There is not too much benefit to do it with UGUI.

And the main problem is about fill rate. Do the thing you mentioned with sw or not will make not much difference, since UGUI/Sprites do blending by default.

Hey there, well I am using the Screen Space - Camera (not overlay) - so I now changed the border effect to a true "chopped" sprite and you are right that mix perfectly into the normal ui. I have to use UI for all the drag and event system things - since thats how the game is done by now. However my performance issues are gone now and its working very well. Thanks :)