![]() From a brief bit of research, it seems like world-space UI behaves a bit better in URP, but will still have issues with incorporating post-processing effects. Note that this solution is only intended for HDRP projects, and not those using URP. To help out, I’ve set up a repository with this sample project and a package containing the two needed materials and their shaders here. Now that you have these basic shaders set up, you can also modify them to add other effects you might want to incorporate into your UI. In the construction site demo scene, you can clearly see the difference between the UI that reads “WOOD” without the materials applied and the UI that reads “JIGSAW” that does have the materials applied. Plug materials made from these shaders into the appropriate UI elements in your project, and everything should work as expected. There may be a good explanation for this, but it seems like a quirk of Shader Graph to me. Just set that “Rendering Pass” property correctly here as well.ĭo note that the “_Color” property used for the mask needs to remain exposed even though we don’t want to change it directly. These color and alpha results feed into the Unlit Master node, and everything should be working fine. This is strictly used for its alpha property to get the shape of the text, as typed in the editor. The Color Mask output is multiplied by a Vertex Color node, which is pulling the “Color” property from the Text element (which is different from the “_Color” property we are pulling in for our Color Mask).Īnother “_MainTex” property is needed and fed into a Sample Texture 2D node. The “Mask Color” input on the Color Mask node should be set to white in order for the _Color property to be applied as expected. Feeding into this Color Mask node is a Color property that must have a Reference name of “_Color” to ensure that the Text element sends the masking information to the correct property. We must incorporate a Color Mask node to pull the masking information from the Text element. The other shader we need is for Text elements, which works similarly to the Image’s shader, but there are a few key changes. Once it is set to render “After Post-process,” everything should appear as expected. Since we want the UI to be overlaid atop any post-processing and keep the UI clear, we just have to change the Rendering Pass setting on the Unlit Master node, as shown below. This is a simple thing to change in Shader Graph, and it will probably come up often in your HDRP project. There’s still another issue, though, and that’s the post-processing effects. If we apply a material with this shader to an Image element in our world-space UI, those color problems we were having disappear, and this setup allows us to interact with the UI elements in the standard ways, whether we are using scripts or the animator. We split out the alpha channels of both the Vertex Color and Sample Texture 2D to feed into the alpha channel of the Unlit Master node. The Vertex Color node is pulling the “Color” property from the Image element. We tie our _MainTex property into a Sample Texture 2D node and multiply that by the output of a Vertex Color node. It must be given the Reference name “_MainTex” as this is what the Image element will be looking for. The only property you will have to add to this shader is a Texture 2D. The more basic shader we will create is for Image elements, which will impact everything from sprites to backgrounds to buttons in your UI. Both of these shaders are created by using an Unlit Graph under the HDRP shader menu (Create -> Shader -> HDRP -> Unlit Graph). Let’s step through the two shaders I created to get things working right. It took a bit to find the correct way to correct these issues, mainly because there seems to be very little written about how the UI elements’ shaders operate. ![]() Luckily, the fixes are pretty easy to implement. Neither issue is acceptable, especially since you’re obviously looking for a polished look in your HDRP project. In the screen grab below, you can see that applying a depth of field effect just destroys the readability of the entire UI, and it’s basically a mess. This won’t do!Īnother big deal-breaker comes along when you start applying post-processing effects. You can see how the selected white text color (with full alpha) looks dingy compared to the color picker swatch. The nice, popping white text you might want appears a bit washed out and dull. Once you plop in a few canvases, images, and text like you’ve always done in the past, you notice a few problems.įirst off, colors aren’t represented accurately. You’re working away on getting your beautiful scenes looking just so, and then you start to add in a few in-world UI elements*.
0 Comments
Leave a Reply. |