iOS-OpenGLES-进阶-加载OBJ

这是一篇OpenGlES 系统学习教程，记录自己的学习过程。
环境： Xcode10.2.1 + OpenGL ES 3.0
目标： 解析obj、mtl
代码已上传github，Tutorial-09-obj，你的star和fork是对我最好的支持和动力。

概述

obj文件是3D模型文件格式。由Alias|Wavefront公司为3D建模和动画软件"Advanced Visualizer"开发的一种标准，适合用于3D软件模型之间的互导。想要渲染模型类数据的时候，导出OBJ文件就是一种很好的选择。

数据结构

• obj部分文件内容

# 
# Wavefront OBJ file
# Converted by the DEEP Exploration 3.5.10.1242
# Right Hemisphere, LTD
# http://www.righthemisphere.com/
# 
mtllib key.mtl
# object Key_B
g Key_B
v 3.03865 -0.0395375 0.27566
v 3.03865 0.123898 0.222557
v 3.03865 0.123898 -0.227343
v 3.03865 -0.0395376 -0.280446
v 3.03865 -0.202973 -0.227343
v 3.04029 -0.303982 -0.107699
v 3.04029 -0.303982 0.102913
v 3.03865 -0.202973 0.222557
v 2.40655 -0.0395375 0.307032
v 2.40655 0.142338 0.247937
v 2.53266 0.258124 -0.153372
v 2.40655 0.142338 -0.252722
v 2.40655 -0.0395376 -0.311817
# 294 verticies
vt 0.192739 0.495362
vt 0.192739 0.514533
vt 0.257271 0.516696
vt 0.257271 0.495362
vt 0.192171 0.526777
vt 0.244396 0.530277
vt 0.244396 0.530277
vt 0.192739 0.476192
vt 0.257271 0.474029
vt 0.244797 0.460845
vt 0.518966 0.519226
vt 0.518966 0.495362
vt 0.518966 0.533975
vt 0.518966 0.533975
vt 0.518966 0.495362
vt 0.518966 0.471498
# 408 texture verticies
vn 0.0492825 0.107546 0.992978
vn 0.0542886 0.67586 0.735028
vn 0.0317877 0.497826 0.866694
vn 0.0317644 -0.107622 0.993684
vn 0.061145 0.82421 0.562974
vn 0.0305957 0.877442 0.478706
vn 0.0518282 0.624258 -0.779497
vn 0.0486714 0.423198 -0.904729
vn 0.029641 0.569347 -0.821563
vn 0.0201597 0.904215 -0.426601
vn 0.0492812 -0.107546 -0.992978
vn 0.0317637 0.107622 -0.993684
# 438 normals
usemtl ____Default
f  1/1/1 2/2/2 10/3/3
f  10/3/3 9/4/4 1/1/1
f  2/2/2 233/5/5 232/6/6
f  232/6/6 10/3/3 2/2/2
f  236/5/7 3/2/8 12/3/9

注：为了方便解说，去掉了中间大部分的数据，只保留完整的数据结构！demo中有完整的文件

其中

• # 开头是导出obj文件的一些软件的一些信息。
• v 几何体顶点(3.03865 -0.0395375 0.27566)
• vt 贴图坐标点(0.192739 0.495362)
• vn 顶点法线(0.0492825 0.107546 0.992978)
• f 三角面(1/1/1 2/2/2 10/3/3), f 顶点索引/uv索引/法线索引 顶点索引/uv索引/法线索引 顶点索引/uv索引/法线索引,可以根据索引值组合成三角面的完整数据，这里索引是从1开始，使用要特别注意。

解析数据

本文采用NSScanner 的方式逐行读取相关数据，当然感兴趣的朋友也可以尝试正则的方式提取。下面来看一下解析的方法

public func read() throws -> Void {
    // 重置扫描起点 和 数据源
    resetState()
    do {
        while !scanner.isAtEnd {
            // 读取一行标记
            let marker = scanner.readMarker()
            
            // 判断是否有效数据行
            guard let m = marker, m.length > 0 else {
                scanner.moveToNextLine()
                continue
            }
            
            let markerString = m as String
            
            // 判断 是否 是 ”#“ 标识开头, 如果是跳过
            if ObjLoader.isComment(markerString) {
                scanner.moveToNextLine()
                continue
            }
            
            // 判断 是否  是 ”v“ 标识开头
            if ObjLoader.isVertex(markerString) {
                // 为真读取 一行 顶点数据 放入data.vertices 保存
                if let v = try readVertex() {
                    data.vertices.append(contentsOf: v)
                }
                // 扫描位置移到下一行开头
                scanner.moveToNextLine()
                // 跳过单次循环
                continue
            }
            
            // 判断 是否 是 ”vn“ 标识开头
            if ObjLoader.isNormal(markerString) {
                if let n = try readVertex() {
                    data.normals.append(contentsOf: n)
                }
                scanner.moveToNextLine()
                continue
            }
            // 判断 是否 是 ”vt“ 标识开头
            if ObjLoader.isTextureCoord(markerString) {

                if let vt = try readTextureCoord() {
                    data.textureCoords.append(contentsOf: vt)
                }
                
                scanner.moveToNextLine()
                continue
            }
            
            // 判断 是否  是 ”f“ 标识开头
            if ObjLoader.isFace(markerString) {
                // 某行 f 数据   f  1/1/1 2/2/2 10/3/3
                // 这里返回的 results [1,1,1,2,2,2,10,3,3]
                // 分别存入 顶点 贴图 法线 数组
                if let results = try scanner.readFace() {
                    data.vertexIndexs.append(results[0])
                    data.vertexIndexs.append(results[3])
                    data.vertexIndexs.append(results[6])
                    
                    data.textureIndexs.append(results[1])
                    data.textureIndexs.append(results[4])
                    data.textureIndexs.append(results[7])
                    
                    data.normalIndexs.append(results[2])
                    data.normalIndexs.append(results[5])
                    data.normalIndexs.append(results[8])
                }
                scanner.moveToNextLine()
                continue
            }

            // 无效匹配 跳到下一行开头
            scanner.moveToNextLine()
        }
    
        // 扫描完成后，整合数据
        mergeData()
        
    } catch let e {
        resetState()
        throw e
    }
}

