質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.42%
Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Blender

Blenderとは、オープンソースの3DCGソフトウェアです。フリーでありながら、3Dモデル作成、レンダリング、アニメーション、コンポジットなどのハイエンドに匹敵する高い機能を持ち、さらにゲームエンジンも搭載しています。

Q&A

解決済

1回答

6893閲覧

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

univmotokazu

総合スコア17

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Blender

Blenderとは、オープンソースの3DCGソフトウェアです。フリーでありながら、3Dモデル作成、レンダリング、アニメーション、コンポジットなどのハイエンドに匹敵する高い機能を持ち、さらにゲームエンジンも搭載しています。

0グッド

1クリップ

投稿2018/10/09 23:50

編集2018/10/10 01:46

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

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

イメージ説明

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

そもそも、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/

投稿2018/10/10 14:34

編集2020/01/21 22:29
cx20

総合スコア4633

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

univmotokazu

2018/10/11 05:53

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.42%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問