Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
PlayCanvasは、とまらない @html5jゲーム部 2017/2/15
Next
Download to read offline and view in fullscreen.

4

Share

Download to read offline

three.jsを「遅い」と思わせないデータの扱い方

Download to read offline

three.jsでゲームを作ろうor公開しようと思った時、モデルロード時に固まるときの解決方法のような何か。

Related Books

Free with a 30 day trial from Scribd

See all

three.jsを「遅い」と思わせないデータの扱い方

  1. 1. 何が?
  2. 2. まじかよ
  3. 3. three.jsを「遅い」と思わせ ないデータの扱い方 2017/2/15 jey-en
  4. 4. 何作ったのさ Three.jsというモノを使い、 Xbox360で配信していた 3D同人ゲームの 移植を行った (1面のみの、おためし版) はじめに three.js って何さ ココがイイぞ! three.jsでゲーム制作 ココがイケてない。 three.jsでゲーム制作 その他 悪あがき シングルスレッドの限界に挑むデータロード
  5. 5. もくじのようなもの はじめに three.js って何さ ココがイイぞ! three.jsでゲーム制作 ココがイケてない。 three.jsでゲーム制作 その他 悪あがき シングルスレッドの限界に挑むデータロード
  6. 6. three.jsって? オープンソースの、100%JavaScriptで作られた、 3D(WebGL)を扱いやすくするためのJSライブラリ。 https://threejs.org/ はじめに three.js って何さ ココがイイぞ! three.jsでゲーム制作 ココがイケてない。 three.jsでゲーム制作 その他 悪あがき シングルスレッドの限界に挑むデータロード
  7. 7. ココがイイぞ!three.jsでゲーム制作 ゲーム作成に必要なモノは揃ってる。 アタリ判定、モデルとRayとの交点(高さ検出)、3D&2Dベクトル型、Matrix型、 ボーン、クォータニオン、3D座標からスクリーン座標&その逆などなど、 DirectXを触ったことがある人なら,ごくごくすんなりと開発できるはず。 ゼロからの人は、まぁ、頑張れ。いつか日の光は見える。 はじめに three.js って何さ ココがイイぞ! three.jsでゲーム制作 ココがイケてない。 three.jsでゲーム制作 その他 悪あがき シングルスレッドの限界に挑むデータロード
  8. 8. ココがイイぞ!three.jsでゲーム制作 豊富なインポータ。 json(blender)、FBX、obj、なんとMMDも対応している。 MMDはモデル&アニメーションだけでなく、 頂点モーフまで対応。 あんなモデルが即ブラウザで表示できて動く! はじめに three.js って何さ ココがイイぞ! three.jsでゲーム制作 ココがイケてない。 three.jsでゲーム制作 その他 悪あがき シングルスレッドの限界に挑むデータロード
  9. 9. ココがイイぞ!three.jsでゲーム制作 遅くない。っていうか早い。 そして出来ることが多い 幾つかある3Dラッパーの中では最速。らしい。 シェーダーもぶっ叩ける。触れば触るほど やれることが増えていく。楽しい! はじめに three.js って何さ ココがイイぞ! three.jsでゲーム制作 ココがイケてない。 three.jsでゲーム制作 その他 悪あがき シングルスレッドの限界に挑むデータロード
  10. 10. ここからが本題です。 配信直前で泣かない ためのお話をしましょう
  11. 11. すこし先の話をしよう。 ゲームが完成した! スペース借りて、公開だ!
  12. 12. 「すごーい!君は ブラウザで動く3Dゲームが作れる フレンズなんだね!」
  13. 13. ちくしょう!台無しにしやがった!!
  14. 14. 誰もお前を愛さない
  15. 15. シングルスレッドの限界に挑むデータロード おさらい: JavaScriptは、シングルスレッドである。 WebWorker?とりあえず忘れろ。 はじめに three.js って何さ ココがイイぞ! three.jsでゲーム制作 ココがイケてない。 three.jsでゲーム制作 その他 悪あがき シングルスレッドの限界に挑むデータロード
  16. 16. シングルスレッドの限界に挑むデータロード three.jsの、モデルデータの読み込みについてのフロー ダウンロード完了後に、 「ローダープラグインが、モデルデータをthree.js用に変換する」 その後、メインプログラム側のコールバックにした「Load」に入る。 はじめに three.js って何さ ココがイイぞ! three.jsでゲーム制作 ココがイケてない。 three.jsでゲーム制作 その他 悪あがき シングルスレッドの限界に挑むデータロード データ ダウンロード ローダーでの解析・変換 ロード後コールバック ローダーライブラ リ ユーザーコード
  17. 17. three.jsの、モデルデータの読み込みについてのフロー ヤバイのは実は、「ダウンロードの時間」ではなく、 「ローダーでの解析時間」 と 「コールバック時処理」 のあわせ技!! はじめに three.js って何さ ココがイイぞ! three.jsでゲーム制作 ココがイケてない。 three.jsでゲーム制作 その他 悪あがき シングルスレッドの限界に挑むデータロード データ ダウンロード ローダーでの解析 ロード後コールバック マルチ可能 マルチ不可能!!! シングルスレッドの限界に挑むデータロード
  18. 18. three.jsの、複数モデルデータの読み込みについてのフロー ヤバイのは実は、「ダウンロードの時間」ではなく、その後の時間! DL ローダーでの解析 ロード後コード DL DL DL ローダーでの解析 ロード後コード 画面更新可能 画面更新不可能画面更新不可能
  19. 19. 誰もお前を愛さない
  20. 20. じゃあどうしよう。 魔法の呪文を唱えましょう。 はじめに three.js って何さ ココがイイぞ! three.jsでゲーム制作 ココがイケてない。 three.jsでゲーム制作 その他 悪あがき シングルスレッドの限界に挑むデータロード シングルスレッドの限界に挑むデータロード
  21. 21. 大正義 はじめに three.js って何さ ココがイイぞ! three.jsでゲーム制作 ココがイケてない。 three.jsでゲーム制作 その他 悪あがき シングルスレッドの限界に挑むデータロード シングルスレッドの限界に挑むデータロード
  22. 22. three.jsの、モデルデータの読み込みについてのフロー 第一の改善点 一番楽に済む改修点がコレ。 はじめに three.js って何さ ココがイイぞ! three.jsでゲーム制作 ココがイケてない。 three.jsでゲーム制作 その他 悪あがき シングルスレッドの限界に挑むデータロード データ ダウンロード ローダーでの解析 ロード後コー ド ここにSetTimeOut シングルスレッドの限界に挑むデータロード
  23. 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. 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. 25. three.jsの、複数モデルデータの読み込みについてのフロー 現在のフローがこんな感じ DL ローダーでの解析 ロード後コード DL DL DL ローダーでの解析 ロード後コード 画面更新が可能になった!
  26. 26. three.jsの、複数モデルデータの読み込みについてのフロー 次の問題はこの「1つのまとまりの大きさ」が、まだ大きい・・・・。 DL ローダーでの解析 ロード後コード DL DL DL ローダーでの解析 ロード後コード 2.5~3秒 0.3秒
  27. 27. 大正義 はじめに three.js って何さ ココがイイぞ! three.jsでゲーム制作 ココがイケてない。 three.jsでゲーム制作 その他 悪あがき シングルスレッドの限界に挑むデータロード シングルスレッドの限界に挑むデータロード
  28. 28. three.jsの、モデルデータの読み込みコード第一の改善 オープンソースの醍醐味を活かそう。 ローダーを独自改修し、SetTimeOutを仕込む! はじめに three.js って何さ ココがイイぞ! three.jsでゲーム制作 ココがイケてない。 three.jsでゲーム制作 その他 悪あがき シングルスレッドの限界に挑むデータロード シングルスレッドの限界に挑むデータロード
  29. 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. 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. 31. three.jsの、複数モデルデータの読み込みについてのフロー トータルの読み込み時間は変わらないが、間に画面更新が可能になった! DL ローダーでの解析 ロード後コード DL DL DL ロード後コード 2.5~3秒 0.3秒 ローダーでの解析
  32. 32. 大正義 はじめに three.js って何さ ココがイイぞ! three.jsでゲーム制作 ココがイケてない。 three.jsでゲーム制作 その他 悪あがき シングルスレッドの限界に挑むデータロード シングルスレッドの限界に挑むデータロード
  33. 33. JunkFieldsでのデータの読み込みについてのフロー メッシュ地形DL 本地形データDL 主人公メカデータDL ボイスデータDL 敵メカデータDL 敵メカデータDL 本編ボイスデータDL タダの暗闇 (長くて0.5秒) 戦闘説明デモ画面(全部見ると1分近い) 戦 闘 本 編 本 編 初 期 化 シナリオスクリプトDL
  34. 34. ココはイケてない。three.jsでゲーム制作 Unityの強力なアセットストアが使えない。 リソースは全て自前で用意する必要がある。 ストア以外でもUnity限定配信とかのフリーモデルとかある。 過剰なUnity信仰文化氏ね。 はじめに three.js って何さ ココがイイぞ! three.jsでゲーム制作 ココがイケてない。 three.jsでゲーム制作 その他 悪あがき シングルスレッドの限界に挑むデータロード
  35. 35. ココはイケてない。three.jsでゲーム制作 ガチで3Dゲームを作りたいなら、 おとなしくUnityにしとけ! ソース丸見えチートし放題問題&アセットストアの有用性で、 Unityのメリットが上回ると思う(個人の感想です)。 企業ユースのゲームとしては、three.jsはやっぱりキツイと思う。 three.jsでゲーム作成」というノウハウは少なく、デビュー作にはVeryHard はじめに three.js って何さ ココがイイぞ! three.jsでゲーム制作 ココがイケてない。 three.jsでゲーム制作 その他 悪あがき シングルスレッドの限界に挑むデータロード
  36. 36. 今回の話と関係のない結論 ●ガチじゃない、さくっと3Dゲームを作って公開したい! ということに関しては、three.js は選択肢の一つとして十分オススメ出来る! ●本業がゲーム畑にいない人&元同人ゲーム作者にこそ、 覚えていただきたい選択肢! ●ゲーム以外で3Dの表現を使いたいなら、three.js最高!! はじめに three.js って何さ ココがイイぞ! three.jsでゲーム制作 ココがイケてない。 three.jsでゲーム制作 その他 悪あがき シングルスレッドの限界に挑むデータロード
  37. 37. おわり ありがとうございました。お疲れ様でした。 three.jsが気になったひとは、ぜひ three.js ぱんつ 検索
  • ssuser0a5a28

    Aug. 11, 2021
  • ssusere9019b

    Oct. 26, 2020
  • MakotoShiokawa

    Nov. 24, 2018
  • DevOgiwara

    Dec. 14, 2017

three.jsでゲームを作ろうor公開しようと思った時、モデルロード時に固まるときの解決方法のような何か。

Views

Total views

5,095

On Slideshare

0

From embeds

0

Number of embeds

212

Actions

Downloads

7

Shares

0

Comments

0

Likes

4

×