Search Unity

Grayscale and colorize image support?

Discussion in 'UI Toolkit' started by Peter77, Oct 31, 2019.

  1. Peter77

    Peter77

    QA Jesus

    Joined:
    Jun 12, 2013
    Posts:
    6,618
    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:
    normal.png


    For disabled buttons, I want to render the image in grayscale, but using the same sprite asset as above.
    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.
    silhouette.png


    1. Is this supported by UIElements?
    2. Would this break draw-call batching in UIElements?

    Thanks in advance!
     
    Peter77, Oct 31, 2019
    #1

  2. M_R

    M_R

    Joined:
    Apr 15, 2015
    Posts:
    559
    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
     
    M_R, Oct 31, 2019
    #2

  3. wbahnassi_unity

    wbahnassi_unity

    Unity Technologies

    Joined:
    Mar 12, 2018
    Posts:
    28
    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.
     
    wbahnassi_unity, Oct 31, 2019
    #3
    Peter77 and recursive like this.

  4. Peter77

    Peter77

    QA Jesus

    Joined:
    Jun 12, 2013
    Posts:
    6,618
    Thanks for the reply. I'm glad to hear this is being supported out-of-the box.
     
    Peter77, Nov 1, 2019
    #4

  5. Radivarig

    Radivarig

    Joined:
    May 15, 2013
    Posts:
    121
    Is making a sprite grayscale available?
     
    Radivarig, Sep 13, 2021
    #5

  6. AlexandreT-unity

    AlexandreT-unity

    Unity Technologies

    Joined:
    Feb 1, 2018
    Posts:
    377
    Custom shading isn't available yet.
     
    AlexandreT-unity, Sep 14, 2021
    #6
    Radivarig likes this.

  7. mortoray

    mortoray

    Joined:
    Sep 14, 2018
    Posts:
    94
    Is there still no way to do simple filtering, like grayscale or color multiplication?
     
    mortoray, Jan 1, 2023
    #7

  8. AlexandreT-unity

    AlexandreT-unity

    Unity Technologies

    Joined:
    Feb 1, 2018
    Posts:
    377
    Not yet. We still plan to support custom shaders though. An 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.
     
    AlexandreT-unity, Jan 9, 2023
    #8