先聊聊这个项目本身。做Android图形开发的朋友多少都绕不开OpenGL ES这套API而光照贴图Lighting Maps又是在入门基础光照之后最值得花时间啃的一个环节。它解决的问题特别实在在实时渲染里一个立方体如果只靠纯色和简单光照计算做出来的效果就是一块被均匀照亮的“塑料”木头不像木头砖墙不像砖墙。光照贴图要做的就是让物体表面不同位置对光线的反应不一样——金属的地方亮锈蚀的地方暗粗糙的地方高光散光滑的地方高光锐。简单说它把光照计算和纹理采样拧在一起让最终的渲染效果从“看得过去”变成“真的像那么回事儿”。这篇文章的内容来自我自己在Android上走通一个完整光照贴图示例的全过程包括原理拆解、着色器代码、参数计算、资源准备以及踩过的坑。适合刚刚掌握了OpenGL ES基础绘制、纹理贴图想进一步做真实感渲染的开发者。我会把涉及的关键计算和调试方法都展开讲照着做基本能复现出一个光照效果明显的纹理立方体。1. 光照贴图的核心思路与效果预期1.1 光照贴图到底解决了什么问题先回忆一下基础光照模型的痛点。Phong光照模型里有三个核心分量环境光Ambient、漫反射Diffuse和镜面反射Specular。只看这三个分量本身它们都只返回一个颜色值也就是说一个物体的漫反射颜色是固定的不管物体表面是花纹、锈迹还是砖缝计算出来都是同一个颜色。这就导致一个严重的问题——物体“材质感”极度缺失。如果用纯数学光照模型去模拟一堵砖墙你能调出来的无非是一个偏红的颜色然后让它对光线做出统一的反应。但真实的砖墙表面有凹凸、有灰缝、有磨损区域这些细节如果用数学公式去逐点模拟计算量是不可接受的而且根本调不出那种自然的杂乱感。光照贴图的核心思路是把物体表面不同位置的光学属性存进纹理图里光照计算时从纹理里取出来用。这就是所谓的“贴图驱动光照”让材质细节的成本从“逐点计算”降低到“纹理采样”。1.2 漫反射贴图和镜面反射贴图的分工光照贴图通常包含两种类型的贴图它们各管一件事。漫反射贴图Diffuse Map定义的是物体表面各点的基础颜色。它回答的问题是这个位置原本是什么颜色。比如一个木箱正面是木头纹理侧面的铁皮是另一种颜色这些信息全部存进一张彩色纹理。采样之后拿到的颜色直接参与漫反射计算取代原先写死的那个“物体颜色”常量。镜面反射贴图Specular Map定义的是物体表面各点的镜面反射强度。它一般是一张灰度图白色区域代表高光强、表面光滑黑色区域代表高光弱、表面粗糙或不是反射材质。比如同一个木箱铁皮部分需要高光木头纹理区域就不需要太多高光。如果不使用镜面贴图一个立方体所有表面都会出现同样强度的高光看起来就会像表面覆盖了一层塑料膜。这两种贴图配合使用才能做到“该反光的反光该吸光的吸光”。最常见的做法是漫反射贴图用彩色图片镜面反射贴图用对应的灰度版本。网上能找到很多现成的免费材质资源有的直接附带Specular Map没有的话用图像处理软件把彩色图去色压暗也行。1.3 光照贴图的计算流程全貌整个光照贴图的计算流程简单说就是两条纹理坐标的旅程。第一步顶点着色器收到顶点位置和纹理坐标经过模型变换把顶点送到世界空间经过法线变换把法线送到世界空间然后把纹理坐标原样传给片元着色器。第二步片元着色器里做三件事。先采样漫反射贴图拿到这个片元的基础颜色作为环境光和漫反射分量的颜色来源。再采样镜面反射贴图拿到这个片元的镜面反射强度作为高光分量的乘数。然后按照Phong模型计算出光线方向和观察方向的角度关系套公式得到最终颜色。这个流程最大的特点是把“材质属性”从常量变成了向量场所以计算出来的光照效果能够在物体表面的不同区域产生差异。理解了这条主线后面写代码无非是把各个步骤落到实处。2. 环境搭建与资源准备2.1 开发环境与EGL初始化项目使用Android Studio开发语言上可以用Java或Kotlin也可以用NDK做C实现但为了聚焦光照贴图的核心逻辑建议直接用GLSurfaceView加GLSL着色器省去EGL手动初始化的繁琐。GLSurfaceView是Android提供的一个专门用来承载OpenGL ES渲染的View组件它内部已经处理好了EGL环境的创建、销毁和渲染线程的调度。需要做的就是三件事设置OpenGL ES版本、实现Renderer接口、把渲染器设置给GLSurfaceView。GLSurfaceView glSurfaceView findViewById(R.id.gl_surface_view); glSurfaceView.setEGLContextClientVersion(2); glSurfaceView.setRenderer(new LightingMapRenderer(this)); glSurfaceView.setRenderMode(GLSurfaceView.RENDERMODE_CONTINUOUSLY);版本必须设为2因为GLSL ES 1.00着色器是OpenGL ES 2.0的基础光照计算中需要的循环、函数、矩阵支持在这个版本里都具备。渲染模式这里用连续渲染因为我们要实时旋转视角观察光照效果如果用脏标记模式画面不会主动更新。2.2 纹理加载工具类设计光照贴图需要两张纹理一张漫反射、一张镜面反射。Android里加载纹理的标准流程是BitmapFactory.decodeResource拿到Bitmap再生成OpenGL纹理ID把Bitmap像素上传到GPU然后释放Bitmap内存。需要特别注意的是纹理坐标的方向问题。OpenGL纹理坐标系的原点在左下角而Bitmap的像素数据从左上角开始。如果直接上传贴图会上下颠倒。在加载时要么手动翻转Bitmap要么在纹理坐标上做调整这里建议用Matrix翻转Bitmap一劳永逸。public static int loadTexture(Context context, int resourceId) { int[] textureId new int[1]; glGenTextures(1, textureId, 0); glBindTexture(GL_TEXTURE_2D, textureId[0]); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); Bitmap original BitmapFactory.decodeResource(context.getResources(), resourceId); Matrix flip new Matrix(); flip.postScale(1f, -1f); Bitmap flipped Bitmap.createBitmap(original, 0, 0, original.getWidth(), original.getHeight(), flip, true); GLUtils.texImage2D(GL_TEXTURE_2D, 0, flipped, 0); glGenerateMipmap(GL_TEXTURE_2D); flipped.recycle(); original.recycle(); return textureId[0]; }这段代码里有几个值得展开的点。纹理环绕方式用了GL_REPEAT这是因为光照贴图场景里的立方体可能不大但纹理希望平铺重复尤其是地板类材质效果更自然。缩小过滤器用了GL_LINEAR_MIPMAP_LINEAR这是三线性过滤能有效减少纹理在远处缩小时的闪烁。放大过滤器用GL_LINEAR因为放大时不能走mipmap线性插值就够用。2.3 立方体网格与法线数据准备光照计算必须有法线参与而且法线必须是逐顶点的。一个立方体有6个面每个面4个顶点所以总共要定义24个顶点每个顶点包含位置3个float、法线3个float和纹理坐标2个float。这里不能偷懒用8个顶点去做因为一个顶点可能属于多个面每个面的法线方向不同顶点着色器只能给每个顶点计算出一条法线如果共用顶点光照就会算错。这里给出一个面前表面的数据作为参考。位置、法线、纹理坐标依次排列每个顶点占8个float。注意法线方向是朝外的前表面的法线是(0, 0, 1)。float[] vertices { // 位置 // 法线 // 纹理坐标 -0.5f, -0.5f, 0.5f, 0f, 0f, 1f, 0f, 0f, 0.5f, -0.5f, 0.5f, 0f, 0f, 1f, 1f, 0f, 0.5f, 0.5f, 0.5f, 0f, 0f, 1f, 1f, 1f, -0.5f, 0.5f, 0.5f, 0f, 0f, 1f, 0f, 1f, };其余五个面的数据生成方式相同只是位置坐标不同、法线方向各异。顶点的组织方式最后要用GL_TRIANGLE_STRIP或GL_TRIANGLES绘制建议按三角形图元组织索引数组避免重复顶点数据。索引数组的定义顺序要注意逆时针环绕否则默认开启背面剔除后整个面会消失。3. 着色器实现与光照参数计算3.1 顶点着色器矩阵变换与法线修正顶点着色器的职责是把模型的顶点位置从模型空间变换到裁剪空间同时把每个顶点的法线和纹理坐标准备好方便片元着色器插值。这里有一个关键点法线不能直接用模型矩阵变换因为如果模型做了非均匀缩放法线方向会被扭曲。正确的做法是用逆转置矩阵来变换法线。在顶点着色器里可以通过inverse和transpose函数现场计算但这种方式在Android的GLSL ES 1.00里不可用ES 2.0的着色器语言还不支持函数级求逆。所以通常的选择是在CPU侧用矩阵工具类计算出逆转置矩阵再以uniform的形式传入着色器。uniform mat4 uModel; uniform mat4 uView; uniform mat4 uProjection; uniform mat3 uNormalMatrix; attribute vec3 aPosition; attribute vec3 aNormal; attribute vec2 aTexCoord; varying vec3 vNormal; varying vec2 vTexCoord; void main() { gl_Position uProjection * uView * uModel * vec4(aPosition, 1.0); vNormal uNormalMatrix * aNormal; vTexCoord aTexCoord; }这里把模型、视图、投影三个矩阵分开传入是为了方便在世界空间里计算光线和观察方向。如果直接在顶点着色器里把坐标变换到裁剪空间后面的光照计算会搞不清楚坐标基准。法线经过逆转置矩阵变换后还需要在片元着色器中归一化因为插值出来的法线长度已经变了。3.2 片元着色器三种分量一次算清片元着色器是整个光照贴图的核心。它的输入有三块插值后的法线、纹理坐标以及从Java侧传进来的光源参数和观察位置。计算分为环境光、漫反射、镜面反射三条线最后相加。precision mediump float; uniform sampler2D uDiffuseMap; uniform sampler2D uSpecularMap; uniform vec3 uLightColor; uniform vec3 uLightPosition; uniform vec3 uViewPosition; uniform float uShininess; varying vec3 vNormal; varying vec2 vTexCoord; void main() { // 法线归一化 vec3 norm normalize(vNormal); // 光线方向 vec3 lightDir normalize(uLightPosition - vNormal); // 观察方向 vec3 viewDir normalize(uViewPosition - vNormal); // 半程向量 vec3 halfDir normalize(lightDir viewDir); // 漫反射贴图采样 vec3 diffuseColor texture2D(uDiffuseMap, vTexCoord).rgb; // 镜面反射贴图采样 float specularStrength texture2D(uSpecularMap, vTexCoord).r; // 漫反射计算 float diff max(dot(norm, lightDir), 0.0); vec3 diffuse diffuseColor * diff; // 环境光 float ambientStrength 0.2; vec3 ambient ambientStrength * diffuseColor; // 镜面反射 float spec pow(max(dot(norm, halfDir), 0.0), uShininess); vec3 specular specularStrength * spec * uLightColor; vec3 result ambient diffuse specular; gl_FragColor vec4(result, 1.0); }这段代码里有两个很容易踩坑的地方。第一光线的方向是光源位置减去片元位置但这里片元位置我直接用了插值后的顶点位置这在物体恰好是一个立方体且光源距离不太近时误差可以接受严格说是应该在顶点着色器里把片元的世界坐标传出来更精确的做法是走世界坐标那一套。第二计算半程向量用halfDir替代了传统Blinn-Phong里的反射向量好处是计算量小、高光效果更柔和更接近Physically Based Rendering的思想。3.3 光源参数的选择与调试方法光源参数直接决定了光照效果是“对”还是“不对”。在调试阶段我习惯把光源放在一个看得见、摸得着的位置比如(2.0, 3.0, 4.0)观察位置先放在(0.0, 0.0, 6.0)。这样光线从斜上方打下来立方体三个可见面的亮度差异明显特别方便检查漫反射方向是否算错。关于高光指数uShininess这个参数控制高光范围的宽窄。数值小比如8到16高光范围大适合粗糙表面数值大比如64到128高光范围小适合光滑表面。调试时可以多试几档观察高光点的变化。这里给出一个常用调试方案表方便快速对照参数推荐范围效果表现调节方向环境光强度0.1 - 0.3背光面不会死黑调高则整体变亮调低则暗部层次丰富漫反射强度0.8 - 1.0正面受光均匀通常不做调整由贴图决定镜面反射强度贴图控制高光区域随贴图变化灰色贴图可整体减弱高光高光指数16 - 64高光范围大小数值大则高光集中数值小则高光散开在调试时可以在Java侧写好一个光源位置变化的动画比如让光源绕Y轴转圈实时观察立方体各个面的明暗变化。如果某个角度出现了不该出现的全黑那很可能是法线方向错了如果高光位置看起来和光源方向对不上那问题多半出在观察方向的计算上。4. 光照贴图渲染的关键实现步骤4.1 着色器程序的编译与链接GLSL着色器在Android上需要手动编译、链接这个过程出错率不低。写一个工具方法把着色器源码传入、编译、查错再链接program这样出问题时能直接看到日志。public static int buildProgram(String vertexSource, String fragmentSource) { int vertexShader compileShader(GL_VERTEX_SHADER, vertexSource); int fragmentShader compileShader(GL_FRAGMENT_SHADER, fragmentSource); int program glCreateProgram(); glAttachShader(program, vertexShader); glAttachShader(program, fragmentShader); glLinkProgram(program); int[] linkStatus new int[1]; glGetProgramiv(program, GL_LINK_STATUS, linkStatus, 0); if (linkStatus[0] GL_FALSE) { String log glGetProgramInfoLog(program); glDeleteProgram(program); throw new RuntimeException(程序链接失败: log); } glDeleteShader(vertexShader); glDeleteShader(fragmentShader); return program; }有一个细节值得提在链接成program之后可以立即删除着色器对象GPU中已链接的部分会保留这样可以省一点内存。另外在调试阶段不要偷懒跳过日志检查着色器编译报错通常能在log里直接看到是第几行语法错误这比盲改代码高效得多。4.2 纹理绑定与uniform赋值顺序OpenGL是个状态机纹理单元的绑定特别容易搞乱。光照贴图需要两个纹理所以必须明确指定它们分别绑定到哪个纹理单元并在绘制前把对应的uniform sampler统一赋值。glActiveTexture(GL_TEXTURE0); glBindTexture(GL_TEXTURE_2D, diffuseMapId); glUniform1i(diffuseMapLocation, 0); glActiveTexture(GL_TEXTURE1); glBindTexture(GL_TEXTURE_2D, specularMapId); glUniform1i(specularMapLocation, 1);这段代码里glActiveTexture必须先于glBindTexture执行。如果忘记调用glActiveTexture两个纹理都会绑定到默认的GL_TEXTURE0上然后漫反射和镜面反射采样到同一张图渲染效果就全错了。另外uniform1i赋的值必须是纹理单元编号而不是纹理ID这两者经常被混淆尤其在刚接触OpenGL时容易犯这个错。4.3 渲染循环里的矩阵更新与绘制在Renderer的onDrawFrame里要做的事情包括清屏、计算矩阵、绑定纹理、绘制立方体。清屏颜色建议用深灰色这样方便观察光照阴影的变化纯黑色可能掩盖暗部细节。Override public void onDrawFrame(GL10 gl) { glClearColor(0.15f, 0.15f, 0.15f, 1.0f); glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); // 模型矩阵旋转动画 Matrix.setIdentityM(modelMatrix, 0); Matrix.rotateM(modelMatrix, 0, angle, 0.5f, 1.0f, 0.3f); // 视图矩阵摄像机固定 Matrix.setLookAtM(viewMatrix, 0, 0f, 0f, 5f, 0f, 0f, 0f, 0f, 1f, 0f); // 投影矩阵透视投影 Matrix.perspectiveM(projectionMatrix, 0, 45f, (float) width / height, 0.1f, 100f); // 计算逆转置矩阵用于法线变换 Matrix.multiplyMM(normalMatrixTemp, 0, viewMatrix, 0, modelMatrix, 0); Matrix.invertM(normalMatrixInv, 0, normalMatrixTemp, 0); Matrix.transposeM(normalMatrix, 0, normalMatrixInv, 0); // ... 绑定uniform、传入顶点数据、绘制 }绘制时用glDrawElements索引数据提前用Buffer封装好。这里有一个新手容易忽略的点GLES2.0的顶点数据必须用java.nio.Buffer封装。如果是直接用float[]OpenGL在渲染时会读取不到数据因为Java数组的内存布局和Native层需要的不一致。利用ByteBuffer.allocateDirect并设置字节序为nativeOrder是标准做法。4.4 观察角度、光源角度与法线方向的一致性调试光照效果时最容易出现的一个困惑是为什么光源明明在左边高光却出现在右边这个问题通常源自观察方向或法线方向计算错误。要保证光照计算中的所有向量都在同一个坐标系下这里建议全部放在世界坐标系里处理。顶点位置模型矩阵变换后得到世界坐标法线逆转置矩阵变换后得到世界坐标光源位置直接定义在世界坐标观察位置直接定义在世界坐标在片元着色器中将这些向量统一使用不要混用。如果某个环节不小心使用了模型空间的法线或裁剪空间的位置计算结果就会错乱。排查时可以在片元着色器里分别输出这几个量比如gl_FragColor赋值成vec4(norm, 1.0)肉眼看一下法线方向是否符合预期。5. 常见问题排查与避坑实录5.1 黑屏或全白光源和法线方向没对上黑屏的第一个检查点是片元着色器里有没有写死返回颜色。如果没有把采样值、光照结果分步输出用颜色判断哪一步出了问题。全白往往是所有法线朝向光源这时需要旋转物体看亮度是否随角度变化。法线方向错了的表现是物体的某些面正常某些面很暗甚至全黑。这是因为dot(normal, lightDir)计算出了负数被max函数截断成0。这时要检查法线数据是否为每个面单独定义并且方向向外。一个快速验证方法把漫反射贴图关掉用纯色加上normal做输出如果看到的颜色分布不均匀那就是法线数据有问题。5.2 纹理显示错乱或颠倒纹理颠倒的根源是坐标系方向不同。如果加载纹理后贴图上下颠倒通常是因为Bitmap没有做Y轴翻转。这里我自己的习惯是始终在加载纹理时统一翻转而不是在纹理坐标上每个顶点单独处理。因为纹理坐标的修改容易导致多面体表面贴图的接缝错乱而一次翻转位图一劳永逸。如果出现纹理重复或扭曲检查纹理环绕方式。对于立方体GL_REPEAT会让贴图在每个面上重复多次而GL_CLAMP_TO_EDGE会拉伸边缘。如果贴图边缘出现奇怪的颜色带多半是Clamp到边界时拉伸了最后的像素行。此时改成GL_REPEAT通常能解决。5.3 高光过强或过暗高光太强的原因通常是镜面反射贴图的亮度值太高或者环境光分量占比过小导致暗部被高光淹没。处理方式有两条路一是调低uShininess让高光范围扩大、强度摊薄二是调整镜面反射贴图本身的灰度值。不建议只靠调uShininess因为高光指数同时还影响高光的集中程度改小后高光虽然减弱但范围会变宽可能让物体看起来像上了釉。如果高光过暗检查uShininess是不是取得太大高光收敛到只剩一个亮点肉眼几乎看不到。这种情况下把指数降到32以下效果立刻会不一样。5.4 性能优化减少状态切换与纹理绑定次数光照贴图涉及两个纹理单元每帧都要绑定。在实际项目里如果场景里有多个物体分别使用不同的贴图频繁的glActiveTexture和glBindTexture会成为性能瓶颈。减少状态切换的一个有效方法按纹理分组合并绘制对象把使用同一个纹理单元的物体放在一起绘制。另一个值得做的小优化在片元着色器里提前return如果采样出来的alpha值小于某个阈值就丢弃片元。对于有透明区域的贴图这能减少大量无效的片元运算。但要注意OpenGL ES 2.0里discard关键字必须放在所有均匀量计算完成之后否则编译器会报错。5.5 一个我在调试中遇到的隐蔽问题这里分享一个特别容易忽视的细节。立方体的顶点数据里法线和纹理坐标是交错存储的每个顶点占了8个float。在设置顶点属性指针的时候stride参数要填上8个float的字节数也就是32。如果这里填错成6个float或3个float数据读取就会错位表面看起来是纹理花掉、光照错乱实际原因是属性指针的间距不对。还有就是在逐个设置顶点属性指针时偏移量offset经常搞混。位置从0开始偏移法线在位置之后偏移3个float纹理坐标在法线之后再偏移3个float。用代码表示就是glVertexAttribPointer(aPosition, 3, GL_FLOAT, false, 32, 0); glVertexAttribPointer(aNormal, 3, GL_FLOAT, false, 32, 12); glVertexAttribPointer(aTexCoord, 2, GL_FLOAT, false, 32, 24);这个布局和顶点数据定义必须严格一致否则画出来的东西是“对”的但效果完全不对。这种问题最难排查因为数据本身没错、着色器也对纯粹是偏移量填错。6. 实操总结与后续扩展建议光照贴图这个项目做完最大的收获是真正理解了实时渲染中“材质”是怎么来的。纯色加光照是画皮光照贴图才是画骨。整个调试过程里遇到过黑屏、贴图颠倒、高光异常各种问题每一个问题的排查都让我对OpenGL ES的状态机机制和坐标系变换有了更深的印象。有一点想特别提醒光照贴图只是真实感渲染的一个台阶它和现代PBR工作流里的金属度贴图、粗糙度贴图还有很大差别。如果后续想把效果做得更真实可以考虑把现有的Phong光照模型升级成GGX微表面模型并引入基于图像的光照IBL那就是另外一个更深的坑了。但光照贴图作为理解纹理驱动材质的桥梁地位无可替代。同时我建议在这个基础上尝试一个小扩展做一个带有光照贴图的地面平面加一个立方体的组合场景地面用平铺重复纹理立方体用光照贴图材质再加上一个光源围绕场景旋转的动画。这个效果看起来会非常直观也能验证光照贴图在多个物体上的适配性。如果出现光照不一致或者阴影方向错乱也能很快暴露坐标空间处理上的问题。