虚幻4渲染编程（UI篇）【第四卷：DrawMathFunctionInMaterial】

MY BLOG DIRECTORY：

YivanLee：专题概述及目录

INTRODUCTION：

我们的游戏里经常会用到统计功能，需要制作各种曲线图像，上一篇文章我做的雷达统计图，然后下面就有人在问曲线统计图怎么做，我这里试一下在shader里用很少的计算来制作统计曲线图。

Forward declaration：

本文章内容过于浅显rua鸡，如有错误还请斧正。

MAIN CONTENT：

【1】f(x) = kx + b

材质节点如下：

材质的思路非常简单，首先计算坐标系，把UV坐标变换成y轴向上，o点在面片中心的状态，如UV坐标一开始就是这样了那就不需要变换了。然后我们构造一个fx，把x值输入到fx里做自变量然后由这个函数计算出fx的值。然后比较fx的值和UV的y坐标的距离。

然后我们把它clamp在【0，1】的范围内然后再反一下。

然后再把函数值稍稍加一点上去，让离函数曲线比较近的像素的值能大于1，然后再用floor把大于1的值等于1，小于1的值为0，这样就画出了我们的函数。后面如果想画其他函数只需要变化fx节点即可

【2】f(x) = sin(x)

【3】f(x) = Ax^2 + b

【4】f(x) = a^x

【5】Piecewise function

我们先把我们的材质再美化一下

做了一个坐标系方便看结果是否正确。下面就开始做曲线统计表。假设现在的游戏里有四个统计时段，玩家的时间和得分分别是【0，0】，【2，4】，【6，1】，【8，8】，我们用线性函数的两点式。

$f(x)=(\frac{x-x_{1}}{x_{1}-x_{2}} + \frac{y_{1}}{y_{1}-y_{2}})(y_{1}-y_{2})$

我的代码如下：

        float TwoPointFunction(float2 p1, float2 p2, float x)
{
    float fx = ((x - p1.x)/(p1.x - p2.x) + p1.y / (p1.y - p2.y)) * (p1.y - p2.y);
    fx = x > p1.x ? fx : 0;
    fx = x < p2.x ? fx : 0;
    return fx;
}

float CustomNode_FX(float x)
{
    float Ret = 0;

    float2 p1 = float2(0, 0);
    float2 p2 = float2(2, 4);
    float2 p3 = float2(6, 1);
    float2 p4 = float2(8, 8);

    Ret  = TwoPointFunction(p1, p2, x);
    Ret += TwoPointFunction(p2, p3, x);
    Ret += TwoPointFunction(p3, p4, x);

    return Ret;
}

效果如下：