一、概述

? ? ? ? 这篇博客继续分析2D渲染的后续内容。

二、分析

? ? ? ? 函数DrawBezier（）绘制贝塞尔曲线。参数：p1起点、p2第一个控制点、p3第二个控制点、终点、color线条颜色、thickness线条粗细。

static void DrawBezier(const Vector2& p1, const Vector2& p2, const Vector2& p3, const Vector2& p4, const Color& color, float thickness = 1.0f);

? ?以下内容转载自：链接：https://www.jianshu.com/p/4966455cfcaa? ? ??

??贝赛尔曲线是应用于二维图形应用程序的数学曲线。贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋。它通过控制曲线上的四个点（起始点、终止点以及两个相互分离的中间点）来创造、编辑图形。其中起重要作用的是位于曲线中央的控制线。这条线是虚拟的，中间与贝塞尔曲线交叉，两端是控制端点。移动两端的端点时贝塞尔曲线改变曲线的曲率（弯曲的程度）；移动中间点（也就是移动虚拟的控制线）时，贝塞尔曲线在起始点和终止点锁定的情况下做均匀移动。? ??

? ? ? ? 下面是Flax Engine绘制贝赛尔曲线的方法：

????????查找要使用的段数。
????????绘制分段曲线。

void Render2D::DrawBezier(const Vector2& p1, const Vector2& p2, const Vector2& p3, const Vector2& p4, const Color& color, float thickness)
{
    RENDER2D_CHECK_RENDERING_STATE;

    const Vector2 d1 = p2 - p1;
    const Vector2 d2 = p3 - p2;
    const Vector2 d3 = p4 - p3;
    const float len = d1.Length() + d2.Length() + d3.Length();
    const int32 segmentCount = Math::Clamp(Math::CeilToInt(len * 0.05f), 1, 100);
    const float segmentCountInv = 1.0f / segmentCount;

    Vector2 p;
    AnimationUtils::Bezier(p1, p2, p3, p4, 0, p);
    Lines2.Clear();
    Lines2.Add(p);
    for (int32 i = 1; i <= segmentCount; i++)
    {
        const float t = i * segmentCountInv;
        AnimationUtils::Bezier(p1, p2, p3, p4, t, p);
        Lines2.Add(p);
    }
    DrawLines(Lines2.Get(), Lines2.Count(), color, color, thickness);
}

?????????2D渲染服务剩余的一些函数如下：

static void DrawMaterial(MaterialBase* material, const Rectangle& rect, const Color& color);
static void DrawBlur(const Rectangle& rect, float blurStrength);
static void DrawTexturedTriangles(GPUTexture* t, const Span<Vector2>& vertices, const Span<Vector2>& uvs);
static void DrawTexturedTriangles(GPUTexture* t, const Span<Vector2>& vertices, const Span<Vector2>& uvs, const Color& color);
static void DrawTexturedTriangles(GPUTexture* t, const Span<Vector2>& vertices, const Span<Vector2>& uvs, const Span<Color>& colors);
static void FillTriangles(const Span<Vector2>& vertices, const Span<Color>& colors, bool useAlpha);
static void FillTriangle(const Vector2& p0, const Vector2& p1, const Vector2& p2, const Color& color);
};

? ? ? ? 这里我们只介绍函数的具体作用以及参数的含义，而具体的实现则通过其中一到两个举例。（1） DrawMaterial绘制 GUI 材质。

"material"要渲染的材料。必须是 GUI 材质类型。
?"rect"要绘制的目标矩形。
"color"要使用的颜色。

（2）DrawBlur?绘制背景模糊。

"rect"要绘制的目标矩形（模糊其背景）
?"blurStrength"模糊强度定义了背景的模糊程度。较大的数字会增加模糊，从而导致 GPU 上的运行时成本更高。

（3）DrawTexturedTriangles绘制顶点数组。

"t"纹理。
"vertices"顶点数组。
"uvs"uvs 数组。(Span<>任意内存连续区域的通用表示。)
colors"颜色数组
"useAlpha"如果真正的 alpha 混合将被启用。

（4）FillTriangle填充三角形区域。

参数分别是第一二三个顶点以及颜色

????????以DrawMaterial为例：

void Render2D::DrawMaterial(MaterialBase* material, const Rectangle& rect, const Color& color)
{
    RENDER2D_CHECK_RENDERING_STATE;
    if (material == nullptr || !material->IsReady() || !material->IsGUI())
        return;

    Render2DDrawCall& drawCall = DrawCalls.AddOne();
    drawCall.Type = DrawCallType::Material;
    drawCall.StartIB = IBIndex;
    drawCall.CountIB = 6;
    drawCall.AsMaterial.Mat = material;
    WriteRect(rect, color);
}

? ? ? ? 仍然是在进行一些参数有效性判断后对2D绘图调用进行设置，然后再使用之前我们分析过的诸如WriteRect（），WriteTri（）等方法进行具体计算。

? ? ? ? 再比如FillTriangles（）方法：

void Render2D::FillTriangles(const Span<Vector2>& vertices, const Span<Color>& colors, bool useAlpha)
{
    CHECK(vertices.Length() == colors.Length());
    RENDER2D_CHECK_RENDERING_STATE;

    Render2DDrawCall& drawCall = DrawCalls.AddOne();
    drawCall.Type = useAlpha ? DrawCallType::FillRect : DrawCallType::FillRectNoAlpha;
    drawCall.StartIB = IBIndex;
    drawCall.CountIB = vertices.Length();

    for (int32 i = 0; i < vertices.Length(); i += 3)
        WriteTri(vertices[i], vertices[i + 1], vertices[i + 2], colors[i], colors[i + 1], colors[i + 2]);
}