THREE.js モデルのローディングでCTMのモデルを使う #JavaScript

Three.jsで3Dモデルデータをロードする時にwebで配信するにはモデルのファイルサイズが大きすぎるという事態が起きた。

最初はPLYやDDSといったモデルをロードしていたが、OpenCTMというバイナリのモデルにすることで、圧縮効率を上げてweb配信でも問題ないレベルにすることができた、その時に使ったCTMLoaderの話。

CTMLoaderはOpenCTM形式のモデルを非同期でロードする。
OpenCTMの開発元はこちらで
http://openctm.sourceforge.net
JavaScriptのライブラリが公開されている、three.js用にはすでにラップされたCTMLoaderというローダーが用意されていて、three.jsのExample内
https://github.com/timoxley/threejs/tree/master/examples/js/loaders/ctm
にコードがあり、公式のExampleにもLoaderの項にCTMLoaderの例がある。

CTMLoader

大体Exampleどおり、他のローダーと同じような使い方でokなのだが、
デコードの処理をworkerを使って高速化する場合、注意したいのはworkerは処理を単一のjsファイルにしておく必要があるので、ビルドツールなどでjsファイルを連結している場合は
ctm/ctm.js
ctm/lzma.js
ctm/CTMWorker.js
だけ連結せずにビルドしておく必要がある。

また、loaderの第三引数でworkerプロパティに、ワーカーのjsファイルへのパスを指定しておく必要も出てくる。

おそらく、再生環境によってはブラウザの処理速度が問題になるのでウェブワーカーでデコードさせる方が吉なことが多いだろう。

var loader = new THREE.CTMLoader();

loader.load("your_ctm_file.ctm", (geom, materials) => {
    let result = {
            geometry: geom
            materials: materials
        }

        ... make your mesh with result here.

    }, { 
      useWorker: true, 
      worker: new Worker( 'libs/ctm/CTMWorker.js' ) 
    })

loaderの第二引数のロード完了のコールバックで、geom, materialsが帰ってくるので、これをメッシュに使ってあげる。

第三引数でworkerプロパティにCTMWorker.jsを指定しておく。
worker: new Worker( 'libs/ctm/CTMWorker.js' )

圧縮率

こちら公式ページにOpenCTMの圧縮率について書いてる。この通り今回もかなりの圧縮率になった。モデルが重くなったらCTM試してみるのもいいかも。
http://openctm.sourceforge.net/?page=performance