实战项目1：3D模型查看器——加载复杂glTF模型、PBR材质、HDR环境光照与交互控制

说实话，到了这个阶段，我们已经把OpenGL ES的基础知识都过了一遍。从顶点着色器到片段着色器，从纹理映射到光照计算，每一步都踩过坑。但说实话，学完这些理论，你可能会问：这些东西到底能做出什么像样的东西？

嗯，今天这个实战项目，就是来回答这个问题的。我们要做一个3D模型查看器，能加载复杂的glTF模型，支持PBR材质，还能用HDR环境光照来渲染。最后，加上交互控制，让用户能旋转、缩放、平移模型。

我个人习惯把这种项目叫做“毕业设计”——因为它几乎涵盖了OpenGL ES开发中80%的核心技术点。你做完这个项目，基本上就能应付大部分3D渲染需求了。

项目整体架构

先看看我们要搭建的系统长什么样。我画了一张架构图，帮你理清各个模块之间的关系：

3D模型查看器架构图 glTF文件解析 HDR环境贴图 用户交互输入 核心渲染引擎 顶点处理 PBR着色器 IBL光照 交互控制 最终渲染输出到屏幕 数据流方向： 文件 → 解析 → 渲染 → 显示

整个流程其实不复杂：glTF文件进来，解析成我们引擎能理解的数据结构，然后通过PBR着色器配合HDR环境贴图进行渲染，最后加上交互控制让用户能自由查看模型。

glTF文件解析——别自己造轮子

我记得第一次做这个项目时，天真地想自己写一个glTF解析器。结果折腾了两周，各种格式兼容问题搞得我头大。后来我学乖了——直接用成熟的库。

在Android上，我推荐用 tinygltf 或者 cgltf 的Java/Kotlin绑定。这些库已经把glTF的JSON结构、二进制数据、纹理都处理好了，我们只需要把解析出来的数据喂给OpenGL ES就行。

核心要点：glTF文件本质上是一个JSON文件加上一些二进制数据（.bin）和纹理图片。JSON里描述了场景图、网格、材质、动画等信息。我们只需要关注三个东西：顶点数据、索引数据、材质参数。

解析后的数据大概长这样：

// 解析后的模型数据结构
data class GltfModel(
    val meshes: List<Mesh>,
    val materials: List<Material>,
    val textures: List<Texture>,
    val scene: SceneNode  // 场景根节点
)

data class Mesh(
    val vertexBuffer: FloatBuffer,  // 顶点数据（位置、法线、UV、切线）
    val indexBuffer: ShortBuffer,   // 索引数据
    val materialIndex: Int,         // 使用的材质索引
    val primitiveType: Int          // 图元类型（通常是三角形）
)

PBR材质——让模型看起来真实

PBR（Physically Based Rendering）说白了就是一套让材质看起来更真实的光照模型。它不像传统的Phong模型那样靠经验公式，而是基于物理规律来模拟光线和表面的交互。

PBR的核心参数其实不多，就这几个：

参数 含义 取值范围 我在项目中的经验
albedo 基础颜色/漫反射 RGB 0~1 注意sRGB和线性空间的转换，我吃过这个亏
metallic 金属度 0~1 金属材质反射强，非金属几乎为0
roughness 粗糙度 0~1 0是镜面，1是完全粗糙
normal 法线贴图 纹理 别忘了把法线从[0,1]映射到[-1,1]
ao 环境光遮蔽 0~1 用来增强细节阴影，不是必须的

在片段着色器里，PBR的计算核心是Cook-Torrance BRDF。我直接给你看核心代码：

// PBR片段着色器核心计算
vec3 fresnelSchlick(float cosTheta, vec3 F0) {
    return F0 + (1.0 - F0) * pow(1.0 - cosTheta, 5.0);
}

float distributionGGX(vec3 N, vec3 H, float roughness) {
    float a = roughness * roughness;
    float a2 = a * a;
    float NdotH = max(dot(N, H), 0.0);
    float NdotH2 = NdotH * NdotH;
    float denom = NdotH2 * (a2 - 1.0) + 1.0;
    return a2 / (PI * denom * denom);
}

float geometrySmith(vec3 N, vec3 V, vec3 L, float roughness) {
    float r = roughness + 1.0;
    float k = (r * r) / 8.0;
    float NdotV = max(dot(N, V), 0.0);
    float NdotL = max(dot(N, L), 0.0);
    float ggx1 = NdotV / (NdotV * (1.0 - k) + k);
    float ggx2 = NdotL / (NdotL * (1.0 - k) + k);
    return ggx1 * ggx2;
}

vec3 calculatePBR(vec3 albedo, float metallic, float roughness, 
                  vec3 N, vec3 V, vec3 L, vec3 lightColor) {
    vec3 H = normalize(V + L);
    vec3 F0 = mix(vec3(0.04), albedo, metallic);
    
    // 计算BRDF
    float NDF = distributionGGX(N, H, roughness);
    float G = geometrySmith(N, V, L, roughness);
    vec3 F = fresnelSchlick(max(dot(H, V), 0.0), F0);
    
    vec3 kS = F;
    vec3 kD = (1.0 - kS) * (1.0 - metallic);
    
    vec3 numerator = NDF * G * F;
    float denominator = 4.0 * max(dot(N, V), 0.0) * max(dot(N, L), 0.0) + 0.0001;
    vec3 specular = numerator / denominator;
    
    float NdotL = max(dot(N, L), 0.0);
    return (kD * albedo / PI + specular) * lightColor * NdotL;
}

