Grayscale and colorize image support?

Unity Engine
1

For uGUI, I wrote a custom Image Component and Shader to render a single source Sprite in different styles. However, this always caused draw-call batching to break.

In UIElements you aim for “one draw-call for the entire ui” as mentioned in the Building UI for games with the new UI Builder talk.

I wonder if UIElements has support to render images with different filters/styles, as I describe below. It’s functionality that I needed in most game UI’s.

I want to render this image for buttons that are interactable:
5125196--506414--normal.png

For disabled buttons, I want to render the image in grayscale, but using the same sprite asset as above.
5125196--506417--grayscale.png

For buttons that contain a “not unlocked yet item”, I want to display it as a single color, so that you can still notice its silhouette. This should also use the regular sprite as input.
5125196--506420--silhouette.png

  • Is this supported by UIElements?
  • Would this break draw-call batching in UIElements?

Thanks in advance!

2
  1. I don’t think it is yet, but I hope it will be (either via custom shader support or by implementing those features in “the” UIElements shader
  2. batching depends on everything having the same shader (the same material in builtin RP) so if you want to assign a specific shader to your sprites, it will break. if you can assign the shader to the Panel Renderer / Editor Window, it will not break but you will be rendering everything with a potentially heavier shader
3

Custom shader support will definitely come, along with custom data as well.

Features such as the one suggested can be set on the panel’s standard shader, which effectively allows any element within that panel to access to those effects without breaking drawcalls.
Or you can decide to limit the custom shader to a particular branch of set of elements only, in which case you will cause a drawcall break only around that block of elements.

To identify those elements and their state (e.g. active, disabled, locked) in the shader, you need to fill this data somewhere accessible to the shader, like vertex attributes or a per-element entry in a dictionary/atlas.

But yeah, we want to enable those scenarios asap.

2 Likes
4

Thanks for the reply. I’m glad to hear this is being supported out-of-the box.

5

Is making a sprite grayscale available?

6

Custom shading isn’t available yet. The closest we have is the ImmediateModeElement, but it has some limitations (e.g. does not support clipping from a parent)

1 Like
7

Is there still no way to do simple filtering, like grayscale or color multiplication?

8

Not yet. We still plan to support custom shaders though. A workaround could be to modify your assets at runtime (e.g. blit them into a render texture with a shader that does whatever effect you want). If you want to apply it to your whole UI, you could render the UI to a render texture and then apply whatever filtering you want to it as it’s being copied back to the frame buffer.

9

Still no support for rendering individual sprites grayscale with UIElements?

10

We’ve started work on custom shaders and post-processing. Can’t give an ETA at the moment though.

2 Likes