Unity polar coordinate Shader effects, and using Instanced Property to achieve different parameters of the same material

Unity polar coordinate effects

first look at the effect

Unity polar coordinate Shader effects

Sometimes we need to place some hotspots in the scene, and the interaction will appear after the user clicks. Of course, there are many ways to realize this function. As a programmer, of course, we should use the simplest implementation. Implement it programmatically with a shader.

What are polar coordinates

Polar coordinates, also known as polar coordinate system. It is a method of representing a point in a plane Cartesian coordinate system, where each point is represented by the distance from the origin and the angle between the line segment from the origin to the point and a fixed axis positive semi-axis (usually θ=0) (Counterclockwise is positive) Two values ​​are determined. These two values ​​are usually denoted by (r, θ), where r represents the distance and θ represents the direction angle, ranging from 0 degrees to 360 degrees. The polar coordinate system is often used to describe circular and symmetrical figures, and to describe rotational symmetry more naturally in some physical problems.
An effect like this wave is generated from the middle to spread out, which is easy to achieve using the polar coordinate system.

Realization of polar coordinates

Take ASE as an example, convert UV to polar coordinates, then take a simple gradient texture, and finally multiply it by a color to output.
The meaning of each parameter is introduced below:

Parameter leakage is shown in the figure above, where:

parameter	significance
MainColor	Output color, HDR color
Size	size, 0-1
Texture	A special texture, please see the picture below
Interval	Interval, 0-1, 0.5 means the size of the illuminated part and the non-illuminated part are the same
Scale	how many waves
Offset	Wave Movement 0-1

That special texture map is as follows:

How to make different objects use the same material, but have different parameters?

The effect is as follows, both objects use the same material, but their playback speed can be adjusted separately:

Unity Instanced Properties Demo

This is mainly using the Instanced Property in Shader.
Introduction to Instanced Property, this is the chat-GPT I asked directly:
Instanced Properties (Instanced Properties) is a special type of property in Unity Shader, which can achieve the following functions:

1. By instantiating properties, we can create multiple instantiated objects at the same time and assign different property values ​​to each object. This means we can create multiple objects with different properties without writing a separate shader for each object.

2. Instancing properties can also be used to implement efficient drawing techniques such as GPU Instancing. In GPU instantiation, we can render a large number of instantiated objects in one Draw Call at one time, thereby reducing the workload of CPU and GPU and improving rendering performance.

3. Instancing properties can also be used to dynamically adjust a model's properties in the Unity Editor without recompiling the Shader. In the Unity Editor, we can directly adjust the attribute value of each instance, so as to quickly preview the effect of Shader on different models.

In general, instanced properties are a very useful feature in Unity Shader, which can help us achieve more efficient and flexible rendering techniques.

Modifying Instanced Property in the code mainly uses the method Rendererof the class SetPropertyBlock. code show as below:

using UnityEngine;
using Random = UnityEngine.Random;

public class WaveHotPoint : MonoBehaviour
{
    
    
    [SerializeField] private float Speed;
    private Renderer _renderer;
    private MaterialPropertyBlock propBlock;
    private float offset;
    private static readonly int OffsetIndex = Shader.PropertyToID("_Offset");

    private void Awake()
    {
    
    
        _renderer = GetComponent<SpriteRenderer>();
        propBlock = new MaterialPropertyBlock();
        _renderer.GetPropertyBlock(propBlock);

        offset = Random.value;
    }

    private void Update()
    {
    
    
        offset = (offset - Speed * Time.deltaTime) % 1f;
        propBlock.SetFloat(OffsetIndex, offset);
        _renderer.SetPropertyBlock(propBlock);
    }
}

But it should be noted that Instanced Property cannot be used in UGUI, because CanvasRendererthe classes in UGUI have no SetPropertyBlockmethods. I asked chat-GPT, and the method given is to call SetPropertyBlockthe method of the material class, but the material class does not have this method, so I don't know how to solve it. If you know, please tell me in the comment area, thank you! ! !