WebGL 加载模型时,javascript 解析结果的调试转成 JSON 查看确认数组结构-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

WebGL 加载模型时,javascript 解析结果的调试转成 JSON 查看确认数组结构

简介: WebGL 加载模型时,javascript 解析结果的调试转成 JSON 查看确认数组结构 太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循“署名-非商业用途-保持一致”创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS、Android、Html5、Arduino、pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作。

WebGL 加载模型时,javascript 解析结果的调试转成 JSON 查看确认数组结构

太阳火神的美丽人生 (http://blog.csdn.net/opengl_es)

本文遵循“署名-非商业用途-保持一致”创作公用协议

转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS、Android、Html5、Arduino、pcDuino否则,出自本博客的文章拒绝转载或再转载,谢谢合作。


这么长一个大标题,其实就一个主题,javascript 中数组转成 JSON 串。

为什么要这样转呢?本来就是从文本文件中读出来的,还要转成文本,啥子弯弯道?!


有个问题,javascript 作为一种语言,其数组,也是一种内存组织结构,打印出来倒是可以,但那是一堆堆的便便撒(闭嘴俺靴僵话嘞)

那么,想看到数据的同时,还要看到组织结构,那么就找一种能描述数组结构的明文形式,在 javascript 中,JSON 必然首选!至于其它语言,我想 JSON 也是首选,不信您移步 JSON 的定义,看看是否确如其说!


确认过了没?

好,即然您和我一样,认同这种观点,那么,我们来看看如何将 javascript 中的数组转换成 JSON 串吧。

下面,以 WebGL 处理一个长方体为例,接下来的部分,可能对研究 WebGL 的朋友,多少会有些帮助吧,至少对我很有帮助,因为我还正在研究中,这里记录下来的只能算阶段性成果,在 CMMI 中可以叫做里程碑吧,而在敏捷开发 scrum 中,可以叫做一个 sprint 冲刺。

模型文件,

mtllib changfangti.mtl

#
# object Box001
#

v  -3000.0000 0.0000 2000.0000
v  -3000.0000 0.0000 -2000.0000
v  3000.0000 0.0000 -2000.0000
v  3000.0000 0.0000 2000.0000
v  -3000.0000 2800.0000 2000.0000
v  3000.0000 2800.0000 2000.0000
v  3000.0000 2800.0000 -2000.0000
v  -3000.0000 2800.0000 -2000.0000
# 8 vertices

vn 5.0000 -1.0000 -0.0000
vn 0.0000 1.0000 -0.0000
vn 0.0000 0.0000 1.0000
vn 1.0000 0.0000 0.0006
vn 0.0000 0.0000 -1.0000
vn -1.0000 0.0000 -0.0006
# 6 vertex normals

vt 0.9995 0.0005 0.0005
vt 0.9989 0.9995 0.0005
vt 0.0005 0.9995 0.0005
vt 0.0011 0.0005 0.0005
vt 0.0005 0.0005 0.9995
vt 0.9989 0.0005 0.9995
vt 0.9995 0.9995 0.9995
vt 0.0011 0.9995 0.9995
vt 0.0005 0.0005 0.0005
vt 0.9989 0.0005 0.0005
vt 0.0005 0.0005 0.9989
vt 0.9995 0.0005 0.9995
vt 0.0005 0.9995 0.9989
vt 0.9989 0.9995 0.9995
vt 0.0005 0.9995 0.9995
vt 0.0005 0.0005 0.0011
vt 0.9995 0.9995 0.0005
vt 0.0005 0.9995 0.0011
# 18 texture coords


g Box001
usemtl 07___Default11
s 2
f 1/1/1 2/2/1 3/3/1 
f 3/3/1 4/4/1 1/1/1 
usemtl 07___Default
s 4
f 5/5/2 6/6/2 7/7/2 
f 7/7/2 8/8/2 5/5/2 
usemtl 09___Default
s 8
f 1/9/3 4/10/3 6/2/3 
f 6/2/3 5/3/3 1/9/3 
usemtl 10___Default
s 16
f 4/11/4 3/12/4 7/7/4 
f 7/7/4 6/13/4 4/11/4 
usemtl 11___Default
s 32
f 3/5/5 2/6/5 8/14/5 
f 8/14/5 7/15/5 3/5/5 
usemtl 12___Default
s 64
f 2/16/6 1/1/6 5/17/6 
f 5/17/6 8/18/6 2/16/6 
# 12 faces
以上模型文件是从 3dmax 中导出的 .obj 格式模型,其中有四部分是我们关心的,以 v、vt、vn  和 f 开头的部分,其实 usemtl 也是可以关心的,但目前研究中一直未考虑,均只指定一种材质,故而暂不考虑。

这里有一个很不错的算法,只是有了个大体思路,一直未去实践,也许在不久的将来,深入细节去做的时侯,会做到吧,也挺难于思考的一个家伙,期待吧。


接下来,本篇主角登场,中国式的聚会哈,越后出现的,越是主要人物。

这里的 JSON 类只有在 ECMAScript 标准 5 以后版本中才支持

    var lines = data.split("\n");
    alert(JSON.stringify(lines));

[
    "mtllib 11.mtl",
    "",
    "#",
    "# object 006",
    "#",
    "",
    "v  34.1000 161.8999 104.3000",
    "v  0.0000 162.5000 108.2000",
    "v  0.0000 156.6999 113.3000",
    "v  35.3000 157.0000 107.6999",
    "v  55.5000 157.0000 97.2999",
    "v  66.6000 157.1000 91.5999",
    "v  64.6999 161.9999 88.4999",
    "v  53.3999 161.9999 94.2999",
    "v  91.7998 157.0000 66.6000",
    "v  89.2999 161.6999 64.1000",
    "v  107.8999 157.1000 34.6000",
    "v  104.6999 161.6999 33.8999",
    "v  109.3999 161.5000 0.3999",
    "v  112.5999 156.2999 0.3999",
    "v  0.0000 152.5999 112.9999",
    "v  56.2999 152.9000 97.9000",
    "v  97.9999 152.7000 54.6999",
    "v  112.4000 152.9000 0.3999",
    "v  0.0000 144.5999 119.1999",
    "v  59.8000 142.9000 103.5000",
    "v  103.4000 143.1998 58.4999",
    "v  0.0000 139.0999 124.9000",
    "v  62.9999 138.8999 108.2000",
    "v  108.2000 138.9999 62.0999",
    "v  118.6999 143.0999 0.3999",
    "v  124.7000 138.6999 0.3999",
    "v  210.6000 9.8997 271.2999",
    "v  215.2999 42.7000 270.1999",
    "v  0.0000 42.8000 270.9000",
    "v  0.0000 10.7000 271.1999",
    "v  0.0000 85.7999 127.4999",
    "v  65.1000 85.6999 110.6999",
    "v  0.0000 272.6000 67.9000",
    "v  32.6000 271.1999 57.9999",
    "v  36.8999 292.2999 64.7999",
    "v  0.0000 293.0000 74.2999",
    "v  56.7999 270.1999 32.2000",
    "v  63.1000 290.6000 38.1999",
    "v  65.0000 270.0000 0.3999",
    "v  73.9000 291.2000 0.3999",
    "v  61.5000 308.2999 35.3000",
    "v  69.5999 309.7000 0.3999",
    "v  35.1999 308.8999 61.7999",
    "v  0.0000 311.3999 70.2999",
    "v  51.3000 351.7000 0.3999",
    "v  45.2999 350.3999 25.4998",
    "v  25.0000 350.7999 45.6000",
    "v  0.0000 352.6000 51.6000",
    "v  77.6999 172...2 997/2497/4042 ",
    "f 769/2284/4043 997/2497/4043 996/2498/4043 ",
    "f 769/2284/4027 996/2498/4027 998/2499/4027 ",
    "f 769/2284/4046 998/2499/4046 999/2500/4046 ",
    "f 769/2284/4029 999/2500/4029 1000/2501/4029 ",
    "f 769/2284/4027 1000/2501/4027 1001/2502/4027 ",
    "f 769/2284/4029 1001/2502/4029 1002/2503/4029 ",
    "f 769/2284/4029 1002/2503/4029 1004/2504/4029 ",
    "f 769/2284/4046 1004/2504/4046 1003/2505/4046 ",
    "f 769/2284/4027 1003/2505/4027 1010/2506/4027 ",
    "f 769/2284/4027 1010/2506/4027…
以上是使用 json 格式化在线工具格式化后的结果,看起来很清晰了吧!

关于 json ,可以有如下说明,摘自 这里 :

JSON是一种取代XML的数据结构,和xml相比,它更小巧但描述能力却不差,由于它的小巧所以网络传输数据将减少更多流量从而加快速度,

那么,JSON到底是什么?

JSON就是一串字符串 只不过元素会使用特定的符号标注。

{} 双括号表示对象

[] 中括号表示数组

"" 双引号内是属性或值

: 冒号表示后者是前者的值(这个值可以是字符串、数字、也可以是另一个数组或对象)

所以 {"name": "Michael"} 可以理解为是一个包含name为Michael的对象

而[{"name": "Michael"},{"name": "Jerry"}]就表示包含两个对象的数组

当然了,你也可以使用{"name":["Michael","Jerry"]}来简化上面一部,这是一个拥有一个name数组的对象

ps:现在还有很多人存在一些误区,为什么{name:'json'}在检验时通过不了,

那是因为JSON官网最新规范规定

如果是字符串,那不管是键或值最好都用双引号引起来,所以上面的代码就是{"name":"json"}

不要反驳,官网就是这么定义的。



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章