Search Unity

Unity UI SVG support script

Discussion in '2D Experimental Preview' started by phil-Unity, Sep 5, 2018.

  1. phil-Unity

    phil-Unity

    Unity UI Lead Developer Unity Technologies

    Joined:
    Nov 23, 2012
    Posts:
    1,140
    SVG in Unity UI

    upload_2018-9-5_15-57-37.png

    You've all be asking so we worked on it and are ready to share at least the first step towards SVG support inside Unity UI. We are sharing the script this way to get it into your hands faster so we can get feedback but it will be included in a future version of the SVG package. This also may not be the final version that gets shipped in the package but it should be pretty close.

    Please let us know if you use this and if it works or horribly breaks in some manor such that we can look into why.

    As a note Unity UI render mode of "Screen Space - Overlay" does not have AA support, if you need AA to make it really crisp you might want to switch the Canvas to be "Screen Space - Camera"

    Usage:
    For simple SVG images simply place the SVGImage component on the GameObject.

    For a Gradient SVG Image you will need to create a "Gradient" material which has the "Unlit/GradientVector" shader assigned. You can then assign the material to the SVG Image component. You will also have to change the Canvas "Additional Shader Channel" to include "TextCoord2" otherwise the UI system will ignore that data.
     

    Attached Files:

    Last edited: Sep 7, 2018
  2. Korindian

    Korindian

    Joined:
    Jun 25, 2013
    Posts:
    446
    Thanks so much for this. I'd love to test this out, but I'm getting some console errors after importing the scripts and folder to an empty 2018.2.6f1 project that has the Vector Graphics package installed.

    I believe the SVGImage script is missing the namespace: using UnityEngine.Experimental.Rendering for VertexAttribute, and I'm getting a compilation error that GameObjectUtility does not contain a definition for 'EnsureUniqueNameForSibling'.
     
  3. phil-Unity

    phil-Unity

    Unity UI Lead Developer Unity Technologies

    Joined:
    Nov 23, 2012
    Posts:
    1,140
    Well ok then I'll take a look asap to see what's up. I did build it on 18.3 so maybe there is new apis. Thanks
     
  4. phil-Unity

    phil-Unity

    Unity UI Lead Developer Unity Technologies

    Joined:
    Nov 23, 2012
    Posts:
    1,140
    @Korindian I've updated the scripts above. You were 100% right. The one API went from Experimental to non between 18.2 and 18.3 (version i was using). And the other changed name from GetUniqueName to EnsureUniqueName. All should be good now.

    Thanks again.
     
  5. Korindian

    Korindian

    Joined:
    Jun 25, 2013
    Posts:
    446
    Thanks. Here are my initial impressions (while you were updating the scripts, I just commented out the GameObjectUtility line):

    1. MSAA works if UI camera is set to forward and UI Canvas is set to Screen Space Camera, as you mentioned. However, to get SVGs looking properly round (for example, a 32x32 small svg circle) and not aliased, I need to use 8x MSAA, which really increases required memory. In addition, using MSAA also affects any small point size text (using Text Mesh Pro), which isn't ideal.

    2. MSAA will not work if there is a scene camera set to deferred, even with a UI camera set to forward, depth only, and the UI set to Screen Space Camera.

    3. For deferred, It is also not possible to use the Post Processing Stack's AA methods, like FXAA and SMAA (TAA doesn't work with SVGs) to only affect the UI camera as it will also affect any cameras at a lower depth beneath it. Also these AA options really mess with Text Mesh Pro SDF font rendering in the canvas.

    4. Does this mean that SVGs will have no viable AA in the deferred pipeline?

    5. Would it be possible to do some shader-based antialiasing instead, like how the Asset Store's SVG Importer and some other assets do?

    6. You may get more people testing this out if posted in the UI forum!

    7. UI SVGs don't work with Masks.

    Edit: Sorry made a few edits to the original post.
     
    Last edited: Sep 6, 2018
    laurentlavigne and sonofbryce like this.
  6. phil-Unity

    phil-Unity

    Unity UI Lead Developer Unity Technologies

    Joined:
    Nov 23, 2012
    Posts:
    1,140
    @Korindian so in all honesty questions 1-5 I'll need to leave to the svg guys and will poke them tomorrow to get their opinions. I only really made the AA comment in the initial post as I know a lot of UI users don't know that AA isn't supported.

    As for question 6 yup that's the plan but wanted to do small baby steps. It's cross posted in the main svg forum post so the people that really care might see it first.

    As for masks good point I should be able to correct that tomorrow.

    Thanks again for taking the initial plunge feed back is invaluable.
     
    laurentlavigne and Korindian like this.
  7. phil-Unity

    phil-Unity

    Unity UI Lead Developer Unity Technologies

    Joined:
    Nov 23, 2012
    Posts:
    1,140
    Updated the original assets again with the fix for masking SVGs in the UI and some compile defines so i don't make a mistake of updating the API while testing in 18.3.
     
  8. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    339
    @Korindian At this time, we rely on MSAA for edges antialiasing, but as you pointed out, this doesn't work for with deferred rendering. Antialiasing without MSAA is something we would like to address eventually. You can have a look at the following thread for a discussion of various antialiasing techniques:
    https://forum.unity.com/threads/new...n-vectorgraphics-package.537976/#post-3561325

    We are still in discussion about which antialiasing solutions we should provide. If you have any additional ideas or requirements, let us know!
     
    Korindian and phil-Unity like this.
  9. Korindian

    Korindian

    Joined:
    Jun 25, 2013
    Posts:
    446

    Thanks for responding. I just perused that thread and it's great to see Unity's already been considering various alternatives.

    To add some more AA suggestions:

    - Shapes2D, an asset on the Asset Store, recently went open source, so if you're looking for an example of one blur based approach (see documentation under Anti-Aliasing) implementation of AA, it's there. I didn't end up using it for UI as the pixels of the shape tend to snap into place, even with pixel perfect disabled.

    - SVGImporter works in the UI with Screen Space Overlay using its own form of AA.

    - Perhaps having a PPS layer only affect the UI using FXAA or SMAA or TAA, separate from the scene?

    - Noesis GUI from what I remember uses a couple of forms of AA which only affect the UI. It is free to download.

    - I'd be ok with extending boundaries for AA, as mentioned in the other thread, as long as it gives smooth edges and we can plan around the size of the increased borders.

    - The only wish is to have this AA for UI SVGs be separate from text and scene AA so we can tweak as needed.

    I've been on a long quest to find true resolution independent UI in Unity that's easy to use and performs well in Unity. It really made me glad to see you guys tackle this with SVGs, and your work is very much appreciated.

    Recently I've found SDF images are working better than SVGs, with no jaggies, but there are limitations with that as well. It would be great to have a built-in solution that works with AA in deferred though. I really hope you can figure this one out soon. All the best.
     
    Checko and sonofbryce like this.
  10. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    339
    Thank you for the exhaustive list, it is very much appreciated!
     
  11. mboyle

    mboyle

    Joined:
    Sep 10, 2015
    Posts:
    1
    Hi, I'm having trouble getting a gradient to work. I've followed the steps above but no dice. I do see the gradient working properly when I select the top level SVG asset w/the SpriteRenderer so I suspect that the data is fine.
     
  12. phil-Unity

    phil-Unity

    Unity UI Lead Developer Unity Technologies

    Joined:
    Nov 23, 2012
    Posts:
    1,140
    I forgot to mention a step. On the Canvas change the additional shader property's to include "TextCoord2".
     
    mboyle and mcoted3d like this.
  13. RyanJEC

    RyanJEC

    Joined:
    Jan 13, 2017
    Posts:
    34
    This is great, been wanting this for a while. It will be nice when you get AA in Screen Space - Overlay. I don't really like Screen Space - Camera; Also having separate AA for UI instead of using Global MSAA setting.

    Great progress so far. Excited for more!
     
  14. pbrito_unity

    pbrito_unity

    Joined:
    Mar 30, 2018
    Posts:
    18
    Hi, the sprite is not updated when you set a new value.

    public Sprite sprite
    {
    get { return m_Sprite; }
    set
    {
    if (m_Sprite != value)
    { SetAllDirty();}
    }
    }
     
  15. haywirephoenix

    haywirephoenix

    Joined:
    May 17, 2017
    Posts:
    55
    Worked like a charm, thank you so much for this, it's exactly what I was looking for! Lifesaver!
     
    phil-Unity likes this.
  16. phil-Unity

    phil-Unity

    Unity UI Lead Developer Unity Technologies

    Joined:
    Nov 23, 2012
    Posts:
    1,140
    Sorry for the delay the forum wasn't saying there were new threads. Oh drat your right :(.

    Edit: As the SVG package has the script in it now, please download preview.20 and the fix is in there. Thanks for the feedback.
     
    Last edited: Sep 26, 2018
  17. ZDestructor

    ZDestructor

    Joined:
    Nov 8, 2012
    Posts:
    126
    Thanks for getting UI Canvas support working!

    We have several full-screen vector art backgrounds that are currently imported as PNG files, which greatly increase our build size. We plan to add more, so we need a better solution.

    The current SVG support seems like it's in good shape except that there is no equivalent to the Image component's "Set Native Size".

    Our artist currently exports PNG files from Illustrator at the same reference resolution as our Unity Canvas so that we can just import things and hit the "Set Native Size" button. It's important that we have the same functionality for SVG files, but currently, all SVGs seem to be scaled to a 100x100 box.

    The SVG files I'm using right seem to have the required information, but specified in two different ways:

    Random SVG from Google:
    Adobe Illustrator:
    I think sprites should be sized based on the above information, and as a fallback, use the bounds of the SVG's vertices, and assume the SVG's units map to Unity UI units.
     
  18. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    339
    If a viewbox is specified, it will indeed map to a 100x100 "window size". I would think the <svg> tag's width and height values should override this, but I'm not sure. We will investigate and fix if necessary.

    It is much easier to predict the size of the imported SVG if no viewbox is specified. I think the "responsive" option in the Illustrator SVG export makes it generate a viewbox. Unchecking this option should help.

    Also, make sure that the "Preserve Viewport" option in the SVG importer is unchecked. When unchecked, it will generate a sprite sized with the bounding box of the vertices. Otherwise, it will use the bounds specified in the SVG file.

    To adjust the size of the sprite, you can play with the "Pixels per Unit" option in the SVG importer. It acts as a "divisor" on the coordinates specified in the SVG file.

    I'll also have a look to see if we can adapt "SetNativeSize" to work with SVG Images.

    Hope this helps :)
     
  19. ZDestructor

    ZDestructor

    Joined:
    Nov 8, 2012
    Posts:
    126
    This fixed it. The Sprite Editor's "W" and "H" now show the correct size.

    I tried fixing up SVGImageEditor.cs to display the builtin "Set Native Size" button, but Graphic.SetNativeSize seems to have no effect. I implemented it myself using (rectTransform.sizeDelta = sprite.rect.size).

    At this point, I can import small simple elements and size them correctly, but I tried to import a large complex SVG, and the result was a mess. The image displayed correctly in the Sprite Editor, but in the scene, it was just a jumble of random colors. The image does contain gradients, but I don't think that fully explains what I'm seeing. The imported SVG asset also has a second child (***Atlas), but I have no idea where that came from. I've sent the image via PM.

    Thanks again =D
     
  20. ZDestructor

    ZDestructor

    Joined:
    Nov 8, 2012
    Posts:
    126
    It turns out it was the gradients. Following these two steps fixed it:

    1) Make sure the SVG Image has a material that uses the "Unlit/VectorGradient" shader
    2) Make sure that the Canvas has "TexCoord2" in the "Additional Shader Channels"

    Thanks!
     
  21. JustDave1961

    JustDave1961

    Joined:
    Jan 5, 2013
    Posts:
    13
    Unit version: 2018.2.14f1
    Vector Graphics version: 1.0.0-preview.21

    I've been trying the new beta SVG support and I found an issue.
    Using a SVG with a gradient, if I try to add more than one of the same SVG, the others stop being drawn in the scene.
    In the first attached screen shot, you can see that with both RedGradient Game Objects active, only the first is displayed.
    In the second screen shot, if I deactivate the first Game Object, the second RedGradient is now drawn.
    If I add a second, different SVG file with a gradient, then some will be drawn, some won't and if I deactivate/reactivate the Game Objects, some will be come visible and others will become invisible.

    This only seems to happen with SVG asset that have gradients, I have been able to add many 'normal' SVG assets of the same type to the scene with no.

    I have also attached an unitypackage with a scene and the two gradient SVG files that I was experimenting with.

    Any feedback on this would be great!
    Thanks,
    Dave
     

    Attached Files:

  22. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    339
    We were able to reproduce, thanks for reporting. I'll let you know once we pushed a fix.
     
    Novithian and JustDave1961 like this.
  23. Korindian

    Korindian

    Joined:
    Jun 25, 2013
    Posts:
    446
    @mcoted3d Hi... I hate to ask, but since it's been about 2 months I figured what's the harm, but is there any update as to alternate forms of anti-aliasing to MSAA for HDRP deferred? A rough estimate of when an experimental version may exist?

    I'm trying to evaluate whether I can use Unity's SVGs for UI in HDRP deferred vs. 3rd party UI solutions. Any info would be greatly appreciated.
     
  24. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    339
    It's too early to tell, unfortunately. Anti-aliasing without MSAA is definitely on our radar, but we can't provide a progress update at this point.

    A potential workaround is to import your SVG as a "Textured Sprite" instead of "Vector Sprite". This gives you an option to antialias the sprites in a way that will work regardless of the graphics pipeline used. This has the disadvantage of potentially consuming more memory, and you'll lose the "infinite" resolution of the SVG sprite.

    We will share publicly once progress has been made, thanks for your patience! :)
     
    Korindian likes this.
  25. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    339
    A fix for this issue is now available in 1.0.0-preview.22.
     
  26. ZLJasonGowthorpe

    ZLJasonGowthorpe

    Joined:
    Mar 29, 2017
    Posts:
    1
    Here's a copy of SVGImage with Preserve Aspect support
     

    Attached Files:

  27. Christian-Tucker

    Christian-Tucker

    Joined:
    Aug 18, 2013
    Posts:
    364
    Everything works great in the Editor and I've finished setting up my UI however the following compilation error makes it impossible to run my game.

    Code (CSharp):
    1. Assets/Editor/SVGImageEditor.cs(10,22): error CS0433: The imported type `SVGImage' is defined multiple times
    2.  
    This error happens at both Line 10: ` [CustomEditor(typeof(SVGImage))]` and Line 116 ` go.AddComponent<SVGImage>();`

    The error that I'm getting from VisualStudio is as follows:

    Error: The type 'SVGImage' exists in both 'Assembly-CSharp, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null' and 'Unity.VectorGraphics, Version=0.0.0.0, Culuture=neutral, PublicKeyToken=null'

    I should add that I do have the SVG Preview package installed. I am running Unity 2018.20f2
     
  28. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    339
    The vector graphics package comes with its own copy of SVGImage, so if you want to use a different one, I guess you'll have to give it a different name.

    This made me notice that our SVGImage class is not in any namespace, this will be fixed in the next version.
     
  29. alexandre-fiset

    alexandre-fiset

    Joined:
    Mar 19, 2012
    Posts:
    383
    I imported a simple star with gradient and the gradient is broken. Is there something I am missing?

    Here in this scene I have 5000 sprites for performance testing and as soon as a svg with gradient is used, I lose the color.

    upload_2018-11-28_14-23-58.png
     
  30. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    339
    The imported SVG asset seems fine as displayed in the preview area of the inspector, so I would guess the game objects that you instantiate are using the "Sprites/Default" or "Unlit/Vector" shader. Using the "Unlit/VectorGradient" should fix this if that's the case.
     
  31. alexandre-fiset

    alexandre-fiset

    Joined:
    Mar 19, 2012
    Posts:
    383
    Oh! So simple... My bad :) Got it!
     
  32. development_unity923

    development_unity923

    Joined:
    Nov 18, 2018
    Posts:
    1
    Hey so I'll start by saying I'm an embedded guy, new to Unity however we've chosen it as our platform for an AR tool we're working on. This is off-topic but I bet this is a use-case for SVG's your team hasn't anticipated ( and likely won't support ).

    We previously used SVG assets for our overlays as it's trivial to interact with them and switch on/off layers etc. I'm having a bit of an issue, mostly because I'm out of my element. I need to, at run-time load the SVG from a string I haul from a Database, render it to a sprite and then be able to interact with it ( Dynamically modify the SVG )

    Currently, I read in the string as an XML doc and every time something needs to be changed that XML doc gets modified and we re-render the SVG to a sprite. The issue is this locks up the main thread, and this workload isn't threadsafe due to Unity's API not being thread-safe.

    Can you think of any workaround for us? Can we actually interact with the Sprite and toggle elements without having to run the Tessellation again? My gut feeling is this isn't the case and we need to find another approach.
     
  33. SpaceAndDream

    SpaceAndDream

    Joined:
    Dec 3, 2009
    Posts:
    13
    @mcote3d : fabulous job this is really coming along nicely, and once finished this package will be a total lifechanger in terms of UI development!

    Here's what I'm getting (Editor 2018.3.0f2, package preview.22 version)

    If I drag and drop the svg asset from the Assets folder directly into the viewport. We see that it shows correctly.
    upload_2018-12-21_15-39-38.png

    However, if I create an SVGImage from the GameObject->UI menu, then assign the sprite and the appropriate shader:

    upload_2018-12-21_15-42-59.png

    Notice the bottom part of the gradient texture is cut off. Toying around with the the tiling and offset parameters for the texture changes the sampling position and scaling of the coordinates in the texture, but does not solve the problem, as seen below:

    upload_2018-12-21_15-45-19.png

    Perhaps I'm getting something wrong here... ? Anyways, thanks for the input and great work
     
  34. Guerro323

    Guerro323

    Joined:
    Sep 2, 2014
    Posts:
    25
    Have you done that for your gradient vector? If it's not enabled, it will not render correctly.
     
  35. Du-z

    Du-z

    Joined:
    May 10, 2013
    Posts:
    3
    Hi guys, I was looking to modify this script to add in 9 Slicing, but I came up against the issue of the sprites border not being set properly. I thought it should just be a change to both line 113 and 114 of VectorSprite.cs however I get a NullReferenceException for the supplied texture when I do that. From there I should be able to scale the vertices as required by the borders.

    On another note, when I failed to implement the vector 9 slicing, I tried switching it to TexturedSprite mode so that I could 9 Slice it the old fashioned way. However I do not seem to be able to set the borders properly in the Sprite Editor.
     
  36. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    339
    Borders for "textured sprites" has been implemented in version 1.0.0-preview.21, so if you are having issues with this version (or higher), please let me know.

    9-slicing for vector sprites is not yet working and will probably be non-trivial to implement. Since vector sprites are essentially "textureless", you would have to map the vertices of the sprite mesh into the 9 sections, and properly reposition these vertices when the shape size changes. I haven't investigated very deeply and I'm still not sure of all the implications of this!
     
  37. SpaceAndDream

    SpaceAndDream

    Joined:
    Dec 3, 2009
    Posts:
    13
    Absolutely fixed it. Awesome, thanks!
     
    Guerro323 likes this.
  38. freedom667

    freedom667

    Joined:
    Sep 6, 2015
    Posts:
    378
    I have a problem with it. When I attach the sprite to SVGImage component, happening this. why? the shader is VectorGradient

    SVGProblem.png
     
  39. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    339
    Gradients sprites require an additional step:

     
  40. freedom667

    freedom667

    Joined:
    Sep 6, 2015
    Posts:
    378
    Already Texcoord 2 is checked in Additional Channel. Render Mode is Overlay, can be because of it?

    Edit: Fixed it. I had to create a material and set to VectorGradient. Thanks :)
     
    Last edited: Jan 21, 2019
  41. freedom667

    freedom667

    Joined:
    Sep 6, 2015
    Posts:
    378
    Well, that is fixed but the edges of SVG sprite are too poor. Why is this happening? Also, it is happening with Sprite too. you can see the image.
     

    Attached Files:

  42. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    339
    That may be a bug with the SVG parser. If you can send the file my way, I'll have a look.
     
  43. freedom667

    freedom667

    Joined:
    Sep 6, 2015
    Posts:
    378
    which file? SVGImage components? or SVG images? if the component, I downloaded here. I send you vector graphics package
     

    Attached Files:

  44. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    339
    Send me the SVG file that isn't importing properly.
     
  45. freedom667

    freedom667

    Joined:
    Sep 6, 2015
    Posts:
    378
    but the all SVG files importing as the same. I think I exported wrongly, Anyway, you can take it.
     

    Attached Files:

  46. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    339
    Ah! My bad, I misunderstood the problem (I thought there was an issue with the outlines of that particular SVG file).

    To answer your question, the sprites assets imported by the SVG importer will be tessellated into triangles, which may cause aliasing on the edges. You have a few options to improve the quality:
    1. Enable MSAA for your project (Edit > Settings > Quality > Anti Aliasing). This will multi-sample the edges of the sprite triangles and should look much better, at the cost of more GPU memory.
    2. Import your SVG file as a "textured sprites" instead of "vector sprites". This will give you the option to do antialiasing, but you'll lose the "infinite" resolution of the SVG files.
     
  47. freedom667

    freedom667

    Joined:
    Sep 6, 2015
    Posts:
    378
    is there no another solution? why the sprite's edges are too bad? SVG files are like these too. this may be worst. Also, I did your way but these are the same again
     
  48. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    339
    If the edges still look aliased after antialiasing is enabled in the quality settings, this could be caused by a couple of things:
    1. You are using a different render texture that is not antialiased for your camera.
    2. You are using a deferred pipeline for your camera.
    For #1, simply enable antialiasing on your RenderTexture.

    For #2, MSAA won't help. We don't have any other options at this time, apart from importing to a "textured sprite", which has its own drawbacks.

    Note that we do have plans for other antialiasing solutions, but nothing concrete at the moment. We had a discussion on this thread:
    https://forum.unity.com/threads/new...n-vectorgraphics-package.537976/#post-3561325
     
  49. amcagurban

    amcagurban

    Joined:
    Dec 12, 2018
    Posts:
    12
    Hi @freedom667 ,
    There is actually a way to get rid of aliased edges. I think results aren't really bad. I use that in my game. Let me show you...

    upload_2019-1-23_23-53-4.png
    First, go to the culling mask property of the default camera and disable UI layer.

    upload_2019-1-23_23-55-18.png
    Then create a new camera as a child of the default camera. This camera is going to be for UI. So, set its clear flags property to depth only and disable every layer but UI in culling mask property.

    upload_2019-1-24_0-49-4.png
    And then, go to your canvas and set its properties like in the picture.

    Thus, we have 2 cameras. First one renders the world, and second one renders the UI.

    upload_2019-1-24_1-7-27.png
    When all is done, you should have better edges. Better than normal in my game :)

    ---------------------

    If edges are still very bad, try the following.
    upload_2019-1-24_0-5-23.png
    If you have a post-processing profile, disable its antialiasing. Then create a new post-processing profile and enable only antialiasing. We will use this new profile on our UI camera.
    Apply this new post-processing profile on your UI camera

    Regards,
    amcagurban
     
    Last edited: Jan 23, 2019
  50. freedom667

    freedom667

    Joined:
    Sep 6, 2015
    Posts:
    378
    it is good thanks for interesting this problem. you spend any time for this but I can'T set to Screen Space - Camera. Because I have a spotlight mask and this does not work on Screen Space - Camera