OpenGLES进阶教程8-obj文件和mtl文件解析

2018-04-27 16:35:45 浏览数 (1)

教程

距离上一篇教程已经有两个月了,这两个月详细阅读GPUImage的源码,并写了详细解析,发现对OpenGLES的深入了解很有帮助。 上周一个简书的朋友问我,如果有一个.obj文件,如何用OpenGL ES把它显示到iOS屏幕上。

  • obj文件如下

之前学习blender的时候,在国外的一个系列教程有提到解析obj文件,这篇教程便来介绍如何解析obj和mtl文件,并用OpenGL ES显示出来。

概念介绍

1、obj文件

obj文件是一种3D模型文件。

  • 文件格式

其中

v 几何体顶点 (Geometric vertices) vt 贴图坐标点 (Texture vertices) vn 顶点法线 (Vertex normals) f 面 (Face)

2、mtl文件

mtl文件则是obj文件的附属文件,描述几何体的表面属性。

  • 文件格式

其中

环境反射 Ka r g b 漫反射 Kd r g b 镜反射 Ks r g b 反射指数 Ns exponent 指定材质的反射指数,定义了反射高光度 折射值 Ni ptical density 指定材质表面的光密度,即折射值 渐隐指数 d factor 参数factor表示物体融入背景的数量

核心思路

新建一个工程,读入obj和mtl文件,解析文件内容,写入到.h/.c文件中,把.h/.c文件加入新的工程引用。

效果展示

model.gif

具体细节

1、文件解析

自定义Model结构体来存储读取的信息,通过一行行读入文件,并用字符串匹配来解析数据。

代码语言:javascript复制
typedef struct Model
{
    int vertices;
    int positions;
    int texels;
    int normals;
    int faces;
    int materials;
}Model;


Model getOBJinfo(string fp)
{
    Model model = {0};
    
    ifstream inOBJ;
    inOBJ.open(fp);
    if (!inOBJ.good()) {
        cout << "error on open " << fp << endl;
        exit(1);
    }
    
    while (!inOBJ.eof()) {
        string line;
        getline(inOBJ, line);
        string type = line.substr(0, 2);
        
        if (type.compare("v ") == 0) {
            model.positions  ;
        }
        else if (type.compare("vt") == 0) {
            model.texels  ;
        }
        else if (type.compare("vn") == 0) {
            model.normals  ;
        }
        else if (type.compare("f ") == 0) {
            model.faces  ;
        }
    }
    
    model.vertices = model.faces * 3;
    
    inOBJ.close();
    
    return model;
}
2、文件写入

把Model中存储的解析信息,分别写入到.h/.c文件中。

代码语言:javascript复制
void writeCtexels(string fp, string name, Model model, int faces[][10], float texels[][2])
{
    // Append C file
    ofstream outC;
    outC.open(fp, ios::app);
    
    // Texels
    outC << "const float " << name << "Texels[" << model.vertices*2 << "] = " << endl;
    outC << "{" << endl;
    // Texels
    for(int j=0; j<model.materials; j  )
    {
        for(int i=0; i<model.faces; i  )
        {
            if(faces[i][9] == j)
            {
                int vtA = faces[i][1] - 1;
                int vtB = faces[i][4] - 1;
                int vtC = faces[i][7] - 1;
                
                outC << texels[vtA][0] << ", " << texels[vtA][1] << ", " << endl;
                outC << texels[vtB][0] << ", " << texels[vtB][1] << ", " << endl;
                outC << texels[vtC][0] << ", " << texels[vtC][1] << ", " << endl;
            }
        }
    }
    outC << "};" << endl;
    outC << endl;
    
    // Close C file
    outC.close();
}
3、最终文件

Materials 材质 Diffuse 漫反射 Specular 镜面反射 Normal 法线 Texel 纹理 Position 位置

代码语言:javascript复制
extern const int starshipVertices;
extern const float starshipPositions[198];
extern const float starshipTexels[132];
extern const float starshipNormals[198];

extern const int starshipMaterials;
extern const int starshipFirsts[3];
extern const int starshipCounts[3];

extern const float starshipDiffuses[3][3];
extern const float starshipSpeculars[3][3];
4、场景渲染

渲染的过程中,设置好BaseEffect后,进行渲染;有多组参数时,要分别设置再渲染。

代码语言:javascript复制
/**
 *  渲染场景代码
 */
- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect {
    glClearColor(0.3f, 0.3f, 0.3f, 1.0f);
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    
    [self setMatrices];
    

    for(int i=0; i<starshipMaterials; i  )
    {
        // 设置材质
        self.baseEffect.material.diffuseColor = GLKVector4Make(starshipDiffuses[i][0], starshipDiffuses[i][1], starshipDiffuses[i][2], 1.0f);
        self.baseEffect.material.specularColor = GLKVector4Make(starshipSpeculars[i][0], starshipSpeculars[i][1], starshipSpeculars[i][2], 1.0f);
        
        [self.baseEffect prepareToDraw];
        
        glDrawArrays(GL_TRIANGLES, starshipFirsts[i], starshipCounts[i]);
    }
    
}

总结

这篇教程有两个工程,一个负责解析,一个用来渲染。解析的逻辑简单但较繁琐,可以直接看这里;渲染的逻辑和之前教程类似,唯一复杂的部分是光照部分的设置,可以看这里。 另外,blender这个工具非常好用。之前为了学习blender,寻找了很多教程。demo的解析部分代码,也是参考教程里面的内容,出处已经找不到。

0 人点赞