Unity中UI曲面化

在VR下面，曲面UI可以提升用户在场景中的沉浸感，获得更好的视觉体验

方案选择

1. 做一套基于曲面的UI
   我们项目中基本只用到Image和Text两种，Image是比较好处理的，直接将Texture贴到一个曲面的mesh上就可以了，但是Text相对比较麻烦。我们无法简单的取到某一段文字的Texture，必须自己从字体文件里面裁剪每个文字的Texture，然后拼接到一个Texture，然后再将最终的纹理贴到一个曲面mesh上。

2. 单独将平面UI渲染到一个纹理，然后贴到曲面mesh上
   这个方案在实现曲面化上是没有问题的，但是为了满足VR下面的立体效果，我们两只眼睛看到的东西是有一定差异的，通过这些差异才有立体感，如果是同一个曲面的UI Texture，UI上的一些立体效果会损失（比如UI向前浮动）。另外，如果使用这种方法，我们眼睛看到的UI和真实的UI有很大的差异，需要重新设计凝视输入。

3. 让UI沿着曲面分布，且每个UI元素有曲面效果
   让UI沿着曲面分布是比较好实现的，只需要计算合理的位置和角度，让UI整体上呈现出曲面的效果。目前有很多VR的曲面效果都是采用这种简单的方法实现的，但是这种方案实现的曲面效果并不是很好，是一种假曲面化的效果。如下图所示，在上下边缘可以看到很明显的直线。
   

   UI元素沿着曲面分布

   
   所以在沿着曲面分布的前提下，如果每个”UI元素都有曲面效果“，那么整体上才会看出曲面效果。如下图所示
   

   UI元素都有曲面效果

结合实现难度和效果，我们选择了方案 3。

曲面化中的数学原理

无论是让UI沿着曲面分布，还是实现每个UI自身的曲面效果，实质上都是做同一种数学运算——计算平面上的点映射到曲面上的坐标。
由于我们曲面化是一个圆柱面，圆柱轴心线与Y轴平行，变化前后Y轴坐标是一样的，下面是原理：

掘金不支持数学公式

几何示意图

其中的关键点是 变换前后的长度对应关系和 弧长与半径的比是角度。上面给出的过程是一种特殊情况，实际过程中会有些变化，比如圆心不在原点，但是都是可以通过以上的方法推导出来结果。

曲面化<