简介OpenGLESDemo.zip 是一份面向 Android 开发者的 OpenGL ES 入门与进阶示例集合涵盖从顶点绘制、着色器编程、纹理映射到投影变换、光照模型、深度测试、帧缓冲对象FBO、混合模式以及动画帧率控制等核心知识并延伸至 VR 双目渲染场景适合希望系统掌握移动端图形编程的初学者和有一定基础的技术人员。压缩包共 1245 个文件约 12.63MB主要包含 dex/class 编译产物、Java 源码、JSON 配置、GLSL 着色器、XML 布局以及 PNG 贴图等可对照代码与资源文件理解 OpenGL ES 在 Android 中的实际应用。已有 248 人学习浏览。示例按功能分模块组织每个子目录对应一个主题从零开始搭建渲染管线并配有多套可运行 Demo便于直接导入工程调试观察效果是快速上手 OpenGL ES 并拓展 VR 开发能力的实用参考资料。1. 为什么是OpenGLESDemo一个能直接跑的渲染样板OpenGL ES 是移动端图形渲染的底层标准做 VR 或者图像处理 Demo 的人几乎都绕不开它。最近在翻一个 OpenGLESDemo.zip 的资源包发现它不像网上很多教程那样只贴几段零碎代码而是把一个完整的渲染管线、VR 双屏分割、畸变校正和传感器交互都揉在了一起解压后能直接导入工程跑出画面。这个包特别适合两类人一类是刚入门 OpenGL ES、想知道顶点和片段着色器怎么配合的新手另一类是打算做手机 VR 盒子应用、但不想从零造轮子的开发者。如果你是这两类人这篇笔记应该能帮你省下不少查资料的力气。2. OpenGL ES 渲染管线拆解从顶点到像素的每一步拿到 Demo 之后第一件事不是急着跑起来而是先把它的渲染主循环捋清楚。这个包里的默认场景是一个立方体加一张纹理但代码结构上已经分出了顶点输入、着色器编译、矩阵更新、离屏渲染这几块。新手最容易犯的错误是把所有 GL 调用堆在一个类里结果后面加 VR 双视口时根本无从下手。这个 Demo 的可贵之处在于它把每帧的逻辑拆成了好几个方法顺着调用链读一遍基本就理解了从 glDrawArrays 到屏幕上像素的完整路径。2.1 顶点着色器与片段着色器两句代码决定渲染效果先说着色器。OpenGL ES 2.0 之后没有了内置的固定管线所有顶点变换和颜色计算都得自己写 GLSL。这个 Demo 里给了一个最基础的顶点着色器核心代码我简化成了下面这样// vertex_shader.glsl attribute vec4 aPosition; // 顶点坐标传入的 vec3 会补成 vec4 attribute vec2 aTexCoord; // 纹理坐标 uniform mat4 uMVPMatrix; // 模型-视图-投影矩阵外部每帧更新 varying vec2 vTexCoord; // 传递给片段着色器的纹理坐标 void main() { gl_Position uMVPMatrix * aPosition; // 这里就是顶点最终在裁剪空间的位置 vTexCoord aTexCoord; // 纹理坐标原样透传 }这么短一段逻辑却是整个渲染的骨架。uMVPMatrix是外部传入的 MVP 矩阵它把物体坐标一步步从模型空间搬到屏幕裁剪空间。gl_Position一旦算错画面不是翻转就是消失。片段着色器那边就更简单了通常是采样一张纹理// fragment_shader.glsl precision mediump float; varying vec2 vTexCoord; uniform sampler2D uTexture; void main() { gl_FragColor texture2D(uTexture, vTexCoord); }这里有一个参数容易忽略纹理采样器的precision声明。如果你漏了precision mediump float部分手机驱动会直接编译失败而且报错信息很隐晦提示说“variable used without precision”。当初我第一次跑这个 Demo 时就踩过这个坑后来养成习惯每个片段着色器第一行先写精度声明。另外注意texture2D在 OpenGL ES 3.0 的写法是texture如果你是按高版本编译得把函数名换掉否则会报No matching overload for function texture2D。2.2 矩阵变换与坐标系左手系带来的第一个坑OpenGL ES 使用的是右手坐标系在裁剪空间的表现但实际建模时很多人用的是左手系或者干脆把 Z 轴方向搞反。这个 Demo 里在 onSurfaceChanged 里重新计算了透视矩阵并且正确处理了屏幕宽高比代码是这样的// 宽高比变化时调用 public void onSurfaceChanged(int width, int height) { glViewport(0, 0, width, height); float aspect (float) width / height; // 透视投影视角45度最近0.1最远100 Matrix.perspectiveM(projectionMatrix, 0, 45f, aspect, 0.1f, 100f); // 设置相机位置眼睛在(0, 0, 3)看向原点 Matrix.setLookAtM(viewMatrix, 0, 0f, 0f, 3f, // eye 0f, 0f, 0f, // center 0f, 1f, 0f); // up }注意Matrix.perspectiveM最后一个参数是 far 平面如果设得太大比如 10000深度缓冲的精度会不够远处的物体可能出现画面闪烁。这个 Demo 里给的 100 对于普通场景足够。还有一个新手常搞错的点是glViewport没有跟随高宽比变化结果图像被拉伸。这个 Demo 在竖屏和横屏切换时都重新设置了视口我后面在集成时发现这个设置直接影响了 VR 模式下左右眼画面的拼接效果。矩阵更新还有个“玄学”问题在 Android 上Matrix.rotateM是围绕原点旋转的但如果你直接把它用在模型矩阵上而模型已经平移过了旋转中心就会跑偏。正确顺序应该是先旋转后平移而且是矩阵乘法顺序相反——M * V * P与V * M * P的效果完全不同。这个 Demo 里把模型矩阵和视图矩阵分开维护就是为了一次旋转模型的所有顶点而不是旋转相机。2.3 纹理与FBO把画面送上屏幕前的最后一关在 VR 模式下我们要先把左右眼画面渲染到一张离屏纹理上再做畸变处理最后才画到屏幕。这就涉及 FBO帧缓冲对象。Demo 里提供了一个简单的纹理附件创建方法private int createFramebuffer(int width, int height) { int[] fbo new int[1]; int[] tex new int[1]; // 创建纹理 GLES20.glGenTextures(1, tex, 0); GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, tex[0]); GLES20.glTexImage2D(GLES20.GL_TEXTURE_2D, 0, GLES20.GL_RGBA, width, height, 0, GLES20.GL_RGBA, GLES20.GL_UNSIGNED_BYTE, null); // 设置纹理滤波否则放大后锯齿明显 GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_LINEAR); GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR); // 创建 FBO 并绑定纹理 GLES20.glGenFramebuffers(1, fbo, 0); GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, fbo[0]); GLES20.glFramebufferTexture2D(GLES20.GL_FRAMEBUFFER, GLES20.GL_COLOR_ATTACHMENT0, GLES20.GL_TEXTURE_2D, tex[0], 0); // 检查 FBO 是否完整 int status GLES20.glCheckFramebufferStatus(GLES20.GL_FRAMEBUFFER); if (status ! GLES20.GL_FRAMEBUFFER_COMPLETE) { throw new IllegalStateException(FBO 创建失败: status); } // 解绑回到默认缓冲 GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, 0); return tex[0]; }这段代码里有个参数容易埋坑纹理的长宽并不是屏幕像素而是渲染目标的实际大小。如果你把width和height设成 GLSurfaceView 的尺寸在部分低端机上会超出纹理上限通常是 4096x4096导致GL_FRAMEBUFFER_UNSUPPORTED。我一般会先把尺寸 clamp 到 2048 以内。还有一个常见问题是忘了设置GL_TEXTURE_WRAP_S/T为GL_CLAMP_TO_EDGE默认的GL_REPEAT会让纹理边缘出现奇怪的镜像线尤其是在 VR 左右眼画面拼接时特别明显。FBO 解绑时机也很关键。Demo 里的做法是先渲染左右眼到 FBO解绑后绑定回0号默认帧缓冲再进行畸变网格的绘制。如果你忘了解绑后面所有屏幕绘制都会进到纹理里结果屏幕黑屏纹理上却有画面。排查这类问题时最快的办法是glBindFramebuffer(GLES20.GL_FRAMEBUFFER, 0)强制解绑然后看纹理附件的内容是否正常。3. VR 模式实现左右眼分割与畸变校正手机 VR 盒子的原理并不复杂屏幕被左右分割左眼显示左相机画面右眼显示右相机画面加上透镜畸变补偿。真正难的是两个相机的位置差以及畸变网格的顶点计算。这个 Demo 里把这两块分开了先是普通双视口渲染然后叠加一个畸变网格着色器。如果你想把 OpenGL ES 的通用渲染改成 VR 模式这一章的经验基本能覆盖前期 80% 的坑。3.1 双视口渲染在一张纹理上画两遍双视口渲染的常规做法是把视口宽度一分为二左右各画一遍场景只是视图矩阵里的相机位置要偏移一个瞳距。Demo 里的做法更稳妥先离屏渲染到一张全屏纹理然后在一个全屏矩形上把纹理采样两次分别映射到屏幕左半和右半。核心绘制代码思路如下// 离屏渲染左右眼到同一个纹理 private void renderToFBO(int eyeIndex) { // 绑定 FBO把视口设为全尺寸 GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, fboId); GLES20.glViewport(0, 0, fboWidth, fboHeight); // 根据左眼(0)或右眼(1)设置视图矩阵 float eyeOffset (eyeIndex 0 ? -0.03f : 0.03f); // 瞳距 6cm Matrix.setLookAtM(viewMatrix, 0, eyeOffset, 0f, 3f, eyeOffset, 0f, 0f, 0f, 1f, 0f); // 绘制场景 GLES20.glUseProgram(sceneProgram); // ... 传入 MVP、纹理、顶点数据 GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, vertexCount); }这里的eyeOffset是左右相机在 X 轴上的平移正负 0.03 其实就是 6 厘米的瞳距。如果你把两个偏移设成一样戴进 VR 盒子里会头晕。另外注意glViewport此时是全屏尺寸因为我们最终要在一张完整纹理上做畸变校正。如果你直接在默认缓冲上分左右视口再叠加畸变网格就会很别扭——畸变网格需要的是完整画面的 UV而不是左右各一块。3.2 手机VR盒子的透镜畸变用顶点位移替代着色器补偿VR 盒子的透镜是凸透镜画面边缘会被拉伸所以我们要做“桶形畸变”预补偿。就是让网格顶点向中心收缩抵消透镜的拉伸。Demo 的畸变着色器没有再单独采样而是直接在顶点着色器里修改 UV实现起来很轻量attribute vec4 aPosition; // 畸变网格顶点 attribute vec2 aTexCoord; // 原始纹理坐标 uniform vec2 uDistortion; // 畸变系数一般用K1和K2 varying vec2 vTexCoord; void main() { // 将纹理坐标归一化到 -1..1 vec2 p aTexCoord * 2.0 - 1.0; float r2 dot(p, p); // 桶形畸变半径越大收缩越明显 p p * (1.0 uDistortion.x * r2 uDistortion.y * r2 * r2); vTexCoord p * 0.5 0.5; gl_Position aPosition; }这段代码的巧妙之处在于它只改 UV不改顶点位置。畸变系数uDistortion一般取负值比如(-0.1, -0.05)这样边缘的 UV 被往里拉最终经过透镜后反而看起来是正的。如果你把系数设成正的画面边缘会继续膨胀戴上去特别晕。调试时我会把uDistortion初始化为 0再一步步调大看网格边线是否由直变弯。这里还有个细节畸变网格的顶点数量不是越多越好手机 GPU 的填充率有限我一般用 40x40 的网格既平滑又不卡顿。3.3 传感器旋转矩阵从手机陀螺仪到观察矩阵VR 体验的核心是头部转动和画面视角同步。Demo 里用了系统传感器提供的旋转矩阵把它转成 OpenGL 的视图矩阵。在 Android 上常见的做法是注册TYPE_ROTATION_VECTOR传感器// 传感器回调中获取旋转矩阵 SensorManager.getRotationMatrixFromVector(rotationMatrix, sensorEvent.values); // 把旋转矩阵转成 4x4 float 数组注意 OpenGL 是列主序 for (int i 0; i 16; i) { glMatrix[i] rotationMatrix[i % 16]; // 这里只是示意实际要处理坐标系对齐 }注意 Android 的传感器坐标系是“设备坐标”而不是世界坐标直接拿来当 OpenGL 视图矩阵会导致场景跟着手机竖屏旋转。我一般会在onResume里把旋转矩阵乘以一个固定的旋转 90 度的矩阵让 X 轴对齐屏幕横向。这个 Demo 里正好包含了这个对齐代码省了我不少事。还有一个常见问题是传感器数据更新频率太高OpenGL 渲染线程跟不上就会看到画面抖动。常规做法是给传感器设置一个和帧率接近的延迟比如SENSOR_DELAY_GAME20ms然后在渲染线程里和上一次旋转矩阵做线性插值避免跳变。4. 在 Android 工程里跑起来环境配置与集成步骤这个 Demo 下载下来是个 zip解压后是一个完整的 Android 工程。市面上很多老项目还停留在 Eclipse 时代但这个包已经迁移到了 Android Studio 的 Gradle 结构。不过里面还是有几处容易翻车的地方比如 NDK 版本、依赖库路径、以及 GLSurfaceView 的生命周期处理。这一章按实际集成的顺序把环境配置和主线程交互讲清楚。4.1 用Gradle接入从Eclipse项目迁移到Android Studio如果你拿到的项目还是project.properties和AndroidManifest.xml老一套手动迁移到 Gradle 反而比新建工程更麻烦。这个 Demo 已经做好了迁移你只需要在build.gradle里确认几个关键参数android { compileSdkVersion 30 buildToolsVersion 30.0.2 defaultConfig { applicationId com.example.openglestest minSdkVersion 19 targetSdkVersion 30 // 使用 OpenGL ES 2.0 multiDexEnabled true } }这里最容易踩的坑是minSdkVersion 19如果你为了兼容老设备降到 16部分 GLSL 语法比如switch语句会在编译时报警告。另外compileSdkVersion和实际运行机器的系统版本不一样没关系但建议不低于 26否则GlSurfaceView.Renderer的某些回调行为会不一致。还有一点如果你把工程放在非ASCII路径下比如中文目录名NDK 编译阶段可能会报Error: NDK not configured。我习惯把整个 zip 解压到纯英文路径比如D:/workspace/OpenGLESDemo就再也没遇到这类问题。导入 Android Studio 的时候有个细节如果 gradle 版本不对会卡在Could not find com.android.tools.build:gradle。解决办法是打开gradle-wrapper.properties把 distributionUrl 改成你本机已有的 gradle 版本或者在 Android Studio 里点击Gradle sync自动下载。这个 Demo 自带的 gradle 版本比较老我第一次同步时等了很久后来直接改成 6.5 才顺利通过。4.2 MainActivity与GLSurfaceView的纠缠生命周期同步GLSurfaceView 的渲染是在独立线程里跑的它和 Activity 的生命周期并不是天然同步。最典型的问题是应用切到后台再回来渲染线程已经销毁但 GL 上下文还没有重新创建结果黑屏或者闪退。这个 Demo 里做了正确的处理在 onPause 里调用glSurfaceView.onPause()在 onResume 里调用glSurfaceView.onResume()Override protected void onPause() { super.onPause(); // 通知 GLSurfaceView 暂停渲染线程 glSurfaceView.onPause(); // 停止传感器监听避免后台耗电 sensorManager.unregisterListener(sensorListener); } Override protected void onResume() { super.onResume(); // 重新开启 GL 线程 glSurfaceView.onResume(); // 注册传感器注意在这里重新获取旋转矩阵 sensorManager.registerListener(sensorListener, rotationVectorSensor, SensorManager.SENSOR_DELAY_GAME); }这里有一个隐藏的坑GLSurfaceView.onResume()会重建 GL 上下文这意味着你之前创建的着色器程序、纹理、FBO 全部失效。如果不在onSurfaceCreated里重新加载这些资源画面就会变成一片黑。Demo 里把所有资源初始化放在了onSurfaceCreated而不是构造函数里就是因为这个原因。我见过很多同学把纹理加载写在 Activity 的onCreate里结果一锁屏再打开所有纹理都丢失。还有个容易被忽略的细节onSurfaceCreated和onSurfaceChanged的调用顺序未必是你想的那样。首次显示时一定是created - changed - drawFrame但如果后台回来可能只有created而不触发changed所以视口和投影矩阵的重建要放在changed里而资源加载放在created里两者不能混。4.3 触摸交互与帧率控制别让UI线程卡住GL线程在普通 2D 应用里你可以在 UI 线程里随便操作视图但 OpenGL 渲染线程里的glDrawArrays是不能被打断的。这个 Demo 提供了一个简单的触摸旋转交互让用户通过滑动改变模型矩阵的角度。它的实现是通过一个线程安全的标志位把触摸事件传给 GL 线程处理public class TouchController { private final float[] delta new float[2]; private boolean dirty; // 在 UI 线程调用 public synchronized void onTouch(float dx, float dy) { delta[0] dx; delta[1] dy; dirty true; } // 在 GL 线程每帧开始时调用 public synchronized boolean consumeDelta(float[] out) { if (dirty) { out[0] delta[0]; out[1] delta[1]; delta[0] 0; delta[1] 0; dirty false; return true; } return false; } }这里有个重要原则不要在 GL 线程里直接调用View的方法也不要使用GLSurfaceView.setRenderer之后还 main 线程里操作 GL 对象。帧率控制这块Demo 里没有强制限帧但是我建议在渲染线程里加Thread.sleep(16)或者System.nanoTime计算实际帧耗时保持 60fps。如果 VR 模式下掉到 30fps 以下用户会明显感觉到画面闪烁和头晕。我一般会在渲染线程的开头记录时间结尾计算耗时如果超过16ms就打印警告日志但不要阻塞帧率否则掉得更严重。5. 常见问题与避坑编译、黑屏、畸变的血泪排查这部分是每个搞过 GLES 的人都绕不开的血泪经验。我在调这个 Demo 的时候踩过几只“典型大坑”这里把现象、原因和解决办法一条条写出来照着排查比靠猜效率高得多。所谓“黑匣子”问题很多时候就是没把 GL 错误日志打出来。5.1 编译总是报错无法解析的符号现象导入工程后GLES20和Matrix类报红或者R文件缺失。原因最常见的是 Gradle 依赖里没有声明 OpenGLES 相关的支持和android.opengl包也有可能是 buildToolsVersion 版本太老导致部分 API 未被识别。解决先检查build.gradle里compileSdkVersion是否不低于 21然后 Clean 工程重建。如果还不行把 SDK 路径重新指定因为Matrix.perspectiveM是 API 9 之后才有的确保声明了opengl权限但注意这只对特定设备生效大部分情况是编译工具问题。我后来直接把项目放在纯英文路径下编译就顺利通过。5.2 黑屏但无报错glGetError 告诉你真相现象程序跑起来不闪退但页面全黑连日志都没有。原因要么是着色器编译失败被忽略了要么是顶点数据没绑对要么是 FBO 不完整导致绘制无效。在 OpenGL ES 里很多错误是异步抛出你需要主动检查。解决在每个glDrawArrays之后调用GLES20.glGetError()打印返回值。常见错误码GL_INVALID_OPERATION (0x0502)表示着色器程序未链接成功GL_FRAMEBUFFER_UNCOMPLETE则表示 FBO 设置错误。另外给顶点着色器加上状态检查int status GLES20.glGetShaderiv(shaderId, GLES20.GL_COMPILE_STATUS); if (status GLES20.GL_FALSE) { String log GLES20.glGetShaderInfoLog(shaderId); throw new RuntimeException(Shader compile failed: log); }这样做可以快速定位是哪一句 GLSL 写错了。还有一种黑屏是因为glViewport设成了 0 尺寸我调了半小时才发现onSurfaceChanged里 width 和 height 被写反了导致视口宽高为 0所有绘制被丢弃。5.3 纹理加载后是紫红色格式不匹配现象场景里出现大面积紫色色块像是一片极光。原因紫红色是 OpenGL 无法解码纹理数据的默认颜色。最常见的是 PNG 图片实际是 16 位色深或者用了预乘 Alpha而代码里却按 RGBA8888 加载。解决我建议把所有纹理统一转成 RGBA8888 的 PNG用 BitmapFactory 加载时强制指定格式BitmapFactory.Options.inPreferredConfig Bitmap.Config.ARGB_8888。调 VR 畸变网格用的纹理如果出现紫红色检查是不是上传到了纹理单元 0而着色器里采样器默认绑定的就是单元 0所以不绑也没关系但其他纹理单元会被忽略。5.4 VR 模式下左右眼画面错位现象戴进 VR 盒子里左右画面看起来像倒过来或者有明显重影。原因一种是视图矩阵的eyeOffset设置反了另一种是屏幕左右分割时 UV 坐标没对齐。如果左右眼偏移方向相同视觉上根本看不出立体感如果相对旋转有问题画面会沿 Z 轴扭。解决先从最基础的开始把两个eyeOffset都设成 0确认双眼画面完全重合再逐渐增加偏移量。然后检查屏幕分割时左眼的glViewport应该是(0, 0, width/2, height)右眼是(width/2, 0, width/2, height)不能搞反。另外注意传感器旋转矩阵和场景坐标系的 Z 轴方向要一致否则左眼看的是前面右眼却看到侧面重影特别严重。5.5 画面撕裂和闪烁现象旋转手机时画面明显撕裂或者有一半画面一直在闪。原因渲染线程和 UI 线程没有隔离或者背缓冲交换时机不对。GLSurfaceView 的RENDERMODE_CONTINUOUSLY模式会在后台连续渲染如果同步传感器回调时把 GL 操作放在传感器线程里就会造成撕裂。解决把传感器数据的处理放在渲染线程的onDrawFrame里不要直接在传感器回调里修改 OpenGL 状态。还要记得GLSurfaceView.setRenderMode(GLES20.GLSurfaceView.RENDERMODE_WHEN_DIRTY)不会处理 VR 场景因为 VR 需要每帧跟随头部旋转所以必须持续渲染但这样更耗电。我最后用了一个变通方案当传感器没变化时不重绘传感器变化幅度超过 0.1 度才请求渲染这样既省电又不撕裂。6. 进阶把Demo改造成自己的渲染框架跑通这个 Demo 只是第一步想用它做项目最好把它改造成一个轻量的渲染框架。我做了两件事收益最大一是把场景中的物体抽象成节点二是在绘制调用里把 VBO 和 VAO 用起来。改完以后同一个渲染循环同时支持普通 2D UI 和 VR 双目渲染代码反而比原来的 Demo 更简洁。6.1 抽象渲染节点与场景管理原来的 Demo 里立方体、地面和畸变网格的绘制代码都塞在 Renderer 里加一个新物体就要复制一遍着色器创建和顶点绑定的代码。我把它拆分成了基类public abstract class RenderNode { // 每帧更新矩阵和纹理状态 public abstract void draw(Camera camera); }然后让立方体、平面、网格都继承它。渲染线程里只需要维护一个ListRenderNode按深度排序后依次调用 draw 方法。VR 的左右眼渲染变成循环节点列表每只眼睛先更新视图矩阵再重绘一遍。这样改完你想要增加一个天空盒或者粒子系统只需要写一个新的 RenderNode不用动主循环。这正是这个 Demo 给我的最大启发它是教会你组织渲染代码的样板而不是让你永远只画一个立方体。6.2 性能调优减少状态切换与使用VBO/VAO在原 Demo 里每帧上传顶点数据用了glVertexAttribPointer加GL_DYNAMIC_DRAW这在高频场景下很浪费。我改成 VBO VAO 一次上传后面只需要glBindVertexArray就能恢复全部顶点属性// 初始化阶段 int vbo createVBO(vertexData); int vao createVAO(vbo, VERTEX_POS_INDEX, VERTEX_TEXCOORD_INDEX);// 每帧绘制时 GLES20.glBindVertexArray(vao); GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, vertexCount); GLES20.glBindVertexArray(0);参数方面VERTEX_POS_INDEX和VERTEX_TEXCOORD_INDEX必须和你着色器里attribute location绑定一致否则画面会错乱。注意 OpenGL ES 3.0 才支持 VAO 在核心配置里直接用所以你要是坚持用 2.0就得用扩展GL_OES_vertex_array_object或者继续用 VBO 手动设置属性指针。另一个性能重点是把glUniformMatrix4fv的调用次数最小化。每帧更新矩阵是必要的但如果在同一个场景里对每个物体都重新设置同一个 MVP就会白白浪费带宽。我一般会把共享的状态比如投影矩阵放在外层只更新每个节点的模型矩阵。这样改造后在低端手机上渲染 VR 画面时帧率从原来的 40 帧提升到了 55 帧左右。从那以后我每次拿到类似资源都会强制自己走一遍“先读着色器、再跑测试场景、最后拆渲染循环”的流程而不是直接往项目里塞。这次拆 OpenGLESDemo 也让我养成了保留一份最小可运行工程的习惯改坏了就从干净副本重来再也不用担心把自己写的渲染框架改得找不着北。希望这篇笔记能帮到手边正对着屏幕和 Viewport 发愁的你。本文还有配套的精品资源点击获取 
长河君 · 2026/10/17 0:19:41 · 阅读 1.2k OpenGLESDemo解析：从渲染管线到VR畸变校正
简介OpenGLESDemo.zip 是一份面向 Android 开发者的 OpenGL ES 入门与进阶示例集合涵盖从顶点绘制、着色器编程、纹理映射到投影变换、光照模型、深度测试、帧缓冲对象FBO、混合模式以及动画帧率控制等核心知识并延伸至 VR 双目渲染场景适合希望系统掌握移动端图形编程的初学者和有一定基础的技术人员。压缩包共 1245 个文件约 12.63MB主要包含 dex/class 编译产物、Java 源码、JSON 配置、GLSL 着色器、XML 布局以及 PNG 贴图等可对照代码与资源文件理解 OpenGL ES 在 Android 中的实际应用。已有 248 人学习浏览。示例按功能分模块组织每个子目录对应一个主题从零开始搭建渲染管线并配有多套可运行 Demo便于直接导入工程调试观察效果是快速上手 OpenGL ES 并拓展 VR 开发能力的实用参考资料。1. 为什么是OpenGLESDemo一个能直接跑的渲染样板OpenGL ES 是移动端图形渲染的底层标准做 VR 或者图像处理 Demo 的人几乎都绕不开它。最近在翻一个 OpenGLESDemo.zip 的资源包发现它不像网上很多教程那样只贴几段零碎代码而是把一个完整的渲染管线、VR 双屏分割、畸变校正和传感器交互都揉在了一起解压后能直接导入工程跑出画面。这个包特别适合两类人一类是刚入门 OpenGL ES、想知道顶点和片段着色器怎么配合的新手另一类是打算做手机 VR 盒子应用、但不想从零造轮子的开发者。如果你是这两类人这篇笔记应该能帮你省下不少查资料的力气。2. OpenGL ES 渲染管线拆解从顶点到像素的每一步拿到 Demo 之后第一件事不是急着跑起来而是先把它的渲染主循环捋清楚。这个包里的默认场景是一个立方体加一张纹理但代码结构上已经分出了顶点输入、着色器编译、矩阵更新、离屏渲染这几块。新手最容易犯的错误是把所有 GL 调用堆在一个类里结果后面加 VR 双视口时根本无从下手。这个 Demo 的可贵之处在于它把每帧的逻辑拆成了好几个方法顺着调用链读一遍基本就理解了从 glDrawArrays 到屏幕上像素的完整路径。2.1 顶点着色器与片段着色器两句代码决定渲染效果先说着色器。OpenGL ES 2.0 之后没有了内置的固定管线所有顶点变换和颜色计算都得自己写 GLSL。这个 Demo 里给了一个最基础的顶点着色器核心代码我简化成了下面这样// vertex_shader.glsl attribute vec4 aPosition; // 顶点坐标传入的 vec3 会补成 vec4 attribute vec2 aTexCoord; // 纹理坐标 uniform mat4 uMVPMatrix; // 模型-视图-投影矩阵外部每帧更新 varying vec2 vTexCoord; // 传递给片段着色器的纹理坐标 void main() { gl_Position uMVPMatrix * aPosition; // 这里就是顶点最终在裁剪空间的位置 vTexCoord aTexCoord; // 纹理坐标原样透传 }这么短一段逻辑却是整个渲染的骨架。uMVPMatrix是外部传入的 MVP 矩阵它把物体坐标一步步从模型空间搬到屏幕裁剪空间。gl_Position一旦算错画面不是翻转就是消失。片段着色器那边就更简单了通常是采样一张纹理// fragment_shader.glsl precision mediump float; varying vec2 vTexCoord; uniform sampler2D uTexture; void main() { gl_FragColor texture2D(uTexture, vTexCoord); }这里有一个参数容易忽略纹理采样器的precision声明。如果你漏了precision mediump float部分手机驱动会直接编译失败而且报错信息很隐晦提示说“variable used without precision”。当初我第一次跑这个 Demo 时就踩过这个坑后来养成习惯每个片段着色器第一行先写精度声明。另外注意texture2D在 OpenGL ES 3.0 的写法是texture如果你是按高版本编译得把函数名换掉否则会报No matching overload for function texture2D。2.2 矩阵变换与坐标系左手系带来的第一个坑OpenGL ES 使用的是右手坐标系在裁剪空间的表现但实际建模时很多人用的是左手系或者干脆把 Z 轴方向搞反。这个 Demo 里在 onSurfaceChanged 里重新计算了透视矩阵并且正确处理了屏幕宽高比代码是这样的// 宽高比变化时调用 public void onSurfaceChanged(int width, int height) { glViewport(0, 0, width, height); float aspect (float) width / height; // 透视投影视角45度最近0.1最远100 Matrix.perspectiveM(projectionMatrix, 0, 45f, aspect, 0.1f, 100f); // 设置相机位置眼睛在(0, 0, 3)看向原点 Matrix.setLookAtM(viewMatrix, 0, 0f, 0f, 3f, // eye 0f, 0f, 0f, // center 0f, 1f, 0f); // up }注意Matrix.perspectiveM最后一个参数是 far 平面如果设得太大比如 10000深度缓冲的精度会不够远处的物体可能出现画面闪烁。这个 Demo 里给的 100 对于普通场景足够。还有一个新手常搞错的点是glViewport没有跟随高宽比变化结果图像被拉伸。这个 Demo 在竖屏和横屏切换时都重新设置了视口我后面在集成时发现这个设置直接影响了 VR 模式下左右眼画面的拼接效果。矩阵更新还有个“玄学”问题在 Android 上Matrix.rotateM是围绕原点旋转的但如果你直接把它用在模型矩阵上而模型已经平移过了旋转中心就会跑偏。正确顺序应该是先旋转后平移而且是矩阵乘法顺序相反——M * V * P与V * M * P的效果完全不同。这个 Demo 里把模型矩阵和视图矩阵分开维护就是为了一次旋转模型的所有顶点而不是旋转相机。2.3 纹理与FBO把画面送上屏幕前的最后一关在 VR 模式下我们要先把左右眼画面渲染到一张离屏纹理上再做畸变处理最后才画到屏幕。这就涉及 FBO帧缓冲对象。Demo 里提供了一个简单的纹理附件创建方法private int createFramebuffer(int width, int height) { int[] fbo new int[1]; int[] tex new int[1]; // 创建纹理 GLES20.glGenTextures(1, tex, 0); GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, tex[0]); GLES20.glTexImage2D(GLES20.GL_TEXTURE_2D, 0, GLES20.GL_RGBA, width, height, 0, GLES20.GL_RGBA, GLES20.GL_UNSIGNED_BYTE, null); // 设置纹理滤波否则放大后锯齿明显 GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_LINEAR); GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR); // 创建 FBO 并绑定纹理 GLES20.glGenFramebuffers(1, fbo, 0); GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, fbo[0]); GLES20.glFramebufferTexture2D(GLES20.GL_FRAMEBUFFER, GLES20.GL_COLOR_ATTACHMENT0, GLES20.GL_TEXTURE_2D, tex[0], 0); // 检查 FBO 是否完整 int status GLES20.glCheckFramebufferStatus(GLES20.GL_FRAMEBUFFER); if (status ! GLES20.GL_FRAMEBUFFER_COMPLETE) { throw new IllegalStateException(FBO 创建失败: status); } // 解绑回到默认缓冲 GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, 0); return tex[0]; }这段代码里有个参数容易埋坑纹理的长宽并不是屏幕像素而是渲染目标的实际大小。如果你把width和height设成 GLSurfaceView 的尺寸在部分低端机上会超出纹理上限通常是 4096x4096导致GL_FRAMEBUFFER_UNSUPPORTED。我一般会先把尺寸 clamp 到 2048 以内。还有一个常见问题是忘了设置GL_TEXTURE_WRAP_S/T为GL_CLAMP_TO_EDGE默认的GL_REPEAT会让纹理边缘出现奇怪的镜像线尤其是在 VR 左右眼画面拼接时特别明显。FBO 解绑时机也很关键。Demo 里的做法是先渲染左右眼到 FBO解绑后绑定回0号默认帧缓冲再进行畸变网格的绘制。如果你忘了解绑后面所有屏幕绘制都会进到纹理里结果屏幕黑屏纹理上却有画面。排查这类问题时最快的办法是glBindFramebuffer(GLES20.GL_FRAMEBUFFER, 0)强制解绑然后看纹理附件的内容是否正常。3. VR 模式实现左右眼分割与畸变校正手机 VR 盒子的原理并不复杂屏幕被左右分割左眼显示左相机画面右眼显示右相机画面加上透镜畸变补偿。真正难的是两个相机的位置差以及畸变网格的顶点计算。这个 Demo 里把这两块分开了先是普通双视口渲染然后叠加一个畸变网格着色器。如果你想把 OpenGL ES 的通用渲染改成 VR 模式这一章的经验基本能覆盖前期 80% 的坑。3.1 双视口渲染在一张纹理上画两遍双视口渲染的常规做法是把视口宽度一分为二左右各画一遍场景只是视图矩阵里的相机位置要偏移一个瞳距。Demo 里的做法更稳妥先离屏渲染到一张全屏纹理然后在一个全屏矩形上把纹理采样两次分别映射到屏幕左半和右半。核心绘制代码思路如下// 离屏渲染左右眼到同一个纹理 private void renderToFBO(int eyeIndex) { // 绑定 FBO把视口设为全尺寸 GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, fboId); GLES20.glViewport(0, 0, fboWidth, fboHeight); // 根据左眼(0)或右眼(1)设置视图矩阵 float eyeOffset (eyeIndex 0 ? -0.03f : 0.03f); // 瞳距 6cm Matrix.setLookAtM(viewMatrix, 0, eyeOffset, 0f, 3f, eyeOffset, 0f, 0f, 0f, 1f, 0f); // 绘制场景 GLES20.glUseProgram(sceneProgram); // ... 传入 MVP、纹理、顶点数据 GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, vertexCount); }这里的eyeOffset是左右相机在 X 轴上的平移正负 0.03 其实就是 6 厘米的瞳距。如果你把两个偏移设成一样戴进 VR 盒子里会头晕。另外注意glViewport此时是全屏尺寸因为我们最终要在一张完整纹理上做畸变校正。如果你直接在默认缓冲上分左右视口再叠加畸变网格就会很别扭——畸变网格需要的是完整画面的 UV而不是左右各一块。3.2 手机VR盒子的透镜畸变用顶点位移替代着色器补偿VR 盒子的透镜是凸透镜画面边缘会被拉伸所以我们要做“桶形畸变”预补偿。就是让网格顶点向中心收缩抵消透镜的拉伸。Demo 的畸变着色器没有再单独采样而是直接在顶点着色器里修改 UV实现起来很轻量attribute vec4 aPosition; // 畸变网格顶点 attribute vec2 aTexCoord; // 原始纹理坐标 uniform vec2 uDistortion; // 畸变系数一般用K1和K2 varying vec2 vTexCoord; void main() { // 将纹理坐标归一化到 -1..1 vec2 p aTexCoord * 2.0 - 1.0; float r2 dot(p, p); // 桶形畸变半径越大收缩越明显 p p * (1.0 uDistortion.x * r2 uDistortion.y * r2 * r2); vTexCoord p * 0.5 0.5; gl_Position aPosition; }这段代码的巧妙之处在于它只改 UV不改顶点位置。畸变系数uDistortion一般取负值比如(-0.1, -0.05)这样边缘的 UV 被往里拉最终经过透镜后反而看起来是正的。如果你把系数设成正的画面边缘会继续膨胀戴上去特别晕。调试时我会把uDistortion初始化为 0再一步步调大看网格边线是否由直变弯。这里还有个细节畸变网格的顶点数量不是越多越好手机 GPU 的填充率有限我一般用 40x40 的网格既平滑又不卡顿。3.3 传感器旋转矩阵从手机陀螺仪到观察矩阵VR 体验的核心是头部转动和画面视角同步。Demo 里用了系统传感器提供的旋转矩阵把它转成 OpenGL 的视图矩阵。在 Android 上常见的做法是注册TYPE_ROTATION_VECTOR传感器// 传感器回调中获取旋转矩阵 SensorManager.getRotationMatrixFromVector(rotationMatrix, sensorEvent.values); // 把旋转矩阵转成 4x4 float 数组注意 OpenGL 是列主序 for (int i 0; i 16; i) { glMatrix[i] rotationMatrix[i % 16]; // 这里只是示意实际要处理坐标系对齐 }注意 Android 的传感器坐标系是“设备坐标”而不是世界坐标直接拿来当 OpenGL 视图矩阵会导致场景跟着手机竖屏旋转。我一般会在onResume里把旋转矩阵乘以一个固定的旋转 90 度的矩阵让 X 轴对齐屏幕横向。这个 Demo 里正好包含了这个对齐代码省了我不少事。还有一个常见问题是传感器数据更新频率太高OpenGL 渲染线程跟不上就会看到画面抖动。常规做法是给传感器设置一个和帧率接近的延迟比如SENSOR_DELAY_GAME20ms然后在渲染线程里和上一次旋转矩阵做线性插值避免跳变。4. 在 Android 工程里跑起来环境配置与集成步骤这个 Demo 下载下来是个 zip解压后是一个完整的 Android 工程。市面上很多老项目还停留在 Eclipse 时代但这个包已经迁移到了 Android Studio 的 Gradle 结构。不过里面还是有几处容易翻车的地方比如 NDK 版本、依赖库路径、以及 GLSurfaceView 的生命周期处理。这一章按实际集成的顺序把环境配置和主线程交互讲清楚。4.1 用Gradle接入从Eclipse项目迁移到Android Studio如果你拿到的项目还是project.properties和AndroidManifest.xml老一套手动迁移到 Gradle 反而比新建工程更麻烦。这个 Demo 已经做好了迁移你只需要在build.gradle里确认几个关键参数android { compileSdkVersion 30 buildToolsVersion 30.0.2 defaultConfig { applicationId com.example.openglestest minSdkVersion 19 targetSdkVersion 30 // 使用 OpenGL ES 2.0 multiDexEnabled true } }这里最容易踩的坑是minSdkVersion 19如果你为了兼容老设备降到 16部分 GLSL 语法比如switch语句会在编译时报警告。另外compileSdkVersion和实际运行机器的系统版本不一样没关系但建议不低于 26否则GlSurfaceView.Renderer的某些回调行为会不一致。还有一点如果你把工程放在非ASCII路径下比如中文目录名NDK 编译阶段可能会报Error: NDK not configured。我习惯把整个 zip 解压到纯英文路径比如D:/workspace/OpenGLESDemo就再也没遇到这类问题。导入 Android Studio 的时候有个细节如果 gradle 版本不对会卡在Could not find com.android.tools.build:gradle。解决办法是打开gradle-wrapper.properties把 distributionUrl 改成你本机已有的 gradle 版本或者在 Android Studio 里点击Gradle sync自动下载。这个 Demo 自带的 gradle 版本比较老我第一次同步时等了很久后来直接改成 6.5 才顺利通过。4.2 MainActivity与GLSurfaceView的纠缠生命周期同步GLSurfaceView 的渲染是在独立线程里跑的它和 Activity 的生命周期并不是天然同步。最典型的问题是应用切到后台再回来渲染线程已经销毁但 GL 上下文还没有重新创建结果黑屏或者闪退。这个 Demo 里做了正确的处理在 onPause 里调用glSurfaceView.onPause()在 onResume 里调用glSurfaceView.onResume()Override protected void onPause() { super.onPause(); // 通知 GLSurfaceView 暂停渲染线程 glSurfaceView.onPause(); // 停止传感器监听避免后台耗电 sensorManager.unregisterListener(sensorListener); } Override protected void onResume() { super.onResume(); // 重新开启 GL 线程 glSurfaceView.onResume(); // 注册传感器注意在这里重新获取旋转矩阵 sensorManager.registerListener(sensorListener, rotationVectorSensor, SensorManager.SENSOR_DELAY_GAME); }这里有一个隐藏的坑GLSurfaceView.onResume()会重建 GL 上下文这意味着你之前创建的着色器程序、纹理、FBO 全部失效。如果不在onSurfaceCreated里重新加载这些资源画面就会变成一片黑。Demo 里把所有资源初始化放在了onSurfaceCreated而不是构造函数里就是因为这个原因。我见过很多同学把纹理加载写在 Activity 的onCreate里结果一锁屏再打开所有纹理都丢失。还有个容易被忽略的细节onSurfaceCreated和onSurfaceChanged的调用顺序未必是你想的那样。首次显示时一定是created - changed - drawFrame但如果后台回来可能只有created而不触发changed所以视口和投影矩阵的重建要放在changed里而资源加载放在created里两者不能混。4.3 触摸交互与帧率控制别让UI线程卡住GL线程在普通 2D 应用里你可以在 UI 线程里随便操作视图但 OpenGL 渲染线程里的glDrawArrays是不能被打断的。这个 Demo 提供了一个简单的触摸旋转交互让用户通过滑动改变模型矩阵的角度。它的实现是通过一个线程安全的标志位把触摸事件传给 GL 线程处理public class TouchController { private final float[] delta new float[2]; private boolean dirty; // 在 UI 线程调用 public synchronized void onTouch(float dx, float dy) { delta[0] dx; delta[1] dy; dirty true; } // 在 GL 线程每帧开始时调用 public synchronized boolean consumeDelta(float[] out) { if (dirty) { out[0] delta[0]; out[1] delta[1]; delta[0] 0; delta[1] 0; dirty false; return true; } return false; } }这里有个重要原则不要在 GL 线程里直接调用View的方法也不要使用GLSurfaceView.setRenderer之后还 main 线程里操作 GL 对象。帧率控制这块Demo 里没有强制限帧但是我建议在渲染线程里加Thread.sleep(16)或者System.nanoTime计算实际帧耗时保持 60fps。如果 VR 模式下掉到 30fps 以下用户会明显感觉到画面闪烁和头晕。我一般会在渲染线程的开头记录时间结尾计算耗时如果超过16ms就打印警告日志但不要阻塞帧率否则掉得更严重。5. 常见问题与避坑编译、黑屏、畸变的血泪排查这部分是每个搞过 GLES 的人都绕不开的血泪经验。我在调这个 Demo 的时候踩过几只“典型大坑”这里把现象、原因和解决办法一条条写出来照着排查比靠猜效率高得多。所谓“黑匣子”问题很多时候就是没把 GL 错误日志打出来。5.1 编译总是报错无法解析的符号现象导入工程后GLES20和Matrix类报红或者R文件缺失。原因最常见的是 Gradle 依赖里没有声明 OpenGLES 相关的支持和android.opengl包也有可能是 buildToolsVersion 版本太老导致部分 API 未被识别。解决先检查build.gradle里compileSdkVersion是否不低于 21然后 Clean 工程重建。如果还不行把 SDK 路径重新指定因为Matrix.perspectiveM是 API 9 之后才有的确保声明了opengl权限但注意这只对特定设备生效大部分情况是编译工具问题。我后来直接把项目放在纯英文路径下编译就顺利通过。5.2 黑屏但无报错glGetError 告诉你真相现象程序跑起来不闪退但页面全黑连日志都没有。原因要么是着色器编译失败被忽略了要么是顶点数据没绑对要么是 FBO 不完整导致绘制无效。在 OpenGL ES 里很多错误是异步抛出你需要主动检查。解决在每个glDrawArrays之后调用GLES20.glGetError()打印返回值。常见错误码GL_INVALID_OPERATION (0x0502)表示着色器程序未链接成功GL_FRAMEBUFFER_UNCOMPLETE则表示 FBO 设置错误。另外给顶点着色器加上状态检查int status GLES20.glGetShaderiv(shaderId, GLES20.GL_COMPILE_STATUS); if (status GLES20.GL_FALSE) { String log GLES20.glGetShaderInfoLog(shaderId); throw new RuntimeException(Shader compile failed: log); }这样做可以快速定位是哪一句 GLSL 写错了。还有一种黑屏是因为glViewport设成了 0 尺寸我调了半小时才发现onSurfaceChanged里 width 和 height 被写反了导致视口宽高为 0所有绘制被丢弃。5.3 纹理加载后是紫红色格式不匹配现象场景里出现大面积紫色色块像是一片极光。原因紫红色是 OpenGL 无法解码纹理数据的默认颜色。最常见的是 PNG 图片实际是 16 位色深或者用了预乘 Alpha而代码里却按 RGBA8888 加载。解决我建议把所有纹理统一转成 RGBA8888 的 PNG用 BitmapFactory 加载时强制指定格式BitmapFactory.Options.inPreferredConfig Bitmap.Config.ARGB_8888。调 VR 畸变网格用的纹理如果出现紫红色检查是不是上传到了纹理单元 0而着色器里采样器默认绑定的就是单元 0所以不绑也没关系但其他纹理单元会被忽略。5.4 VR 模式下左右眼画面错位现象戴进 VR 盒子里左右画面看起来像倒过来或者有明显重影。原因一种是视图矩阵的eyeOffset设置反了另一种是屏幕左右分割时 UV 坐标没对齐。如果左右眼偏移方向相同视觉上根本看不出立体感如果相对旋转有问题画面会沿 Z 轴扭。解决先从最基础的开始把两个eyeOffset都设成 0确认双眼画面完全重合再逐渐增加偏移量。然后检查屏幕分割时左眼的glViewport应该是(0, 0, width/2, height)右眼是(width/2, 0, width/2, height)不能搞反。另外注意传感器旋转矩阵和场景坐标系的 Z 轴方向要一致否则左眼看的是前面右眼却看到侧面重影特别严重。5.5 画面撕裂和闪烁现象旋转手机时画面明显撕裂或者有一半画面一直在闪。原因渲染线程和 UI 线程没有隔离或者背缓冲交换时机不对。GLSurfaceView 的RENDERMODE_CONTINUOUSLY模式会在后台连续渲染如果同步传感器回调时把 GL 操作放在传感器线程里就会造成撕裂。解决把传感器数据的处理放在渲染线程的onDrawFrame里不要直接在传感器回调里修改 OpenGL 状态。还要记得GLSurfaceView.setRenderMode(GLES20.GLSurfaceView.RENDERMODE_WHEN_DIRTY)不会处理 VR 场景因为 VR 需要每帧跟随头部旋转所以必须持续渲染但这样更耗电。我最后用了一个变通方案当传感器没变化时不重绘传感器变化幅度超过 0.1 度才请求渲染这样既省电又不撕裂。6. 进阶把Demo改造成自己的渲染框架跑通这个 Demo 只是第一步想用它做项目最好把它改造成一个轻量的渲染框架。我做了两件事收益最大一是把场景中的物体抽象成节点二是在绘制调用里把 VBO 和 VAO 用起来。改完以后同一个渲染循环同时支持普通 2D UI 和 VR 双目渲染代码反而比原来的 Demo 更简洁。6.1 抽象渲染节点与场景管理原来的 Demo 里立方体、地面和畸变网格的绘制代码都塞在 Renderer 里加一个新物体就要复制一遍着色器创建和顶点绑定的代码。我把它拆分成了基类public abstract class RenderNode { // 每帧更新矩阵和纹理状态 public abstract void draw(Camera camera); }然后让立方体、平面、网格都继承它。渲染线程里只需要维护一个ListRenderNode按深度排序后依次调用 draw 方法。VR 的左右眼渲染变成循环节点列表每只眼睛先更新视图矩阵再重绘一遍。这样改完你想要增加一个天空盒或者粒子系统只需要写一个新的 RenderNode不用动主循环。这正是这个 Demo 给我的最大启发它是教会你组织渲染代码的样板而不是让你永远只画一个立方体。6.2 性能调优减少状态切换与使用VBO/VAO在原 Demo 里每帧上传顶点数据用了glVertexAttribPointer加GL_DYNAMIC_DRAW这在高频场景下很浪费。我改成 VBO VAO 一次上传后面只需要glBindVertexArray就能恢复全部顶点属性// 初始化阶段 int vbo createVBO(vertexData); int vao createVAO(vbo, VERTEX_POS_INDEX, VERTEX_TEXCOORD_INDEX);// 每帧绘制时 GLES20.glBindVertexArray(vao); GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, vertexCount); GLES20.glBindVertexArray(0);参数方面VERTEX_POS_INDEX和VERTEX_TEXCOORD_INDEX必须和你着色器里attribute location绑定一致否则画面会错乱。注意 OpenGL ES 3.0 才支持 VAO 在核心配置里直接用所以你要是坚持用 2.0就得用扩展GL_OES_vertex_array_object或者继续用 VBO 手动设置属性指针。另一个性能重点是把glUniformMatrix4fv的调用次数最小化。每帧更新矩阵是必要的但如果在同一个场景里对每个物体都重新设置同一个 MVP就会白白浪费带宽。我一般会把共享的状态比如投影矩阵放在外层只更新每个节点的模型矩阵。这样改造后在低端手机上渲染 VR 画面时帧率从原来的 40 帧提升到了 55 帧左右。从那以后我每次拿到类似资源都会强制自己走一遍“先读着色器、再跑测试场景、最后拆渲染循环”的流程而不是直接往项目里塞。这次拆 OpenGLESDemo 也让我养成了保留一份最小可运行工程的习惯改坏了就从干净副本重来再也不用担心把自己写的渲染框架改得找不着北。希望这篇笔记能帮到手边正对着屏幕和 Viewport 发愁的你。本文还有配套的精品资源点击获取