深入UGUI底层：手把手教你用OnPopulateMesh和顶点偏移，实现Image的任意2D变形

深入UGUI底层：手把手教你用OnPopulateMesh和顶点偏移，实现Image的任意2D变形

在Unity的UI开发中，UGUI是我们最常用的UI系统之一。对于大多数开发者来说，使用UGUI提供的标准组件如Image、Text等就能满足基本需求。但当你需要实现一些特殊的视觉效果时，仅仅依靠这些标准组件就显得力不从心了。这时，深入理解UGUI的底层机制就显得尤为重要。

本文将带你深入UGUI的底层渲染机制，通过重写OnPopulateMesh方法和操作顶点数据，实现各种复杂的2D变形效果。不同于简单的UI使用教程，我们将从原理层面剖析UGUI的网格生成过程，让你真正掌握自定义UI渲染的核心技术。

1. UGUI渲染机制深度解析

1.1 UGUI的渲染管线

UGUI的渲染过程可以简化为以下几个关键步骤：

1. 布局计算：RectTransform确定UI元素的位置和大小
2. 网格生成：根据UI元素的形状生成网格数据
3. 材质准备：确定使用的材质和纹理
4. 渲染提交：将网格数据提交给Unity的渲染管线

其中，网格生成是最关键也最容易被开发者忽视的环节。在UGUI中，所有可视元素最终都会被转换为网格(Mesh)进行渲染，包括Image、Text等常见组件。

1.2 Graphic类与OnPopulateMesh

UGUI中的所有渲染组件都继承自Graphic基类，这个类定义了UI元素的基本渲染行为。其中最重要的方法之一就是OnPopulateMesh：

protected virtual void OnPopulateMesh(VertexHelper toFill);

这个方法负责填充网格数据，参数VertexHelper是一个辅助类，提供了操作顶点数据的各种实用方法。通过重写这个方法，我们可以完全控制UI元素的网格生成过程。

1.3 顶点数据结构

在UGUI中，每个顶点都包含以下信息：

理解这些顶点属性对于实现高级效果至关重要。例如，通过修改uv0可以实现纹理动画，而修改normal可以实现光照效果。

2. 重写OnPopulateMesh实现基础变形

2.1 创建自定义Image组件

让我们从创建一个基本的自定义Image组件开始：