以上是主要的解析逻辑，配合注释应该很好理解！。
接下来就是整合数据，因为obj 文件中没有重复的顶点数据，通过f 部分标记某个三角面的顶点顺序。例如：

v 3.03865 -0.0395375 0.27566            // 1
v 3.03865 0.123898 0.222557             // 2
v 3.03865 0.123898 -0.227343            // 3
v 3.03865 -0.0395376 -0.280446          // 4
v 3.03865 -0.202973 -0.227343           // 5
v 3.04029 -0.303982 -0.107699           // 6
v 3.04029 -0.303982 0.102913            // 7
v 3.03865 -0.202973 0.222557            // 8
v 2.40655 -0.0395375 0.307032           // 9
v 2.40655 0.142338 0.247937             // 10

vt 0.192739 0.495362                    // 1
vt 0.192739 0.514533                    // 2
vt 0.257271 0.516696                    // 3
vt 0.257271 0.495362                    // 4
vt 0.192171 0.526777                    // 5
vt 0.244396 0.530277                    // 6

vn 0.0492825 0.107546 0.992978          // 1
vn 0.0542886 0.67586 0.735028           // 2
vn 0.0317877 0.497826 0.866694          // 3
vn 0.0317644 -0.107622 0.993684         // 4
vn 0.061145 0.82421 0.562974            // 5
vn 0.0305957 0.877442 0.478706          // 6


f  1/1/1 2/2/2 10/3/3
f  10/3/3 9/4/4 1/1/1
f  2/2/2 233/5/5 232/6/6

f 1/1/1 2/2/2 10/3/3 这边 1 1 1 2 2 2 10 3 3 对应上面的顶点索引/uv索引/法线索引
上面实例数据，我们按照 顶点 贴图 法线的顺序解析一行试试。

• 1/1/1 3.03865 -0.0395375 0.27566 0.192739 0.495362 0.0492825 0.107546 0.992978
• 2/2/2 3.03865 0.123898 0.222557 0.192739 0.514533 0.0542886 0.67586 0.735028
• 10/3/3 2.40655 0.142338 0.247937 0.257271 0.516696 0.0317877 0.497826 0.866694
  注：如果数据放在数组里面，这里的 f 索引需要-1
  下面是合并数据逻辑

