如何沿Mesh方向旋转UV？Unity自定义LineRenderer难题求助

问题背景 #

Unity自带LineRenderer在急转弯场景下无法正确渲染线条网格，添加辅助点也无法稳定达到理想效果，因此尝试自定义LineRenderer并学习Mesh相关实现：

• 搭建测试场景制作了3个正方形，标记UV坐标后将最上方正方形左移，用于测试线条沿顶点方向的旋转效果
• 自行添加旋转公式后未达预期：图像仅轻微旋转，但顶点意外偏移至UV区域
• 使用Shader Graphics创建材质，始终未找到有效解决方法

核心解决方法 #

1. 修正顶点旋转计算逻辑 #

自定义LineRenderer的顶点旋转需基于相邻线段的切线方向计算垂直偏移，而非直接旋转顶点：

• 计算当前线段方向向量：dir = 当前顶点位置 - 前一个顶点位置，归一化得到normalizedDir
• 生成垂直于线段的方向向量：2D场景用perpendicularDir = new Vector2(-normalizedDir.y, normalizedDir.x)；3D场景需结合相机或平面法向量计算
• 根据线条宽度生成左右顶点：左顶点 = 当前顶点 + perpendicularDir * 宽度/2，右顶点 = 当前顶点 - perpendicularDir * 宽度/2
• 转弯处顶点需取前后线段垂直方向的平均值并归一化，避免出现尖角

2. 修复UV坐标映射逻辑 #

UV偏移多因顶点顺序或UV赋值错误导致：

• 按线段长度占总线条长度的比例分配UV，而非固定使用0-1范围
• 提前计算总线条长度，累计每个线段的长度后，当前线段的UV起始值为累计长度/总长度，结束值为(累计长度+当前线段长度)/总长度
• 确保每个顶点的UV与它在线条上的实际位置对应，避免旋转操作导致UV错位

3. 适配自定义Shader #

使用Shader Graphics创建的材质需配合正确的Mesh数据：

• 不在Shader中对UV做固定偏移，完全由C#代码传递正确的UV值到Mesh
• 若需纹理平铺，在C#中计算每个线段的UV缩放比例，例如uvScale = 当前线段长度/纹理 tile 尺寸，再赋值给顶点UV

核心代码片段 #

// 计算线段方向与垂直方向
Vector3 prevDir = points[i] - points[i-1];
prevDir.Normalize();
Vector3 prevPerp = Vector3.Cross(prevDir, Vector3.up).normalized;

// 转弯处取前后垂直方向的平均值
Vector3 nextDir = points[i+1] - points[i];
nextDir.Normalize();
Vector3 nextPerp = Vector3.Cross(nextDir, Vector3.up).normalized;
Vector3 avgPerp = (prevPerp + nextPerp).normalized;

// 生成左右顶点
Vector3 leftVertex = points[i] + avgPerp * lineWidth / 2f;
Vector3 rightVertex = points[i] - avgPerp * lineWidth / 2f;

// UV赋值（需提前计算总线条长度totalLength）
float uvPos = accumulatedLength / totalLength;
uvs.Add(new Vector2(uvPos, 0)); // 右顶点下UV
uvs.Add(new Vector2(uvPos, 1)); // 左顶点上UV

额外排查项 #

• 检查Mesh的顶点顺序，确保三角形的 winding order 符合Unity渲染规则，避免背面剔除导致显示异常
• 测试时先用纯色材质验证顶点位置是否正确，再逐步添加纹理排查UV问题

内容的提问来源于stack exchange，提问作者Maksim Voronkov