Recommended
More Related Content
What's hot
What's hot (20)
Similar to PlayCanvasで始めるWebXR
Similar to PlayCanvasで始めるWebXR (20)
Recently uploaded
Recently uploaded (15)
PlayCanvasで始めるWebXR
- 1. PlayCanvasで始める WebXR(WebVR) 9月13日 Immersive Web Meetup (WebXR & Web Music)
- 2. 羽賀 流登 • GMOクラウド / PlayCanvas推進室 • 2019年4月よりフロントエンドエンジニア目線で PlayCanvasを広めるため活動中 はが / ID: mxcn3 はが りゅうと
- 3. 今日話すこと • PlayCanvasとは • 今日の展示物について • PlayCanvasを使用したWebXRの始め方 • WebVR • WebAR
- 4. 今回伝えたいこと（PlayCanvasについて） • PlayCanvasでは、自分の作ったものをブラウザだけで簡単に 世の中に出せること • あまり多くの人がやっていないことをかなり簡単にできる。
- 5. PlayCanvasとは • WebGLゲーム開発エンジン 3D要素に強く、カジュアルゲームから、 リッチコンテンツまで幅広く開発が可能 • クラウド型の開発エンジン 開発環境がブラウザで完結エンジンのインストールや プラグインのダウンロードが不要 • 中身はオールJSの軽量なエンジン エンジン自体はOSSでコンパイルをはさむ必要がなく、 即時性が高いのが特徴
- 6. PlayCanvasとは PC Firefox 63.0.1 iPhone6
- 8. 実際の開発風景
- 10. PlayCanvasで開発できる物 • 3Dゲーム – FBXやOBJデータをインポートできる • 2Dゲーム - Spineで作ったアニメーションが入る • WebVR – Oculus Quest / Go ... • WebAR (8th wall) • iOS – WebViewでExportがすることができる • Android(PWA / TWA)
- 11. 日本でPlayCanvasが使われている実例 • クリプトダービー (3D ブロックチェーンゲーム） • コントラクトサーヴァント（3D ブロックチェーンゲーム） • PlayCanvasデモサイト https://pcpo.sabo.jp/3dwebsite
- 12. VRの開発する
- 13. 展示物について
- 14. 今回の展示物について お祭りの縁日 https://sandy-chan.firebaseapp.com PlayCanvasでWebVRを使用した展示物 AndroidとiPhoneでPCブラウザがあれば見ることが できる。 Oculus QuestのコントローラーのデータをPhotonと いうネットワークエンジンを使用して送信をしていま す。 はが@mxcn3のTwitterからも飛べます
- 15. 展示物を作るにあたって • 企画～開発で1ヶ月程 • Oculus Quest • PlayCanvas • Photon • 位置情報同期 • 開発人数は2人 • フロント 1人 • 3Dモデラー 1人
- 17. WebVRを動かすには・・・ • ハコスコ持ってこさせていただきました！ • ハコスコを組み立てよう＆事前の設定をしよう • iPhoneの方は下記の設定をしましょう
- 18. デモ お祭りの縁日 https://sandy-chan.firebaseapp.com PlayCanvasでWebVRを使用したデモ AndroidとiPhoneでPCブラウザがあれば見ることが できる。 Oculus QuestのコントローラーのデータをPhotonと いうネットワークエンジンを使用して送信をしていま す。 はが@mxcn3のTwitterからも飛べます QRコード
- 19. Webブラウザから取得できる情報について • navigator.getGamepads()で読み取ることが出来る • Oculus Questは左右それぞれ格納されている • pad.pose.とたどっていくことで • コントローラーの 加速度、回転、位置等が 取得できる。
- 20. Oculusコントローラーをデバッグする 1. Oculus Questを開発者モードにする Oculusの設定から行えます 2. PCとOculus Questをつなぐ 3. Chromeでリモートデバイスをデバッグする 開発者ツール :F11 → Remote Devicesのと ころをチェック → INSPECTでOculusのデ バッグをすることができます。 Debug Your Browser Content https://developer.oculus.com/documentation/oculus-browser/latest/concepts/browser-remote-debugging/
- 21. • PlayCanvasではビルドを挟まないで更新が可能なため、位置 の調整などはOculusで確認をしながら開発をすることができま す。 • VRの画面に入っていないとOculusのコントローラーを取得で きないので、デバッグの際にはOculusを被っている必要がある。 • VRの画面に入るためにはユーザーからのイベント（タッチやク リック）などをして入る必要
- 23. サンプルプロジェクトプロジェクトをフォークする • https://playcanvas.com/project/637555/overview/webvr-hello-world • https://developer.playcanvas.com/ja/tutorials/webvr-lab/ • WebVR Hello World WebVRのサンプル • Web VR Lab 現在動かないけれど、6dofや3dofに対応したスク リプトが入っている。
- 24. 実際の開発画面
- 27. WebAR • 公式のAR Starter Kitを使用する https://playcanvas.com/project/481413/overview/ar-starter-kit • 8th Wallを使用する
- 28. 8th Wall • 8th Wall Webとは世界初のモバイルWeb用のARプラット フォーム • 表面の検出や照明の検出が出来る • マーカレス・任意の画像をマーカーとして 使用すること可能
- 29. PlayCanvasで8th Wallを使用する ß https://playcanvas.com/the8thwall THE8THWALL • マーカーを使用したデモ • マーカーを使用しないデモがある
- 30. AR World Trackingを使用する 1/2 1. AR World Tracking Starter Kitをフォークする 2. Settings → EXTERNAL SCRIPTSから https://apps.8thwall.com/xrweb?appKey=???? この????となっている部分に8th Wallのダッ シュボードからAPIを取得したものを記入 ① ②
- 31. AR World Trackingを使用する 2/2 3. 8th wallの管理画面からDevice Authorization をクリックしてデバイスの登録をします。 PCとスマートフォンの両方をやると良い 4. PlayCanvasのプロジェクトを起動 5. 表示されるQRコードを読み込む ③ ④
- 32. 実際のデモがこちらになります 1. Sandyちゃん(PlayCanvasJPの公式キャラクター)が 踊っているサンプル 2. PlayCanvasでアニメーションを入れている 3. PlayCanvasのプロジェクトがそのまま表示される のでゲームなどをここで遊ぶこと・音声を入れる こともできる。
- 33. PlayCanvasの開発について • WebVRについて • 比較的簡単に作ることが出来る • エディターが少し様子をみたい • WebARについて • 8th Wallを使用することでかなり自由度の高いARを作ることができる。 • PlayCanvasのプロジェクトが動くのでゲームを遊べる • サンプルプロジェクトが多いのでやりたい事にあったプロジェ クトをフォークして開発はできる
- 34. ありがとうございました！
- 35. ありがとうございました！ • 日本PlayCanvasユーザ会として技術書 典 7というイベントでPlayCanvas本を 出します。 • 10月下旬にPlayCanvasに興味がある 方・開発者を集めたLT会を考えておりま すのでぜひご参加をしていただけると！
Editor's Notes
- こちらの会場なのですが、最近技術書典という関係のイベントがメルカリさんであって最近ちょくちょく訪れていたのですが、今日LTをさせていただくことになるとｈありがとうごあいます。 このLTなのですがCEDECというイベントでIkkoouにPlayCanvasチームに対して声をかけて頂いたことがきっかけになります。 どうかよろしくねお害します。
- 今日は東京ゲームショウにいってから