Welcome, Guest

Author Topic: Poor box shadow performance and Blur Kernel size is limited warning  (Read 366 times)

Lisk

  • Posts: 39
    • View Profile
    • Legion TD 2
I'm trying to make a glowing image effect using box shadow and css animations.

I have it working perfectly in the HTML page; however, in Unity the glow appears very thin and doesn't animate smoothly. I constantly receive this warning, too:

Code: [Select]
[Coherent GT] (Warning) Blur Kernel size is limited!
UnityEngine.Debug:LogWarning(Object)
Coherent.UIGT.UnityGTLogHandler:WriteLog(Severity, String, UInt32) (at Assets/Standard Assets/Detail/CoherentUIGTLogHandler.cs:17)
Coherent.UIGT.ILogHandler:SwigDirectorWriteLog(Int32, String, UInt32) (at /home/coherent/repo/gt-builder/Coherent/ThirdParty/coherent_webkit/Coherent/Coherent/UIGT/DotNET/SwigGenerated/ILogHandler.cs:70)
Coherent.UIGT.CoherentUIGT_NativePINVOKE:UISystem_Advance(HandleRef)
Coherent.UIGT.UISystem:Advance() (at /home/coherent/repo/gt-builder/Coherent/ThirdParty/coherent_webkit/Coherent/Coherent/UIGT/DotNET/SwigGenerated/UISystem.cs:88)
CoherentUIGTSystem:Update() (at Assets/Standard Assets/CoherentUIGTSystem.cs:566)

Attached is a minimal sample of the view.

1. Observe that in Firefox or Chrome, the glow is big and smooth.
2. Observe that in Unity, the glow is thin and warnings are spammed in the console.

My hypothesis is there is some performance optimization with Coherent GT that is resulting in these warnings & poor rendering.

I am guessing that the best solution will be a workaround to achieve the same/similar visual effect, but in a different way.

Tony

  • Administrator
  • *****
  • Posts: 26
    • View Profile
Poor box shadow performance and Blur Kernel size is limited warning
« Reply #1 on: October 16, 2017, 06:30:06 AM »
Hi Lisk,

When you are using box-shadow CSS property with Coherent GT you should have in mind the following:

In order to provide the best possible performance, the Renoir library introduces some limitations on the rendered content. One of them is the size of the box-shadow radius which is limited to 24px. Large blurs are very costly in terms of performance and limiting the size of the shadow helps to avoid inadvertently creating too large blurs that will impact it negatively.

To achieve the desired effect you can use gif images with the same pulsing shadow animation or if you want larger static shadow you can bake it into a texture.

Tony
Support Engineer at Coherent Labs

Lisk

  • Posts: 39
    • View Profile
    • Legion TD 2
Re: Poor box shadow performance and Blur Kernel size is limited warning
« Reply #2 on: October 16, 2017, 07:20:34 AM »
Thanks for the response, Tony.

Is there any way I can override this limit? The only place I use this is in a screen where there is nothing else on the screen but a single image with that glow.

The gif solution would technically work, but it is not ideal because I was hoping to use these glows on potentially different-sized images.

I'll consider other workarounds if overriding the limit is not possible.

Tony

  • Administrator
  • *****
  • Posts: 26
    • View Profile
Poor box shadow performance and Blur Kernel size is limited warning
« Reply #3 on: October 17, 2017, 03:05:54 AM »
Hi Lisk,

The blur currently employed in GT has one of the fastest implementations that make use of the GPU hardware in the best possible way and our code in the shaders is optimized for that blur limit. Thus, changing it would necessarily come with performance cost and it's not something we'd want to do.

Beside using gifs, you could also consider using sprite sheet animations to achieve the pulsing shadow animation. This article I found gives very detailed information on the usage of sprite sheets.

Tony
Support Engineer at Coherent Labs

Lisk

  • Posts: 39
    • View Profile
    • Legion TD 2
Re: Poor box shadow performance and Blur Kernel size is limited warning
« Reply #4 on: October 17, 2017, 07:10:55 AM »
Understood. Thanks for the sprite sheet animation alternative.

For now, I just went ahead and re-created the glow with a 24px limit, since I have to work on other tasks at the moment.

I appreciate the help!

Tags: