/** * * 翻译力求准确，信达雅谈不上，如有错误或者不准确的地方欢迎指出 * @see http://ltslashgt.com/2011/08/07/rendering-models-with-molehill/ * */我很想接着我 上一篇文章的步伐来点高级的例子，我终于抽出时间来搞了。这是我有关在 Molehill中加载和渲染各种模型系列文章的第一篇（事实上也是最后一篇，之后作者就没更新过）。
模型格式可能很令人抓狂。大多数格式很古老（推出的时间比较早）或者编写时没有考虑到硬件加速。你常常需要对其数据做做调整使其可用。在随着时间的演变硬件加速渲染成为标准的过程中，看看格式的随之变迁很有趣。我们从一些较老的格式开始之后过渡到新的格式。
这是本篇文章的实战 代码，展示了一个由 Bobo the Seal制作的可爱模型 Bunker。//
//演示到原网站上看看吧
//
Wavefront OBJ
Wavefront OBJ格式是为上世纪80年代Wavefront公司的Advanced Visualizer（一个3D软件）创建的。据我所知，它自从上世纪90年代以来一直没有更新（对于模型格式来说，这是常态）。今天他仍旧被用来展示静态物体，因为其格式简单所以几乎所有的建模软件都支持它。它是一个基于文本的模型格式。它支持很多高深的东西，但是（本文中）这个加载类只支持最常用的：顶点位置，法线和UV坐标以及具有3个或更多顶点的面此外还有材质组。OBJ格式不支持动画
代码
[Embed(source="../res/bunker/bunker.obj", mimeType="application/octet-stream")]
static protected const BUNKER_OBJ:Class;
[Embed(source="../res/bunker/fidget_head.png")]
static protected const BUNKER_HEAD:Class;
[Embed(source="../res/bunker/fidget_body.png")]
static protected const BUNKER_BODY:Class;// Load the model, and set the material textures
_obj = new OBJ();
_obj.readBytes(new BUNKER_OBJ(), _context);
_obj.setMaterial('h_head', _headTexture);
_obj.setMaterial('u_torso', _bodyTexture);
_obj.setMaterial('l_legs', _bodyTexture);OBJ文件自身在OBJ.as中的readBytes()方法中被解析。为OBJ（提供方便）的字节数组（ByteArray）被传了进来，它必须被转化成文本，然后一行一行的读。任何空行或者以#开头的行都会被忽略，代码如下：
var text:String = bytes.readUTFBytes(bytes.bytesAvailable);
var lines:Array = text.split(/[\r\n]+/);
for each (var line:String in lines)
{
// Trim whitespace from the line
line = line.replace(/^\s*|\s*$/g, '');
if (line === '' || line.charAt(0) === '#')
{
// Blank line or comment, ignore it
continue;
}
// TODO: parse the line
}上段代码的TODO，你需要用空格将行拆分开，然后检测它是那种命令。你可以这样做，如下：
// Split line into fields on whitespace
var fields:Array=line.split(/\s+/);
switch (fields[0].toLowerCase())
{
case 'v':
// TODO: parse vertex position
break;
case 'vn':
// TODO: parse vertex normal
break;
case 'vt':
// TODO: parse vertex uv
break;
case 'f':
// TODO: parse face
break;
case 'g':
// TODO: parse group
break;
case 'o':
// TODO: parse object
break;
case 'usemtl':
// TODO: parse material
break;
}case 'v':
positions.push(parseFloat(fields[1]), parseFloat(fields[2]), parseFloat(fields[3]));
break;case 'vn':
normals.push(parseFloat(fields[1]), parseFloat(fields[2]), parseFloat(fields[3]));
break;case 'vt':
uvs.push(parseFloat(fields[1]), 1.0 - parseFloat(fields[2]));
break;case 'g':
group = new OBJGroup(fields[1], materialName);
groups.push(group);
break;case 'usemtl':
materialName = fields[1];
if (group !== null)
{
group.materialName = materialName;
}
break;case 'f':
face = new Vector.<String>();
for each (var tuple:String in fields.slice(1))
{
face.push(tuple);
}
if (group === null)
{
group = new OBJGroup(null, materialName);
groups.push(group);
}
group._faces.push(face);
break;Fixing up the data（数据整理）
这是所有我们需要处理的命令。这个循环将对文件中所有的行进行复制。一旦完成后我们将会有几个分开的顶点数据流（位置，法线和UV）。我们也会有组的列表，每个都有其面的列表，他们有进入这些分流的索引（indice）。这是个问题。OBJ为位置、法线和UV指定了分开的索引，但是现代的硬件渲染不知那些。我们只能有一个顶点流（index Stream）。要修正它，我们需要将这三个顶点流合并成一个顶点流。面的顶点（face indices）也需要更新以便在这个流中指定正确的偏移量。
要做到这点，每个组得到一个新的索引流（index stream）。然后对于面中的每一个索引元祖我在合并后的流中写入一个新的vertex，如果在别的面中已经有那个顶点元组，则使用已被合并进去的索引(index)。
我们所面临的的另一个问题是OBJ允许多边形面。也就是说，面不必是三角形。这就是问题所在：Context3D只支持绘制三角形。要修正这，我们需要将非三角形转化成 三角形。
这一切循环如下：
for each (group in groups)
{
group._indices.length=0;
for each (face in group._faces)
{
var il:int=face.length - 1;
for (var i:int=1; i < il; ++i)
{
group._indices.push(mergeTuple(face[i], positions, normals, uvs));
group._indices.push(mergeTuple(face[0], positions, normals, uvs));
group._indices.push(mergeTuple(face[i + 1], positions, normals, uvs));
}
}
group.indexBuffer=context.createIndexBuffer(group._indices.length);
group.indexBuffer.uploadFromVector(group._indices, 0, group._indices.length);
group._faces=null;
}protected function mergeTuple(tuple:String, positions:Vector.<Number>, normals:Vector.<Number>, uvs:Vector.<Number>):uint
{
if (_tupleIndices[tuple] !== undefined)
{
// Already merged, return the merged index
return _tupleIndices[tuple];
}
else
{
var faceIndices:Array=tuple.split('/');
// Position index
var index:uint=parseInt(faceIndices[0], 10) - 1;
_vertices.push(positions[index * 3 + 0], positions[index * 3 + 1], positions[index * 3 + 2]);
// Normal index
if (faceIndices.length > 2 && faceIndices[2].length > 0)
{
index=parseInt(faceIndices[2], 10) - 1;
_vertices.push(normals[index * 3 + 0], normals[index * 3 + 1], normals[index * 3 + 2]);
}
else
{
// Face doesn't have a normal
_vertices.push(0, 0, 0);
}
// UV index
if (faceIndices.length > 1 && faceIndices[1].length > 0)
{
index=parseInt(faceIndices[1], 10) - 1;
_vertices.push(uvs[index * 2 + 0], uvs[index * 2 + 1]);
}
else
{
// Face doesn't have a UV
_vertices.push(0, 0);
}
// Cache the merged tuple index in case it's used again
return _tupleIndices[tuple]=_tupleIndex++;
}
}OBJ无需指定法线和UV，因此为了使与其之前状态一致，我们只在那里填充几个0。现在的顶点缓冲是0索引，但是OBJ不是。所以我们还需要从所有的顶点里减去1（indices）。
最后但同样重要的是，我们需要为新的流创建vertex Buffer：
vertexBuffer=context.createVertexBuffer(_vertices.length / 8, 8);
vertexBuffer.uploadFromVector(_vertices, 0, _vertices.length / 8);Rendering the model（渲染模型）
解决了模型加载，渲染那就是一气呵成。DemoOBJ.as文件中的update()函数做了些设置，然后如下渲染OBJ：// Draw the model
_context.setVertexBufferAt(0,_obj.vertexBuffer,0,Context3DVertexBufferFormat.FLOAT_3);
_context.setVertexBufferAt(1, _obj.vertexBuffer, 3, Context3DVertexBufferFormat.FLOAT_3);
_context.setVertexBufferAt(2, _obj.vertexBuffer, 6, Context3DVertexBufferFormat.FLOAT_2);
for each (var group:OBJGroup in _obj.groups)
{
_context.setTextureAt(0, _obj.getMaterial(group.materialName));
_context.drawTriangles(group.indexBuffer);
}我希望这有助于展示在Molehill（Stage3D）如何加载和渲染模型.在本文中我不能覆盖所有的代码，所以如果你有问题可以随意发表评论或者给我发邮件。如果你想找到更多的OBJ文件来折腾，我推荐你去Polycount上的SDK master thread看看
在我的下一篇文章中，我将看看Quake MDL文件。这是另一个很神秘的格式，但它是二进制的并且支持动画，所以有更多可学的东西。
1956
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
