先聊聊这个项目本身。做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），高光范围小，适合光滑表面。调试时可以多试几档，观察高光点的变化。这里给出一个常用调试方案表，方便快速对照：

在调试时，可以在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），那就是另外一个更深的坑了。但光照贴图作为理解纹理驱动材质的桥梁，地位无可替代。

同时，我建议在这个基础上尝试一个小扩展：做一个带有光照贴图的地面平面加一个立方体的组合场景，地面用平铺重复纹理，立方体用光照贴图材质，再加上一个光源围绕场景旋转的动画。这个效果看起来会非常直观，也能验证光照贴图在多个物体上的适配性。如果出现光照不一致或者阴影方向错乱，也能很快暴露坐标空间处理上的问题。