這是一篇OpenGlES 系統(tǒng)學(xué)習(xí)教程罕扎，記錄自己的學(xué)習(xí)過(guò)程市框。
環(huán)境： Xcode10.2.1 + OpenGL ES 3.0
目標(biāo)： 解析obj鼓黔、mtl
代碼已上傳github茉继，Tutorial-09-obj盖彭，你的star和fork是對(duì)我最好的支持和動(dòng)力纹烹。

概述

obj文件是3D模型文件格式页滚。由Alias|Wavefront公司為3D建模和動(dòng)畫(huà)軟件"Advanced Visualizer"開(kāi)發(fā)的一種標(biāo)準(zhǔn)，適合用于3D軟件模型之間的互導(dǎo)铺呵。想要渲染模型類(lèi)數(shù)據(jù)的時(shí)候裹驰，導(dǎo)出OBJ文件就是一種很好的選擇。

數(shù)據(jù)結(jié)構(gòu)

• obj部分文件內(nèi)容

# 
# 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

注：為了方便解說(shuō)陪蜻，去掉了中間大部分的數(shù)據(jù)邦马，只保留完整的數(shù)據(jù)結(jié)構(gòu)！demo中有完整的文件

其中

• # 開(kāi)頭是導(dǎo)出obj文件的一些軟件的一些信息宴卖。
• v 幾何體頂點(diǎn)(3.03865 -0.0395375 0.27566)
• vt 貼圖坐標(biāo)點(diǎn)(0.192739 0.495362)
• vn 頂點(diǎn)法線(xiàn)(0.0492825 0.107546 0.992978)
• f 三角面(1/1/1 2/2/2 10/3/3), f 頂點(diǎn)索引/uv索引/法線(xiàn)索引 頂點(diǎn)索引/uv索引/法線(xiàn)索引 頂點(diǎn)索引/uv索引/法線(xiàn)索引,可以根據(jù)索引值組合成三角面的完整數(shù)據(jù)滋将，這里索引是從1開(kāi)始，使用要特別注意症昏。

解析數(shù)據(jù)

本文采用NSScanner 的方式逐行讀取相關(guān)數(shù)據(jù)随闽，當(dāng)然感興趣的朋友也可以嘗試正則的方式提取。下面來(lái)看一下解析的方法

public func read() throws -> Void {
    // 重置掃描起點(diǎn) 和 數(shù)據(jù)源
    resetState()
    do {
        while !scanner.isAtEnd {
            // 讀取一行標(biāo)記
            let marker = scanner.readMarker()
            
            // 判斷是否有效數(shù)據(jù)行
            guard let m = marker, m.length > 0 else {
                scanner.moveToNextLine()
                continue
            }
            
            let markerString = m as String
            
            // 判斷 是否 是 ”#“ 標(biāo)識(shí)開(kāi)頭, 如果是跳過(guò)
            if ObjLoader.isComment(markerString) {
                scanner.moveToNextLine()
                continue
            }
            
            // 判斷 是否  是 ”v“ 標(biāo)識(shí)開(kāi)頭
            if ObjLoader.isVertex(markerString) {
                // 為真讀取 一行 頂點(diǎn)數(shù)據(jù) 放入data.vertices 保存
                if let v = try readVertex() {
                    data.vertices.append(contentsOf: v)
                }
                // 掃描位置移到下一行開(kāi)頭
                scanner.moveToNextLine()
                // 跳過(guò)單次循環(huán)
                continue
            }
            
            // 判斷 是否 是 ”vn“ 標(biāo)識(shí)開(kāi)頭
            if ObjLoader.isNormal(markerString) {
                if let n = try readVertex() {
                    data.normals.append(contentsOf: n)
                }
                scanner.moveToNextLine()
                continue
            }
            // 判斷 是否 是 ”vt“ 標(biāo)識(shí)開(kāi)頭
            if ObjLoader.isTextureCoord(markerString) {

                if let vt = try readTextureCoord() {
                    data.textureCoords.append(contentsOf: vt)
                }
                
                scanner.moveToNextLine()
                continue
            }
            
            // 判斷 是否  是 ”f“ 標(biāo)識(shí)開(kāi)頭
            if ObjLoader.isFace(markerString) {
                // 某行 f 數(shù)據(jù)   f  1/1/1 2/2/2 10/3/3
                // 這里返回的 results [1,1,1,2,2,2,10,3,3]
                // 分別存入 頂點(diǎn) 貼圖 法線(xiàn) 數(shù)組
                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
            }

            // 無(wú)效匹配 跳到下一行開(kāi)頭
            scanner.moveToNextLine()
        }
    
        // 掃描完成后肝谭，整合數(shù)據(jù)
        mergeData()
        
    } catch let e {
        resetState()
        throw e
    }
}

以上是主要的解析邏輯掘宪，配合注釋?xiě)?yīng)該很好理解！攘烛。
接下來(lái)就是整合數(shù)據(jù)魏滚，因?yàn)閛bj 文件中沒(méi)有重復(fù)的頂點(diǎn)數(shù)據(jù)，通過(guò)f 部分標(biāo)記某個(gè)三角面的頂點(diǎn)順序坟漱。例如：

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 對(duì)應(yīng)上面的頂點(diǎn)索引/uv索引/法線(xiàn)索引
上面實(shí)例數(shù)據(jù)鼠次，我們按照 頂點(diǎn) 貼圖 法線(xiàn)的順序解析一行試試。

• 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
  注：如果數(shù)據(jù)放在數(shù)組里面芋齿，這里的 f 索引需要-1
  下面是合并數(shù)據(jù)邏輯

// 整合 頂點(diǎn)(x, y, z) 紋理 (u, v)  法線(xiàn) (nx, ny, nz)
fileprivate func mergeData() {
    
    // 按照其中一個(gè)索引數(shù)組進(jìn)行遍歷(頂點(diǎn) 貼圖 法線(xiàn) 索引數(shù)據(jù)大小是一致的)
    for i in 0..<data.vertexIndexs.count {
        
        // (data.vertexIndexs[i]-1) 取出頂點(diǎn)索引 進(jìn)行 -1 
        // 乘以 3 的步長(zhǎng)腥寇，得到具體在vertices的下標(biāo)位置
        // 取出 x y z 3個(gè)具體的數(shù)據(jù)                          以下類(lèi)似
        let vertexIndex = (data.vertexIndexs[i]-1) * 3
        for value in data.vertices[vertexIndex..<(vertexIndex + 3)] {
            data.mergeVertices.append(GLfloat(value))
        }

        let textureIndex = (data.textureIndexs[i]-1) * 2
        for value in data.textureCoords[textureIndex..<(textureIndex + 2)] {
            data.mergeVertices.append(GLfloat(value))
        }
        
        let normalIndex = (data.normalIndexs[i]-1) * 3
        for value in data.normals[normalIndex..<(normalIndex + 3)] {
            data.mergeVertices.append(GLfloat(value))
        }
    }
}

mtl 文件

mtl文件中保存了物體材質(zhì)的信息，基本結(jié)構(gòu)如下觅捆。

# 
# 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 表示材質(zhì)的名稱(chēng)赦役，對(duì)應(yīng)obj文件中的 usemtl ，材質(zhì)可能會(huì)有多個(gè)栅炒，通過(guò)obj文件中的名稱(chēng)來(lái)查找對(duì)應(yīng)的材質(zhì)
• Ns 高光調(diào)整參數(shù)
• Ka 環(huán)境光顏色
• Kd 漫反射顏色
• Ks 高光顏色
• illum 光照模式掂摔，0 禁止光照 ，1 只有環(huán)境光和漫反射光赢赊，2 所有的光照啟用
• map_Ka 為環(huán)境反射指定顏色紋理文件(.mpc)或程序紋理文件(.cxc)乙漓，或是一個(gè)位圖文件。在渲染的時(shí)候域携，Ka的值將再乘上map_Ka的值簇秒。
• map_Kd 為漫反射指定顏色紋理文件(.mpc)或程序紋理文件(.cxc)，或是一個(gè)位圖文件秀鞭。作用原理與可選參數(shù)與map_Ka同趋观。
• map_Ks 為鏡反射指定顏色紋理文件(.mpc)或程序紋理文件(.cxc)扛禽，或是一個(gè)位圖文件。作用原理與可選參數(shù)與map_Ka同皱坛。
• map_Ns 為鏡面反射指定標(biāo)量紋理文件（.mps或.cxs）编曼。
• bump 為材質(zhì)指定凹凸紋理文件（.mpb或.cxb）,或是一個(gè)位圖文件。
  更加詳細(xì)的解釋可以去這里
  mtl的解析類(lèi)似于obj

渲染

正確設(shè)置了頂點(diǎn)數(shù)據(jù)剩辟，渲染過(guò)程跟立方體沒(méi)有什么區(qū)別

// 加載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")
        }
    }
}
// 設(shè)置頂點(diǎn)數(shù)據(jù)
fileprivate func setupVBO() {
    
    guard let program = program, let loadObj = loadObj else {
        return
    }
    
    vbo = GLESUtils.createVBO(GLenum(GL_ARRAY_BUFFER), Int(GL_STATIC_DRAW), MemoryLayout<GLfloat>.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<GLfloat>.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<GLfloat>.size * 8), UnsafeRawPointer(bitPattern:3 * MemoryLayout<GLfloat>.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))   // 開(kāi)啟深度緩存
    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)
    
    // 設(shè)置光照
    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中加載的是一個(gè)鑰匙模型掐场，感興趣的小伙伴可以自行嘗試哦！

效果圖