小技巧：调试PBR材质时，先用纯色albedo和简单的环境光测试。等金属度和粗糙度的效果对了，再上纹理贴图。不然出了问题你都不知道是纹理加载错了还是PBR算错了。

HDR环境光照——IBL让场景活起来

光靠几个点光源和方向光，渲染出来的模型总感觉差点意思。为什么？因为真实世界的光照是来自四面八方的，包括天空、地面、周围物体的反射光。

HDR环境光照，也叫基于图像的光照（IBL），就是用一张HDR全景图来模拟环境光照。这张图记录了真实场景中各个方向的光照信息，包括亮度范围很大的高光区域。

实现IBL需要做两件事：

  1. 生成辐照度图（Irradiance Map）：对环境贴图进行卷积，得到漫反射光照信息。说白了就是把环境光平均一下，用来计算漫反射部分。
  2. 生成预滤波环境贴图（Prefiltered Environment Map）：对不同粗糙度级别进行预计算，用来计算镜面反射部分。同时还要生成BRDF LUT（查找表）。

这两步计算量很大，但好在可以离线完成。运行时只需要采样这些预计算好的贴图就行。

// IBL采样代码（片段着色器中）
// 漫反射部分：采样辐照度图
vec3 irradiance = texture(irradianceMap, N).rgb;
vec3 diffuse = irradiance * albedo;

// 镜面反射部分：根据粗糙度采样预滤波贴图
vec3 R = reflect(-V, N);
float lod = roughness * MAX_REFLECTION_LOD;
vec3 prefilteredColor = textureLod(prefilterMap, R, lod).rgb;

// 使用BRDF LUT
vec2 brdf = texture(brdfLUT, vec2(max(dot(N, V), 0.0), roughness)).rg;
vec3 specular = prefilteredColor * (F0 * brdf.x + brdf.y);

// 最终颜色
vec3 color = diffuse + specular;

注意：HDR贴图通常使用.hdr或.exr格式，颜色值范围远超0~1。加载时不要用普通的纹理加载函数，要使用支持浮点纹理的API。在OpenGL ES中，需要用GL_RGB16F或GL_RGBA16F作为内部格式。

交互控制——让用户自由查看

模型加载好了，材质也对了，光照也漂亮了。但如果用户只能看一个固定角度，那体验就太差了。我们需要实现轨道控制（Orbit Control），让用户能旋转、缩放、平移模型。

交互控制的本质，就是根据用户手势更新摄像机的参数。我常用的方案是：

  • 单指拖动：绕模型旋转（更新方位角和仰角）
  • 双指捏合：缩放（更新距离）
  • 双指平移：平移模型（更新目标点位置）

在代码里，我维护一个摄像机状态结构体：

class OrbitCamera {
    var target = Vector3(0f, 0f, 0f)  // 目标点
    var distance = 5f                  // 距离
    var azimuth = 0f                   // 方位角（弧度）
    var elevation = 0.5f               // 仰角（弧度）
    
    fun getViewMatrix(): Matrix4 {
        val position = Vector3(
            distance * cos(elevation) * sin(azimuth),
            distance * sin(elevation),
            distance * cos(elevation) * cos(azimuth)
        )
        return Matrix4.lookAt(position, target, Vector3(0f, 1f, 0f))
    }
    
    fun onTouchEvent(event: MotionEvent) {
        // 根据手势类型更新 azimuth, elevation, distance, target
    }
}

这里有个坑，我曾经踩过：当仰角接近90度或-90度时，会出现万向锁（Gimbal Lock）问题。表现为旋转到头顶时，左右拖动会变得很奇怪。解决方案是用四元数代替欧拉角，或者限制仰角范围在-89度到89度之间。

性能优化——别让手机发烫

加载一个复杂的glTF模型，可能包含几十万个顶点、多张高分辨率纹理、复杂的PBR计算。如果不做优化，手机分分钟变成暖手宝。

我总结了几条实用的优化策略：

  • 纹理压缩：使用ETC2或ASTC格式压缩纹理，减少显存占用和带宽消耗
  • LOD（细节层次）：根据模型距离摄像机的远近，切换不同精度的网格
  • 视锥裁剪：不在视野内的物体不渲染
  • 合并绘制调用：把相同材质的网格合并成一个绘制调用
  • 使用VBO和VAO：减少CPU和GPU之间的数据传输

我的经验：性能调优时，先用Android Studio的Profiler工具看看瓶颈在哪。有时候是顶点处理太慢，有时候是片段着色器太复杂。别盲目优化，先定位问题。

完整工作流程

最后，我把整个项目的实现步骤串起来，方便你对照着做：

  1. 初始化OpenGL ES上下文，设置深度测试和面剔除
  2. 加载glTF文件，解析出网格、材质、纹理数据
  3. 为每个网格创建VAO和VBO，上传顶点数据到GPU
  4. 加载HDR环境贴图，生成辐照度图和预滤波贴图
  5. 编写PBR着色器，集成IBL光照计算
  6. 实现轨道摄像机，处理触摸事件
  7. 在主循环中：更新摄像机 → 绑定VAO → 设置uniform → 绘制

说实话，这个项目做完，你对OpenGL ES的理解会上一个台阶。从理论到实践，从简单到复杂，每一步都是实实在在的积累。遇到问题别怕，多调试、多思考，慢慢就摸到门道了。

← 上一章 📖 返回目录 下一章 →