Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした