用JS去读取【MMD】中vmd文件的那些事

未来能用js编写的软件,都会用js编写 前言 MikuMikuDance,简称MMD,如果是b站用户的话,应该都看到过一个专门的mmd分区,里面是各类舞蹈视频,这个是早期(真的很久了)给v家角色制作舞蹈动画的一个软件,当然除了v家6人以外,崩坏3,元神各类角色相关的宅舞投稿都有 mmd其实本质上还是一款三维动画制作软件,包含 模型 动作 关键帧等一系列相关的概念,模型的话,TGA式,大妈式,很多都有相关的配布,模型和镜头也有相关的发布,其实相关产业已经很完善了,但是这一次,我打算对mmd中保存动作,镜头,表情和关键帧的VMD(Vocaload Mation Data)文件下手了,当然主要还是因为。。。 mmd不支持mac!我不想装windows啊,作为前端工程师的我,如果想实现类似的渲染,那么,一方面是需要搞定模型的渲染**(Tree.js永远的神)**,另一方面就是能够编辑解析其中的vmd文件了 当然,为了解决动作的问题, 一方面,mmd提供了kinect进行捕捉,另一方面,我也想试试用posenet来解析动作,不过在这之前,先得吧vmd搞定 顺便,练习一下用js读取二进制流嘛 几个概念 二进制流 文件其实就是一堆 0,1 组成的二进制码流,在javascript的世界中,这种文件叫做ArrayBuffer, 虽然我们不能直接操作,但是做相应的读取还是没用问题的 你不能直接操作 ArrayBuffer 的内容,而是要通过类型数组对象或 DataView 对象来操作,它们会将缓冲区中的数据表示为特定的格式,并通过这些格式来读写缓冲区的内容。 用js获取二进制流有几种办法,最常用的就是从file直接转过来,这里我们通过FileReader即可 FileReader 接口提供的 readAsArrayBuffer() 方法用于启动读取指定的 Blob 或 File 内容。当读取操作完成时,readyState 变成 DONE(已完成),并触发 loadend 事件,同时 result 属性中将包含一个 ArrayBuffer 对象以表示所读取文件的数据。 当然啦,还有很多种办法,比如把请求头设置成arrayBuffer等等,这里请查阅相关的文档吧 TypedArray 在真实的使用场景(比如其他语言体系,例如c)其实对bytes有很多种不同的编码方案,用来表示不同的类型,int型一般2个字节这种,在js中也有相对应的TypedArrays 只要参考对照表,其实读取方面就比较简单了 VMD文件的格式 光有文件流,还需要一套相应的读取方案才行,感谢国内两位大佬的相关文章,解惑了 ...

December 6, 2020 · 2 min · 235 words · 水华