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