自制简易的软光栅渲染器(2)
playerzhou
无回复
项目地址:https://github.com/OmegaZhou/SimpleRenderer
读取并解析OBJ文件
- 在完成了直线的绘制之后,tiny renderer教程提供了一个obj文件来检验当前的结果
- 在这里,我走了一定的弯路,起初我想一次性解析完整个obj文件格式并导成可供代码使用的对象,但始终不知道如何设计相关的数据结构,加上我自己对于直接使用JavaScript操作长字符串也不甚了解,浪费了很多时间
- 最后还是想明白了,先解析好目前要用数据,之后再迭代开发才能更好地设计出易用的结构
- 之后我在参考他人的代码上实现了对OBJ文件的解析
- 由于JavaScript中字符串为值类型且每次修改都是进行复制操作,容易引发性能问题
- 因此首先先将字符串按行划分成数组元素,每次仅对一行字符串进行操作,避免多次复制长字符串
- 接着在每一行移除注释部分
- 接着根据每行起始关键字执行相应的解析操作
- 这里,虽然在网上的资料中得知obj文件支持使用\符号连接多行,但在此为了方便,我不考虑这一情况
- 最终,我将需要用到的顶点和面结构导入定义好的Model类中,并进行相应的绘制测试
- 通过绘制obj文件,我也发现了代码中之前存在的许多bug,并修复完成
来一发吐槽