More Related Content
What's hot (20)
Viewers also liked (16)
Recently uploaded (10)
迟丑谤别别.箩蝉を「遅い」と思わせないデータの扱い方
- 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
- #2: えーみなさま、はじめましてでございます。
- #3: 大したことは言いません。どうぞご歓談メインで、聞き流していただければと思います。 そのかわりウルサクさせていただきます。 ということでライトニングトークのお題です。
- #4: スリーJSを「遅い」と思わせないデータの扱い方 ということで、お話させていただきたいと思います。よろしくお願いします。 -- 30s
- #5: 今さらお前は誰だ、ということでですね、申し遅れました。私、タムラと申します。スリーJSで、個人制作でゲームなんて作ってみました。個人制作です。ゲーム作りをプロでやってるわけじゃありません、大したお話はできません。 チョット時間が５分からはみ出ちゃうと思うんですけど、ちらっとどんなゲームか、３０秒ほど動画でおみせします。 このゲーム、お世辞ではなく、Edgeが一番早いです。 はい、お粗末様でした。
- #6: 本日の流れ。どうでもいいですね。多分この通りに喋りません。時間使っちゃったし。 1m
- #7: えーそもそもスリーJsってなんぞや、ということなんですが、JavaScriptの３Dプログラム向けのライブラリです。さきほど豊島さんがスリーJsって言ってたのでちょっと安心しました。知名度ちゃんとありますね。 WebGLをラッピングして、使いやすくしてくれたものです。もちろんオープンソースです。すげえ！
- #8: この辺は流しますね。 えー大体あります。ゲーム向けメソッド多いです。素敌！はい次。
- #9: インポータも结构そろってます。惭惭顿、动かせます。楽しいです。
- #10: だいたいこんなかんじです。すりーJSなんて初めて聞いたし、細かく知りたーい、と思ってくださったら、ググってみてください。 はい。 1m15s
- #11: 今日はですね、完成直前とか、配信を意識するとか、そういう最後の段階で詰まったときの、解決につながる、かもしれないお話をさせていただきます。 先ほどカシマさんからも、ブラウザゲーム復興だーなんてありましたが、そんなリリース前のお話です。
- #12: すりー闯厂で根性だして、３顿ゲームを完成させました！ すごい！やりきった！ サーバースペースを用意して、アップロードして公开するとしましょう。
- #13: もーね、きっと明日の朝には、すごーい、たーのしー！のコメントでいっぱいだ！！ワクワクしますね。 って思うと、
- #14: 大体の場合、こうなるんですね。 あーあ。コレダメなやつだ。かーらーの
- #15: こうなるんですね。 何がいけなかったのでしょう？ 1m45
- #16: いまさらな話をさせていただきます。JavaScriptは、シングルスレッドです。何を今更です。みんな知ってるだろうと。 2m
- #17: こちらに、３Dモデルデータを、ダウンロードして使えるようにするまでフローを書いてみました。 ご覧の通り、ダウンロードの後に、まずは 「 ローダー側での処理 」がありまして、 すりーJS用に頂点データとか何やらを変換します。 みんな書くのは最後のコールバックのところだけ。 でも、その前にも動いてる処理がある、そのことをちょっと思い出しましょう。 2m30s
- #18: そうなんです。２D画像やオーディオと違って、ダウンロード即実行可能、じゃなくて、間に一発いるんですね。 この解析部分、当然、タダのJavaScriptなんで、ふつーにシングルスレッドで走ります。 さぁ、もう嫌な予感がしてきましたね。
- #19: これが複数ファイルだと、こうなります。ダウンロードは確かに時間のかかる処理かもしれないですが、ダウンロードは別スレッドですので、その間、画面を止めないのは、実はそれほど難しくない。 スピナーでもくるくる回しとけばいいんです。 ヤバイのはその後。 ここで、この１組の処理が終わるまで、画面の更新が一切行われなくなります。でもって、その次のファイルも同じように、長く止まっちゃうと。 もーヤバイです。スピナー君もこの最中は、回ってくれません。
- #20: んで、こうなります。 秒間１フレームという地獄のできあがりです。 2m30
- #21: じゃあどうしましょうってことで、魔法の呪文を唱えましょう。 みんな知ってるあの呪文です。 せーの！
- #22: 厂别迟罢颈尘别翱耻迟！みんな大好き。最强です。今回もなんとかしてもらいましょう。
- #23: ということで、解析が终わったところの、ロード后のコードのところで、厂别迟罢颈尘别翱耻迟をはさみます。
- #24: 元がコレですね。っていうかスライドのソースの字なんて见えませんね。ざっくりいきます。予想できると思いますけど、 コレを、
- #25: こんな感じ。蝉别迟罢颈尘别辞耻迟 の呼び出しを付けるだけ。これだけで、结构なんとかなります。
- #26: この回収で、タイムライン的にはこんな感じになります。SetTimeOutのおかげで、画面更新のタイミングができます。 ぶっちゃけローポリで、アニメーションが長くないキャラだったら、これでなんとかなることも多いです。だがまだ足りないこともあると。
- #27: これがデカイデータだとどうなるか。 自分のゲームのデータで3000頂点、5000フレームかな、ですと、解析時間だけで３秒。 画面ごと固まってるってのは、やっぱりキッツイですよね。まだなんとかしたい。なんとかできないだろうか。
- #28: お前の力は、こんなもんじゃないだろと。まだいけます。なんとかしてもらいましょう。
- #29: こっから先は、ソースをいじくるのが、ちょっと疲れます。必要ならば、やってみる感じです。 オープンソースって事を活かしましょう。フォークしても、ビルドしたやつをいじっても、どっちでもいいんじゃないですか。
- #30: 例のMMDローダーを試しにいじってみることにしましょう。 元がコレですね。見えませんね。 まぁ続けますけど、見た感じ、二つの処理が繋がってるぞと。コレを、
- #31: こうするわけですね。やったことは、さっきと同じです。 処理の区切りを意識して、見つけて、そこにSetTimeOutを仕込んでいく、それだけです。
- #32: こうすることで、当然、トータルの読み込み時間は減りませんが、間に画面が更新できるタイミングが生まれます。 これを必要な負荷に応じて分割を増やすことで、止まったような画面を見なくて済む、かもしれません。頑張れば！
- #33: ありがとう厂别迟罢颈尘别辞耻迟。今回も世界は救われた。君のことは忘れない！
- #34: というわけで時間ないんですけど、自分のゲームのロード部分の図解です。 小刻みにいろいろなファイルが読まれていって、間あいだで画面の更新ができてます。ありがとうSetTimeOut！ はい！ --------- 最後に、自分が作ったゲームでの、データのロードの図解っぽいやつです。 （１分以上余ってた場合のみ全部言う） 最初に、ワイヤーフレームで表示する用の軽いモデルデータのダウンロードが走りまして、そのモデルのダウンロードと読み込みが終わると、いわゆる戦闘説明画面っぽいデモが入ります。そのデモ画面の最中、裏ではガリガリとダウンロードとダウンロード後の解析をやるわけですが、こんな感じでSetTimeOutを使って、それぞれが小刻みに読まれていく感じなんですね。んで、全部終わった所で本編突入です。これで、いわゆる「止まらないけど後ろではロードしてるんだぞ」という画面が可能になりました。何かの参考になれば幸いです。
- #35: ちょっとお時間が余ってますので、 順番が前後しましたが、すりーじぇいえすの欠点といいますかなんといいますか、無理矢理な話しですけども。余談を話します。 unityのアセットストアが使えないので、データの用意に苦労することになるんですね。 ３Dのデータって作れる人は２Dに比べたら一気に少なくなりますから、そこをカバーできるアセットストアは、ホント凄いと思います。リソースの自前は、おもったよりもキツイです。 まぁこれはあくまでUnityと比べたら、ということで。unity以外の環境からしたら、別に劣ってるということじゃないです。Unityがスゴすぎるだけ。 でも、 今日見せてだいたプレイカンバスは楽しそうだったので、 もし次、こういう機会があれば、プレイカンバスとの比較も用意してみたいなと思います。
- #36: ということで、まとまらないまとめなんですけれども、 鲍苍颈迟测でよくね、以上ですって、话が终わっちゃうので。ブラウザで公开したい！という特殊な事情がない限りは、别に迟丑谤别别.箩蝉にこだわることって无いと思います。とにかく、３顿モデルデータが用意できるかどうか、まず最初の分かれ目はそこですね。
- #37: --- 残り15s ------------ ということで、なんか今日話したことと全然関係ないまとめのようなんですけど、先ほどですね、オガワさんからWebGLでゲームはお金にはならんという泣ける結論がありましたけども、もしゲームを個人で作ってる人とかいらっしゃたら、three.jsは、ぜひやってみろと！面白いぞ！と、おすすめしたいと思います。
- #38: ということで、おつきあいいただきまして、ありがとうございました。 すりーJSが気になった方はですね、ぜひとも画面に出てる、どーしょもないキーワードとかでググっていただいて、少しでも興味をもって頂けたら幸いです。 ということで、以上になります。 ありがとうございました。