【WebGL】Three.js载入OpenCTM模型

2017-03-21 本文已影响1647人 0bac0812186e

随着浏览器迅猛发展，WebGL一波崛起，大家都开始学习Three.js方面的姿势。Three.js是一个不错的库，并且拥有很多插件。3D模型格式纷繁，Three.js也都一一接住！今天让我们来看一个比较陌生的3D格式以及Three.js是如何把它收入麾下的吧~

什么是 OpenCTM？

你有没有在游戏引擎中见过 .ctm 模型？如果有，它便是采用OpenCTM格式的 3D 模型文件。OpenCTM 是一种新的模型文件格式，后缀名为 .ctm，大家所熟知的模型文件格式可能有 obj 文件和 stl 文件。

OpenCTM 格式文件是二进制文件，相比于 stl 格式的文件，它将不承载除模型三角面片信息以外的信息，比如：场景信息、变换矩阵等。OpenCTM 一个文件只包含一个网格（Mesh），知道这一点对使用者来说极其重要。由于 OpenCTM 文件十分简单，它的适用场景也很广泛。

OpenCTM 格式最大的优势就是它强大的压缩比。一个 stl 的模型文件转化成 ctm 格式后，可以压缩至原有大小的 5~6%，压缩比有 95% 左右！由于这个特性，它十分的适合被用于网络传输，所以非常合适被用于 Web 开发。

各格式模型文件大小对比，原文：https://www.vizworld.com/2009/08/openctm-compression-of-3d-triangle-meshes/

OpenCTM 还有一个优点：开源。

Three.js 引入 OpenCTM

Three.js 是非常好用的 Web 3D 引擎，有许多插件可以处理多种 3D 模型文件的加载。要在 Three.js 中使用 OpenCTM 格式文件需要两步：

.ctm 文件解析 -> 转化为 Three.js 模型对象 -> use it...

Juan Mellado 为我们提供了 OpenCTM js 版本的文件解析器 js-openctm，Three.js 维护者将其纳入自己的项目的拓展中（在 Three.js 工程 example 文件下可以找到）。alteredq 为 ctm 文件写了 CTMLoader 将其转化成 Three.js 的 THREE.BufferGeometry 对象并使用。至此，我们就可以在自己的 web 应用中轻松接入 OpenCTM 格式了。

使用 CTMLoader

const loader= newTHREE.CTMLoader();

loader.load(path, (geometry) => {

//to something

}, {

useWorker: bool

});

useWorder：是否使用 webWorker 来做离线文件解析工作，推荐使用 true，默认是 undefined。

实验：Three.js 中 Obj 和 OpenCTM 加载速度对比

为了验证 OpenCTM 格式在 web 应用中相对于 obj 文件的优势，我随机找了5个模型来做了一个简单的文件夹在和解析速度对比。

观点：OpenCTM 比 obj 文件有更大的压缩比，所以能够获得更快的加载速度，比 obj 文件更加适用于 web 应用。

代码依赖：Three.js 提供的 OBJLoader 和 ctm 工具包。

控制变量：文件加载用的都是 xhr api，没有问题。OpenCTM 使用的是 raw 格式。ctm 的 CTMLoader 引入了一个可选的 Web Worker 来做文件解析，但是开启 Web Worker 会带来额外的时间消耗，所以在实验中我没有开启，在实际应用中推荐使用 Web Worker（CTMLoader 没用对 Web Worker 做兼容性判断，据我调研 Web Worker 的兼容性优于 WebGL 所以可以放心的在 Three.js 中使用 Web Worker）。

实验过程：

1. 模型文件对比。可以看到相比较而言同一个模型，ctm 文件的压缩比是非常高得。注意到 roi 模型是比较特殊的，它有非常多的点，但是面片数量非常少。

5个不同的模型文件

2. 前端实验代码。我写了一个简单的 demo 用来记录和计算每个模型文件的加载以及解码时间（解码就是文件解析完成后，把文件转换成 Three.js 模型对象的操作，见上文『Three.js 中引入 OpenCTM』）。我通过在 OBJLoader.js 和 CTMLoader.js 这两个文件中加入时间统计函数来获得加载时间，这两个文件都可以在 Three.js 工程中找到。界面大致如下：

这是我用 Three.js 写的简单的测试程序，你也可以用自己喜欢的方式写~

3. 加载速度对比，也就是网络传输时间对比。这里我打开了『开发者工具』，在 network 面板中禁用了缓存，并且限制网速为 4G。我使用 chrome 做开发。

ctm 加载速度远远优于 obj

4. 解析速度对比。可以看到，ctm 文件解析速度并不会比 obj 文件慢。且模型解析的时间随模型顶点数的增长速度远远小于模型加载时间的增长速度，也就是说，在 web 应用中，模型解析时间对用户眼里『模型出现速度』的影响是远远小于模型网络传输的时间的。

ctm 的解析速度并不会比 obj 慢

5. 『模型出现』总时间对比。总时间 = 加载时间 + 解析时间。这里就看一下 ctm 在 4G 网络下比 obj 『快』多少，模型越大，这种优势越明显。

模型文件越大，ctm 比 obj 快的越多！

结论：ctm 在 web 应用中的使用优势远远大于 obj。

不足：ctm 文件的压缩比跟模型本身结构有关。在 raw 格式下，可以看到 roi 模型虽然定点数很大但是压缩比非常高，达到了 0.1%，而有的模型没有这么大的压缩比。bunny 的压缩比最低为 70%，pillow 为35%， lee perry 为 6.5%，sofa 为 5.4%。本次试验中所使用的模型结构各异，而且也么有以面片数为轴线绘图，因而引入了许多额外变量，使得实验结果不那么准确。仅可供参考。

总结

在这篇文章中，我简单的介绍了一种新的 3d 文件格式—— OpenCTM，并介绍了如何在一个非常流行的 web 3d 引擎中使用 OpenCTM 格式。最后我做了一个简单的实验，比对 raw 格式的 OpenCTM 文件和 Obj 文件在 web 应用中的优势。其中还有许多没有 cover 到的内容。希望有机会可以再做更深入的介绍。