AR/VR中使用Overlay提升清晰度

在AR/VR应用中，清晰度是影响用户体验一个至关重要的因素，虽然目前提高清晰度的方案有很多：提高物理屏幕的分辨率，使用畸变网格进行畸变上屏等。但是Overlay感觉是在软件层面可以增加清晰度的一种很好的方式。

一，为什么要引入Overlay的实现。

考虑一个简单的场景，我现在要在AR/VR设备中呈现一个简单的场景（在正前方一块电影屏幕，并在上面播放电影）：

正常的流程是新建一个三维场景，在正前方添加一个电影屏幕的网格，从内存中解析mp4格式的视频内容，并贴图到电影屏幕的三维网格上，然后通过渲染引擎渲染出左右眼看到的场景内容到缓存Buffer中（假设正好看向电影屏幕方向，此时电影屏幕也在视野中），然后我们会将缓存Buffer中的内容通过畸变上屏并呈现给用户（为什么不直接渲染出畸变后的场景内容并呈现到屏幕上？这涉及到目前AR/VR中的另一项技术ATW，俗称异步时间扭曲的一种插帧的技术，在帧率不足Vsync时使用缓存的视频帧进行插帧，所以需要将渲染和上屏进行分隔开来）。

但是这种实现会有两个弊端，一个是电影屏幕会受到场景中光照的影响，导致看到的电影内容比mp4中实际的内容看起来发白；第二个弊端是会涉及到两次像素采样，一次是将MP4中的电影内容采样到缓存Buffer中，第二次是将缓存Buffer中的内容畸变采样到屏幕上，这样直接导致了清晰度的下降。

Overlay的实现方式：并不会将电影屏幕的内容渲染到缓存Buffer中，缓存Buffer中只包含三维场景的背景内容，后续在畸变上屏的过程中，首先操作的是缓存Buffer，然后开启Blend功能后，直接将MP4的纹理也畸变上屏，此过程MP4的纹理只会产生一次像素采样，保持了高清晰度，效果图如下所示：

场景中左侧的面板是采用的Overlay技术，在清晰度上有明显的提升；而且没有受到场景光照的影响，右侧的面板明显颜色已经失真（发白）。

二， Overlay的实现原理

在这里主要以平面Overlay为例，对相关原理进行简单的记录，其他类型的Overlay原理基本相同。
Overlay的实现难点主要在如何直接将纹理畸变到屏幕的准确位置上：
正常的AR/VR上屏流程，畸变处理的缓存Buffer都是经过Model，View，Perspective矩阵渲染出来的场景内容，但是当电影屏幕的内容不在缓存Buffer上，而是直接从纹理到屏幕，并且跳过了Model，View，Perspective矩阵的处理时，这个过程该如何处理呢？
第一步我们需要计算屏幕上畸变网格的顶点，在采样时会不会落入电影屏幕的纹理上，如果落在电影屏幕的纹理范围内，这个顶点对应到纹理的那个UV坐标，作为这一步的计算输入我们需要电影屏幕在实际场景中的位置，大小，也就是Model矩阵，以及当前相机的姿态View矩阵。
第二步，需要计算Model View矩阵的逆：
MV_inverse = View_inverse * Model_inverse
使用MV_inverse 将畸变网格转换到模型坐标系中，然后使用转化到模型坐标系中的畸变网格顶点对电影屏幕纹理进行采样处理。
整个流程还是相对比较简单清晰的，下面是MV_inverse 矩阵的计算过程，以及Shader的处理代码：

