More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (16)
three.jsを「遅い」と思わせないデータの扱い方
- 1. 何が？
- 2. まじかよ
- 14. 誰もお前を愛さない
- 16. シングルスレッドの限界に挑むデータロード three.jsの、モデルデータの読み込みについてのフロー ダウンロード完了後に、 「ローダープラグインが、モデルデータをthree.js用に変換する」 その後、メインプログラム側のコールバックにした「Load」に入る。 はじめに three.js って何さ ココがイイぞ！ three.jsでゲーム制作 ココがイケてない。 three.jsでゲーム制作 その他 悪あがき シングルスレッドの限界に挑むデータロード データ ダウンロード ローダーでの解析・変換 ロード後コールバック ローダーライブラ リ ユーザーコード
- 17. three.jsの、モデルデータの読み込みについてのフロー ヤバイのは実は、「ダウンロードの時間」ではなく、 「ローダーでの解析時間」 と 「コールバック時処理」 のあわせ技！！ はじめに three.js って何さ ココがイイぞ！ three.jsでゲーム制作 ココがイケてない。 three.jsでゲーム制作 その他 悪あがき シングルスレッドの限界に挑むデータロード データ ダウンロード ローダーでの解析 ロード後コールバック マルチ可能 マルチ不可能！！！ シングルスレッドの限界に挑むデータロード
- 18. three.jsの、複数モデルデータの読み込みについてのフロー ヤバイのは実は、「ダウンロードの時間」ではなく、その後の時間！ DL ローダーでの解析 ロード後コード DL DL DL ローダーでの解析 ロード後コード 画面更新可能 画面更新不可能画面更新不可能
- 19. 誰もお前を愛さない
- 23. three.jsの、モデルデータの読み込みコード第一の改善 コレを・・ はじめに three.js って何さ ココがイイぞ！ three.jsでゲーム制作 ココがイケてない。 three.jsでゲーム制作 その他 悪あがき シングルスレッドの限界に挑むデータロード loader.load( modelFile, function ( object ) { mesh = object; mesh.position.y = -10; scene.add( mesh ); //中略 }, onProgress, onError ); シングルスレッドの限界に挑むデータロード
- 24. three.jsの、モデルデータの読み込みコード第一の改善 こうじゃ。 はじめに three.js って何さ ココがイイぞ！ three.jsでゲーム制作 ココがイケてない。 three.jsでゲーム制作 その他 悪あがき シングルスレッドの限界に挑むデータロード loader.load( modelFile, function ( object ) { var loadEnd = function (_object) { mesh = (_object; mesh.position.y = -10; scene.add( mesh ); //中略 }; setTimeout(loadEnd(object), 10); }, onProgress, onError ); シングルスレッドの限界に挑むデータロード
- 25. three.jsの、複数モデルデータの読み込みについてのフロー 現在のフローがこんな感じ DL ローダーでの解析 ロード後コード DL DL DL ローダーでの解析 ロード後コード 画面更新が可能になった！
- 26. three.jsの、複数モデルデータの読み込みについてのフロー 次の問題はこの「１つのまとまりの大きさ」が、まだ大きい・・・・。 DL ローダーでの解析 ロード後コード DL DL DL ローダーでの解析 ロード後コード 2.5～3秒 0.3秒
- 29. MMDLoader.jsの、モデルデータの読み込みコードの魔改造 コレを・・ //83行目（ビルド後ファイル・ver r84時点) THREE.MMDLoader.prototype.load = function ( modelUrl, vmdUrls, callback, onProgress, onError ) { var scope = this; this.loadModel( modelUrl, function ( mesh ) { scope.loadVmds( vmdUrls, function ( vmd ) { scope.pourVmdIntoModel( mesh, vmd ); callback( mesh ); }, onProgress, onError ); }, onProgress, onError ); }; シングルスレッドの限界に挑むデータロード
- 30. MMDLoader.jsの、モデルデータの読み込みコードの魔改造 こうじゃ //83行目（ver r84時点) THREE.MMDLoader.prototype.load = function ( modelUrl, vmdUrls, callback, onProgress, onError ) { var scope = this; this.loadModel( modelUrl, function ( mesh ) { var modeLoadEnd= function (_mesh) { scope.loadVmds( vmdUrls, function ( vmd ) { scope.pourVmdIntoModel( _mesh, vmd ); callback(_mesh ); }, onProgress, onError ); }; setTimeout(modeLoadEnd( mesh ), 10); }, onProgress, onError ); }; シングルスレッドの限界に挑むデータロード
- 31. three.jsの、複数モデルデータの読み込みについてのフロー トータルの読み込み時間は変わらないが、間に画面更新が可能になった！ DL ローダーでの解析 ロード後コード DL DL DL ロード後コード 2.5～3秒 0.3秒 ローダーでの解析
- 36. 今回の話と関係のない結論 ●ガチじゃない、さくっと3Dゲームを作って公開したい！ ということに関しては、three.js は選択肢の一つとして十分オススメ出来る！ ●本業がゲーム畑にいない人＆元同人ゲーム作者にこそ、 覚えていただきたい選択肢！ ●ゲーム以外で３Dの表現を使いたいなら、three.js最高！！ はじめに three.js って何さ ココがイイぞ！ three.jsでゲーム制作 ココがイケてない。 three.jsでゲーム制作 その他 悪あがき シングルスレッドの限界に挑むデータロード
Editor's Notes
- えーみなさま、はじめましてでございます。
- 大したことは言いません。どうぞご歓談メインで、聞き流していただければと思います。 そのかわりウルサクさせていただきます。 ということでライトニングトークのお題です。
- スリーJSを「遅い」と思わせないデータの扱い方 ということで、お話させていただきたいと思います。よろしくお願いします。 -- 30s
- 今さらお前は誰だ、ということでですね、申し遅れました。私、タムラと申します。スリーJSで、個人制作でゲームなんて作ってみました。個人制作です。ゲーム作りをプロでやってるわけじゃありません、大したお話はできません。 チョット時間が５分からはみ出ちゃうと思うんですけど、ちらっとどんなゲームか、３０秒ほど動画でおみせします。 このゲーム、お世辞ではなく、Edgeが一番早いです。 はい、お粗末様でした。
- 本日の流れ。どうでもいいですね。多分この通りに喋りません。時間使っちゃったし。 1m
- えーそもそもスリーJsってなんぞや、ということなんですが、JavaScriptの３Dプログラム向けのライブラリです。さきほど豊島さんがスリーJsって言ってたのでちょっと安心しました。知名度ちゃんとありますね。 WebGLをラッピングして、使いやすくしてくれたものです。もちろんオープンソースです。すげえ！
- この辺は流しますね。 えー大体あります。ゲーム向けメソッド多いです。素敵！はい次。
- インポータも結構そろってます。MMD、動かせます。楽しいです。
- だいたいこんなかんじです。すりーJSなんて初めて聞いたし、細かく知りたーい、と思ってくださったら、ググってみてください。 はい。 1m15s
- 今日はですね、完成直前とか、配信を意識するとか、そういう最後の段階で詰まったときの、解決につながる、かもしれないお話をさせていただきます。 先ほどカシマさんからも、ブラウザゲーム復興だーなんてありましたが、そんなリリース前のお話です。
- すりーJSで根性だして、３Dゲームを完成させました！ すごい！やりきった！ サーバースペースを用意して、アップロードして公開するとしましょう。
- もーね、きっと明日の朝には、すごーい、たーのしー！のコメントでいっぱいだ！！ワクワクしますね。 って思うと、
- 大体の場合、こうなるんですね。 あーあ。コレダメなやつだ。かーらーの
- こうなるんですね。 何がいけなかったのでしょう？ 1m45
- いまさらな話をさせていただきます。JavaScriptは、シングルスレッドです。何を今更です。みんな知ってるだろうと。 2m
- こちらに、３Dモデルデータを、ダウンロードして使えるようにするまでフローを書いてみました。 ご覧の通り、ダウンロードの後に、まずは 「 ローダー側での処理 」がありまして、 すりーJS用に頂点データとか何やらを変換します。 みんな書くのは最後のコールバックのところだけ。 でも、その前にも動いてる処理がある、そのことをちょっと思い出しましょう。 2m30s
- そうなんです。２D画像やオーディオと違って、ダウンロード即実行可能、じゃなくて、間に一発いるんですね。 この解析部分、当然、タダのJavaScriptなんで、ふつーにシングルスレッドで走ります。 さぁ、もう嫌な予感がしてきましたね。
- これが複数ファイルだと、こうなります。ダウンロードは確かに時間のかかる処理かもしれないですが、ダウンロードは別スレッドですので、その間、画面を止めないのは、実はそれほど難しくない。 スピナーでもくるくる回しとけばいいんです。 ヤバイのはその後。 ここで、この１組の処理が終わるまで、画面の更新が一切行われなくなります。でもって、その次のファイルも同じように、長く止まっちゃうと。 もーヤバイです。スピナー君もこの最中は、回ってくれません。
- んで、こうなります。 秒間１フレームという地獄のできあがりです。 2m30
- じゃあどうしましょうってことで、魔法の呪文を唱えましょう。 みんな知ってるあの呪文です。 せーの！
- SetTimeOut！みんな大好き。最強です。今回もなんとかしてもらいましょう。
- ということで、解析が終わったところの、ロード後のコードのところで、SetTimeOutをはさみます。
- 元がコレですね。っていうかスライドのソースの字なんて見えませんね。ざっくりいきます。予想できると思いますけど、 コレを、
- こんな感じ。setTimeout の呼び出しを付けるだけ。これだけで、結構なんとかなります。
- この回収で、タイムライン的にはこんな感じになります。SetTimeOutのおかげで、画面更新のタイミングができます。 ぶっちゃけローポリで、アニメーションが長くないキャラだったら、これでなんとかなることも多いです。だがまだ足りないこともあると。
- これがデカイデータだとどうなるか。 自分のゲームのデータで3000頂点、5000フレームかな、ですと、解析時間だけで３秒。 画面ごと固まってるってのは、やっぱりキッツイですよね。まだなんとかしたい。なんとかできないだろうか。
- お前の力は、こんなもんじゃないだろと。まだいけます。なんとかしてもらいましょう。
- こっから先は、ソースをいじくるのが、ちょっと疲れます。必要ならば、やってみる感じです。 オープンソースって事を活かしましょう。フォークしても、ビルドしたやつをいじっても、どっちでもいいんじゃないですか。
- 例のMMDローダーを試しにいじってみることにしましょう。 元がコレですね。見えませんね。 まぁ続けますけど、見た感じ、二つの処理が繋がってるぞと。コレを、
- こうするわけですね。やったことは、さっきと同じです。 処理の区切りを意識して、見つけて、そこにSetTimeOutを仕込んでいく、それだけです。
- こうすることで、当然、トータルの読み込み時間は減りませんが、間に画面が更新できるタイミングが生まれます。 これを必要な負荷に応じて分割を増やすことで、止まったような画面を見なくて済む、かもしれません。頑張れば！
- ありがとうSetTimeout。今回も世界は救われた。君のことは忘れない！
- というわけで時間ないんですけど、自分のゲームのロード部分の図解です。 小刻みにいろいろなファイルが読まれていって、間あいだで画面の更新ができてます。ありがとうSetTimeOut！ はい！ --------- 最後に、自分が作ったゲームでの、データのロードの図解っぽいやつです。 （１分以上余ってた場合のみ全部言う） 最初に、ワイヤーフレームで表示する用の軽いモデルデータのダウンロードが走りまして、そのモデルのダウンロードと読み込みが終わると、いわゆる戦闘説明画面っぽいデモが入ります。そのデモ画面の最中、裏ではガリガリとダウンロードとダウンロード後の解析をやるわけですが、こんな感じでSetTimeOutを使って、それぞれが小刻みに読まれていく感じなんですね。んで、全部終わった所で本編突入です。これで、いわゆる「止まらないけど後ろではロードしてるんだぞ」という画面が可能になりました。何かの参考になれば幸いです。
- ちょっとお時間が余ってますので、 順番が前後しましたが、すりーじぇいえすの欠点といいますかなんといいますか、無理矢理な話しですけども。余談を話します。 unityのアセットストアが使えないので、データの用意に苦労することになるんですね。 ３Dのデータって作れる人は２Dに比べたら一気に少なくなりますから、そこをカバーできるアセットストアは、ホント凄いと思います。リソースの自前は、おもったよりもキツイです。 まぁこれはあくまでUnityと比べたら、ということで。unity以外の環境からしたら、別に劣ってるということじゃないです。Unityがスゴすぎるだけ。 でも、 今日見せてだいたプレイカンバスは楽しそうだったので、 もし次、こういう機会があれば、プレイカンバスとの比較も用意してみたいなと思います。
- ということで、まとまらないまとめなんですけれども、 Unityでよくね、以上ですって、話が終わっちゃうので。ブラウザで公開したい！という特殊な事情がない限りは、別にthree.jsにこだわることって無いと思います。とにかく、３Dモデルデータが用意できるかどうか、まず最初の分かれ目はそこですね。
- --- 残り15s ------------ ということで、なんか今日話したことと全然関係ないまとめのようなんですけど、先ほどですね、オガワさんからWebGLでゲームはお金にはならんという泣ける結論がありましたけども、もしゲームを個人で作ってる人とかいらっしゃたら、three.jsは、ぜひやってみろと！面白いぞ！と、おすすめしたいと思います。
- ということで、おつきあいいただきまして、ありがとうございました。 すりーJSが気になった方はですね、ぜひとも画面に出てる、どーしょもないキーワードとかでググっていただいて、少しでも興味をもって頂けたら幸いです。 ということで、以上になります。 ありがとうございました。