Question How to get a "shimmer" shader to work?

Hi @devtanc,

I'm happy to see some question regarding a use case that UI Integration enables in 2023.2.

Let me try to address your question.
First, make sure you set your Shader Graph to use the Canvas Target (Built-in, URP or HDRP) as described in this how-to tutorial.

Now, making the "shimmer" effect is pretty trivial. Here's a break down of a texture-less possible implementation.


The above recipe takes a normalized coord. space to make the shimmer effect.

What's a bit less trivial, is that since you are using 9-sliced images, the UVs of the meshes generated by the Canvas will stretch as to making the borders of the UI elements stay the same will the middle stretches.
The generated mesh and its UVs will be based on the Canvas Scale Factor and Reference Pixels Per Unit, as well as the Image PPU settings and UI Image size.

In other words, the result will probably look like this:


So, to make fit nicely and not distort, you may either use a C# script to put normalized position in UV.zw, using the BaseMeshEffect API, or use Position and Object nodes to build a Canvas relative normalized position.

Here's how you may create it in Shader Graph with some branching using a Dropdown property in a Sub Graph.


And here's a code example of how you can put Normalized vertex positions in UV.zw channels with BaseMeshEffect.

Code (CSharp):

1. [AddComponentMenu("UI/Effects/Normalized Position As UV0.ZW", 82)]
2. public class NormalizedPositionAsUV0ZW : BaseMeshEffect
3. {
4.     protected NormalizedPositionAsUV0ZW()
5.     { }
6.  
7.     public override void ModifyMesh(VertexHelper vh)
8.     {
9.         Bounds bounds = new Bounds();
10.  
11.         UIVertex vert = new UIVertex();
12.         for (int i = 0; i < vh.currentVertCount; i++)
13.         {
14.             vh.PopulateUIVertex(ref vert, i);
15.             bounds.Encapsulate(vert.position);
16.         }
17.  
18.         for (int i = 0; i < vh.currentVertCount; i++)
19.         {
20.             vh.PopulateUIVertex(ref vert, i);
21.  
22.             var normalizedPosition = new Vector2(
23.                 Mathf.InverseLerp(bounds.min.x, bounds.max.x, vert.position.x),
24.                 Mathf.InverseLerp(bounds.min.y, bounds.max.y, vert.position.y));
25.  
26.             vert.uv0 = new Vector4(vert.uv0.x, vert.uv0.y, normalizedPosition.x, normalizedPosition.y);
27.  
28.             vh.SetUIVertex(vert, i);
29.         }
30.     }
31. }

What it'll look like in Canvas space:


And what it'll look like in element's space, using normalized positions from UV.zw:


I hope this helps. I'm considering putting some Samples for UI effects. Please let me know if you have any more questions or suggestions.