前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >OpenGLES进阶教程8-obj文件和mtl文件解析

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

作者头像
落影
发布2018-04-27 16:35:45
2.2K0
发布2018-04-27 16:35:45
举报
文章被收录于专栏:落影的专栏落影的专栏

教程

距离上一篇教程已经有两个月了,这两个月详细阅读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的解析部分代码,也是参考教程里面的内容,出处已经找不到。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016.07.10 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 教程
  • 概念介绍
    • 1、obj文件
      • 2、mtl文件
      • 核心思路
      • 效果展示
      • 具体细节
        • 1、文件解析
          • 2、文件写入
            • 3、最终文件
              • 4、场景渲染
              • 总结
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档