‘three.js’ タグのついている投稿

1 2 3 4 5 6 7

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

 プログラム,
 公開日:2015年5月28日 / 更新日:2016年8月15日

 今まで、MMDモデルとかのデータをチェックする際は、
1)ソースをちょっといじって読み込むファイルを変更。
2)対象ファイルを適正な場所に配置。
3)Webサーバーをローカルに立ててチェック。
という手順を踏んでいました。
大した手間じゃないので特に気になっていたわけではないのですが、
ファイルをドロップするだけでチェックできたらもっと楽になるなと思い、
今回ちょっとしたビューワーを作ってみた次第です。

 ファイルをドロップする方式にすれば、
ファイルの読み込みはクライアント側だけで処理できるので、
つまり、サーバー側にファイルを置かずに済むので、
楽曲ファイルの再生にも対応することにしました。
今までデモで楽曲を鳴らさなかったのは、
著作権的によく分からなかったということもありますが、
使用している無料のホスティングサービスである
@PAGESの規約に抵触しそうなので・・・。
というか基本的に踊らせるのが目標だったので、
音楽とかは無しでも良いかな
というのが大きな理由だったりしましたが(^_^;)

 サポートしているファイル形式は、
モデルはPMX、モーションはVMD、楽曲はMP3です。
モデルについては必要なテクスチャをまとめる必要があるので、
ZIPに対応しています。
テクスチャ形式については、
Webで標準的に使えるBMP,GIF,JPG,PNGの他に、
TGAとDDSも一応サポートしています。

 なお、PMX仕様のうち、モーフは頂点モーフのみに対応しています。
ボーンやマテリアル等の他のモーフには対応していません。
また、頂点blending方式の一つであるSDEFにも対応していません。
BDEF2相当として扱われますのでご注意ください。

 いくつかのモデルやモーションのファイルを使って
動作確認をしてありますが、
あらゆる組み合わせを試したわけではないので、
うまくいかない場合があるかもしれません。
また、読み込むファイル量が多かったり、ZIPを展開するなどした場合は、
ローディングに時間がかかる場合があるかもしれません。
その辺りはご了承のほどお願いします。

 それから、WebGLなアンチエイリアスにも対応しました。
ただしグラボの性能がそれなりに必要となるようです。
自分のノートPCではFPSが半分くらいに落ちる感じ・・・(^_^;)
WebGLのコンテキスト作成時にしか指定できないので、
動的にON/OFFできないのがちょっと残念。

 ということで作ったViewerはこちらから試せます。

★2016年8月15日追記
audioコントローラの見栄えがブラウザによって違ったり、
バージョンアップで変更されたりするっぽいようなので、
こちらを導入してみました。
整合性をとるのに手間取ったけど(^_^;)

★2015年11月16日追記
対象が複数ある場合はラジオボタンで排他的に選択できるようにしました。

WebGL対応のブラウザで見てください。WindowsのChromeで確認しています。PCパワーもそれなりに必要となるかもしれません。反応がない場合は、リロードして再度試してみてください。

表示関係のチェックを全て外し、輪郭線の太さをゼロにすると動作的に一番軽くなります。ブラウザの拡張機能を一時的に無効にすると、さらに軽くできるかも。

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

 プログラム,
 公開日:2014年10月13日 / 更新日:2014年10月15日

だいぶ前から、それとなく気づいていたことに、
本家MMDに比べてレンダリング結果がなんか変
というのがあったりします(^_^;)
今回それなりに改善できたので書いてみたいと思います。

ところで、
IKとか物理演算とかの技術的な興味から始めたthree.jsでMMDですが、
ミクさんを踊らせることが目標だったので、
自分の中ではすでに目標達成な感じだったりします。
趣味でやっているので再現性にはあまりこだわらなかったりしてますが、
一方で気になり出すとどうにかしたくなる性分だったりもします。

さて、
レンダリング結果が変なのは前からどうにかしたいなと思っていたわけですが、
比較検討するためのLighting設定とかが分かりませんでした。
ところが先日PmxEditorの表示設定にそれらの情報があることを見つけました。
何度も使っていたのに今頃になって気づきました(^_^;)

PmxEditorでのデフォルトの表示設定では、
環境ライト色 = (255,255,255)
方向ライト色 = (127,127,127)
方向ライト向き = (-0.5,-1.0,0.5)
視野角 = 25度
という感じになっていました。

これを基準に比較検討することにしました。
ただし「向き」はthree.jsで扱うために右手系へ変換します。
つまり、(-0.5,-1.0,-0.5)にします。
またカメラ位置は不明だったので、
だいたい同じ感じに見えるように手動調整しました。

実際にやってみると、three.js側はちょっと暗めな感じ。
PmxEditor側は照明強度を少し強めにしている模様です。
方向ライトのIntensityを1.1くらいにしてみました。

で、比較結果は以下の通り。
左がPmxEditor、右がthree.js。
PmxEditorでのアンチエイリアスは無効にしてます。
※クリックすると実サイズで比較画像を参照できます。フルHDくらいのサイズがあります。

0-1

こうして比べて見ると、だいぶ異なってますね。
シェーダーのコードを一から見直したほうが良さそうです(^_^;)
ということでWebの情報を漁ってみたところ、こちらを発見しました。
これは大いに参考になりますね。
もっと早くこちらの情報に気づいていれば・・・。

そんなわけで大きく3つの問題が判明しました。
1)toonマップのアドレス計算がまちがってる。
2)toonマップの適用タイミングがまちがってる。
3)sphereマップのアドレス計算が不十分。
ざっくり言うと、
toon掛けた後にspecularを適用した感じになってしまっています。
正しい順番はその逆でした。

1)と2)については、
できるだけthree.jsの機能に対応するように改造した関係で、
勘違いや考慮不足が原因だったようです。
three.jsのシェーダーのコードは、方向ライトだけでなく
ポイントライトやスポットライトなどに対応しているので複雑だったりします。
ちなみにこんな感じ。phongを改造してます。
3)については、テクスチャの上下逆問題の絡みでした。
この回の投稿でも書いたりしてますが、
どうにも対応が中途半端になってしまうようなので(^_^;)
texture.flipY = falseに統一することにしました。

ということで改善した結果は以下の通りです。
右の方がtoonのコントラストが微妙に弱めな感じがしますが、
概ね同じような感じになってくれました。

1-2

改善後の動作テストを見るにはこららからどうぞ。
なお、テストでは以下のデータを使用させていただきました。
モデルはMMD同梱のメタル服なミクさん、
モーションはこちら、カメラモーションはこちら

WebGL対応のブラウザで見てください。WindowsのChromeで確認しています。PCパワーもそれなりに必要となるかもしれません。反応がない場合は、リロードして再度試してみてください。

やたらとサーバーが重いことがあります・・・。
そんな時は、激しく気長に待ってみてください(^_^;)

shadow などのチェックを全て外し、outline scale をゼロにすると動作的に一番軽くなります。ブラウザの拡張機能を一時的に無効にすると、さらに軽くできるかも。

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

 プログラム,
 公開日:2014年9月21日 / 更新日:2014年10月22日

とあるモデルでのモーションの挙動がオカシイということで調べてみた所、
どうやら「付与」がうまく行ってない感じ。
付与に関してはうまく行っているようでダメな場合があり、
よく分からない状況だったりしました。
ところが先日色々いじくってたら、
なんかうまく行くようになりました。

当初は素直に、
対象ボーンをA、参照するボーンをBとして、
Aの変形量 += Bの変形量 × 付与率
とやったりしたのですが、どうもうまく行かない。
次に、
ある描画フレームとその次のフレームでの変形量の差分を求めて、
Aの変形量 += Bの変形量の差分 × 付与率
とやったらうまく行ったのですが、モデルによってはダメなことも。
そして今度は、
バインドポーズ時との差分でやってみたらイイ感じになりました。
バインドポーズ時の各ボーンの回転量はゼロなので、
当初のやり方でも回転に関しては間違ってないのですが、
バインドポーズ状態に初期化してないことが原因でした。
初期化してないので延々積算してしまっていました。
要するに初期化のし忘れ・・・でした(^_^;)

ということでまとめると、
1)各ボーンをバインドポーズ状態に初期化
2)Aの変形量 += Bの変形量の差分 × 付与率
を毎フレームやれば良い感じ。
実際には1)と2)の間で Bone Skinning とか IK とかをやります。
そして回転に関しては基準の回転量がゼロなので、
差分計算は省いても大丈夫なことになります。

「回転付与」に関してはおそらく解決だとは思いますが、
試すのに良さげなデータを持ってないため、
「移動付与」や「ローカル付与」は未検証です。
後で問題が起きるかも?(^_^;)

ということで改善後の動作テストを見るにはこららからどうぞ。
改善前はこららです。
確かにヒジの曲がりが直ってる感じです。

なお、テストでは以下のデータを使用させていただきました。
モデルはこちら、モデルモーションはこちら、カメラモーションはこちら

それから今回はもう一つ問題がありました。
“瞳”の表示がなんかオカシイ・・・。
調べてみると、透過オブジェクトの描画順に起因する問題でした。

ところで three.js では、
透過オブジェクトは奥から手前へ、
不透過オブジェクトは手前から奥へ、
の順で描画するようになっています。

透過オブジェクトの描画順については、
そのようにしないと矛盾が起きるのは理解しやすいと思います。
不透過については奥から手前でも問題ないのですが、
手前から奥にすると効率がよくなります。
奥行きを表すZバッファの値を比較することで、
実際の描画量を減らせる効果を期待できるからです。

明示的に透過指定のあるマテリアルや、
テクスチャが透過成分を含むマテリアルの場合に、
透過フラグを指定するように今までやってました。
大抵のモデルではそれで問題は起きない感じなのですが、
一部のモデルではうまく行かない場合があるようです。
そこで、
全マテリアルの透過フラグを強制的にオンにする機能を追加して、
透過問題に対応できるようにしました。

でも、よく考えてみると、
材質モーフとかで透過度が変化することは十分ありそうなので、
描画効率が落ちるかもしれないけど
デフォルトでオンにしてしまった方がよさそうです。
透過になるかどうかは静的ではなく動的にならざるをえないので、
それに対応できるようにしないとうまくない感じですね。
ただ現状では頂点モーフしか対応してなかったり・・・(^_^;)
それ以外の種類のモーフはいずれどうにかしたいですね。

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

 プログラム,
 公開日:2014年8月23日 / 更新日:2014年8月27日

とあるMMDなモデルがうまく表示されないらしいので調べてみました。

・・・なるほど。
DDSなテクスチャファイルを使ったPMXでしたか。
以前にも書いてますが、
texture.flipY = false を基本にしないとやはりダメか(^_^;)

ところで、
WebGLRenderer.jsでは以下の様な感じになっており、

texture.flipY は gl.UNPACK_FLIP_Y_WEBGL に対応しています。
名称からするとWebGL固有なパラメータなのかな?
three.js ではデフォルトで有効になっていますが、
その理由はよく分かりません。

以前では flipY = false にすると影響が出そうなので止めてしまいましたが、
よく調べてみたら影響はTOONマップだけだと分かりました。
Fragment Shader においてマップ時のV座標を逆転させればOKだけど、
コードがちょっとだけ増えます。
そこでTOONマップだけは flipY = true のままで行けるようにしました。
TOONテクスチャにDDSが使われることはないと思うので大丈夫かと思います。
思ったよりアッサリと解決できました(^_^;)

ただ、
今回のモデルではもう一つ問題が起きていました。
スカートの裏が抜けてしまうのです。
原因は両面描画がうまく行えていないことでした。
実装はしてあったのですが、そういえば検証してませんでした。
今になって問題が露呈しました(^_^;)
glのステータスがちゃんと反映されるように直して解決。

あと、
ヒジの曲がりが何かオカシイ感じがしてます。
ヒジには付与が導入されているのですが、
残念ながら完全にはうまく行えていないようです。うむぅ。
むしろを付与をオフった方がマシになる感じ(^_^;)

なお、モデルのREADMEにはSDEFを使用していると書いてあるのですが、
データ上はSDEFは使われていませんでした。ちょっとナゾ。
といってもSDEFには未だ対応してないけど(^_^;)
また、ほとんどのマテリアルに両面描画のフラグが設定されているのですが、
実際にはスカートと髪の一部だけに適用すれば良さげな感じなので、
そのように調整しました。無駄な描画が減るはず。
さらに、透過成分の無いDDSファイルについては
ロード時間を減らすためにDXT3からDXT1に変更しました。

ということで動作テストを見るにはこららからどうぞ。

なお、テストでは以下のデータを使用させていただきました。
モデルはこちら、モデルモーションはこちら、カメラモーションはこちら

WebGL対応のブラウザで見てください。WindowsのChromeで確認しています。PCパワーもそれなりに必要となるかもしれません。反応がない場合は、リロードして再度試してみてください。

やたらとサーバーが重いことがあります・・・。
そんな時は、激しく気長に待ってみてください(^_^;)

shadow などのチェックを全て外し、outline scale をゼロにすると動作的に一番軽くなります。ブラウザの拡張機能を一時的に無効にすると、さらに軽くできるかも。

20140823.046

うちみく!

 つぶやき, トピック, , ,
 公開日:2014年7月1日

「うちみく!ウチのミクさんが話を聞いてくれるようです」

実際に試した感じがこちらで紹介されています。

HTML5 Japan Cup」の応募作品の一つです。
8月31日までの期間限定公開だそうです。

私はチームのメンバーではありませんが、
プラグインの形でソースを提供させてもらっています。
それにしても、いつまにかこんなものを作っていたとは(^_^;)

1 2 3 4 5 6 7