using UnityEngine; using UnityEngine.UI; public class CustomImage : Image { protected override void OnPopulateMesh(VertexHelper vh) { // 先调用基类方法生成默认网格 base.OnPopulateMesh(vh); // 在这里添加自定义顶点操作 } }

2.2 实现简单的倾斜效果

要实现倾斜效果，我们需要修改右上和右下两个顶点的x坐标：

[SerializeField] private float skewAmount = 0; protected override void OnPopulateMesh(VertexHelper vh) { base.OnPopulateMesh(vh); UIVertex vertex = new UIVertex(); // 修改右上顶点(索引1) vh.PopulateUIVertex(ref vertex, 1); vertex.position += Vector3.right * skewAmount; vh.SetUIVertex(vertex, 1); // 修改右下顶点(索引2) vh.PopulateUIVertex(ref vertex, 2); vertex.position += Vector3.right * skewAmount; vh.SetUIVertex(vertex, 2); }

这段代码中，我们通过PopulateUIVertex获取顶点数据，修改其位置后再用SetUIVertex写回。skewAmount参数控制倾斜的程度。

2.3 添加编辑器支持

为了让倾斜参数在Inspector中可见，我们需要创建一个自定义编辑器：

#if UNITY_EDITOR using UnityEditor; using UnityEditor.UI; [CustomEditor(typeof(CustomImage), true)] public class CustomImageEditor : ImageEditor { SerializedProperty skewAmount; protected override void OnEnable() { base.OnEnable(); skewAmount = serializedObject.FindProperty("skewAmount"); } public override void OnInspectorGUI() { base.OnInspectorGUI(); EditorGUILayout.PropertyField(skewAmount); serializedObject.ApplyModifiedProperties(); } } #endif

3. 高级变形技术

3.1 波浪扭曲效果

通过正弦函数可以实现波浪扭曲效果：

[SerializeField] private float waveFrequency = 1f; [SerializeField] private float waveAmplitude = 0.1f; [SerializeField] private float waveSpeed = 1f; protected override void OnPopulateMesh(VertexHelper vh) { base.OnPopulateMesh(vh); UIVertex vertex = new UIVertex(); for (int i = 0; i < vh.currentVertCount; i++) { vh.PopulateUIVertex(ref vertex, i); // 根据y坐标和时间为顶点添加波浪偏移 float wave = Mathf.Sin(vertex.position.y * waveFrequency + Time.time * waveSpeed) * waveAmplitude; vertex.position += Vector3.right * wave; vh.SetUIVertex(vertex, i); } }

3.2 顶点颜色动画

通过修改顶点颜色可以实现渐变、脉冲等效果：

[SerializeField] private Gradient vertexColorGradient; [SerializeField] private float colorSpeed = 1f; protected override void OnPopulateMesh(VertexHelper vh) { base.OnPopulateMesh(vh); UIVertex vertex = new UIVertex(); for (int i = 0; i < vh.currentVertCount; i++) { vh.PopulateUIVertex(ref vertex, i); // 根据顶点位置和时间为顶点着色 float t = (vertex.position.y + Time.time * colorSpeed) % 1f; vertex.color = vertexColorGradient.Evaluate(t); vh.SetUIVertex(vertex, i); } }

3.3 自定义形状变形

通过数学函数可以创建各种复杂的形状变形：

[SerializeField] private float distortionStrength = 0.1f; [SerializeField] private float distortionScale = 1f; protected override void OnPopulateMesh(VertexHelper vh) { base.OnPopulateMesh(vh); UIVertex vertex = new UIVertex(); for (int i = 0; i < vh.currentVertCount; i++) { vh.PopulateUIVertex(ref vertex, i); // 使用柏林噪声创建有机变形 float noise = Mathf.PerlinNoise( vertex.position.x * distortionScale, vertex.position.y * distortionScale); Vector3 offset = new Vector3( noise - 0.5f, noise - 0.5f, 0) * distortionStrength; vertex.position += offset; vh.SetUIVertex(vertex, i); } }

4. 性能优化与最佳实践

4.1 性能考量

顶点操作虽然强大，但也需要注意性能：

• 避免每帧重建网格：如果变形是静态的，可以在Start或OnEnable中生成一次
• 减少顶点操作：只修改必要的顶点
• 使用对象池：对于频繁变形的UI，考虑重用VertexHelper实例

4.2 与CanvasRenderer协作

CanvasRenderer是UGUI实际执行渲染的组件，了解它与Graphic的关系很重要：

1. Graphic负责生成网格数据
2. CanvasRenderer接收网格数据并提交渲染
3. 修改顶点后需要调用SetVerticesDirty通知更新

4.3 常见问题解决

问题1：变形后点击检测不准确

解决方案：重写IsRaycastLocationValid方法：

public override bool IsRaycastLocationValid(Vector2 screenPoint, Camera eventCamera) { // 实现自定义的点击检测逻辑 return base.IsRaycastLocationValid(screenPoint, eventCamera); }

问题2：变形导致纹理扭曲

解决方案：在修改顶点位置的同时调整UV坐标：

vertex.uv0 = new Vector2( vertex.position.x / rectTransform.rect.width, vertex.position.y / rectTransform.rect.height);

5. 实战案例：实现高级UI效果

5.1 液体晃动效果

结合多种变形技术可以创建生动的液体效果：

[SerializeField] private float liquidDensity = 1f; [SerializeField] private float liquidViscosity = 0.5f; [SerializeField] private float impactForce = 0.1f; private float[] vertexOffsets; private float[] vertexVelocities; protected override void OnPopulateMesh(VertexHelper vh) { base.OnPopulateMesh(vh); if (vertexOffsets == null || vertexOffsets.Length != vh.currentVertCount) { vertexOffsets = new float[vh.currentVertCount]; vertexVelocities = new float[vh.currentVertCount]; } UIVertex vertex = new UIVertex(); for (int i = 0; i < vh.currentVertCount; i++) { vh.PopulateUIVertex(ref vertex, i); // 模拟液体物理 float targetOffset = Mathf.Sin(Time.time + vertex.position.x * liquidDensity) * 0.1f; vertexVelocities[i] += (targetOffset - vertexOffsets[i]) * Time.deltaTime; vertexVelocities[i] *= (1f - liquidViscosity * Time.deltaTime); vertexOffsets[i] += vertexVelocities[i] * Time.deltaTime; vertex.position += Vector3.up * vertexOffsets[i]; vh.SetUIVertex(vertex, i); } } public void AddImpact(Vector2 position, float force) { // 将屏幕坐标转换为局部坐标 RectTransformUtility.ScreenPointToLocalPointInRectangle( rectTransform, position, null, out Vector2 localPos); UIVertex vertex = new UIVertex(); for (int i = 0; i < vertexVelocities.Length; i++) { // 计算顶点到点击位置的距离 float distance = Vector2.Distance(vertex.position, localPos); float effect = Mathf.Clamp01(1f - distance / 100f) * force * impactForce; vertexVelocities[i] += effect; } }

5.2 3D透视效果

通过模拟透视变形可以让2D UI元素呈现3D效果：

[SerializeField] private float perspectiveStrength = 0.1f; [SerializeField] private Vector2 vanishingPoint = new Vector2(0.5f, 0.5f); protected override void OnPopulateMesh(VertexHelper vh) { base.OnPopulateMesh(vh); Rect rect = rectTransform.rect; Vector2 vp = new Vector2( rect.xMin + rect.width * vanishingPoint.x, rect.yMin + rect.height * vanishingPoint.y); UIVertex vertex = new UIVertex(); for (int i = 0; i < vh.currentVertCount; i++) { vh.PopulateUIVertex(ref vertex, i); // 计算顶点到消失点的距离 float dx = vertex.position.x - vp.x; float dy = vertex.position.y - vp.y; float distance = Mathf.Sqrt(dx * dx + dy * dy); // 应用透视变形 float scale = 1f / (1f + distance * perspectiveStrength); vertex.position = new Vector3( vp.x + dx * scale, vp.y + dy * scale, vertex.position.z); vh.SetUIVertex(vertex, i); } }

5.3 动态网格重构

对于更复杂的效果，可能需要完全重构网格而不仅仅是修改顶点：

[SerializeField] private int segments = 10; [SerializeField] private float waveHeight = 10f; protected override void OnPopulateMesh(VertexHelper vh) { // 清空现有网格 vh.Clear(); // 创建新的网格 Rect rect = rectTransform.rect; float segmentWidth = rect.width / segments; // 添加顶点 for (int i = 0; i <= segments; i++) { float x = rect.xMin + i * segmentWidth; float wave = Mathf.Sin((float)i / segments * Mathf.PI * 2f + Time.time) * waveHeight; // 顶部顶点 vh.AddVert(new Vector3(x, rect.yMax + wave, 0), color, Vector2.zero); // 底部顶点 vh.AddVert(new Vector3(x, rect.yMin, 0), color, Vector2.zero); } // 添加三角形 for (int i = 0; i < segments; i++) { int index = i * 2; vh.AddTriangle(index, index + 1, index + 2); vh.AddTriangle(index + 1, index + 3, index + 2); } }