// 整合 顶点(x, y, z) 纹理 (u, v)  法线 (nx, ny, nz)
fileprivate func mergeData() {
    
    // 按照其中一个索引数组进行遍历(顶点 贴图 法线 索引数据大小是一致的)
    for i in 0..

mtl 文件

mtl文件中保存了物体材质的信息，基本结构如下。

# 
# Wavefront material file
# Converted by the DEEP Exploration  3.5.10.1242
# Right Hemisphere, LTD
# http://www.righthemisphere.com/
# 

newmtl ____Default
Ka 0.588 0.588 0.588
Kd 0.588 0.588 0.588
Ks 0.9 0.9 0.9
illum 2
Ns 27.8576
map_Kd key.bmp
map_bump key.bmp
bump key.bmp

• newmtl xxx 表示材质的名称，对应obj文件中的 usemtl ，材质可能会有多个，通过obj文件中的名称来查找对应的材质
• Ns 高光调整参数
• Ka 环境光颜色
• Kd 漫反射颜色
• Ks 高光颜色
• illum 光照模式，0 禁止光照 ，1 只有环境光和漫反射光，2 所有的光照启用
• map_Ka 为环境反射指定颜色纹理文件(.mpc)或程序纹理文件(.cxc)，或是一个位图文件。在渲染的时候，Ka的值将再乘上map_Ka的值。
• map_Kd 为漫反射指定颜色纹理文件(.mpc)或程序纹理文件(.cxc)，或是一个位图文件。作用原理与可选参数与map_Ka同。
• map_Ks 为镜反射指定颜色纹理文件(.mpc)或程序纹理文件(.cxc)，或是一个位图文件。作用原理与可选参数与map_Ka同。
• map_Ns 为镜面反射指定标量纹理文件（.mps或.cxs）。
• bump 为材质指定凹凸纹理文件（.mpb或.cxb）,或是一个位图文件。
  更加详细的解释可以去这里
  mtl的解析类似于obj

渲染

正确设置了顶点数据，渲染过程跟立方体没有什么区别

// 加载obj
fileprivate func loadObject() {
    
    let armoryHelper = ArmoryHelper()
    let source = try? armoryHelper.loadObjArmory("key")
    
    if let source = source {
        loadObj = ObjLoader(source: source, basePath: armoryHelper.resourcePath)
        do {
            try loadObj?.read()
        } catch {
            print("Parsing failed with unknown error")
        }
    }
}
// 设置顶点数据
fileprivate func setupVBO() {
    
    guard let program = program, let loadObj = loadObj else {
        return
    }
    
    vbo = GLESUtils.createVBO(GLenum(GL_ARRAY_BUFFER), Int(GL_STATIC_DRAW), MemoryLayout.size * loadObj.data.mergeVertices.count, data: loadObj.data.mergeVertices)

    glEnableVertexAttribArray(GLuint(glGetAttribLocation(program, "a_position")))
    glVertexAttribPointer(GLuint(glGetAttribLocation(program, "a_position")), 3, GLenum(GL_FLOAT), GLboolean(GL_FALSE), GLsizei(MemoryLayout.size * 8), UnsafeRawPointer(bitPattern: 0))
    
    glEnableVertexAttribArray(GLuint(glGetAttribLocation(program, "a_TexCoord")))
    glVertexAttribPointer(GLuint(glGetAttribLocation(program, "a_TexCoord")), 2, GLenum(GL_FLOAT), GLboolean(GL_FALSE), GLsizei(MemoryLayout.size * 8), UnsafeRawPointer(bitPattern:3 * MemoryLayout.size))
}
// 渲染
fileprivate func render() {
    
    guard let program = program, let loadObj = loadObj else {
        return
    }
    
    
    glClearColor(1.0, 1.0, 0.0, 1.0)
    glClear(GLbitfield(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT))
    glViewport(0, 0, GLsizei(frame.size.width), GLsizei(frame.size.height))
    
    glEnable(GLenum(GL_DEPTH_TEST))   // 开启深度缓存
    glEnable(GLenum(GL_CULL_FACE))
    glEnable(GLenum(GL_BLEND))
    glBlendFunc(GLenum(GL_SRC_ALPHA), GLenum(GL_ONE_MINUS_SRC_ALPHA))
    
    let width = frame.size.width
    let height = frame.size.height
    
    let projectionMatrix = GLKMatrix4MakePerspective(
        GLKMathDegreesToRadians(85.0),
        GLfloat(width / height),
        1,
        150)
    
    glUseProgram(program)
    glUniformMatrix4fv(glGetUniformLocation(program, "u_projectionMatrix"), 1, GLboolean(GL_FALSE), projectionMatrix.array)
    
    let viewMatrix: GLKMatrix4 =  GLKMatrix4Rotate(GLKMatrix4MakeTranslation(0, 0, -5), GLKMathDegreesToRadians(20), 1, 0, 0)
    
    var modelMatrix = GLKMatrix4Identity
    modelMatrix = GLKMatrix4Translate(modelMatrix, self.position.x, self.position.y, self.position.z)
    modelMatrix = GLKMatrix4RotateY(modelMatrix, angle)
    modelMatrix = GLKMatrix4Scale(modelMatrix, 0.3, 0.3, 0.3)

    let modelViewMatrix = GLKMatrix4Multiply(viewMatrix, modelMatrix)
    
    glUniformMatrix4fv(glGetUniformLocation(program, "u_modelViewMatrix"), 1, GLboolean(GL_FALSE), modelViewMatrix.array)
    
    // 设置光照
    glUniform3f(glGetUniformLocation(program, "u_Light.Color"), 1, 1, 1)
    glUniform1f(glGetUniformLocation(program, "u_Light.AmbientIntensity"), 0.1)
    
    glUniform3f(glGetUniformLocation(program, "u_Light.Direction"), 0, 1, -1)
    glUniform1f(glGetUniformLocation(program, "u_Light.DiffuseIntensity"), 0.7)
    
    glUniform1f(glGetUniformLocation(program, "u_Light.Shininess"), 1)
    glUniform1f(glGetUniformLocation(program, "u_Light.SpecularIntensity"), 2)
    

    glActiveTexture(GLenum(GL_TEXTURE0))
    glBindTexture(GLenum(GL_TEXTURE_2D), textId)
    glUniform1i(glGetUniformLocation(program,"u_Texture"), 0)
    
    glDrawArrays(GLenum(GL_TRIANGLES), 0, GLsizei(loadObj.data.vertexIndexs.count))
    presentContex?.presentRenderbuffer(Int(GL_RENDERBUFFER))
}

demo中加载的是一个钥匙模型，感兴趣的小伙伴可以自行尝试哦！

效果图