第25章 VR/AR中的OpenGL ES

课程目录第25章 VR/AR中的OpenGL ES

第25章 VR/AR中的OpenGL ES：畸变校正，时间扭曲，单眼渲染优化

说实话，VR/AR开发是我个人觉得OpenGL ES最有意思的应用场景之一。你想想看，手机屏幕就那么大，却要模拟出一个让人信服的虚拟世界，这背后全是图形学的硬功夫。我记得第一次在VR头显上看到自己渲染的场景时，那种沉浸感真的让人兴奋。但兴奋过后，问题就来了——为什么画面边缘是弯的？为什么转头时画面会撕裂？

这一章，我们就来聊聊VR/AR里绕不开的三个核心问题：畸变校正、时间扭曲，还有单眼渲染优化。这些都是我在实际项目中踩过坑、填过坑的地方。

25.1 畸变校正：为什么画面会变形？

VR头显里用的都是凸透镜。凸透镜能把屏幕放大，让你感觉画面充满了整个视野。但代价是什么？畸变。说白了，就是画面边缘会被拉伸，直线变弯。

我刚开始做VR项目时，天真地以为直接把渲染结果丢给屏幕就行了。结果戴上头显一看，整个世界都是桶形的，像透过鱼眼镜头看东西。嗯，那感觉别提多晕了。

畸变的数学原理

畸变校正的核心思路很简单：预补偿。既然透镜会让画面向外膨胀（桶形畸变），那我们就提前让画面向内收缩（枕形畸变），两者一抵消，用户看到的就是正常的画面。

畸变模型通常用多项式来描述：

// 畸变校正的径向畸变模型
// r 是像素到图像中心的归一化距离
// k1, k2 是畸变系数，由透镜参数决定
float r = sqrt(x * x + y * y);
float r2 = r * r;
float r4 = r2 * r2;

// 畸变后的坐标
float x_distorted = x * (1 + k1 * r2 + k2 * r4);
float y_distorted = y * (1 + k1 * r2 + k2 * r4);

这里要注意，k1 和 k2 是负值。为什么？因为我们要做的是反向畸变，让画面向内收缩。

核心要点：畸变校正不是在渲染阶段做的，而是在渲染完成后，对最终输出的纹理进行后处理。我们用一个全屏四边形，把渲染好的纹理贴上去，在片段着色器里做坐标重映射。

在OpenGL ES中实现畸变校正

实现畸变校正，我推荐用网格法。预先计算好畸变后的顶点位置，然后渲染一个细分网格。这样做的好处是性能好，不需要在着色器里做复杂的数学运算。

// 畸变校正的片段着色器（简化版）
precision highp float;
uniform sampler2D u_Texture;
uniform vec2 u_Center;      // 畸变中心，通常是屏幕中心
uniform float u_K1, u_K2;   // 畸变系数

varying vec2 v_TexCoord;

void main() {
    // 将纹理坐标平移到以畸变中心为原点
    vec2 coord = v_TexCoord - u_Center;
    
    // 计算径向距离
    float r = length(coord);
    float r2 = r * r;
    float r4 = r2 * r2;
    
    // 反向畸变：向内收缩
    float scale = 1.0 + u_K1 * r2 + u_K2 * r4;
    vec2 distorted = coord * scale + u_Center;
    
    // 边界检查，防止采样到外部
    if (distorted.x < 0.0 || distorted.x > 1.0 ||
        distorted.y < 0.0 || distorted.y > 1.0) {
        gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
    } else {
        gl_FragColor = texture2D(u_Texture, distorted);
    }
}

我曾经踩过的坑：畸变系数一定要和透镜参数匹配。不同品牌的头显，甚至同一品牌的不同批次，透镜参数都可能不一样。我曾经因为用了错误的系数，导致画面边缘出现严重的色散（Chromatic Aberration），用户反馈说「看东西像戴了劣质3D眼镜」。后来我改成从设备读取校准参数，问题才解决。

25.2 时间扭曲：让画面跟上你的转头速度

VR里最忌讳什么？延迟。你转头了，画面没跟上，那种错位感会让你瞬间出戏，严重的还会头晕恶心。

