結局終わらなかったAdvent Calendarの8日目(12/15の分)です。今年は色々登場した気がする、特にバグとか。
2014年上旬、まだ年度で言えば13年度、こんな記事がありました。
MMDモデルを3DCGでウェブ上に公開し閲覧者がアングルを動かしまくれるJavaScriptライブラリ「jThree」 – GIGAZINE
この記事からかどうかは忘れたけれども丁度この時このjThreeに出会いました。
【千本桜デモあり】MMDのミクをウェブで公開できるjQueryプラグイン「jThree」 http://t.co/j3BEyGxuJv @jThree_jpさんから
— 衣装をください (@hnle0) March 21, 2014
おいこいつｗｗｗｗ本体止めてても背景でだけで死んでるぞwwww(糞CPU)
(5fps) http://t.co/j3BEyGxuJv #負荷最強のTellYourWorldでFPSいくつ出た— 衣装をください (@hnle0) March 21, 2014
どっぷりはまって手探りでモデルや曲データを入れ替えて遊んでました。
【千本桜デモあり】MMDのミクをウェブで公開できるjQueryプラグイン「jThree」 http://t.co/j3BEyGxuJv via @jThree_jp
ちなみにこれ。とりあえずメルトdemoを自鯖においてる()
— 衣装をください (@hnle0) March 21, 2014
いきなりバグも見つけた…
@jThree_jp png画像を含むモデルを利用しようとすると「/demo/melt/undefinedHoge.png」のようになっちゃうバグが…(既知？)どうやらブラウザは正しいアドレスもコールしてるみたいでResourcesにはちゃんと出てるし鯖も200返してるんですが…
— 衣装をください (@hnle0) March 22, 2014
@jThree_jp いえ今日中に帰ってくるとは思ってなかった()のですぐ返してもらえてうれしいです。試してみたところjThree.MMD.jsの990行目辺りのpathがおかしい模様…とりあえず応急処置だけ書いたら無事読み込んでくれました…()
— 衣装をください (@hnle0) March 22, 2014
@jThree_jp param.texturePathがunderfindになってるっぽいですね…ちなみにこれ(場所)はFirefoxのコンソールが最終的に見つけてくれました…
— 衣装をください (@hnle0) March 22, 2014
@hnle0 おお！アンドロイドでも動くんですね！軽く宣伝文句に使わせていただきます。バグを修正してみました。当方でバグの再現ができなかったのでテストしていただけると助かります。サーバーダウンしてるのでアップローダからDLしてください。http://t.co/MHlo8Bb2iX
— jThree公式 (@jThree_jp) March 22, 2014
遊んでる一方で本家鯖は例の記事からの大量流入により鯖落ちしまくってました。(おかげでリソース回収に苦労した…)
一方の当時の成果は…
localでメルトまでいけた pic.twitter.com/LR0cwuh04x
— 衣装をください (@hnle0) March 21, 2014
や、やめるんだっ…… pic.twitter.com/otJNPramxz
— 衣装をください (@hnle0) March 21, 2014
おっ？これ意外といけんじゃね？ pic.twitter.com/JBDM4WlBEV
— 衣装をください (@hnle0) March 21, 2014
ちゃんとままま式歌ってくれたわ pic.twitter.com/IghmtaDMBi
— 衣装をください (@hnle0) March 22, 2014
Androidでも！(注:fps死亡) pic.twitter.com/pUnTCNwADC
— 衣装をください (@hnle0) March 22, 2014
初音ミクがTellyourWorldを踊ってくれる筈でした()(1) pic.twitter.com/HuTeOSfN50
— 衣装をください (@hnle0) March 22, 2014
描画は死んでるけどなんとAndroidで走った！
昨日の夜からなにしてた？
・jThreeの存在を知って暫くハマる
・Dropboxのデモパズルにハマる
(朝)
(ねる)
(夕方)
(おきる)・jThreeでままま式
・TellYourWorldの外で拾ったモーション— 衣装をください (@hnle0) March 22, 2014
そんなことをして過ごしていた春休み…
10月末、Qiitaでこんな記事を見て半年ぶりに当時の最新版(2.0.7)を入れてみた。
噂のjThree.jsを試してみた。 on @Qiita http://t.co/zeczp2BzeP
24歳、学生なのか…(困惑)
— 衣装をください (@hnle0) October 31, 2014
少し勝手が変わってたっぽいのでとりあえずサンプルを見て…
とりあえず曲流しながらMobileVR試すところまではいけた pic.twitter.com/2qb5U8Utoc
— 衣装をください (@hnle0) October 31, 2014
なんとなくローディング表示もつけた
でかい pic.twitter.com/XwAvXTLZjb
— 衣装をください (@hnle0) October 31, 2014
ちなみに1.xの時にあったプレーヤーが未実装だったりしたのでデモを参考に実装してみた。
それから以前からやろうと思ってたあれをやった。
(描画が死んでること除けば)つよい #jThree pic.twitter.com/F7SpBZg4QF
— 衣装をください (@hnle0) October 31, 2014
流石にこれは重すぎたらしく…
Androidだとこうなるしクソ pic.twitter.com/P9UQyLukHV
— 衣装をください (@hnle0) October 31, 2014
Androidはダメだった。
PCでも描画がうまくいかないみたいで…特に腰回りがやばい。モデルは何も弄ってないのに…
jThreeでHAL,ちゃんと動くんだけどやっぱりバグが… pic.twitter.com/gHA7WdSvih
— 衣装をください (@hnle0) November 1, 2014
といった過去がありました。
ということで現状確認にさっきもう一度試してみたけれどやっぱりこんな感じ。
Chrome
Firefox
やっぱり今まで同様に死んでる…
ここでjThree2.1への差し替えを検討したものの2.1はエラーが出て動かなかったので2.0.7に一部プラグインだけ更新してまとめたものをgh-pagesに上げました。一応クッションページを挟んでるのでそのリンクをクリックすると開きます。
PCのスペックに自信のある方、ぜひ試してください。かなり重いです。
実装は当時のまま…jThree.Stereoとか無かった当時のです。
ちなみにローカル鯖で走らす場合、NginxやApacheなら大丈夫だろうけどpython -m SimpleHTTPServerとかだとマルチスレッド処理できないのかエラーが出音声ファイルが配信できなかったりするので注意。php -S 0.0.0.0:8000とかは辛うじて大丈夫みたい。
以上。
© HAL