// If a simple quad defined as a -1 to 1 XY unit square is transformed to
// the camera view with the given modelView matrix, it can alternately be
// drawn as a TimeWarp overlay image to take advantage of the full window
// resolution, which is usually higher than the eye buffer textures, and
// avoid resampling both into the eye buffer, and again to the screen.
// This is used for high quality movie screens and user interface planes.
//
// Note that this is NOT an MVP matrix -- the "projection" is handled
// by the distortion process.
//
// The exact composition of the overlay image and the base image is
// determined by the warpProgram, you may still need to draw the geometry
// into the eye buffer to punch a hole in the alpha channel to let the
// overlay/underlay show through.
//
// This utility functions converts a model-view matrix that would normally
// draw a -1 to 1 unit square to the view into a TanAngle matrix for an
// overlay surface.
//
// The resulting z value should be straight ahead distance to the plane.
// The x and y values will be pre-multiplied by z for projective texturing.
inline ovrMatrix4f TanAngleMatrixFromUnitSquare( const ovrMatrix4f * modelView )
{const ovrMatrix4f inv = ovrMatrix4f_Inverse( modelView );ovrMatrix4f m;m.M[0][0] = 0.5f * inv.M[2][0] - 0.5f * ( inv.M[0][0] * inv.M[2][3] - inv.M[0][3] * inv.M[2][0] );m.M[0][1] = 0.5f * inv.M[2][1] - 0.5f * ( inv.M[0][1] * inv.M[2][3] - inv.M[0][3] * inv.M[2][1] );m.M[0][2] = 0.5f * inv.M[2][2] - 0.5f * ( inv.M[0][2] * inv.M[2][3] - inv.M[0][3] * inv.M[2][2] );m.M[0][3] = 0.0f;m.M[1][0] = 0.5f * inv.M[2][0] + 0.5f * ( inv.M[1][0] * inv.M[2][3] - inv.M[1][3] * inv.M[2][0] );m.M[1][1] = 0.5f * inv.M[2][1] + 0.5f * ( inv.M[1][1] * inv.M[2][3] - inv.M[1][3] * inv.M[2][1] );m.M[1][2] = 0.5f * inv.M[2][2] + 0.5f * ( inv.M[1][2] * inv.M[2][3] - inv.M[1][3] * inv.M[2][2] );m.M[1][3] = 0.0f;m.M[2][0] = m.M[3][0] = inv.M[2][0];m.M[2][1] = m.M[3][1] = inv.M[2][1];m.M[2][2] = m.M[3][2] = inv.M[2][2];m.M[2][3] = m.M[3][3] = 0.0f;return m;
}

Shader相关代码：

//vertex shader"uniform mediump mat4 Mvpm;\n""uniform mediump mat4 Texm;\n""uniform mediump mat4 Texm2;\n""uniform mediump mat4 Texm3;\n""uniform mediump mat4 Texm4;\n""attribute vec4 Position;\n""attribute vec2 TexCoord;\n""attribute vec2 TexCoord1;\n""varying  vec2 oTexCoord;\n""varying  vec3 oTexCoord2;\n"   // Must do the proj in fragment shader or you get wiggles when you view the plane at even modest angles."void main()\n""{\n""   gl_Position = Mvpm * Position;\n""  vec3 proj;\n""    float projIZ;\n""""   proj = mix( vec3( Texm * vec4(TexCoord,-1,1) ), vec3( Texm2 * vec4(TexCoord,-1,1) ), TexCoord1.x );\n""    projIZ = 1.0 / max( proj.z, 0.00001 );\n""   oTexCoord = vec2( proj.x * projIZ, proj.y * projIZ );\n""""   oTexCoord2 = mix( vec3( Texm3 * vec4(TexCoord,-1,1) ), vec3( Texm4 * vec4(TexCoord,-1,1) ), TexCoord1.x );\n""""}\n"
//fragment shader"uniform sampler2D Texture0;\n""uniform sampler2D Texture1;\n""varying highp vec2 oTexCoord;\n""varying highp vec3 oTexCoord2;\n""void main()\n""{\n""    lowp vec4 color0 = texture2D(Texture0, oTexCoord);\n""   {\n""     lowp vec4 color1 = vec4( texture2DProj(Texture1, oTexCoord2).xyz, 1.0 );\n""     gl_FragColor = mix( color1, color0, color0.w );\n"    // pass through destination alpha" }\n""}\n"

三， Overlay有哪些类型

目前Overlay支持的类型主要有四种Quad（平面面板），Equirect（360球形），Cylinder（柱面），Cube（天空盒），目前这四种Overlay都可以从技术层面进行相关的实现。

四， Overlay应用场景

Overlay主要应用在对场景清晰度要求较高的情形下，比如用户操作UI界面（可以极大提高说明文字的清晰度），360度图片展示，360视频播放，虚拟电影院中的荧幕部分。