《Unity着色器圣经》4.1.7. | Frac function.

目录索引

译文

这个函数返回一个值的小数部分，也就是说，它的十进制值，例如，1.534f的frac返回0.534f；

frac (3,27) = 0,27f It’s the same as 3,27f – 3.
frac (0,47) = 0,47f
frac (1,0) = 0,0f

语法如下：

float frac (float n)
{
    return n - floor(n);
}

float2 frac (float2 n);
float3 frac (float3 n);
float4 frac (float4 n);

我们可以在多种操作中使用Frac，如噪声计算、随机重复模式等。

为了理解这个概念，我们将执行以下操作：我们将创建一个类型为“Unlit shader”的新着色器，我们将其称为USB_function_FRAC。我们将开始添加一个名为“size”的属性，稍后将使用该属性来增加或减少圆的大小。

Shader "USB/USB_function_FRAC"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _Size ("Size", Range(0.0, 0.5)) = 0.3
    }
    SubShader
    {
       ...
        Pass
        {
           ...
            float _Size;
           ...
        }
    }
}

我们将执行的第一个操作是乘以UV坐标，以在片段着色器阶段获得重复图案。

fixed4 frag (v2f i) : SV_Target
{
    // increase the amount of texture repetitions
    i.uv *= 3;
    fixed4 col = tex2D(_MainTex, i.uv);

    return col;
}

如果我们回到Unity并将纹理集指定为“clamp”，我们将在图4.1.7a中获得类似的结果。我们可以注意到，图像中的边缘纹素是随着自身拉伸的。

在这种情况下，我们可以使用“frac”函数返回UV坐标的分数值，以生成定义的重复图案。

fixed4 frag (v2f i) : SV_Target
{
    // increase the amount of texture repetitions
    i.uv *= 3;
    float2 fuv = frac(i.uv);

    fixed4 col = tex2D(_MainTex, fuv);

    return col;
}

值得一提的是，对纹理执行此操作并不是很有用，因为我们可以从Inspector轻松地将其设置为“Repeat”模式。

对于一个更实用的示例，让我们使用圆沿纹理生成一个图案。

fixed4 frag (v2f i) : SV_Target
{
    // increase the amount of texture repetitions
    i.uv *= 3;
    float2 fuv = frac(i.uv);
    // generate the circle
    float circle = length(fuv - 0.5);
    // flip the colors and return an integer value
    float wCircle = floor(_Size / circle);
    // fixed4 col = tex2D(_MainTex, fuv);

    return float4(wCircle.xxx, 1);
}

如果我们注意返回值，我们会注意到RGB（wCircle.xxx）中的输出颜色使用了相同的通道。如果我们修改_Size属性的值，我们可以增加或减少圆的大小。

---

原文对照

This function returns the fraction of a value, that is to say, its decimal values, e.g., frac of 1.534f returns 0.534f; why? It is due to the operation performed in the function.

frac (3,27) = 0,27f It’s the same as 3,27f – 3.
frac (0,47) = 0,47f
frac (1,0) = 0,0f

Its syntax is as follows:

float frac (float n)
{
    return n - floor(n);
}

float2 frac (float2 n);
float3 frac (float3 n);
float4 frac (float4 n);

We could use Frac in multiple operations like noise calculation, random repeating patterns, and much more.

To understand the concept, we will do the following: We will create a new shader of type “Unlit Shader,” which we will call USB_function_FRAC. We will start adding a property called “size” that we will use later to increase or decrease the size of a circle.

Shader "USB/USB_function_FRAC"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _Size ("Size", Range(0.0, 0.5)) = 0.3
    }
    SubShader
    {
       ...
        Pass
        {
           ...
            float _Size;
           ...
        }
    }
}

The first operation we will perform is to multiply the UV coordinates to obtain a repeating pattern in the fragment shader stage.

fixed4 frag (v2f i) : SV_Target
{
    // increase the amount of texture repetitions
    i.uv *= 3;
    fixed4 col = tex2D(_MainTex, i.uv);

    return col;
}

If we go back to Unity and assign a texture set to “clamp,” we will obtain a similar result in figure 4.1.7a. We can notice that the edge texels in the image are stretched along with itself.

In this case, we could use the “frac” function to return the fractional value of the UV coordinates to generate a defined repeating pattern.

fixed4 frag (v2f i) : SV_Target
{
    // increase the amount of texture repetitions
    i.uv *= 3;
    float2 fuv = frac(i.uv);

    fixed4 col = tex2D(_MainTex, fuv);

    return col;
}

It is worth mentioning that performing this operation on a texture is not very useful, since we can easily set it to “Repeat” mode from the Inspector.

For a more practical example, let’s generate a pattern along the texture using a circle.

fixed4 frag (v2f i) : SV_Target
{
    // increase the amount of texture repetitions
    i.uv *= 3;
    float2 fuv = frac(i.uv);
    // generate the circle
    float circle = length(fuv - 0.5);
    // flip the colors and return an integer value
    float wCircle = floor(_Size / circle);
    // fixed4 col = tex2D(_MainTex, fuv);

    return float4(wCircle.xxx, 1);
}

If we pay attention to the return value, we will notice that the same channel is being used for the output colors in RGB (wCircle.xxx). If we modify the value of the _Size property, we can increase or decrease the size of the circles.