I’m not quite sure that I understand what you mean by that, could you add some details?
You would need to cache your list and reuse it.
It’s ridiculous to say you’re not going to support box-shadow.
At some point it was going to be part of the UI Toolkit. Even from a usability perspective, these USS properties should be supported and Visual Element should support them by default.
UI with no gradients? no shadows? no glow? These are game UIs. Every studio that wants to add some juice needs to build a custom UI Stack?
Please reconsider not supporting these features, not having them makes USS feel incomplete.
2 Likes
Nobody said we won’t ever support box-shadows or the other effects. We will. We know they are important.
This update is just about what we are shipping at this time in 6.3. Now that we have some of the bigger foundational bits done, we can start to work on these effects next.
In the meantime, we also plan to ship ready-to-use samples that replicate these effects using the existing features. These can come sooner before we have first-class support.
15 Likes
So, just to double check, if we do need to do glow on text - this wont exactly help right now will it?
Just want to see if I do need to update to 6.3 to do it, since right now I am trying to do this sort of uis:
I have managed this with a bloom shader on render texture, but it gets REALLY difficult to control since it applies to the whole UI as whole instead of to a specific element/s. My biggest concern is the Text Glow, I want to control the intensity of it individually somehow, but since its a full screen effect right now its VERY hard to tune - (plus you cant really defined HDR colors with USS AFAIK)… Maybe a future upgrade
If, you have any pointers how one would implement this with the current features it would be great - still need to do some exploring with this new shader bits. Particularly on text :).
Good Job on the release though!
Just an idea: maybe you can have two Label elements one on on top of the other with the one underneath being blurred using the new blur filter. Maybe to make it more easy to work with you can nest the second Label inside the first one and then apply position: absolute; top: 50%; left: 50%; translate: -50% -50%; on it to make sure that they always stay in the same spot (the parent Label would also need position: relative). And, if you want to keep the texts in sync, you can also create a custom element that does all the things described above and also assigns the text to both label elements.
In theory it should work but I haven’t tried it.
If you don’t want to have two text elements, you could achieve this with a custom filter (similar, but not exactly like blur) you can apply a glow on individual text, but the text must be in its own element (e.g. without borders). Only the the text (assuming there are also no children VE), will be post-processed (i.e. it won’t be a full-screen quad). The only downside with this is that your filter would need to perform both the horizontal and vertical blur in the same pass in order to preserve the original result (blur would be additive). Eventually we might allow more complex multi-pass effects while allowing to keep intermediate results for reuse in a later pass.
If you have dozens of these you might run into performance issues though, until we support atlased filters (we would draw all text elements into a larger RT, post-process them all at once, and use the result as an atlas). Let us know if you experience performance problems of that sort as it will help us prioritize this improvement.
I have been trying to avoid this for a while, but I might actually go this route the bloom/blur makes the text actually quite hard to read in some instances.
@AlexandreT-unity I am going to give this a shot, am I understanding correctly that this sort of shader will apply to nested children, so I create a panel and add children in it, the shader will apply to all of them? Not a issue, I can create a custom element that Handles that, but still good to know.
It doesn’t need to be a separate panel. You can assign the shader to a VisualElement and it will apply to it and its children which inherit it (unless another child overrides it or unsets it explicitly)
This is nice, but is there an ETA for HDRP support? Is it even planned?
1 Like
You can achieve a basic glow effect using the text-shadow property with a sufficient amount of Blur Radius. Just make sure to increase the padding in the Font Asset parameters (for example it’s set to 50 with my test UI seen below).
See the Unity Manual.
2 Likes
I tried that before, maybe I didnt increase the blur radius enough before, I am going to experiment.
With that mind do you have trick for HDR colors in toolkit - any sort of metadata I can pass to the effect shader somehow - or any other trick, I am trying to basically pin point what gets “bloomed” by the shader, thresholds are really hard to define. My future “work around” is to define specific color codes that will get Bloomed and make a specialized shader that just blooms those specific colors, but this feels a bit… too hacky ahaha.
It’s planned but we can’t share any ETA for the moment.
We plan to add support for custom mesh data. It would enable you to modify the meshes that we generate (e.g. to add a flag, a color or whatever) on CPU. Then in your custom shader you could, for example, use this data to identify when to do special shading. Of course this would also enable you to submit your own custom meshes with their extra mesh data.
1 Like
I guess this is a bug in 6000.3.0b3 - i created a Color property but in the UI Builder inspector it shows as a value:
Or did I do something wrong?
Also - is there any way to create a multi-pass filter, like do manual blits as part of a more complex filter?
thanks,
This is a known issue, you will be able to track this here:
https://issuetracker.unity3d.com/product/unity/issues/guid/UUM-119220
Yes just click the “+” button at the bottom of your filter function definition. You can create a “stack” of passes, not an arbitrary graph of passes, meaning that you can’t use the RT from the first pass in the 3rd pass: pass N can only read from pass N-1. We would like to add the support of graphs in the future though. Let us know if it would be relevant to your effect.
Thanks for the quick reply. That makes sense about stack of passes…looking forward to being able to read from other intermediate textures or have more custom control over the rendering.
I’m guessing for the blur filer you’ve got your own implementation that doesn’t use the exposed custom filter system…
I’ve noticed there are also many errors when trying to develop custom filters. For example during the development process I might be adding or reading parameters, and currently many errors are thrown and even UI builder refuses to render once it gets confused 
Sorry this isn’t a bug report just general feedback.
Yes there are many effects I would like to implement, but they would required access to arbitrary intermediate textures. Basically I was looking at porting my UIFX asset (for uGUI) to UITK. For now I’ll have to settle for porting over the simpler effects.
But even just being able to access the original baked texture would be super handy. Ultimately I would love a custom c# method to control rendering, where I could create intermediate RenderTextures and do custom blitting. But I’m sure you already have some ideas on the approach that’s best for UITK.
Thanks,
Question: when making a custom filter - is the texture that’s passed into _MainTex using pre-multiplied or straight alpha? I presume pre-multiplied, but I couldn’t find anything in the documentation.
Thanks,
That is correct - premultiplied because it’s directly the output of the previous pass.
The reason why we’re going with an explicitly defined stack (and eventually a graph) and tight control over the passes is that we intend to batch these post-processing operations in the future. For example, if you want to apply a grayscale filter to inventory items, and you happen to have 40 of them displayed, we wouldn’t want to use 40 render textures and 40 individual render passes. Our plan is to use an atlas that will contain all the post-processing results. This atlas can then be used as the source of the next filtering steps, if applicable. This is also why effect definitions include margins and why custom effect shaders must read from the specified rectangle: in the future there might be other UI parts outside the rectangle. Not saying we won’t ever open up fully scripted custom filters, but first we’d rather get nicer dependencies and atlasing.
4 Likes
I’m having issues where the background image becomes white for elements with a border radius after applying the filter.If I set Border Radius back to 0, it looks fine.
Also, the resolution of everything seems to be dropping. For example, this is from applying an opacity filter to the root element, with value 1.
Before:
After:
Any thoughts here? Thank you!