前言：
在Unity项目中，调试和可视化是开发过程中不可或缺的部分。其中，绘制线条是一种常见的手段，可以用于在Scene场景和Game视图中进行调试和展示。本篇博客将为你介绍多种不同的绘制线条方法，帮助你轻松应对各种调试和可视化需求。
一、Debug.DrawLine
Debug.DrawLine 是 Unity 提供的一种用于在 Scene 视图中绘制调试线条的方法。
| start | 世界空间中线条起始点的位置。 |
| end | 在世界空间中指向线条的终点。 |
| color | 线条的颜色。 |
| duration | 线条的可见长度。 |
在 Update/FixedUpdate/LateUpdate 中调用：
这个方法通常用于游戏运行时进行更新，在这些方法中调用 Debug.DrawLine 来在不同帧更新时绘制线条。
只在 Scene 窗口里显示：
Debug.DrawLine 绘制的线条只能在 Scene 窗口中显示。这限制了在 Game 窗口中实时查看线条。
不能设置材质：
使用 Debug.DrawLine 绘制的线条无法更改或设置材质，因为它们主要用于调试和临时可视化，不提供材质设置的选项。
1、绘制正方体
[ExecuteInEditMode]
public class MyComponent1 : MonoBehaviour
{
public float size = 1; // 正方体的大小
private Vector3[] vertices = new Vector3[8]
{
new Vector3(-1, -1, -1),
new Vector3(1, -1, -1),
new Vector3(1, -1, 1),
new Vector3(-1, -1, 1),
new Vector3(-1, 1, -1),
new Vector3(1, 1, -1),
new Vector3(1, 1, 1),
new Vector3(-1, 1, 1),
};
private void Update()
{
for (int i = 0; i < 4; i++)
{
int next = (i < 3) ? (i + 1) : 0;
// 底部边框线
Debug.DrawLine(vertices[i] * size * 0.5f, vertices[next] * size * 0.5f, Color.green);
// 顶部边框线
Debug.DrawLine(vertices[i + 4] * size * 0.5f, vertices[next + 4] * size * 0.5f, Color.green);
// 垂直边框线
Debug.DrawLine(vertices[i] * size * 0.5f, vertices[i + 4] * size * 0.5f, Color.green);
}
}
}
要使用 Debug.DrawLine 绘制一个正方体，需要考虑其边界上的顶点和线条之间的关系。下面是一个示例代码，用于在场景中绘制一个简单的正方体：
2、绘制网格
using UnityEngine;
public class DrawGrid : MonoBehaviour
{
public float gridSize = 1.0f; // 网格单元的大小
public int gridSizeX = 10; // 网格的列数
public int gridSizeY = 10; // 网格的行数
void OnDrawGizmos()
{
// 绘制水平方向的线条
for (int i = 0; i <= gridSizeX; i++)
{
Vector3 start = Vector3.right * i * gridSize;
Vector3 end = start + Vector3.forward * gridSize * gridSizeY;
Debug.DrawLine(start, end, Color.white);
}
// 绘制垂直方向的线条
for (int i = 0; i <= gridSizeY; i++)
{
Vector3 start = Vector3.forward * i * gridSize;
Vector3 end = start + Vector3.right * gridSize * gridSizeX;
Debug.DrawLine(start, end, Color.white);
}
}
}
使用 Debug.DrawLine 绘制一个 10x10 的网格。将这个脚本附加到一个空 GameObject 上。gridSize 变量表示网格的单元大小，gridSizeX 和 gridSizeY 分别表示网格的列数和行数。在 Scene 视图中，可以看到一个由绿色线条组成的网格。这些线条只是用于调试和可视化，不会在游戏中显示。
二、Gizmos.DrawLine
Gizmos.DrawLine 是 Unity 提供的一个用于在 Scene 窗口中绘制线条的函数。它可以在 OnDrawGizmos 和 OnDrawGizmosSelected 方法中使用。
| from | 世界空间中线条起始点的位置。 |
| to | 在世界空间中指向线条的终点。 |
调用方式：
适合在 OnDrawGizmos 和 OnDrawGizmosSelected 这两个 Unity 生命周期方法中调用。这些方法是专门用于在 Scene 窗口中绘制 Gizmo 的。
显示范围：
所绘制的线条只会在 Scene 窗口中显示，而不会出现在游戏运行中。这有助于在编辑器中进行调试和可视化，但不会影响游戏性能或最终的构建。
材质设置：
Gizmos 提供的绘制方法通常不能设置材质、颜色等属性。Gizmos.DrawLine 绘制的线条颜色和材质是固定的，无法调整其粗细、透明度或使用自定义材质。
1、绘制网格
using UnityEngine;
public class DrawGrid : MonoBehaviour
{
public float gridSize = 1.0f; // 网格单元的大小
public int gridSizeX = 10; // 网格的列数
public int gridSizeY = 10; // 网格的行数
void OnDrawGizmos()
{
Gizmos.color = Color.red;
// 绘制水平方向的线条
for (int i = 0; i <= gridSizeX; i++)
{
Vector3 start = Vector3.right * i * gridSize;
Vector3 end = start + Vector3.forward * gridSize * gridSizeY;
Gizmos.DrawLine(start, end);
}
// 绘制垂直方向的线条
for (int i = 0; i <= gridSizeY; i++)
{
Vector3 start = Vector3.forward * i * gridSize;
Vector3 end = start + Vector3.right * gridSize * gridSizeX;
Gizmos.DrawLine(start, end);
}
}
}
在 OnDrawGizmos 方法中使用 Gizmos.DrawLine 绘制一个 10x10 的网格。这些线条只在 Scene 窗口中显示，并且不能设置材质。要注意的是，Gizmos 类用于在 Scene 窗口中绘制 Gizmo，但不会在游戏运行时显示。
三、Mesh
在Unity中，Mesh（网格）是一种用于表示3D模型的数据结构。它定义了一个网格模型的顶点、三角形（或其他多边形）、UV（纹理坐标）、法线（法线方向）等数据。Mesh是用于构建3D模型的基本组成部分之一。
Mesh是Unity中许多3D对象（如MeshFilter、MeshRenderer等）的基础，通过MeshFilter组件将Mesh应用到GameObject上，并使用MeshRenderer来渲染对象。通常，开发者使用Mesh来创建静态或动态的3D模型，并在游戏场景中呈现出来。
| vertices | 表示网格的顶点数组。 |
| triangles | 表示定义三角形的索引数组。 |
| normals | 表示法线数组，用于指定网格每个顶点的法线方向。 |
| uv | 表示纹理坐标数组。 |
| colors | 表示网格的顶点颜色。 |
| SetIndices | SetIndices 是 Mesh 类中用于设置网格顶点索引的方法。它允许您指定用于连接顶点以形成三角形或其他多边形的索引数组。 |
| MarkDynamic | MarkDynamic 方法用于标记网格为动态网格。它是一个性能优化方法，用于告诉引擎此网格将频繁地更新。当您有一个需要在每帧或频繁时间间隔内更新的网格时，可以使用 MarkDynamic 方法。 |
1、绘制正方体线框
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
[RequireComponent(typeof(MeshFilter))]
[RequireComponent(typeof(MeshRenderer))]
public class DrawCube : MonoBehaviour
{
private Mesh mesh;
private MeshFilter meshFilter;
private MeshRenderer meshRenderer;
// 创建一个立方体的 Mesh
private Mesh CreateCubeMesh()
{
Mesh mesh = new Mesh();
mesh.vertices = new Vector3[]
{
new Vector3(-1, -1, -1), // 0
new Vector3(1, -1, -1), // 1
new Vector3(1, 1, -1), // 2
new Vector3(-1, 1, -1), // 3
new Vector3(-1, -1, 1), // 4
new Vector3(1, -1, 1), // 5
new Vector3(1, 1, 1), // 6
new Vector3(-1, 1, 1) // 7
};
mesh.SetIndices(new int[]
{
0, 1, 1, 2, 2, 3, 3, 0, // 前面四条边
4, 5, 5, 6, 6, 7, 7, 4, // 后面四条边
0, 4, 1, 5, 2, 6, 3, 7 // 连接前后两个面的四条边
}, MeshTopology.Lines, 0);
return mesh;
}
private void Start()
{
meshFilter = GetComponent<MeshFilter>();
meshRenderer = GetComponent<MeshRenderer>();
mesh = CreateCubeMesh();
meshFilter.mesh = mesh;
var material = new Material(Shader.Find("Unlit/Color"));
material.color = Color.green;
meshRenderer.material = material;
}
}
这里是通过创建一个正方体的Mesh,然后通过MeshFilter组件将Mesh应用到GameObject上，并使用MeshRenderer来渲染该正方体线框。
四、GL
OpenGL（Open Graphics Library）是一个用于渲染 2D 和 3D 图形的跨平台图形库。它提供了一系列函数和指令，允许开发者通过编程来操作图形硬件，实现图形渲染和交互式图形应用程序的开发。
在Unity中，GL（Graphics Library）是一个底层的图形渲染接口，用于执行低级图形绘制操作。GL允许开发者以非常灵活的方式直接控制图形渲染，使开发者可以绘制各种形状、线条、文本和纹理，实现各种自定义的绘图需求。
调用方式：
OnPostRender(): 用于在完成渲染场景之后立即调用，适合进行屏幕后处理或绘制Overlay UI。
OnRenderObject(): 在渲染对象时调用。允许手动渲染对象并覆盖其默认渲染。用于自定义渲染对象或其他特殊渲染需求。
显示范围：
LoadOrtho(): 用于设置绘制范围为屏幕坐标系，绘制在整个屏幕上。在OnPostRender()中调用，以便以屏幕为基础绘制2D图形。
材质设置：
GL允许使用材质，但与在Unity中常规渲染管道中的应用方式有所不同。
在GL中，使用材质时，需要在GL代码中直接调用SetPass()来设置所需的材质属性。这将设置着色器状态，让GL能够使用该材质来渲染几何图元。
若要控制颜色，需要使用GL.Color()方法设置颜色。
若要控制透明度，可以通过设置颜色的Alpha值来实现半透明效果。
1、绘制3D网格和屏幕网格
using UnityEngine;
public class DrawGrid : MonoBehaviour
{
public float gridSize = 1.0f; // 网格单元的大小
public int gridSizeX = 10; // 网格的列数
public int gridSizeY = 10; // 网格的行数
private Material lineMaterial;
void CreateLineMaterial()
{
if (!lineMaterial)
{
// Unity has a built-in shader that is useful for drawing
// simple colored things.
Shader shader = Shader.Find("Hidden/Internal-Colored");
lineMaterial = new Material(shader);
lineMaterial.hideFlags = HideFlags.HideAndDontSave;
// Turn on alpha blending
lineMaterial.SetInt("_SrcBlend", (int)UnityEngine.Rendering.BlendMode.SrcAlpha);
lineMaterial.SetInt("_DstBlend", (int)UnityEngine.Rendering.BlendMode.OneMinusSrcAlpha);
// Turn backface culling off
lineMaterial.SetInt("_Cull", (int)UnityEngine.Rendering.CullMode.Off);
// Turn off depth writes
lineMaterial.SetInt("_ZWrite", 0);
}
}
// Will be called after all regular rendering is done
public void OnRenderObject()
{
CreateLineMaterial();
lineMaterial.SetPass(0); //刷新当前材质
//Draw3DGrid();
DrawScreenGrid();
}
/// <summary>
/// 在三维场景中绘制网格
/// </summary>
void Draw3DGrid()
{
GL.PushMatrix();
GL.MultMatrix(transform.localToWorldMatrix);
GL.Begin(GL.LINES);
float startX = -(gridSize * gridSizeX) / 2;
float startZ = -(gridSize * gridSizeY) / 2;
// 绘制垂直方向的线条
for (int i = 0; i <= gridSizeX; i++)
{
GL.Color(Color.red);
float xPos = startX + i * gridSize;
GL.Vertex3(xPos, 0, startZ);
GL.Vertex3(xPos, 0, -startZ);
}
// 绘制水平方向的线条
for (int i = 0; i <= gridSizeY; i++)
{
GL.Color(Color.green);
float zPos = startZ + i * gridSize;
GL.Vertex3(startX, 0, zPos);
GL.Vertex3(-startX, 0, zPos);
}
GL.End();
GL.PopMatrix();
}
/// <summary>
/// 在屏幕上绘制网格
/// </summary>
void DrawScreenGrid()
{
GL.PushMatrix(); //保存当前Matirx
GL.LoadPixelMatrix(); //设置pixelMatrix
GL.Begin(GL.LINES);
// 绘制水平方向的线条
for (int i = 0; i <= gridSizeX; i++)
{
GL.Color(Color.green);
float xPos = i * gridSize;
GL.Vertex3(xPos, 0, 0);
GL.Vertex3(xPos, gridSize * gridSizeY, 0);
}
// 绘制垂直方向的线条
for (int i = 0; i <= gridSizeY; i++)
{
GL.Color(Color.green);
float zPos = i * gridSize;
GL.Vertex3(0, zPos, 0);
GL.Vertex3(gridSize * gridSizeX, zPos, 0);
}
GL.End();
GL.PopMatrix();//读取之前的Matrix
}
}
2、实现屏幕框选
public class BoxSelection: MonoBehaviour
{
public Material boxMaterial;
public Material lineMaterial;
private Vector3 startPoint;
private bool isSelecting = false;
private void Update()
{
if (Input.GetMouseButtonDown(0))
{
startPoint = Input.mousePosition;
isSelecting = true;
}
else if (Input.GetMouseButtonUp(0))
{
isSelecting = false;
SelectObjects();
}
}
private void OnPostRender()
{
if (!boxMaterial || !lineMaterial)
{
Debug.LogError("Please assign materials on the inspector!");
return;
}
if (isSelecting)
{
GL.PushMatrix();
boxMaterial.SetPass(0);
GL.LoadPixelMatrix();
GL.Begin(GL.QUADS);
boxMaterial.color = new Color(1f, 1f, 1f, 0.2f);
Vector3 endPos = Input.mousePosition;
GL.Vertex3(startPoint.x, startPoint.y, 0);
GL.Vertex3(endPos.x, startPoint.y, 0);
GL.Vertex3(endPos.x, endPos.y, 0);
GL.Vertex3(startPoint.x, endPos.y, 0);
GL.End();
GL.PopMatrix();
GL.PushMatrix();
lineMaterial.SetPass(0);
GL.LoadPixelMatrix();
GL.Begin(GL.LINES);
lineMaterial.color = Color.green;
GL.Vertex3(startPoint.x, startPoint.y, 0);
GL.Vertex3(endPos.x, startPoint.y, 0);
GL.Vertex3(endPos.x, startPoint.y, 0);
GL.Vertex3(endPos.x, endPos.y, 0);
GL.Vertex3(endPos.x, endPos.y, 0);
GL.Vertex3(startPoint.x, endPos.y, 0);
GL.Vertex3(startPoint.x, endPos.y, 0);
GL.Vertex3(startPoint.x, startPoint.y, 0);
GL.End();
GL.PopMatrix();
}
}
private void SelectObjects()
{
Vector3 mouseStartPos = startPoint;
Vector3 mouseEndPos = Input.mousePosition;
Vector3 min = Vector3.Min(mouseStartPos, mouseEndPos);
Vector3 max = Vector3.Max(mouseStartPos, mouseEndPos);
Rect selectRect = new Rect(min.x, Screen.height - max.y, max.x - min.x, max.y - min.y);
foreach (GameObject obj in FindObjectsOfType<GameObject>())
{
Vector3 screenPos = Camera.main.WorldToScreenPoint(obj.transform.position);
if (selectRect.Contains(screenPos))
{
Debug.Log("Selected object: " + obj.name);
// 在这里可以添加选中对象的操作逻辑
}
}
}
}
五、LineRenderer
LineRenderer 是 Unity 中用于在场景中绘制线条的组件之一。它可以用于创建简单的线段、路径、连线等效果。
1、实现屏幕写字板
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class LineRendererDraw : MonoBehaviour
{
private LineRenderer clone;
public LineRenderer linePre;
private int positionCount;
private Material lineMaterial;
private void Start()
{
lineMaterial = new Material(Shader.Find("Legacy Shaders/Particles/Additive"));
linePre.material = lineMaterial;
}
/// <summary>
/// 创建线条
/// </summary>
/// <returns></returns>
private LineRenderer CreateLine()
{
//实例化对象
LineRenderer line = Instantiate(linePre, linePre.transform.position, Quaternion.identity);
//设置起始和结束的颜色
line.startColor = Color.red;
line.endColor = Color.blue;
//设置起始和结束的宽度
line.startWidth = 0.4f;
line.endWidth = 0.35f;
return line;
}
// Update is called once per frame
void Update()
{
if (Input.GetMouseButtonDown(0))
{
//实例化对象
clone = CreateLine();
//计数
positionCount = 0;
}
if (Input.GetMouseButton(0))
{
//每一帧检测，按下鼠标的时间越长，计数越多
positionCount++;
//设置顶点数
clone.positionCount = positionCount;
//设置顶点位置(顶点的索引，将鼠标点击的屏幕坐标转换为世界坐标)
clone.SetPosition(positionCount - 1, Camera.main.ScreenToWorldPoint(new Vector3(Input.mousePosition.x, Input.mousePosition.y, 15)));
}
}
}
六、UI画线
这里通过Unity的UGUI来进行画线，主要原理就是使用OnPopulateMesh方法来重构Mesh进行画线。
OnPopulateMesh函数：当一个UI元素生成顶点数据时会调用。
OnPopulateMesh(VertexHelper vh)函数，我们可以在这个函数中修改顶点的数据或者获取顶点的数据。
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
/// <summary>
/// 绘制的线段结构体
/// </summary>
public struct LineSegment
{
public Vector3 startPoint;
public Vector3 endPoint;
public float lineWidth;
public Vector3 Vector
{
get
{
return endPoint - startPoint;
}
}
public Vector3 Normal
{
get
{
return Vector3.Cross(Vector.normalized, Vector3.forward).normalized;
}
}
public Vector3 StartLeftPoint
{
get
{
return startPoint + Normal * lineWidth;
}
}
public Vector3 StartRightPoint
{
get
{
return startPoint - Normal * lineWidth;
}
}
public Vector3 EndLeftPoint
{
get
{
return endPoint + Normal * lineWidth;
}
}
public Vector3 EndRightPoint
{
get
{
return endPoint - Normal * lineWidth;
}
}
}
public class ImageLine : MaskableGraphic
{
private List<List<UIVertex>> vertexQuadList = new List<List<UIVertex>>();
private LineSegment lineSegment = new LineSegment();
public float lineWidth = 4;
protected override void OnPopulateMesh(VertexHelper vh)
{
vh.Clear();
for (int i = 0; i < vertexQuadList.Count; i++)
{
vh.AddUIVertexQuad(vertexQuadList[i].ToArray());
}
}
// Update is called once per frame
void Update()
{
if (Input.GetMouseButtonDown(0))
{
lineSegment.lineWidth = lineWidth;
lineSegment.startPoint = ScreenPointToLocalPointInRectangle(Input.mousePosition);
}
else if (Input.GetMouseButton(0))
{
lineSegment.endPoint = ScreenPointToLocalPointInRectangle(Input.mousePosition);
//当鼠标不动时不再绘制
if (lineSegment.startPoint == lineSegment.endPoint) return;
//线段过短不进行绘制
if (lineSegment.Vector.magnitude < 5) return;
AddVertexQuad(lineSegment);
lineSegment.startPoint = lineSegment.endPoint;
SetVerticesDirty();
}
if (Input.GetMouseButtonDown(1))
{
vertexQuadList.Clear();
SetVerticesDirty();
}
}
/// <summary>
/// 将线段上顶点添加到UI四边形顶点
/// </summary>
/// <param name="lineSegment"></param>
private void AddVertexQuad(LineSegment lineSegment)
{
List<UIVertex> uIVertices = new List<UIVertex>();
UIVertex uIVertex = new UIVertex();
uIVertex.position = lineSegment.StartLeftPoint;
uIVertex.color = color;
uIVertices.Add(uIVertex);
UIVertex uIVertex1 = new UIVertex();
uIVertex1.position = lineSegment.StartRightPoint;
uIVertex1.color = color;
uIVertices.Add(uIVertex1);
UIVertex uIVertex2 = new UIVertex();
uIVertex2.position = lineSegment.EndRightPoint;
uIVertex2.color = color;
uIVertices.Add(uIVertex2);
UIVertex uIVertex3 = new UIVertex();
uIVertex3.position = lineSegment.EndLeftPoint;
uIVertex3.color = color;
uIVertices.Add(uIVertex3);
vertexQuadList.Add(uIVertices);
}
/// <summary>
/// 屏幕坐标转换为本地坐标
/// </summary>
/// <param name="screenPoint"></param>
/// <returns></returns>
private Vector2 ScreenPointToLocalPointInRectangle(Vector3 screenPoint)
{
RectTransform rectTransform = GetComponent<RectTransform>();
Vector2 localPoint = Vector2.zero;
switch (canvas.renderMode)
{
case RenderMode.ScreenSpaceOverlay:
RectTransformUtility.ScreenPointToLocalPointInRectangle(rectTransform, screenPoint, null, out localPoint);
break;
case RenderMode.ScreenSpaceCamera:
RectTransformUtility.ScreenPointToLocalPointInRectangle(rectTransform, screenPoint, canvas.worldCamera, out localPoint);
break;
case RenderMode.WorldSpace:
RectTransformUtility.ScreenPointToLocalPointInRectangle(rectTransform, screenPoint, canvas.worldCamera, out localPoint);
break;
default:
break;
}
return localPoint;
}
}
