Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?

More than 3 years have passed since last update.

@moxuse@github

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

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

1
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What is going on with this article?