以前に、
テクスチャに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 はリビジョンが上がると
後方互換性が失われていることがままあるので、
変更点をチェックして、
それに対応させるのが結構手間暇かかったりするのが
難点だったりします。
そんなわけで、次回に続きます(^_^;)