UGUI原理简述

绘制原理

核心概念：Mesh、Vertex、Triangle、UV

说明：

•     Mesh：网格，决定物体的形状
•     Vertex ：顶点，组成Mesh的元素
•     Triangle ：三角形，决定顶点顺序
•     UV：纹理贴图坐标

下面使用例子依次介绍绘制原理，编写脚本：

public class CreateImage : MonoBehaviour
{
    private MeshFilter meshFilter;
    private MeshRenderer render;
    public Texture tex;
    // Start is called before the first frame update
    void Start()
    {
        meshFilter = this.GetComponent<MeshFilter>();
        render = this.GetComponent<MeshRenderer>();
        CreateAImage();
    }

    void CreateAImage()
    {
        VertexHelper vp = new VertexHelper();
        vp.Clear();
        //这里采用的添加顶点函数，函数参数分别对应了顶点位置，顶点颜色，纹理坐标
        vp.AddVert(new Vector3(0, 0, 0), Color.red, new Vector2(0, 0));
        vp.AddVert(new Vector3(0, 1, 0), Color.green, new Vector2(0, 1));
        vp.AddVert(new Vector3(1, 1, 0), Color.blue, new Vector2(1, 1));
        vp.AddVert(new Vector3(1, 0, 0), Color.cyan, new Vector2(1, 0));
        //4个顶点构造出矩形的两个三角形
        vp.AddTriangle(0, 1, 2);
        vp.AddTriangle(2, 3, 0);
        Mesh mesh = new Mesh();
        vp.FillMesh(mesh);
        meshFilter.mesh = mesh;
    }
}

挂到物体上：

运行之后，产生一个由两个三角形组成得到图形：

贴图绘制：

public class CreateImage : MonoBehaviour
{
    private MeshFilter meshFilter;
    private MeshRenderer render;
    public Texture tex;
    // Start is called before the first frame update
    void Start()
    {
        meshFilter = this.GetComponent<MeshFilter>();
        render = this.GetComponent<MeshRenderer>();
        CreateAImage();
    }


    void CreateAImage()
    {
        VertexHelper vp = new VertexHelper();
        vp.Clear();
        //这里采用的添加顶点函数，函数参数分别对应了顶点位置，顶点颜色，纹理坐标
        vp.AddVert(new Vector3(0, 0, 0), Color.white, new Vector2(0, 0));
        vp.AddVert(new Vector3(0, 1, 0), Color.white, new Vector2(0, 1));
        vp.AddVert(new Vector3(1, 1, 0), Color.white, new Vector2(1, 1));
        vp.AddVert(new Vector3(1, 0, 0), Color.white, new Vector2(1, 0));
        //4个顶点构造出矩形的两个三角形
        vp.AddTriangle(0, 1, 2);
        vp.AddTriangle(2, 3, 0);
        Mesh mesh = new Mesh();
        vp.FillMesh(mesh);
        meshFilter.mesh = mesh;
        //设置颜色或者纹理（这里的设置会覆盖Mesh的颜色）
        //想象你穿衣服是不是就把你的肤色盖着了
        //render.material.color = Color.red;
        render.material.mainTexture = tex;
    }
}

运行之后：

UGUI绘制原理，UGUI使用的不是MeshRenderer和MeshFilter，而是Canvas 和 CanvasRender，构造层图

脚本：

public class UGUIDraw : MonoBehaviour
{
    public Texture2D texture2D;
    public Material material;
    void Start()
    {
        Vector3[] vertices = new Vector3[4];
        vertices[0] = new Vector3(0, 0, 0);
        vertices[1] = new Vector3(0, 1, 0);
        vertices[2] = new Vector3(1, 1, 0);
        vertices[3] = new Vector3(1, 0, 0);
        int[] triangles = new int[6];
        triangles[0] = 0;
        triangles[1] = 1;
        triangles[2] = 2;
        triangles[3] = 2;
        triangles[4] = 3;
        triangles[5] = 0;
        Vector2[] uv = new Vector2[4];
        uv[0] = new Vector2(0, 0);
        uv[1] = new Vector2(0, 1);
        uv[2] = new Vector2(1, 1);
        uv[3] = new Vector2(1, 0);
        Mesh mesh = new Mesh();
        mesh.vertices = vertices;
        mesh.triangles = triangles;
        mesh.uv = uv;
        mesh.RecalculateBounds();
        CanvasRenderer canvasRenderer = GetComponent<CanvasRenderer>();
        canvasRenderer.SetMesh(mesh);
        canvasRenderer.materialCount = 1;
        canvasRenderer.SetMaterial(material, 0);
        canvasRenderer.SetTexture(texture2D);
    }
}

运行如下：

小结：

        生成显示UI用的Mesh，由4个顶点，2个三角形组成，每个顶点都包含UV坐标，如果需要调整颜色，还需要提供顶点色。当UGUI中使用图片过程（纹理采样），将网络和纹理信息送入GPU中渲染.