Blenderから描きだしたgltfファイルをdracoで圧縮してThree.jsで使用したい

Question

表題の通りなのですが、gltfファイルをdraco_encoderで圧縮してweb上で使いたいと考えています。
ローカルでは思ったとおりにgltfファイルをThree.jsを用いて表示できたのですが、サーバーにアップロードしてページを開こうとすると、モデルの容量が大きすぎるためかすぐには開けません。

そこでdracoを用いて圧縮しようと思ったのですが、どうもうまくいきません。
CMakeを起動させて、コンパイルを行い、Debugフォルダを生成するところまではうまくいったのですが、そこからコマンドプロンプトで圧縮しようとすると以下のようにエラーになってしまいます。

このような場合はどのようにしたらうまく圧縮できるのでしょうか？
よろしくおねがいします

/*************************************************/
そもそも、gltfをdraco圧縮することは可能なのでしょうか？
/**************************************************/

Answer 1

そもそも、gltfをdraco圧縮することは可能なのでしょうか？

はい。可能です。

glTF 2.0 拡張仕様として Draco 拡張（KHR_draco_mesh_compression）という仕様があります。
Three.js や Babylon.js といった有名どころのライブラリであれば、Draco 拡張のモデルの表示に対応しています。

glTF Draco 拡張のファイルを作る方法はいくつか存在しますが、既に glTF ファイルがあるということでしたら gltf-pipeline を使うのが良いと思います。

ツールの導入方法

npm install -g gltf-pipeline

ツールの使い方

gltf-pipeline -i model.gltf -o modelDraco.gltf -d

また、Three.js から glTF Draco 拡張のファイルを表示する場合は GLTFLoader.js の他に DRACOLoader.js が必要となります。

DRACOLoader.js の使い方については、以下にサンプルがありますので、参照下さい。
http://jsdo.it/cx20/gykb
https://cx20.github.io/jsdo.it-archives/cx20/gykb/

なお、.drc 形式は純粋な Draco 形式のファイルである為、glTF 形式という訳ではありません。

Three.js で .drc 形式のモデルを表示する場合は draco_decoder.js を用いて頂点データをデコードして、自前で描画してあげる必要があります。

以下は、.drc 形式の表示サンプルになります。

http://jsdo.it/cx20/y3XD
https://cx20.github.io/jsdo.it-archives/cx20/y3XD/

Comments

[univmotokazu]

draco圧縮してthree.jsで表示することができました！
ありがとうございます！