时间扭曲（Time Warp）就是用来解决这个问题的。它的原理很简单：在渲染完成之后、显示之前，根据最新的头部姿态数据，对画面进行一次微调。

你想想看，从传感器采集数据，到CPU处理，再到GPU渲染，最后显示到屏幕上，这一整套流程下来少说也要十几毫秒。而在这十几毫秒里，你的头可能已经转了好几度了。如果不做时间扭曲，你看到的画面永远是「过去」的画面。

时间扭曲的工作原理

时间扭曲本质上是一个重投影过程。我们拿到最新的头部旋转矩阵，然后计算出上一帧的画面在当前视角下应该是什么样子。

记录姿态：在渲染开始时，记录当前的头部姿态矩阵 M_old。
获取最新姿态：在渲染完成、准备显示时，获取最新的头部姿态矩阵 M_new。
计算变换：计算从 M_old 到 M_new 的增量变换 M_delta = M_new * inverse(M_old)。
重投影：用 M_delta 对渲染好的纹理进行扭曲，生成最终显示的画面。

我的个人习惯：时间扭曲只处理旋转，不处理平移。因为平移带来的视差变化很难用简单的纹理扭曲来模拟，处理不好反而会引入更大的误差。对于平移，我建议用异步时间扭曲（Asynchronous Time Warp, ATW）配合位置追踪来做。

OpenGL ES中的时间扭曲实现

时间扭曲的着色器和畸变校正很像，但多了一个步骤：根据头部旋转矩阵，计算纹理坐标的偏移。

// 时间扭曲 + 畸变校正的联合着色器
precision highp float;
uniform sampler2D u_Texture;
uniform mat3 u_RotationDelta;  // 头部旋转增量矩阵
uniform vec2 u_Center;
uniform float u_K1, u_K2;

varying vec2 v_TexCoord;

void main() {
    // 第一步：时间扭曲
    // 将纹理坐标映射到三维方向向量
    vec2 centered = v_TexCoord - u_Center;
    vec3 dir = normalize(vec3(centered, 1.0));
    
    // 应用旋转增量
    vec3 dir_new = u_RotationDelta * dir;
    
    // 投影回二维纹理坐标
    vec2 coord = dir_new.xy / dir_new.z + u_Center;
    
    // 第二步：畸变校正
    float r = length(coord - u_Center);
    float r2 = r * r;
    float r4 = r2 * r2;
    float scale = 1.0 + u_K1 * r2 + u_K2 * r4;
    vec2 distorted = (coord - u_Center) * scale + u_Center;
    
    // 采样输出
    gl_FragColor = texture2D(u_Texture, distorted);
}

性能提示：时间扭曲和畸变校正可以合并到一个着色器里做，省掉一次纹理采样。我在项目里就是这么干的，性能提升了将近30%。

25.3 单眼渲染优化：别做重复劳动

VR里要渲染两只眼睛的画面。如果每只眼睛都独立渲染一遍，那性能开销直接翻倍。但你真的需要渲染两遍吗？

其实不需要。左右眼的画面差异主要来自视差，而视差本质上就是相机位置的水平偏移。我们可以利用这个特性，做单眼渲染优化。

实例化渲染（Instanced Rendering）

OpenGL ES 3.0 引入了实例化渲染。我们可以把左右眼的渲染合并到一个 draw call 里，用顶点着色器里的 gl_InstanceID 来区分左右眼。

// 顶点着色器：单眼渲染优化
#version 300 es
layout(location = 0) in vec3 a_Position;
layout(location = 1) in vec2 a_TexCoord;

uniform mat4 u_ViewProj[2];  // 左右眼的视图投影矩阵
uniform mat4 u_Model;

out vec2 v_TexCoord;

void main() {
    // gl_InstanceID 为 0 时渲染左眼，为 1 时渲染右眼
    mat4 vp = u_ViewProj[gl_InstanceID];
    gl_Position = vp * u_Model * vec4(a_Position, 1.0);
    v_TexCoord = a_TexCoord;
}

这样，一次 draw call 就能同时渲染左右眼。GPU 在处理顶点时是并行的，效率非常高。

我建议：如果你的目标设备支持 OpenGL ES 3.0，一定要用实例化渲染。我在一个项目中，把渲染次数从 2 次降到了 1 次，帧率从 45fps 直接跳到了 75fps。

纹理数组与分层渲染

另一种优化方式是使用纹理数组（Texture Array）。把左右眼的渲染结果分别写入纹理数组的不同层，然后在畸变校正阶段一次性采样。

// 创建纹理数组
GLuint textureArray;
glGenTextures(1, &textureArray);
glBindTexture(GL_TEXTURE_2D_ARRAY, textureArray);
glTexImage3D(GL_TEXTURE_2D_ARRAY, 0, GL_RGBA8, 
             width, height, 2, 0,  // 2层：左眼和右眼
             GL_RGBA, GL_UNSIGNED_BYTE, NULL);

// 渲染到纹理数组的某一层
glFramebufferTextureLayer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, 
                          textureArray, 0, 0);  // 第0层：左眼
// 渲染右眼时，绑定第1层
glFramebufferTextureLayer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, 
                          textureArray, 0, 1);  // 第1层：右眼

注意：纹理数组在 OpenGL ES 3.0 中才支持。如果你的目标设备是低端机，可能只能用传统的双纹理方案。我在做适配时，一般会写两套渲染管线，根据设备能力动态切换。

25.4 知识体系总览

下面这张图总结了本章的核心知识点和它们之间的关系。你可以把它当作一个快速参考。

25.5 实践中的注意事项

讲完了理论，我再分享几个实际项目中的经验。

性能预算

VR对帧率的要求极其苛刻。90fps是及格线，120fps才算优秀。这意味着每一帧只有11毫秒甚至8毫秒的时间。畸变校正和时间扭曲虽然能提升体验，但它们本身也是有开销的。

阶段	时间预算（90fps）	说明
CPU逻辑	2-3ms	场景管理、物理、输入
GPU渲染	5-6ms	主渲染管线
后处理	1-2ms	畸变校正 + 时间扭曲
显示刷新	1ms	交换缓冲区

我的经验：后处理阶段一定要控制在2ms以内。如果超过这个阈值，我宁愿降低一点渲染分辨率，也要保证后处理的时间。因为畸变校正和时间扭曲对体验的影响，比分辨率降低要明显得多。

多视图扩展（OVR_multiview）

如果你用的是Oculus或者Google Cardboard的SDK，它们通常都支持 OVR_multiview 扩展。这个扩展允许你在一次渲染中输出多个视图（比如左右眼），而且不需要在着色器里手动处理 gl_InstanceID。

// 启用多视图扩展
#extension GL_OVR_multiview : enable
layout(num_views = 2) in;

// 顶点着色器
void main() {
    // gl_ViewID_OVR 自动区分左右眼
    mat4 vp = u_ViewProj[gl_ViewID_OVR];
    gl_Position = vp * u_Model * vec4(a_Position, 1.0);
}

这个扩展的好处是，GPU硬件层面就支持多视图渲染，性能比手动实例化还要好。如果你的目标设备支持，一定要用。

兼容性提醒：OVR_multiview 是Oculus的扩展，在非Oculus设备上可能不支持。我在做跨平台项目时，会先用 glGetString(GL_EXTENSIONS) 检查扩展是否存在，不存在就回退到实例化渲染。

25.6 小结

VR/AR里的OpenGL ES，说白了就是和延迟、畸变、性能做斗争。畸变校正解决的是光学问题，时间扭曲解决的是延迟问题，单眼渲染优化解决的是性能问题。这三者缺一不可。

我个人觉得，做VR开发最需要培养的是一种「延迟敏感」的思维。每一个操作都要问自己：这个操作会不会增加延迟？能不能合并到上一个步骤里？能不能用后处理来弥补？

嗯，这一章的内容就到这里。希望这些经验能帮你少走一些弯路。

公众号:蓝海资料掘金营，微信deep3321

📚 课程目录