Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

GrabPass Alternative in URP (Hierarchical UI Blurring)

Discussion in 'Universal Render Pipeline' started by Kastenfrosch2, Mar 21, 2020.

  1. Kastenfrosch2

    Kastenfrosch2

    Joined:
    Mar 19, 2017
    Posts:
    10
    Imagine I have the following UI:


    Now I want every Subscene to blur everything behind it.


    With the old fixed pipeline, i could easily achieve this by using a shader with GrabPass, everytime a Scene wanted to "blur everything behind it".

    With URP I am unsure on how to achieve this.

    The only thing I can think about is to statically assign layers to every single UI Element like the following.


    And then Assign a RenderPass to every layer

    • Render Layer1.
    • Copy Color Buffer and Blur it
    • Render Layer2
    • Copy Color Buffer and Blur it
    • ....


    However that approach seems
    • Complicated to initially implement (find out which blur passes are currently needed, Implementing of custom renderpasses)
    • Complicated / Error prone to use (Assignment of layers to every new scene / UI Element)
    • Limited (Scene B1 can never overlap Scene A1)
    • Really static (Which layers are allowed to overlap which, static number of Renderpasses)
    • Risky (Will I really get the same UI-RenderOrder when splitting up everything in layers and "manually" manage the render Order)

    Especially when comparing it to the really simple solution with GrabPasses.


    Does anybody have a better solution?
    Will the overly complicated plan i outlined work at all?


    Note: This question seems rather related to
    https://forum.unity.com/threads/the-scriptable-render-pipeline-how-to-support-grabpass.521473/page-2
    but reading that thread I found no tangible solution
     
    pw_prg_yinchao and Elringus like this.
  2. pw_prg_yinchao

    pw_prg_yinchao

    Joined:
    Feb 14, 2020
    Posts:
    18
    Hi,
    If you only want to support ONE blur layer, I just found this is can be implemented by a UIRenderer(a ForwardRenderer asset used by UICamera) with 2 more render features.

    - UI or anything below the blur layer should be set to another layer. Let's name it "UIUnderground". (By default, all UI elements will be set to "UI" layer). And remember add it to UICamera's culling mask too.
    - Create a render feature in UIRenderer, named "Underground", with its "Queue" parameter is "Transparent", and its "Event" is "BeforeRenderingTransparent". And most important, set its "Layer Mask" to "UIUnderground".
    - Create a scriptable render feature script, implementing blurring stuff. Add it to UIRenderer render feature list, just following the "Underground" render feature above.
    - Set UIRenderer its own "Transparent Layer Mask" to "UI".

    Now let's see the render loop of UICamera:
    1. Render all elements in UIUnderground layer
    2. Do blurring
    3. Render all elements in UI layer

    Done!

    BlurLayer.jpg
     
    Flamesky likes this.
  3. CChong_at_Infinity

    CChong_at_Infinity

    Joined:
    Apr 7, 2020
    Posts:
    27
    There's another way to do this without having to change the layers of any UI elements. You'll need to have a "blocker" UI Image behind the modal UI window, play around with stencil buffers and apply the blur on a the blockers during a ScriptableRenderPass (usually with renderPassEvent = RenderPassEvent.AfterRenderingTransparents).

    You will, however, need to write your own URP-compatible HLSL shaders to do this. I've done this on a project at work and it worked reasonably well but with had some major limitations (which is why we ended up scrapping it):

    1. If your modal window is translucent, anything that appears behind it won't be blurred out because the blur would've been stenciled out by the actual modal window.
    2. Because it's effectively a post proccess, the edges of your modal window will bleed onto the blur.
    3. This will not work if your UI is rendered in Screen Space - Overlay mode. In our case we had to move all our UI to this mode for performance reasons.
     
  4. Flamesky

    Flamesky

    Joined:
    Jan 28, 2015
    Posts:
    13
    Hi, this way looks the right way to solve ui layer blur problem, can you show the codes? i am new to use urp/ unity shader, and can't write the code completely, if you don''t mind that. thanks so much!
     
  5. wozniaxen

    wozniaxen

    Joined:
    Oct 31, 2018
    Posts:
    16