《Unity着色器圣经》4.1.6. | Length function.

目录索引

译文

正如其标题所提到的，length函数是指表示两点之间距离的大小。这个功能在创建几何形状时很有用，例如，我们可以生成圆形或具有圆角的多边形。

其语法如下：

float length (float n)
{
    return sqrt(dot(n,n));
}

float length (float2 n);
float length (float3 n);
float length (float4 n);

像往常一样，我们将创建一个新的着色器类型“Unlit shader”，我们将其称为USB_function_LENGTH。这次我们将在程序中使用一些函数来画一个圆。我们将首先添加一些属性用于稍后放大、居中和平滑形状。

Shader "USB/USB_function_LENGTH"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _Radius ("Radius", Range(0.0, 0.5)) = 0.3
        _Center ("Center", Range(0, 1)) = 0.5
        _Smooth ("Smooth", Range(0.0, 0.5)) = 0.01
    }
    SubShader
    {
        ...
        Pass
        {
            ...
            float _Smooth;
            float _Radius;
            float _Center;
            ...
        }
    }
}

要创建一个圆，我们只需计算UV坐标值的大小并减去半径。其表示形式如下：

float circle (float2 p, float radius)
{
    // let’s create the circle
    float c = length(p) - radius;
    return c;
}

然而，正如我们在图4.1.6a中看到的，前面的操作返回了一个模糊的圆，从点0,0f开始，到点1,0f结束，我们期望的结果对应于一个居中且更紧凑的圆形。

为此，我们可以在函数中添加一个新的参数，使我们能够将圆心确定在应用该材质对象的中心处。

float circle (float2 p, float center, float radius)
{
    // the argument center is equal to a range
    // between 0,0f and 1,0f
    float c = length(p - center) - radius;
    return c;
}

但是，该圆还是模糊的。如果我们想控制模糊量，我们可以使用smoothstep函数，正如我们已经知道的，它会在两个值之间生成线性插值。

float circle (float2 p, float center, float radius, float smooth)
{
    float c = length(p - center);
    return smoothstep(c - smooth, c + smooth, radius);
}

在之前的操作中，我们添加了一个名为“smooth”的新参数，它将允许我们控制模糊量。然后，我们可以在片段着色器阶段应用此函数，如下所示。

float circle (float2 p, float center, float radius, float smooth)
{... }

fixed4 frag (v2f i) : SV_Target
{
    float c = circle (i.uv, _Center, _Radius, _Smooth);
    return float4(c.xxx, 1);
}

正如我们所看到的，我们已经创建了一个名为“c”的一维变量，它已经用圆的默认值初始化。必须注意颜色输出，因为三个输出使用相同的通道（R）(c.xxx)。

---

原文对照

As its title mentions, length refers to the magnitude that expresses the distance between two points. This function is handy when creating geometric shapes, e.g., we can generate circles or polygonal shapes with rounded edges.

Its syntax is as follows:

float length (float n)
{
    return sqrt(dot(n,n));
}

float length (float2 n);
float length (float3 n);
float length (float4 n);

As usual, we will create a new shader type, “Unlit Shader,” which we will call USB_function_ LENGTH. We will use some functions to represent a circle in our program this time. We will start by adding properties that we will use later to enlarge, center, and smooth the shape.

Shader "USB/USB_function_LENGTH"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _Radius ("Radius", Range(0.0, 0.5)) = 0.3
        _Center ("Center", Range(0, 1)) = 0.5
        _Smooth ("Smooth", Range(0.0, 0.5)) = 0.01
    }
    SubShader
    {
        ...
        Pass
        {
            ...
            float _Smooth;
            float _Radius;
            float _Center;
            ...
        }
    }
}

To create a circle, we simply calculate the magnitude of the UV coordinates and subtract the radius. Its representation would look like the following:

float circle (float2 p, float radius)
{
    // let’s create the circle
    float c = length(p) - radius;
    return c;
}

However, as we can see in Figure 4.1.6a, the previous operation returns a blurred circle starting at the point 0,0f and ending at 1,0f, and the result we are looking for corresponds to a centered and more compact shape.

For this purpose, we can add a new argument in the function that allows us to center the circle on the object to which we are applying the material.

float circle (float2 p, float center, float radius)
{
    // the argument center is equal to a range
    // between 0,0f and 1,0f
    float c = length(p - center) - radius;
    return c;
}

However, the circle will still be blurred. If we want to control the amount of blurring, we can use the smoothstep function, which, as we already know, generates a linear interpolation between two values.

float circle (float2 p, float center, float radius, float smooth)
{
    float c = length(p - center);
    return smoothstep(c - smooth, c + smooth, radius);
}

In the previous operation, we have added a new argument called “smooth,” which will allow us to control the amount of blurring. Then we can apply this function in the fragment shader stage as follows.

float circle (float2 p, float center, float radius, float smooth)
{... }

fixed4 frag (v2f i) : SV_Target
{
    float c = circle (i.uv, _Center, _Radius, _Smooth);
    return float4(c.xxx, 1);
}

As we can see, we have created a one-dimensional variable called “c,” which has been initialized with the default values of the circle. It is essential to pay attention to the color output because the same channel (R) is being used for the three outputs (c.xxx).