HDR shader for UI

[marsh sundial]

Can you show what the shader looks like? Did you use the UI shader type?

[tawdry heath]

Interesting, I switched the parent canvas to "screen space - overlay" instead of "screen space - camera" and now it looks like this...

At least its white again lmao

And now I dont see the entire UI in scene view, only see it in game view

[tawdry heath]

I made my own one with the tutorial
And the tutorial had the same goal - to apply glow to a single object

[marsh sundial]

The shader type looks like Sprite Lit, sprites and UI are not the same when it comes to shaders

[tawdry heath]

Well, the "Resume" thingy I showed is technically a sprite. I made a mockup of my UI in photoshop and added it into the game through images
Now I wanna make it actually functional as buttons and also the glow

I should've mentioned this probably😅

[marsh sundial]

Sprite? If you want it to work as functional button, you would definitely want it to be an UI element no?

[tawdry heath]

Well, I can show my mock up and give a quick explanation on how I want it to work

Idk how I'd do it with UI elements and not images

[marsh sundial]

And even if you wanted it to be sprite, Unlit sounds more reasonable type, I don't think you need any lights for the button

[marsh sundial]

UI has literal button elements with text component in it

[tawdry heath]

Yea, but then I can't make it look the way I want, can I?

This is how I envision the UI
The glow on Resume (which is what I'm trying to achieve) represents the buttons glowing when hovered over to make it more interactive

[marsh sundial]

Two things that are bit weird here though. Firstly, the alpha is multiplied by the HDR color as well which means it might get amplified, you should drag it straight from the texture slot to the output. Second is the glow texture which I assume you don't really need for anything. Single HDR color multiplied by the main texture sound fine

[tawdry heath]

Don't mind my artistic abilities😂 I'm a beginner both in Photoshop and Unity

[marsh sundial]

How so?

[tawdry heath]

Well I did try at some point to reroute the alpha as you said but it changed nothing
And the glow texture - yea, I probably dont need it, but I added it since I was following the tutorial step-by-step and the guy in the video needed it

[marsh sundial]

Now that I think about it. TMPro even has a glow effect built-in which you can use instead of post processing which would be better in many ways

[tawdry heath]

Oh, I tried the built-in glow in TMP and it looks horrible😅 It looks more like bold text than glow honestly

[tawdry heath]

Well idk, could I make the UI like shown on the picture with default UI buttons?

[marsh sundial]

Those buttons are literally just text aren't they?

[tawdry heath]

Yes

[marsh sundial]

then most definitely

[tawdry heath]

But then it doesnt fix the glow problem, does it?

Wait lemme show you

2min

[marsh sundial]

I think TMPro might even support HDR colors by default so you wouldn't need any extra shaders

[tawdry heath]

I cant find the glow option on TMP

I definitely remember I've tried it before but dont see it rn

[marsh sundial]

You can just increase the intensity of the color

Face -> Color is HDR color already

[tawdry heath]

Its not for some reason

[outer gale]

@tawdry heath HDR displays are a different thing from HDR color values
HDR color values are color values above 1 or above "100% bright"
Such colors are rendered differently and glow more with post processing bloom
HDR displays are able (to a limited degree) to increase their brightness to try to match the brightness of such intense colors

[marsh sundial]

And that's the face color, not the Vertex Color right?

[tawdry heath]

Good to know, thanks

[tawdry heath]

Yea, it says Face

[marsh sundial]

tonemapping is another way to fit wider range of HDR colors into regular display

[tawdry heath]

Its weird that just adding glow is so complicated😂

I would think it should literally take 5 minutes

[marsh sundial]

It took me 10 seconds

[marsh sundial]

That is weird, I'm using Unity 2022.3 and it is HDR by default. You can look for different shaders under the TMPro shader folder. Maybe they have made separate HDR shader for Unity 6 or something, I doubt they have removed the feature altogether

[tawdry heath]

If it was so easy maybe you can describe exactly how you did it?

And I'll see my mistake

[marsh sundial]

I created TMPro text, increased the intensity of the color and that's it. Literally took 10 sec. My Face Color just seems to have HDR and yours don't which is really weird

[tawdry heath]

Oh, I see

But okay, imagine I got it to work
Then how would I make the sliders glow, for example?

[tawdry heath]

You can see here what I mean

Or what if my buttons weren't just text, what if they had a texture and therefore required to be a sprite

[marsh sundial]

But why would they be texture when they are literally just text?

[tawdry heath]

Thats what I'm saying, imagine they weren't
Maybe I decide to change them, or maybe when I'll be making another game I'll decide to make them textured

Something like this for example

[marsh sundial]

Then I would go for shader that supports HDR coloring

[tawdry heath]

But Im using URP, doesnt it support HDR coloring?

[marsh sundial]

it does, but the default UI shader doesn't afaik. Similarly how you cannot now set HDR color for the TMPro face color, there's no way to increase the instensity for the button color without custom shader (afaik)

I should download Unity 6 anyways so I may try it bit later when I get to using it

[tawdry heath]

Aight

Thank you for your help bro

For now I'm gonna watch a couple more tutorials and if I still dont get it to work then I'll focus on something else

[marsh sundial]

@tawdry heath As weird as it is it seems to be true that Unity just removed HDR colors for all the TMPro shaders when before all of them were HDR. I have no clue why that would be but both the custom editor and the shader code have removed the support for HDR. Unity is clearly leaning towards the ui toolkit more and more but why they would remove a feature like that I have little idea

[tawdry heath]

Oh my god I finally figured something out. Its not perfect but it works for now

Its basically just a shader that adds pure white color to whatever you throw it at. Since the inactive buttons are gray, I now can selectively make one of them white and make it glow through global Bloom with higher threshold

At last

The only problem is the little sliders are also glowing, but I'll figure it out
Maybe also make them gray

[marsh sundial]

Are the texts textures or UI text?

[tawdry heath]

Textures

Thank you so much for your help bro😌

You sure helped me learn something and better understand how all this works

Its an interesting concept, rather than simply applying glow to a selected area/object (which I was hoping to easily do), instead making the object brighter to begin with and then applying glow to this object specifically by increasing the effect's threshold

[marsh sundial]

Then it sounds about right. For better quality text, you should really consider going back for the text components, shame HDR isn't supported though. The package includes a shader graph version of the shader which you could modify (quite easily) to support HDR

[tawdry heath]

Do you think I should switch to Unity 2021 or 2022 then?

I just downloaded Unity like 2 days ago for the first time, so I have no idea

[marsh sundial]

I would personally go for unity 6 with the modified shader graph shader route

[tawdry heath]

What does that mean?😅

The modified thingy

[marsh sundial]

Wait a minute, I'll try something else

[tawdry heath]

Sure

[marsh sundial]

actually there's better way, it's bit ugly but very easy

[tawdry heath]

I'm in

[marsh sundial]

So start by making the text as a TMPro button

[tawdry heath]

This?

[marsh sundial]

yup

I'll try a third thing...

[tawdry heath]

And this I assume?

[marsh sundial]

no

gimme a moment

[marsh sundial]

@tawdry heath Sorry, it took me some time. So there's basically two easy ways to use HDR colors for TMPro even though the editor onlu supports non HDR color (for whatever reason). 1) you can access the material via code and change the color to value more than 1. 2) you can modify the shader to allow HDR colors. The only problem with that is that it makes the material inspector look very ugly (check the attached image) but it should work functionally the same

[tawdry heath]

yooooo, it even works like this

idk why it works, I didnt change anything in the shader graph, but it does and its sick🤭

[tawdry heath]

The best thing is that it makes the text normal when choosing black color
Again, I have no idea why it would even work, but that will make it much easier to actually control the glow based on which button is hovered over

I'd think that it would make it.. Well, black

[marsh sundial]

The way you did it, you add the glow color to the base color. If you add black (all zeroes) to any color, you don't change the color in any way

[tawdry heath]

Yea, makes sense

Thats cool

[tawdry heath]

Yooo thanks

But how would you modify the shader?

[marsh sundial]

I'll show you, it's really easy

You just go into the TMPro object and click the Edit button to open the editor (visual studio or whatever)

All you need to do is add [HDR] here and from the very end of the file, remove this line completely (this is the part that makes the editor look ugly but allows HDR). Then just save the file and it should work

[tawdry heath]

Thank you

I have another question: using these HDR shaders and colors, wouldnt that mess something up if the game is played on an HDR-supported monitor?

And if so, I wouldnt even see it because mine doesnt support it😂

[marsh sundial]

Doesn't matter in the slightest

[tawdry heath]

Good

And where do you think I should start if I wanna start actually fundamentally understanding all this? By all this I mean how shaders work, how lighting and colors work etc

Because as a beginner its tough to choose where to start, gamedev is such a complex endeavor, especially if you're solo

You're a coder, a designer, an artist, a composer and 1000 other things lol

[marsh sundial]

@tawdry heath I realized this way breaks outlines and stuff but I actually just found the editor code for the shaders which makes it much easier and cleaner. In fact changing one bool from false to true changes everything to where it used to be in older unity versions (works for all color properties and all TMPro shaders)

[tawdry heath]

And whats that bool?🤔

[marsh sundial]

start by reverting what you just did (especially the line removal in the end)

[tawdry heath]

So just everything back to default?

[marsh sundial]

yeah, keeping the [HDR] doesn't hurt, in fact it should be that way (but it shouldn't really matter) either way

but the line removal is crucial

[tawdry heath]

Okay

[marsh sundial]

Then go into the folder of your project in the windows File Explorer (not visible via unity project view)

Then search for the code TMP_BaseShaderGUI.cs

this one

Then just open the file and search for DoColor method. The last boolean parameter there should be true and it should work.

If somewhere in the future the HDR colors disappear (well, the colors themseles shouldn't disappear that you have already set but the editor may not let you set them anymore) you need to go back to this file and change it again. I assume this could happen if you update your editor (very rarely you change the editor of the active project) and especially if you do update the TMPro package