《Unity着色器圣经》4.1.2. | Tan function.

目录索引

翻译之前译者想先说一个问题,这篇文章的原文, 有的地方代码中对于UV.y , 文字说明部分一直说的是UV中的V. 其实这是一回事, UV是个float2, 它的x值对于UV的U, y值对应UV的V.

译文

这个三角函数指的是一个角度的tangent值，即：对边与邻边的比率。
其语法如下：

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

像sin和cos一样，tan在计算几何图形和重复图案时非常有用。实现的一个实际例子是生成类似网格的程序掩模，我们可以使用它在对象上生成全息投影效果。为此，我们可以简单地计算片段着色器阶段中某个UV坐标处的tan的绝对值。

我们将通过生成一个类型为“Unlit shader”的新着色器来举例说明，我们将其称为USB_function_TAN。我们将首先声明一个color和一个range变量，其中range是为了改变我们想要投影的行数。

Shader "USB/USB_function_TAN"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _Color ("Color", Color) = (1, 1, 1, 1)
        _Sections ("Sections", Range(2, 10)) = 10
    }
    SubShader { ... }
}

值得一提的是，我们将把这个着色器应用于unity中自带的3D对象。之所以说这一点，是因为我们将对UV的V坐标进行操作。

如图4.1.2b所示，这样的视觉效果具有透明度；因此，我们必须在SubShader中添加混合选项，以便将黑色识别为alpha通道。

SubShader
{
    Tags {"RenderType"="Transparent" "Queue"="Transparent"}
    Blend SrcAlpha OneMinusSrcAlpha

    Pass { ... }
}

我们将声明全局连接变量，然后我们将进入片段着色器阶段，添加允许我们在对象上投影水平线的功能。

float4 _Color;
float _Sections;

fixed4 frag (v2f i) : SV_Target
{
    float4 tanCol = abs(tan(i.uv.y * _Sections));
    tanCol *= _Color;
    fixed4 col = tex2D(_MainTex, i.uv) * tanCol;

    return col;
}

在前面的例子中，我们已经声明了一个叫做tanCol的四维向量。然后我们把tan(i.uv.y * _Sections)的绝对值赋值给这个变量 。随后，tanCol和_Color属性做乘法, 最终这个值和纹理相乘得到最终颜色值。现在我们就可以看到条形效果了.

我们可以在前面的操作中发现一个小细节，即V的tan返回的数值范围小于“0”，大于“1”。因此，最终的颜色将在计算机屏幕上饱和(超出范围,或者叫做过曝)。为了解决这个问题，我们可以使用clamp函数，将值限制在0.0f和1.0f之间。

fixed4 frag (v2f i) : SV_Target
{
    float4 tanCol = clamp(0, abs(tan(i.uv.y * _Sections)), 1);
    tanCol *= _Color;
    fixed4 col = tex2D(_MainTex, i.uv) * tanCol;

    return col;
}

我们可以使用_Time变量来实现条纹间距的变化。要做到这一点，我们只需在前面的操作中加或者减这个属性到V坐标上即可(下面的例子是减去了_Time.x)。

fixed4 frag (v2f i) : SV_Target
{
    float4 tanCol = clamp(0, abs(tan((i.uv.y - _Time.x) * _Sections)), 1);
    tanCol *= _Color;
    fixed4 col = tex2D(_MainTex, i.uv) * tanCol;

    return col;
}

---

原文对照

This trigonometric function refers to the tangent of an angle, that is: • The ratio of the opposite side to the adjacent side.
Its syntax is as follows:

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

Like sin and cos, tan is very useful in the calculation of geometric figures and repeating patterns. A practical example of implementation is the generation of a grid-like procedural mask, which we can use to generate the holographic projection effect on an object. For this purpose, we can simply calculate the absolute value of the tangent at one of the UV coordinates within the fragment shader stage.

We will exemplify by generating a new shader of type “Unlit Shader,” which we will call USB_function_TAN. We will start by declaring a color property and a range to increase or decrease the number of lines we want to project.

Shader "USB/USB_function_TAN"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _Color ("Color", Color) = (1, 1, 1, 1)
        _Sections ("Sections", Range(2, 10)) = 10
    }
    SubShader { ... }
}

It’s worth mentioning that we will apply this shader to 3D objects included in the software. The reason for saying this point is due to the operation we will perform on the V-coordinate of the UV.

As we can see in Figure 4.1.2b, such a visual effect has transparency; therefore, we will have to add blending options in the SubShader so that the black color will be recognized as an alpha channel.

SubShader
{
    Tags {"RenderType"="Transparent" "Queue"="Transparent"}
    Blend SrcAlpha OneMinusSrcAlpha

    Pass { ... }
}

We will make sure to declare the global or connection variables, and then we will go to the fragment shader stage to add the functionality that will allow us to project the horizontal lines on the object.

float4 _Color;
float _Sections;

fixed4 frag (v2f i) : SV_Target
{
    float4 tanCol = abs(tan(i.uv.y * _Sections));
    tanCol *= _Color;
    fixed4 col = tex2D(_MainTex, i.uv) * tanCol;

    return col;
}

In the previous example, we have declared a four-dimensional vector called tanCol. We have stored the result of the absolute value for the calculation of the tangent; of the product between the V coordinate and the _Sections property in it. Subsequently, the factor between the texture and the vector tanCol has been stored in the four-dimensional vector named col. Therefore, the texture that we assign to the _MainTex property will be interlined.
A small detail that we can find in the previous operation is that the tangent of V returns a numerical range less than “zero” and greater than “one.” Therefore, the final color will be saturated on the computer screen. To solve this problem, we can use the clamp function, limiting the values between 0.0f and 1.0f.

fixed4 frag (v2f i) : SV_Target
{
    float4 tanCol = clamp(0, abs(tan(i.uv.y * _Sections)), 1);
    tanCol *= _Color;
    fixed4 col = tex2D(_MainTex, i.uv) * tanCol;

    return col;
}

We can use the _Time variable again to generate movement in the spacing. To do this, we simply subtract or add this property to the V coordinate in the previous operation.

fixed4 frag (v2f i) : SV_Target
{
    float4 tanCol = clamp(0, abs(tan((i.uv.y - _Time.x) * _Sections)), 1);
    tanCol *= _Color;
    fixed4 col = tex2D(_MainTex, i.uv) * tanCol;

    return col;
}