原文链接： Three approaches to VR lens distortion
个人学习翻译作品，鼓励大家看原文。原文中大部分链接已经失效，本文做了相应更新，但并不保证今后会持续更新。大部分翻译忠于原文，但部分语句不通（才疏学浅实在理解不能）的地方会有译者润色，如有重要用词或原理阐述错误，还请评论斧正。

---

VR 透镜畸变的三种解决方案

想要在 VR 体验中获得沉浸感需要有一个相对较大的视场角。这可以通过在你面前部署一个巨大的球状曲面屏来实现，当然，这种技术是超级贵的。一个相对可行的增加视场角的解决方案是使用两片透镜来观察一块普通的小矩形屏幕。

通过透镜来增加视场角

一块部署在眼前的透镜可以极大地增加视场角，但这是有代价的：画面产生了球状畸变。视场角增加的越大，图像畸变越严重。这篇文章对当前三种图像反畸变主流方案做了简单的摘要，这三种方案都在不同的 JavaScript WebVR 相关项目中有所实践。

下面是一个典型的头戴式显示屏的显示效果。可以看到，透镜导致了枕形失真。

透过透镜看图片，观察到图像产生了球状畸变

解决方案是将桶状畸变施加到图像上。当我们再通过畸变透镜观察图像时，图像在两次畸变中被中和了。

将桶状畸变施加到图像上，再透过畸变透镜观察，图像被中和了

透镜畸变可以通过数学公式更好的理解。要合理反畸变，我们需要计算两眼的中心，这需要知道屏幕和场景本身的几何属性。这些都可以获取，甚至是在一个网页应用上！

1. Fragment based solution (bad) 基于片元的解决方案（差）

畸变最简单的方案是使用二次渲染的方法。首先我们渲染左右眼到一张纹理上，然后通过片元（像素）着色器处理该纹理，具体方法为向相对眼部中心方向移动每一个像素点。

逐像素计算畸变

这是最初的也是最简单的方法，但也是效率最低的，因为每一个像素都是分开处理的。WebVR 的最初版本样板使用了此方法。

2. Mesh based solution (better) 基于三角网的解决方案（更好）

这种畸变方案不需要分别处理每一个像素，我们畸变一个相对松散的三角形网格（40 乘 20 的三角网就能胜任）。

逐点计算畸变

这个方案可以节省许多直接的计算并让 GPU 做相对合理的插值计算。我们不需要处理屏幕的每个像素点（1920 * 1080 ~= 2e6），只需计算这个三角网的每个顶点（40 * 20 = 800）。结果是计算量的显著减少（3次方或更多），和性能的起飞。WebVR Polyfill 现在应用的就是此方法。

畸变操作在此方法中并非唯一费时的部分，还有大部分的时间浪费在拷贝整个场景到中间纹理过程中了。

3. Vertex displacement based solution (best) 基于顶点置换的解决方案 （最好）

现在我们来看三种畸变当中效率最高的一种，此方案不再需要在一开始生成中间文林。几何体将通过特定的顶点着色器进行畸变。此方法的思路是根据摄像头的位置，我们相应地重置顶点，使得 2D 像是已经经过桶状畸变。这种方法将不再需要二次渲染，因此我们省去了拷贝生成纹理的费时的中间步骤。

但是，这种方法要求每个三角网拥有一定的顶点密度来保证变形。思考这样一个情况，我们将渲染一个离镜头很近的巨大的四点矩形，然而这四个点畸变之后任然得到一个四点矩形，显然并没有桶状效果。因此，如果在程序员这边不进行额外处理的话，此方法将无法作为通用方法使用。（译者注：程序需要对三角网进行细分处理）

好像是说北斗星连线因缺少中间顶点，而没有进行合理畸变

此方案应用于 Cardboard Design Lab 以及开源项目 VR View project 中。基于几何的畸变（此处和小标题名称不完全相同，但应该是一种方法）同样会造成尖锐的渲染结果，因为双程方案会造成锯齿效果，特别是当中间纹理不够大的话。你可以从这篇文章中督导关于畸变更多详细内容。