Everyday Pieces ::
  • Webサービス
  • ブログパーツ
  1. ホーム
  2. プログラミング

three.jsで遊んでみる(28)

2014年8月26日 2014年6月8日 プログラミング MMD, three.js

以前に、
テクスチャにDDSを使うとFPSが向上するかも、
というコメントをいただいたので
今回やってみることにしました。

DDS は DirectDraw Surface の略。
名が示す通り、もとはDirectX なファイル形式ですが、
一般的な認識としては、S3TC(DXTC) な圧縮が使えるファイル
ということで良いかと思われます。

圧縮アルゴリズムについてはこちらで詳しく解説されています。

『JPEGやPNGに比べるとDXTCの圧縮率は低いです。その代わり、
DXTCは画像を圧縮したままGPUのVRAMに置いて使うことができる、
という大きな利点があります』

DDSを使う大きな理由はコレですね。
圧縮したまま扱えるので、
ビデオメモリの使用量を減らせる&転送帯域も抑えることができる。
だから「FPSが向上するかも」になるわけですね。

実装するためにはまず、
PNG や TGA 等から変換してやる必要があります。
こちらを参考にやってみました。
変換ツールは DirectX Texture Tool を使うのが無難なようです。
DirectX SDK の一部として提供されているので、
SDKをインストールする必要があります。
インストール時に項目を選択できるので、、
余計なものは導入せずにやれると思います(^_^;)

DDSでは、
Surface Format として様々なタイプをサポートしていますが、
DXT1, DXT3, DXT5 のいずれかを選択すれば良さそうです。

・DXT1 アルファなし or 1bitアルファ
・DXT3 変化が急なアルファ値
・DXT5 変化が緩やかなアルファ値

アルファは透過度のことです。
変換の際にどう判定すべきか自信がなかったので(^_^;)
単純に、不透過なら DXT1 、
透過成分があれば DXT5 として変換しました。

実装するには、
ImageUtils.loadCompressedTexture を
使って読み込むのが手っ取り早そうです。
なお、
three.js では、DXT2、DXT4 はサポートされてないようです。
DXT2 や DXT4 はあまり使われない?

ところで、
PMXでのテクスチャは BMP,PNG,TGA とかが使われています。
PmxEditorとかで編集して拡張子を書き換えるのが手っ取り早いのですが、
あまりスマートではないと思うので(^_^;)
DDS をロードさせるために、拡張子を読み替える仕組みを入れました。
TGA だったら DDS にリネームしてロードするという感じです。
任意に置き換えできるようにしました。
たとえば以下の様な感じに指定します。

textureAlias = { bmp:'dds', png:'dds', tga:'dds' };

ということで、やってみました。
・・・がしかし、
なんか gl なエラーがたくさん出る
・・・うむぅ。
原因不明だけど、three.js を最新にしたら
うまく行くかもしれない感じがして来たので(^_^;)
この際、ベースのリビジョンを思い切って変えてみることにしました。
現状のベースは r58 で最新は r67。
気がつけば結構進んでたりもしますしね。
ただ、
以前に r51 から r58 にした時の経験から言うと、
three.js はリビジョンが上がると
後方互換性が失われていることがままあるので、
変更点をチェックして、
それに対応させるのが結構手間暇かかったりするのが
難点だったりします。

そんなわけで、次回に続きます(^_^;)

関連記事
three.jsで遊んでみる(46) three.jsで遊んでみる(45) three.jsで遊んでみる(44) three.jsで遊んでみる(43) three.jsで遊んでみる(42) three.jsで遊んでみる(41) three.jsで遊んでみる(40) three.jsで遊んでみる(39) three.jsで遊んでみる(38) three.jsで遊んでみる(37) three.jsで遊んでみる(36) three.jsで遊んでみる(35) three.jsで遊んでみる(34) three.jsで遊んでみる(33) three.jsで遊んでみる(32) three.jsで遊んでみる(31) three.jsで遊んでみる(30) three.jsで遊んでみる(29) three.jsで遊んでみる(27) three.jsで遊んでみる(26) three.jsで遊んでみる(25) three.jsで遊んでみる(24) three.jsで遊んでみる(23) three.jsで遊んでみる(22) three.jsで遊んでみる(21) three.jsで遊んでみる(20) three.jsで遊んでみる(19) three.jsで遊んでみる(18) three.jsで遊んでみる(17) three.jsで遊んでみる(16) three.jsで遊んでみる(15) three.jsで遊んでみる(14) three.jsで遊んでみる(13) three.jsで遊んでみる(12) three.jsで遊んでみる(11) three.jsで遊んでみる(10) three.jsで遊んでみる(9) three.jsで遊んでみる(8) three.jsで遊んでみる(7) three.jsで遊んでみる(6) three.jsで遊んでみる(5) three.jsで遊んでみる(4) three.jsで遊んでみる(3) three.jsで遊んでみる(2) three.jsで遊んでみる

コメントする キャンセル

アドレスが公開されることはありません。が付いている欄は必須項目です。

投稿ナビゲーション

Appleな新言語「Swift」
three.jsで遊んでみる(29)

カテゴリー

WordPress つぶやき トピック プログラミング

タグ

AS3 enchant.js FamilyTreeVis Flash Geolocation gif.js kinect Linux MMD MoneyTrackNote notifier.js OpenCV PDFカレンダー RISC-V three.js セキュリティ テーマ自作 ブログパーツ 動物 動画 麻雀

アーカイブ

© Everyday Pieces ::