Unity Shader 基础之函数库（三）上：零基础也能学会的数学曲线

2024-02-17 09:32:21

引言

数学曲线在游戏开发中无处不在。它们可用于创建各种形状，从简单的圆圈到复杂的贝塞尔曲线。在 Unity 中，我们可以使用着色器来创建和着色曲线。

创建数学曲线

要创建数学曲线，我们需要做的就是编写一个着色器并将其附加到材质。着色器将负责计算曲线的顶点位置和颜色。

以下是一个创建简单圆圈曲线的着色器示例：

Shader "Custom/Circle" {
    Properties {
        _Radius ("Radius", Float) = 1
        _Color ("Color", Color) = (1, 1, 1, 1)
    }

    SubShader {
        Pass {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            struct appdata {
                float4 vertex : POSITION;
            };

            struct v2f {
                float4 vertex : SV_POSITION;
                float4 color : COLOR;
            };

            v2f vert (appdata v) {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.color = _Color;
                return o;
            }

            fixed4 frag (v2f i) : SV_Target {
                float dist = distance(i.vertex.xy, float2(0, 0));
                if (dist > _Radius) {
                    discard;
                }
                return i.color;
            }
            ENDCG
        }
    }
}

这个着色器计算圆圈上顶点的距离，并只绘制在半径内的顶点。

为曲线着色

一旦我们创建了曲线，我们就可以为它着色。我们可以使用着色器的片段着色器来执行此操作。

以下是如何为曲线着色的片段着色器示例：

fixed4 frag (v2f i) : SV_Target {
    float dist = distance(i.vertex.xy, float2(0, 0));
    float color = smoothstep(_Radius, _Radius + 0.1, dist);
    return float4(color, color, color, 1);
}

这个片段着色器根据顶点到圆圈中心的距离为曲线着色。

让曲线动起来

最后，我们可以使用脚本让曲线动起来。我们可以通过更改着色器中的统一变量来实现这一点。

以下是如何使曲线绕圆圈旋转的脚本示例：

using UnityEngine;

public class RotateCurve : MonoBehaviour {
    public float speed = 1;

    private Material material;

    private void Start() {
        material = GetComponent<Renderer>().material;
    }

    private void Update() {
        material.SetFloat("_Rotation", Time.time * speed);
    }
}