1. 从零理解 OpenGL ES 2.0 的几何绘制逻辑1.1 为什么选择立方体和球体作为入门几何体刚接触 OpenGL ES 2.0 的人十有八九第一个像样的 Demo 就是画一个旋转的立方体第二个大概率是画一个球。这不是巧合而是这两个几何体恰好覆盖了图形渲染中最核心的两类问题立方体代表的是“硬表面、离散顶点、法线突变”的场景而球体代表的是“曲面细分、平滑法线、顶点密度与视觉质量的权衡”。把这两个啃下来后面不管是做模型加载、粒子系统还是后处理底层逻辑都是通的。我当初在移动端做渲染的时候踩的第一个大坑就是以为“画个立方体嘛8 个顶点传进去就完事了”。结果光照一开面与面之间的接缝处全是黑的或者亮的完全不对。后来才明白OpenGL ES 2.0 里顶点是“属性捆绑”的——位置、法线、纹理坐标是绑在同一个顶点上的。立方体一个角上的三个面法线方向完全不同你没法用同一个顶点同时满足三个面的法线需求。所以立方体实际上需要 24 个顶点每个面 4 个而不是 8 个。这个认知转变是从“数学上的立方体”到“渲染管线里的立方体”的关键一步。球体则反过来。数学上球面是光滑连续的但 GPU 只认三角形。你得用经纬度细分的方式去逼近细分越多越圆但顶点数和绘制调用也线性增长。这里就涉及一个很实际的工程问题在移动端顶点数不是免费的。一个 64×64 细分的球体大概有 8000 多个三角形在低端机上可能就跑不满 60 帧了。所以怎么在视觉质量和性能之间找平衡是球体绘制真正要教给你的东西。注意OpenGL ES 2.0 是可编程管线没有固定管线的“自动法线”或“自动光照”。所有顶点属性都得你自己组织所有变换都得你自己在着色器里算。这既是自由也是负担。1.2 核心关键词拆解VBO、VAO、着色器、MVP 矩阵在 OpenGL ES 2.0 里画任何东西都绕不开这几个核心对象。我用最直白的话把它们串一遍。VBOVertex Buffer Object就是一块显存里的缓冲区你把顶点数据位置、法线、颜色、纹理坐标打包成二进制数组传进去。为什么要用 VBO 而不是每次绘制都从 CPU 传因为移动端 GPU 和 CPU 之间的带宽是稀缺资源VBO 让数据常驻显存绘制时只传一个偏移量效率高得多。VAOVertex Array Object在 OpenGL ES 2.0 里其实不是核心规范的一部分它是通过扩展OES_vertex_array_object提供的。VAO 的作用是“记住”你从 VBO 里怎么取数据——哪个属性对应哪个偏移、步长多少、是否归一化。没有 VAO 的话每次绘制前你都得重新调一遍glVertexAttribPointer代码又臭又长。不过要注意不是所有 ES 2.0 设备都支持 VAO 扩展得先查glGetString(GL_EXTENSIONS)。着色器Shader分顶点着色器和片元着色器。顶点着色器负责把模型空间的顶点坐标经过 MVP 矩阵变换到裁剪空间同时把法线变换到世界空间传给片元着色器。片元着色器负责算每个像素的颜色光照公式、纹理采样都在这里。ES 2.0 用的是 GLSL ES 1.00语法比桌面版 GLSL 严格不少比如不支持动态数组索引、不支持switch等。MVP 矩阵是 Model-View-Projection 的缩写。Model 矩阵把物体从局部空间放到世界空间View 矩阵把世界空间转到相机空间Projection 矩阵把相机空间投影到裁剪空间。这三个矩阵通常预先在 CPU 端算好以 uniform 的形式传给顶点着色器。移动端一般用glm库或者自己写矩阵乘法注意 ES 2.0 的 uniform 数量有限别传太多矩阵。2. 立方体绘制的完整实现与细节剖析2.1 顶点数据结构设计为什么是 24 个顶点而不是 8 个前面提过立方体需要 24 个顶点。具体来说6 个面每个面 4 个顶点。每个顶点包含位置3 个 float和法线3 个 float所以一个顶点 6 个 float总共 24×6144 个 float。如果用GL_TRIANGLES绘制还需要索引数组每个面 2 个三角形6 个面共 12 个三角形36 个索引。我见过有人用 8 个顶点加GL_TRIANGLE_STRIP或者GL_TRIANGLE_FAN来画立方体确实能画出形状但光照一定不对。因为一个顶点只能有一个法线你没法让一个顶点同时属于三个面且法线各自正确。所以除非你不开光照、只用纯色否则 24 个顶点是底线。下面是我常用的顶点数据组织方式用 C 数组表示// 每个顶点位置(x,y,z) 法线(nx,ny,nz) float cubeVertices[] { // 前面 (z 0.5)法线朝 Z -0.5f, -0.5f, 0.5f, 0.0f, 0.0f, 1.0f, 0.5f, -0.5f, 0.5f, 0.0f, 0.0f, 1.0f, 0.5f, 0.5f, 0.5f, 0.0f, 0.0f, 1.0f, -0.5f, 0.5f, 0.5f, 0.0f, 0.0f, 1.0f, // 后面 (z -0.5)法线朝 -Z -0.5f, -0.5f, -0.5f, 0.0f, 0.0f, -1.0f, -0.5f, 0.5f, -0.5f, 0.0f, 0.0f, -1.0f, 0.5f, 0.5f, -0.5f, 0.0f, 0.0f, -1.0f, 0.5f, -0.5f, -0.5f, 0.0f, 0.0f, -1.0f, // 左面 (x -0.5)法线朝 -X -0.5f, -0.5f, -0.5f, -1.0f, 0.0f, 0.0f, -0.5f, -0.5f, 0.5f, -1.0f, 0.0f, 0.0f, -0.5f, 0.5f, 0.5f, -1.0f, 0.0f, 0.0f, -0.5f, 0.5f, -0.5f, -1.0f, 0.0f, 0.0f, // 右面 (x 0.5)法线朝 X 0.5f, -0.5f, -0.5f, 1.0f, 0.0f, 0.0f, 0.5f, 0.5f, -0.5f, 1.0f, 0.0f, 0.0f, 0.5f, 0.5f, 0.5f, 1.0f, 0.0f, 0.0f, 0.5f, -0.5f, 0.5f, 1.0f, 0.0f, 0.0f, // 上面 (y 0.5)法线朝 Y -0.5f, 0.5f, -0.5f, 0.0f, 1.0f, 0.0f, -0.5f, 0.5f, 0.5f, 0.0f, 1.0f, 0.0f, 0.5f, 0.5f, 0.5f, 0.0f, 1.0f, 0.0f, 0.5f, 0.5f, -0.5f, 0.0f, 1.0f, 0.0f, // 下面 (y -0.5)法线朝 -Y -0.5f, -0.5f, -0.5f, 0.0f, -1.0f, 0.0f, 0.5f, -0.5f, -0.5f, 0.0f, -1.0f, 0.0f, 0.5f, -0.5f, 0.5f, 0.0f, -1.0f, 0.0f, -0.5f, -0.5f, 0.5f, 0.0f, -1.0f, 0.0f, };索引数组按每个面两个三角形组织注意顶点绕序要一致通常用逆时针为正面unsigned short cubeIndices[] { 0, 1, 2, 0, 2, 3, // 前面 4, 5, 6, 4, 6, 7, // 后面 8, 9, 10, 8, 10, 11, // 左面 12, 13, 14, 12, 14, 15, // 右面 16, 17, 18, 16, 18, 19, // 上面 20, 21, 22, 20, 22, 23 // 下面 };实操心得索引数组用unsigned short就够了因为顶点数远小于 65536。如果顶点数超过这个值得用unsigned int但 ES 2.0 对GL_UNSIGNED_INT索引的支持要看扩展OES_element_index_uint不是所有设备都支持。2.2 顶点着色器与片元着色器的编写要点顶点着色器要做三件事把位置变换到裁剪空间、把法线变换到世界空间、把世界空间位置传给片元着色器用于光照计算。// 顶点着色器 attribute vec3 aPosition; attribute vec3 aNormal; uniform mat4 uModelMatrix; uniform mat4 uViewMatrix; uniform mat4 uProjectionMatrix; uniform mat3 uNormalMatrix; varying vec3 vWorldPos; varying vec3 vNormal; void main() { vec4 worldPos uModelMatrix * vec4(aPosition, 1.0); vWorldPos worldPos.xyz; vNormal normalize(uNormalMatrix * aNormal); gl_Position uProjectionMatrix * uViewMatrix * worldPos; }这里有个关键点法线变换不能用 Model 矩阵直接乘。如果 Model 矩阵包含非均匀缩放法线会被拉歪。正确做法是用 Model 矩阵左上角 3×3 部分的逆转置矩阵也就是uNormalMatrix。在 CPU 端算这个矩阵的时候先取 Model 的 3×3 部分求逆再转置。如果 Model 只有旋转和平移没有缩放那uNormalMatrix就等于 Model 的 3×3 部分可以省一步计算。片元着色器做一个简单的 Lambert 漫反射加环境光precision mediump float; varying vec3 vWorldPos; varying vec3 vNormal; uniform vec3 uLightPos; uniform vec3 uLightColor; uniform vec3 uAmbientColor; uniform vec3 uCameraPos; void main() { vec3 N normalize(vNormal); vec3 L normalize(uLightPos - vWorldPos); float diff max(dot(N, L), 0.0); vec3 diffuse uLightColor * diff; vec3 color uAmbientColor diffuse; gl_FragColor vec4(color, 1.0); }precision mediump float是 ES 2.0 片元着色器的强制要求不写会编译报错。mediump是 16 位浮点highp是 32 位但并非所有设备都支持。对于光照计算mediump在大多数场景下够用但如果你的场景尺度很大或者需要高精度得查设备是否支持highp。注意ES 2.0 的varying变量数量有限通常只有 8 个 vec4。别传太多东西能合并的合并能算的就在片元里算。2.3 绘制调用与状态管理绘制立方体的核心调用就几行但状态管理容易出错glEnableVertexAttribArray(aPositionLoc); glEnableVertexAttribArray(aNormalLoc); glBindBuffer(GL_ARRAY_BUFFER, vbo); glVertexAttribPointer(aPositionLoc, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)0); glVertexAttribPointer(aNormalLoc, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)(3 * sizeof(float))); glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, ibo); glDrawElements(GL_TRIANGLES, 36, GL_UNSIGNED_SHORT, 0); glDisableVertexAttribArray(aPositionLoc); glDisableVertexAttribArray(aNormalLoc);步长是6 * sizeof(float)因为每个顶点 6 个 float。位置偏移是 0法线偏移是3 * sizeof(float)。这两个glVertexAttribPointer调用必须在glBindBuffer(GL_ARRAY_BUFFER, vbo)之后因为属性指针会记录当前绑定的 VBO。我踩过的一个坑在glDrawElements之前绑定了GL_ELEMENT_ARRAY_BUFFER但之后又绑了别的 VBO结果索引缓冲区被覆盖了。记住GL_ELEMENT_ARRAY_BUFFER的绑定是 VAO 状态的一部分如果有 VAO没有 VAO 的话就是全局状态别在绘制前乱绑。3. 球体绘制的数学推导与性能权衡3.1 经纬度细分从球面参数方程到三角形网格球体的参数方程很直观x r * sin(theta) * cos(phi)y r * cos(theta)z r * sin(theta) * sin(phi)其中 theta 是极角0 到 PIphi 是方位角0 到 2PI。把 theta 和 phi 分别分成若干段就得到经纬网格。每个网格单元拆成两个三角形。假设经度分段数为stacks沿 theta 方向纬度分段数为slices沿 phi 方向那么顶点数是(stacks1) * (slices1)三角形数是stacks * slices * 2。比如stacks32, slices32顶点数 1089三角形数 2048。这个量级在移动端完全没问题。法线怎么算对于单位球法线就是归一化后的位置向量。所以顶点位置和法线可以一起算for (int i 0; i stacks; i) { float theta i * PI / stacks; float sinTheta sinf(theta); float cosTheta cosf(theta); for (int j 0; j slices; j) { float phi j * 2.0f * PI / slices; float x sinTheta * cosf(phi); float y cosTheta; float z sinTheta * sinf(phi); // 位置 vertices.push_back(x * radius); vertices.push_back(y * radius); vertices.push_back(z * radius); // 法线单位球就是归一化位置 vertices.push_back(x); vertices.push_back(y); vertices.push_back(z); } }索引生成要注意极点处的退化三角形。在 i0 和 istacks 时一整圈顶点其实重合在极点上但为了简化通常还是生成完整的网格只是极点处的三角形有一个边长度为 0GPU 会直接丢弃不影响渲染结果。3.2 细分段数怎么选一个实际的性能测试我做过一组测试在几款不同年代的移动 GPU 上跑球体记录帧率和视觉质量。测试条件是球体半径 1.0屏幕占比约 1/4开启 Lambert 光照关闭抗锯齿。细分段数 (stacks×slices)顶点数三角形数低端机帧率中端机帧率视觉质量8×8811286060明显多边形感16×162895126060边缘略有棱角32×32108920485860基本圆滑64×64422581924260非常圆滑128×12816641327681855肉眼难辨差异结论很明确32×32 是移动端的甜点。再往上加视觉提升微乎其微但顶点处理开销成倍增长。如果你的球体在屏幕上很小16×16 就够了。如果要做高质量离线渲染那另说。实操心得别在代码里硬编码细分段数。根据球体在屏幕上的投影大小动态调整远小近大这是 LODLevel of Detail的基本思路。简单做法是算球心到相机的距离距离越远段数越少。3.3 球体法线的平滑处理与光照效果球体的法线是平滑变化的所以光照过渡很自然。但如果你用立方体的方式去算法线每个面一个法线球体就会变成“多面体”效果。这里的关键是法线必须逐顶点插值。顶点着色器里算出的vNormal是 varying 变量会在光栅化阶段对三角形内的每个像素做重心坐标插值片元着色器拿到的就是插值后的法线。但插值后的法线长度可能不再是 1所以片元着色器里必须再normalize一次。我见过有人忘了这一步结果光照在三角形边缘出现暗带就是因为法线长度在插值后变短了点积结果偏小。另外球体的背面剔除要开。glEnable(GL_CULL_FACE)加glCullFace(GL_BACK)能省掉一半的片元着色器调用。对于封闭几何体这是最廉价的性能优化。4. 常见问题排查与实战避坑指南4.1 画面全黑或全白从着色器编译日志开始查画面全黑是最常见的问题原因可能有一堆。我的排查顺序是这样的查着色器编译和链接日志。glGetShaderiv和glGetProgramiv拿到状态后用glGetShaderInfoLog和glGetProgramInfoLog把日志打出来。ES 2.0 的驱动日志有时候很简略但至少能告诉你哪一行有语法错误。查 attribute 和 uniform 位置。glGetAttribLocation和glGetUniformLocation返回 -1 说明变量被优化掉了或者名字拼错了。注意 ES 2.0 的 GLSL 编译器会优化掉未使用的变量如果你在着色器里声明了但没用到位置就是 -1。查矩阵是否传对了。我遇到过 Projection 矩阵的宽高比算反了导致物体被拉伸到屏幕外。还有一次是矩阵没转置OpenGL 默认列主序但我的矩阵库是行主序结果整个场景扭曲。查深度测试和面剔除。如果深度测试没开后面的三角形会覆盖前面的如果面剔除方向反了整个物体可能被剔掉。注意ES 2.0 没有glGetError之外的调试手段所以每一步操作后都调一次glGetError把错误码打出来。GL_INVALID_OPERATION通常是状态不对GL_INVALID_VALUE是参数越界。4.2 光照接缝与法线矩阵的坑立方体光照在棱边处出现黑线或亮线九成是法线矩阵的问题。如果你的 Model 矩阵包含非均匀缩放比如scale(1.0, 2.0, 1.0)法线会被拉向 Y 轴导致光照计算错误。解决办法就是前面说的逆转置矩阵。还有一个隐蔽的坑法线没有归一化。在顶点着色器里uNormalMatrix * aNormal之后法线长度可能不再是 1。如果 Model 矩阵有缩放法线长度会变。所以顶点着色器里也要normalize一次。我一般写vNormal normalize(uNormalMatrix * aNormal);双保险。4.3 球体极点处的纹理拉伸与索引越界球体用经纬度细分时极点处的三角形是退化的纹理坐标也会在极点处极度拉伸。如果你给球体贴纹理极点会变成一个“漩涡”。解决办法有两种一是用立方体贴图Cube Map做环境映射避开 UV 展开二是接受这个瑕疵因为大多数场景下极点不在视野中心。索引越界是另一个常见问题。生成索引时i从 0 到stacks-1j从 0 到slices-1每个格子两个三角形。顶点索引是i * (slices1) j。如果slices1算错了索引就会指到数组外面轻则画面错乱重则驱动崩溃。我习惯在生成索引后加一个断言检查最大索引是否小于顶点数。4.4 常见问题速查表现象可能原因排查方法画面全黑着色器编译失败、矩阵未传、深度测试未开查编译日志、查 uniform 位置、查glGetError画面全白光照计算溢出、颜色未归一化检查片元着色器输出是否 clamp 到 [0,1]物体拉伸投影矩阵宽高比错误检查aspect width / height是否传对光照接缝法线未归一化、法线矩阵错误顶点和片元都加normalize检查逆转置矩阵球体有棱角细分段数太少增加到 32×32 以上帧率骤降细分段数过高、未开背面剔除降段数、开GL_CULL_FACE索引越界崩溃索引数组大小算错断言最大索引 顶点数5. 从 Demo 到产品可扩展的方向与个人经验5.1 把立方体和球体封装成可复用的 Mesh 类写 Demo 的时候顶点数据可以硬编码。但要做项目必须封装。我一般会写一个Mesh类持有 VBO、IBO、顶点数、索引数提供draw()方法。构造函数接收顶点数组和索引数组自动创建缓冲区。析构函数里删缓冲区。这样立方体和球体只是两个不同的Mesh实例渲染循环里统一处理。更进一步可以加一个MeshFactory根据参数生成不同细分段数的球体、不同尺寸的立方体。这样切换几何体就是换一个工厂调用的事。5.2 性能优化的几个实际手段除了降细分和开背面剔除还有几个手段在移动端很有效顶点属性打包位置和法线各 3 个 float一共 24 字节。如果用法线用GL_BYTE归一化存储可以省到 12 字节。但 ES 2.0 对归一化字节属性的支持要看设备不是所有 GPU 都高效。索引缓冲区复用多个相同几何体实例可以共享同一个 VBO 和 IBO只是 Model 矩阵不同。这就是实例化的雏形但 ES 2.0 没有原生实例化得靠多次绘制调用。视锥剔除球体可以用包围球做快速剔除立方体用 AABB。在 CPU 端算好不在视锥内的直接跳过绘制。5.3 我个人在实际操作中的体会画立方体和球体这件事看起来简单但真正把光照、矩阵、性能都调对还是得花点时间。我最大的体会是别急着写代码先把数学搞清楚。法线怎么变换、投影矩阵怎么推导、球面参数方程怎么离散化这些想明白了代码就是翻译。反过来如果数学不清不楚调 Bug 就是碰运气。另外移动端 GPU 的脾气和桌面 GPU 不一样。桌面 GPU 对冗余状态调用容忍度高移动端驱动可能直接给你报错或者性能暴跌。所以状态管理要干净该关的关该开的开别留一堆没用的glEnable。最后再分享一个小技巧如果你在调试光照先把片元着色器改成gl_FragColor vec4(vNormal * 0.5 0.5, 1.0);把法线可视化出来。法线对不对一眼就能看出来。这比盯着光照结果猜要快得多。
1. 从零理解 OpenGL ES 2.0 的几何绘制逻辑1.1 为什么选择立方体和球体作为入门几何体刚接触 OpenGL ES 2.0 的人十有八九第一个像样的 Demo 就是画一个旋转的立方体第二个大概率是画一个球。这不是巧合而是这两个几何体恰好覆盖了图形渲染中最核心的两类问题立方体代表的是“硬表面、离散顶点、法线突变”的场景而球体代表的是“曲面细分、平滑法线、顶点密度与视觉质量的权衡”。把这两个啃下来后面不管是做模型加载、粒子系统还是后处理底层逻辑都是通的。我当初在移动端做渲染的时候踩的第一个大坑就是以为“画个立方体嘛8 个顶点传进去就完事了”。结果光照一开面与面之间的接缝处全是黑的或者亮的完全不对。后来才明白OpenGL ES 2.0 里顶点是“属性捆绑”的——位置、法线、纹理坐标是绑在同一个顶点上的。立方体一个角上的三个面法线方向完全不同你没法用同一个顶点同时满足三个面的法线需求。所以立方体实际上需要 24 个顶点每个面 4 个而不是 8 个。这个认知转变是从“数学上的立方体”到“渲染管线里的立方体”的关键一步。球体则反过来。数学上球面是光滑连续的但 GPU 只认三角形。你得用经纬度细分的方式去逼近细分越多越圆但顶点数和绘制调用也线性增长。这里就涉及一个很实际的工程问题在移动端顶点数不是免费的。一个 64×64 细分的球体大概有 8000 多个三角形在低端机上可能就跑不满 60 帧了。所以怎么在视觉质量和性能之间找平衡是球体绘制真正要教给你的东西。注意OpenGL ES 2.0 是可编程管线没有固定管线的“自动法线”或“自动光照”。所有顶点属性都得你自己组织所有变换都得你自己在着色器里算。这既是自由也是负担。1.2 核心关键词拆解VBO、VAO、着色器、MVP 矩阵在 OpenGL ES 2.0 里画任何东西都绕不开这几个核心对象。我用最直白的话把它们串一遍。VBOVertex Buffer Object就是一块显存里的缓冲区你把顶点数据位置、法线、颜色、纹理坐标打包成二进制数组传进去。为什么要用 VBO 而不是每次绘制都从 CPU 传因为移动端 GPU 和 CPU 之间的带宽是稀缺资源VBO 让数据常驻显存绘制时只传一个偏移量效率高得多。VAOVertex Array Object在 OpenGL ES 2.0 里其实不是核心规范的一部分它是通过扩展OES_vertex_array_object提供的。VAO 的作用是“记住”你从 VBO 里怎么取数据——哪个属性对应哪个偏移、步长多少、是否归一化。没有 VAO 的话每次绘制前你都得重新调一遍glVertexAttribPointer代码又臭又长。不过要注意不是所有 ES 2.0 设备都支持 VAO 扩展得先查glGetString(GL_EXTENSIONS)。着色器Shader分顶点着色器和片元着色器。顶点着色器负责把模型空间的顶点坐标经过 MVP 矩阵变换到裁剪空间同时把法线变换到世界空间传给片元着色器。片元着色器负责算每个像素的颜色光照公式、纹理采样都在这里。ES 2.0 用的是 GLSL ES 1.00语法比桌面版 GLSL 严格不少比如不支持动态数组索引、不支持switch等。MVP 矩阵是 Model-View-Projection 的缩写。Model 矩阵把物体从局部空间放到世界空间View 矩阵把世界空间转到相机空间Projection 矩阵把相机空间投影到裁剪空间。这三个矩阵通常预先在 CPU 端算好以 uniform 的形式传给顶点着色器。移动端一般用glm库或者自己写矩阵乘法注意 ES 2.0 的 uniform 数量有限别传太多矩阵。2. 立方体绘制的完整实现与细节剖析2.1 顶点数据结构设计为什么是 24 个顶点而不是 8 个前面提过立方体需要 24 个顶点。具体来说6 个面每个面 4 个顶点。每个顶点包含位置3 个 float和法线3 个 float所以一个顶点 6 个 float总共 24×6144 个 float。如果用GL_TRIANGLES绘制还需要索引数组每个面 2 个三角形6 个面共 12 个三角形36 个索引。我见过有人用 8 个顶点加GL_TRIANGLE_STRIP或者GL_TRIANGLE_FAN来画立方体确实能画出形状但光照一定不对。因为一个顶点只能有一个法线你没法让一个顶点同时属于三个面且法线各自正确。所以除非你不开光照、只用纯色否则 24 个顶点是底线。下面是我常用的顶点数据组织方式用 C 数组表示// 每个顶点位置(x,y,z) 法线(nx,ny,nz) float cubeVertices[] { // 前面 (z 0.5)法线朝 Z -0.5f, -0.5f, 0.5f, 0.0f, 0.0f, 1.0f, 0.5f, -0.5f, 0.5f, 0.0f, 0.0f, 1.0f, 0.5f, 0.5f, 0.5f, 0.0f, 0.0f, 1.0f, -0.5f, 0.5f, 0.5f, 0.0f, 0.0f, 1.0f, // 后面 (z -0.5)法线朝 -Z -0.5f, -0.5f, -0.5f, 0.0f, 0.0f, -1.0f, -0.5f, 0.5f, -0.5f, 0.0f, 0.0f, -1.0f, 0.5f, 0.5f, -0.5f, 0.0f, 0.0f, -1.0f, 0.5f, -0.5f, -0.5f, 0.0f, 0.0f, -1.0f, // 左面 (x -0.5)法线朝 -X -0.5f, -0.5f, -0.5f, -1.0f, 0.0f, 0.0f, -0.5f, -0.5f, 0.5f, -1.0f, 0.0f, 0.0f, -0.5f, 0.5f, 0.5f, -1.0f, 0.0f, 0.0f, -0.5f, 0.5f, -0.5f, -1.0f, 0.0f, 0.0f, // 右面 (x 0.5)法线朝 X 0.5f, -0.5f, -0.5f, 1.0f, 0.0f, 0.0f, 0.5f, 0.5f, -0.5f, 1.0f, 0.0f, 0.0f, 0.5f, 0.5f, 0.5f, 1.0f, 0.0f, 0.0f, 0.5f, -0.5f, 0.5f, 1.0f, 0.0f, 0.0f, // 上面 (y 0.5)法线朝 Y -0.5f, 0.5f, -0.5f, 0.0f, 1.0f, 0.0f, -0.5f, 0.5f, 0.5f, 0.0f, 1.0f, 0.0f, 0.5f, 0.5f, 0.5f, 0.0f, 1.0f, 0.0f, 0.5f, 0.5f, -0.5f, 0.0f, 1.0f, 0.0f, // 下面 (y -0.5)法线朝 -Y -0.5f, -0.5f, -0.5f, 0.0f, -1.0f, 0.0f, 0.5f, -0.5f, -0.5f, 0.0f, -1.0f, 0.0f, 0.5f, -0.5f, 0.5f, 0.0f, -1.0f, 0.0f, -0.5f, -0.5f, 0.5f, 0.0f, -1.0f, 0.0f, };索引数组按每个面两个三角形组织注意顶点绕序要一致通常用逆时针为正面unsigned short cubeIndices[] { 0, 1, 2, 0, 2, 3, // 前面 4, 5, 6, 4, 6, 7, // 后面 8, 9, 10, 8, 10, 11, // 左面 12, 13, 14, 12, 14, 15, // 右面 16, 17, 18, 16, 18, 19, // 上面 20, 21, 22, 20, 22, 23 // 下面 };实操心得索引数组用unsigned short就够了因为顶点数远小于 65536。如果顶点数超过这个值得用unsigned int但 ES 2.0 对GL_UNSIGNED_INT索引的支持要看扩展OES_element_index_uint不是所有设备都支持。2.2 顶点着色器与片元着色器的编写要点顶点着色器要做三件事把位置变换到裁剪空间、把法线变换到世界空间、把世界空间位置传给片元着色器用于光照计算。// 顶点着色器 attribute vec3 aPosition; attribute vec3 aNormal; uniform mat4 uModelMatrix; uniform mat4 uViewMatrix; uniform mat4 uProjectionMatrix; uniform mat3 uNormalMatrix; varying vec3 vWorldPos; varying vec3 vNormal; void main() { vec4 worldPos uModelMatrix * vec4(aPosition, 1.0); vWorldPos worldPos.xyz; vNormal normalize(uNormalMatrix * aNormal); gl_Position uProjectionMatrix * uViewMatrix * worldPos; }这里有个关键点法线变换不能用 Model 矩阵直接乘。如果 Model 矩阵包含非均匀缩放法线会被拉歪。正确做法是用 Model 矩阵左上角 3×3 部分的逆转置矩阵也就是uNormalMatrix。在 CPU 端算这个矩阵的时候先取 Model 的 3×3 部分求逆再转置。如果 Model 只有旋转和平移没有缩放那uNormalMatrix就等于 Model 的 3×3 部分可以省一步计算。片元着色器做一个简单的 Lambert 漫反射加环境光precision mediump float; varying vec3 vWorldPos; varying vec3 vNormal; uniform vec3 uLightPos; uniform vec3 uLightColor; uniform vec3 uAmbientColor; uniform vec3 uCameraPos; void main() { vec3 N normalize(vNormal); vec3 L normalize(uLightPos - vWorldPos); float diff max(dot(N, L), 0.0); vec3 diffuse uLightColor * diff; vec3 color uAmbientColor diffuse; gl_FragColor vec4(color, 1.0); }precision mediump float是 ES 2.0 片元着色器的强制要求不写会编译报错。mediump是 16 位浮点highp是 32 位但并非所有设备都支持。对于光照计算mediump在大多数场景下够用但如果你的场景尺度很大或者需要高精度得查设备是否支持highp。注意ES 2.0 的varying变量数量有限通常只有 8 个 vec4。别传太多东西能合并的合并能算的就在片元里算。2.3 绘制调用与状态管理绘制立方体的核心调用就几行但状态管理容易出错glEnableVertexAttribArray(aPositionLoc); glEnableVertexAttribArray(aNormalLoc); glBindBuffer(GL_ARRAY_BUFFER, vbo); glVertexAttribPointer(aPositionLoc, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)0); glVertexAttribPointer(aNormalLoc, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)(3 * sizeof(float))); glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, ibo); glDrawElements(GL_TRIANGLES, 36, GL_UNSIGNED_SHORT, 0); glDisableVertexAttribArray(aPositionLoc); glDisableVertexAttribArray(aNormalLoc);步长是6 * sizeof(float)因为每个顶点 6 个 float。位置偏移是 0法线偏移是3 * sizeof(float)。这两个glVertexAttribPointer调用必须在glBindBuffer(GL_ARRAY_BUFFER, vbo)之后因为属性指针会记录当前绑定的 VBO。我踩过的一个坑在glDrawElements之前绑定了GL_ELEMENT_ARRAY_BUFFER但之后又绑了别的 VBO结果索引缓冲区被覆盖了。记住GL_ELEMENT_ARRAY_BUFFER的绑定是 VAO 状态的一部分如果有 VAO没有 VAO 的话就是全局状态别在绘制前乱绑。3. 球体绘制的数学推导与性能权衡3.1 经纬度细分从球面参数方程到三角形网格球体的参数方程很直观x r * sin(theta) * cos(phi)y r * cos(theta)z r * sin(theta) * sin(phi)其中 theta 是极角0 到 PIphi 是方位角0 到 2PI。把 theta 和 phi 分别分成若干段就得到经纬网格。每个网格单元拆成两个三角形。假设经度分段数为stacks沿 theta 方向纬度分段数为slices沿 phi 方向那么顶点数是(stacks1) * (slices1)三角形数是stacks * slices * 2。比如stacks32, slices32顶点数 1089三角形数 2048。这个量级在移动端完全没问题。法线怎么算对于单位球法线就是归一化后的位置向量。所以顶点位置和法线可以一起算for (int i 0; i stacks; i) { float theta i * PI / stacks; float sinTheta sinf(theta); float cosTheta cosf(theta); for (int j 0; j slices; j) { float phi j * 2.0f * PI / slices; float x sinTheta * cosf(phi); float y cosTheta; float z sinTheta * sinf(phi); // 位置 vertices.push_back(x * radius); vertices.push_back(y * radius); vertices.push_back(z * radius); // 法线单位球就是归一化位置 vertices.push_back(x); vertices.push_back(y); vertices.push_back(z); } }索引生成要注意极点处的退化三角形。在 i0 和 istacks 时一整圈顶点其实重合在极点上但为了简化通常还是生成完整的网格只是极点处的三角形有一个边长度为 0GPU 会直接丢弃不影响渲染结果。3.2 细分段数怎么选一个实际的性能测试我做过一组测试在几款不同年代的移动 GPU 上跑球体记录帧率和视觉质量。测试条件是球体半径 1.0屏幕占比约 1/4开启 Lambert 光照关闭抗锯齿。细分段数 (stacks×slices)顶点数三角形数低端机帧率中端机帧率视觉质量8×8811286060明显多边形感16×162895126060边缘略有棱角32×32108920485860基本圆滑64×64422581924260非常圆滑128×12816641327681855肉眼难辨差异结论很明确32×32 是移动端的甜点。再往上加视觉提升微乎其微但顶点处理开销成倍增长。如果你的球体在屏幕上很小16×16 就够了。如果要做高质量离线渲染那另说。实操心得别在代码里硬编码细分段数。根据球体在屏幕上的投影大小动态调整远小近大这是 LODLevel of Detail的基本思路。简单做法是算球心到相机的距离距离越远段数越少。3.3 球体法线的平滑处理与光照效果球体的法线是平滑变化的所以光照过渡很自然。但如果你用立方体的方式去算法线每个面一个法线球体就会变成“多面体”效果。这里的关键是法线必须逐顶点插值。顶点着色器里算出的vNormal是 varying 变量会在光栅化阶段对三角形内的每个像素做重心坐标插值片元着色器拿到的就是插值后的法线。但插值后的法线长度可能不再是 1所以片元着色器里必须再normalize一次。我见过有人忘了这一步结果光照在三角形边缘出现暗带就是因为法线长度在插值后变短了点积结果偏小。另外球体的背面剔除要开。glEnable(GL_CULL_FACE)加glCullFace(GL_BACK)能省掉一半的片元着色器调用。对于封闭几何体这是最廉价的性能优化。4. 常见问题排查与实战避坑指南4.1 画面全黑或全白从着色器编译日志开始查画面全黑是最常见的问题原因可能有一堆。我的排查顺序是这样的查着色器编译和链接日志。glGetShaderiv和glGetProgramiv拿到状态后用glGetShaderInfoLog和glGetProgramInfoLog把日志打出来。ES 2.0 的驱动日志有时候很简略但至少能告诉你哪一行有语法错误。查 attribute 和 uniform 位置。glGetAttribLocation和glGetUniformLocation返回 -1 说明变量被优化掉了或者名字拼错了。注意 ES 2.0 的 GLSL 编译器会优化掉未使用的变量如果你在着色器里声明了但没用到位置就是 -1。查矩阵是否传对了。我遇到过 Projection 矩阵的宽高比算反了导致物体被拉伸到屏幕外。还有一次是矩阵没转置OpenGL 默认列主序但我的矩阵库是行主序结果整个场景扭曲。查深度测试和面剔除。如果深度测试没开后面的三角形会覆盖前面的如果面剔除方向反了整个物体可能被剔掉。注意ES 2.0 没有glGetError之外的调试手段所以每一步操作后都调一次glGetError把错误码打出来。GL_INVALID_OPERATION通常是状态不对GL_INVALID_VALUE是参数越界。4.2 光照接缝与法线矩阵的坑立方体光照在棱边处出现黑线或亮线九成是法线矩阵的问题。如果你的 Model 矩阵包含非均匀缩放比如scale(1.0, 2.0, 1.0)法线会被拉向 Y 轴导致光照计算错误。解决办法就是前面说的逆转置矩阵。还有一个隐蔽的坑法线没有归一化。在顶点着色器里uNormalMatrix * aNormal之后法线长度可能不再是 1。如果 Model 矩阵有缩放法线长度会变。所以顶点着色器里也要normalize一次。我一般写vNormal normalize(uNormalMatrix * aNormal);双保险。4.3 球体极点处的纹理拉伸与索引越界球体用经纬度细分时极点处的三角形是退化的纹理坐标也会在极点处极度拉伸。如果你给球体贴纹理极点会变成一个“漩涡”。解决办法有两种一是用立方体贴图Cube Map做环境映射避开 UV 展开二是接受这个瑕疵因为大多数场景下极点不在视野中心。索引越界是另一个常见问题。生成索引时i从 0 到stacks-1j从 0 到slices-1每个格子两个三角形。顶点索引是i * (slices1) j。如果slices1算错了索引就会指到数组外面轻则画面错乱重则驱动崩溃。我习惯在生成索引后加一个断言检查最大索引是否小于顶点数。4.4 常见问题速查表现象可能原因排查方法画面全黑着色器编译失败、矩阵未传、深度测试未开查编译日志、查 uniform 位置、查glGetError画面全白光照计算溢出、颜色未归一化检查片元着色器输出是否 clamp 到 [0,1]物体拉伸投影矩阵宽高比错误检查aspect width / height是否传对光照接缝法线未归一化、法线矩阵错误顶点和片元都加normalize检查逆转置矩阵球体有棱角细分段数太少增加到 32×32 以上帧率骤降细分段数过高、未开背面剔除降段数、开GL_CULL_FACE索引越界崩溃索引数组大小算错断言最大索引 顶点数5. 从 Demo 到产品可扩展的方向与个人经验5.1 把立方体和球体封装成可复用的 Mesh 类写 Demo 的时候顶点数据可以硬编码。但要做项目必须封装。我一般会写一个Mesh类持有 VBO、IBO、顶点数、索引数提供draw()方法。构造函数接收顶点数组和索引数组自动创建缓冲区。析构函数里删缓冲区。这样立方体和球体只是两个不同的Mesh实例渲染循环里统一处理。更进一步可以加一个MeshFactory根据参数生成不同细分段数的球体、不同尺寸的立方体。这样切换几何体就是换一个工厂调用的事。5.2 性能优化的几个实际手段除了降细分和开背面剔除还有几个手段在移动端很有效顶点属性打包位置和法线各 3 个 float一共 24 字节。如果用法线用GL_BYTE归一化存储可以省到 12 字节。但 ES 2.0 对归一化字节属性的支持要看设备不是所有 GPU 都高效。索引缓冲区复用多个相同几何体实例可以共享同一个 VBO 和 IBO只是 Model 矩阵不同。这就是实例化的雏形但 ES 2.0 没有原生实例化得靠多次绘制调用。视锥剔除球体可以用包围球做快速剔除立方体用 AABB。在 CPU 端算好不在视锥内的直接跳过绘制。5.3 我个人在实际操作中的体会画立方体和球体这件事看起来简单但真正把光照、矩阵、性能都调对还是得花点时间。我最大的体会是别急着写代码先把数学搞清楚。法线怎么变换、投影矩阵怎么推导、球面参数方程怎么离散化这些想明白了代码就是翻译。反过来如果数学不清不楚调 Bug 就是碰运气。另外移动端 GPU 的脾气和桌面 GPU 不一样。桌面 GPU 对冗余状态调用容忍度高移动端驱动可能直接给你报错或者性能暴跌。所以状态管理要干净该关的关该开的开别留一堆没用的glEnable。最后再分享一个小技巧如果你在调试光照先把片元着色器改成gl_FragColor vec4(vNormal * 0.5 0.5, 1.0);把法线可视化出来。法线对不对一眼就能看出来。这比盯着光照结果猜要快得多。
