PlayCanvasで始めるWebXR開発

Transcript

1. 2023/10/18 PWA Night vol.56 〜WebXR〜 PlayCanvasで始めるWebXR開発 はが @mxcn3
2. 2023/10/18 PWA Night vol.56 〜WebXR〜 ⾃⼰紹介 2
 所属‧名前 GMOグローバルサイン‧ホールディングス (PlayCanvas運営事務局) フロントエンドエンジニア ⽻賀 流登 （はが @mxcn3) 2019年に⼊社後以降、PlayCanvasを利⽤している⽇本の⽅の テクニカルサポートなどの業務をしています。 • PlayCanvas製モデルビューワーで3D Gaussian Splattingを試してみました！ • PlayCanvasサンプル集 最近、Zennに公開いたしました！もし興味がありましたらこちらもご覧ください！
3. 2023/10/18 PWA Night vol.56 〜WebXR〜 本⽇の話す内容について 3
 • PlayCanvas を使った( 3Dモデル / WebGL)を使ったWebXRのプロジェクトを作る流れを紹介します！ • ウェブとWebXRを使ってどんなもの作れるのか？具体的にデモを交えて紹介する内容となっています。 • 各パート軽く紹介をしていくので詳細が気になる部分があったらお気軽にご質問ください！ （個⼈的にコツコツ作っていたデモが多くあるのでそれをこれを気に紹介したいです！）
4. 2023/10/18 PWA Night vol.56 〜WebXR〜 ⽬次 - PlayCanvasの紹介 - PlayCanvas エンジン (OSS )について - PlayCanvas エディター (開発ツール)について - PlayCanvasでのWebXR - WebXR (AR)を利⽤したデモの紹介 - WebXR (VR)でのシーンの流れのデモ - まとめ 4

5. 2023/10/18 PWA Night vol.56 〜WebXR〜 PlayCanvasとは？ 5
 PlayCanvasは、WebGL/HTML5をベースとしたオープンソース の3Dゲームエンジン/インタラクティブ3Dアプリケーションエ ンジンです。 ブラウザ上で3DゲームやインタラクティブなWebコンテンツを 開発することができます。 特徴 • PlayCanvas エンジンというオープンソースのWebGLゲームエンジン • ウェブ上でPlayCanvas (WebGL)のプロジェクトが開発ができるエディター
6. 2023/10/18 PWA Night vol.56 〜WebXR〜 PlayCanvas Engine（エンジン）の使⽤⽅法について 6
 1. CDNからスクリプトを読み込む <script src=“https://code.playcanvas.com/playcanvas-stable.min.js”></script>  npm install playcanvas import * as pc from 'playcanvas'; PlayCanvasはJavaScript製のライブラリとして提供をされます。（⾃分でビルドもできます） CDNからスクリプトを読み込む⽅法や、npmのパッケージをインストールをして利⽤ができます。 リポジトリ playcanvas/engine スター数 8,700 コミット数 10,918 リリース 321 バージョン v1.66.1 開発組織 PlayCanvas(Snap Inc) リリース 2011年 OSS化 2014年6⽉4⽇ 2. npmのパッケージを利 ⽤
7. 2023/10/18 PWA Night vol.56 〜WebXR〜 7
 PlayCanvas Engineでキューブを回転させる
8. 2023/10/18 PWA Night vol.56 〜WebXR〜 8
 // 1. HTMLでcanvas作成 <canvas id=“application”></canvas> // 2. JavaScriptでPlayCanvas エンジン読み込み <script src=“https://code.playcanvas.com/playcanvas-stable.min.js”></script> // 3. PlayCanvas Engineの初期化 const canvas = document.getElementById(“application”) // canvasをIDからDOMから取得 const app = new pc.Application(canvas, {}); //PlayCanvasのエンジンを初期化 app.start() // メインループの開始 // 4. 「カメラ」と「ライト」と「キューブ」の配置 const camera = new pc.Entity(“camera”); // カメラ エンティティ(オブジェクト）を作成 camera.addComponent(“camera”, {clearColor: new pc.Color(0.5, 0.5, 0.5)}); // 「camera」コンポーネントを追加 const light = new pc.Entity(“light”); // ライト エンティティ(オブジェクト）を作成 light.addComponent(“light”); // 「light」コンポーネントを追加 const cube = new pc.Entity(“cube”); // キューブ エンティティ(オブジェクト）を作成 cube.addComponent(“render”, {type: “box”}}); // 「render」コンポーネントを追加 app.root.addChild(camera); // シーンにカメラエンティティを追加 app.root.addChild(light); // シーンにライトエンティティを追加 app.root.addChild(cube) // シーンにキューブエンティティを追加 // 5. メインループ app.on(“update”, (deltaTime) => { cube.rotate(10 * deltaTime, 20 * deltaTime, 30 * deltaTime); // キューブを回転させる }) （デモ 1 ) PlayCanvas EngineでHello, World ! 回転するキューブをシーン上に配置
9. 2023/10/18 PWA Night vol.56 〜WebXR〜 9
 キューブの数を増やす
10. 2023/10/18 PWA Night vol.56 〜WebXR〜 10
 // 1. HTMLでcanvas作成 <canvas id=“application”></canvas> // 2. JavaScriptでPlayCanvas エンジン読み込み <script src=“https://code.playcanvas.com/playcanvas-stable.min.js”></script> // 3. PlayCanvas Engineの初期化 const canvas = document.getElementById(“application”) // canvasをIDからDOMから取得 const app = new pc.Application(canvas, {}); //PlayCanvasのエンジンを初期化 app.start() // メインループの開始 // 4. シーン上にキューブを100個配置 (コードの変更点） const camera = new pc.Entity(“camera”); // カメラ エンティティ(オブジェクト）を作成 camera.addComponent(“camera”, {clearColor: new pc.Color(0.5, 0.5, 0.5)}); // 「camera」コンポーネントを追加 const light = new pc.Entity(“light”); // ライト エンティティ(オブジェクト）を作成 light.addComponent(“light”); // 「light」コンポーネントを追加 app.root.addChild(camera); // シーンにカメラエンティティを追加 app.root.addChild(light); // シーンにライトエンティティを追加 const cube = new pc.Entity(“cube”); // キューブ エンティティ(オブジェクト）を作成 cube.addComponent(“render”, {type: “box”}}); // 「render」コンポーネントを追加 app.root.addChild(cube); // シーンにキューブのエンティティを追加 PlayCanvas EngineでHello, World ! （デモ 2 )表⽰されるキューブの数を増やす このコードではキューブが１つシーンに表⽰される const SIZE = 10; for (const index = 0; index < SIZE * SIZE ; index++) { // 10 x 10のキューブを⽣成するためのループ処理 const x = 2 * (index % SIZE) - SIZE; // xの位置を計算 const z = 2 * Math.floor( index / SIZE) - SIZE; // yの位置を計算 const cube= new pc.Entity(); // 新しいキューブエンティティを作成 cube .addComponent(“render”, { type: “box” }); // ボックス型のレンダリングコンポーネントを追加 cube .translate(x, -1.5, z); // キューブの位置を設定 app.root.addChild(cube ); // キューブをシーンに追加 }
11. 2023/10/18 PWA Night vol.56 〜WebXR〜 PlayCanvas エンジンの使い⽅ 11
 http://playcanvas.github.io/ 他にもサンプル集として100個以上のサンプルが公開されています。
12. 2023/10/18 PWA Night vol.56 〜WebXR〜 PlayCanvas エディター (開発ツール)について 12
 ウェブ上で完結する開発環境 開発から公開までをウェブ上で⾏うことができる PlayCanvas（WebGL)の開発環境です。 公式サイトから( https://playcanvas.jp)登録して利⽤できま す。 基本的に無料で利⽤可能ですが主にプライベートのプロジェク トを利⽤する場合に有償プランが必要です。 特徴 • 3Dモデル(fbx, obj, glb)のインポート • バージョン管理機能 • JavaScriptのコードエディター • リアルタイムに同期される開発環境と実⾏画⾯ キューブが配置されたシーンをエディターで再現したエディター画⾯ 3Dモデルをインポートして編集中のエディター画⾯
13. 2023/10/18 PWA Night vol.56 〜WebXR〜 13
 PlayCanvas エディターを使ったプロジェクト作成⽅法
14. 2023/10/18 PWA Night vol.56 〜WebXR〜 PlayCanvas エディターを使ったプロジェクト作成⽅法 14
 • アカウントの登録 〜 プロジェクトの作成 • プロジェクトを作成してシーンの編集 • コーディング • 公開 初めてPlayCanvasでプロジェクトを作成し公開をする流れを紹介します。 これが開発の基本的な流れとなります。
15. 2023/10/18 PWA Night vol.56 〜WebXR〜 プロジェクトの作成 ウェブ上の管理画⾯からプロジェクトの新規作成を⾏います。 アカウントの登録 〜 プロジェクトの作成 15
 アカウントの登録 「公式サイト」からアカウントの登録を⾏います。
16. 2023/10/18 PWA Night vol.56 〜WebXR〜 プロジェクト 〜 シーンの編集 16
 作成された新規プロジェクト 「▶ Launch」ボタンからシーンを起動できます。 起動されたシーン 起動されたシーンはエディターに設置されたカメラを元にシーンが表⽰されます。
17. 2023/10/18 PWA Night vol.56 〜WebXR〜 ヒエラルキーの編集 エンティティの「削除」「追加」などがサイドバーのヒエラルキーから編集ができま す。 コンポーネントの追加 右側の「インスペクター」から「スクリプト」などのコンポーネントが追加ができま す。 3Dモデルの作成 & 3Dモデルのエクスポート 17

18. 2023/10/18 PWA Night vol.56 〜WebXR〜 コードの編集 付属のコードエディターでコードの編集ができます 3Dモデルの作成 & 3Dモデルのエクスポート 18
 コードの実⾏ ウェブページを再読み込みすることでコードの実⾏ができます。
19. 2023/10/18 PWA Night vol.56 〜WebXR〜 19
 プロジェクトを公開する⽅法
20. 2023/10/18 PWA Night vol.56 〜WebXR〜 20

21. 2023/10/18 PWA Night vol.56 〜WebXR〜 21

22. 2023/10/18 PWA Night vol.56 〜WebXR〜 22

23. 2023/10/18 PWA Night vol.56 〜WebXR〜 23
 PlayCanvasエンジンとPlayCanvasエディターの違い
24. 2023/10/18 PWA Night vol.56 〜WebXR〜 PlayCanvasエンジンとPlayCanvasエディターの違い • PlayCanvasエンジン単体では、Three.jsやBabylon.jsなどのWebGLライブラリと似た利⽤ができます。 • エディターはプロジェクトの作成から公開までをすべてクラウド上で⾏えます。 また、複数⼈でのチーム開発時に同時編集などができます。 • 基本的にPlayCanvasを使う場合にはエディターを使う場合が多いです。 24

25. 2023/10/18 PWA Night vol.56 〜WebXR〜 PlayCanvasでのWebXR 25
 1. ARのセッションを開始するには PlayCanvasはWebXR Device APIを利⽤してARやVRアプリケーションを作成できます。APIはCameraコンポー ネントまたはXrManagerにあり、セッションを開始するにはstartXrメソッドを使⽤してパラメータを指定しま す。 startXrの第⼆引数はXRの体験の種類によって変わります。 2. VRのセッションを開始するには entity.camera.startXr(pc.XRTYPE_VR, pc.XRSPACE_VIEWER); entity.camera.startXr(pc.XRTYPE_AR, pc.XRSPACE_LOCALFLOOR); XRの体験 説明 第⼆引数の「XRSPACE」 座っているとき Google Cardboardなど ユーザーがほぼ静⽌した状態で体験 pc.XRSPACE_LOCAL, pc.XRSPACE_LOCALFLOOR 動き回るとき Oculus QuestやHTC Viveなどのデバイス 原点の位置から動く場合 pc.XRSPACE_LOCALFLOOR, pc.XRSPACE_BOUNDEDFLO OR, pc.XRSPACE_UNBOUNDED モバイル AR カメラ上にレンダリングを合成する pc.XRSPACE_VIEWER XRの体験とXRSPACEの関係
26. 2023/10/18 PWA Night vol.56 〜WebXR〜 PlayCanvasでのモバイルAR 26
 3つのARのテンプレートがあります。 - WebXR AR Starter Kit WebXR Device APIを利⽤したテンプレート - 8thwall 8thwallというライブラリを利⽤したテンプレート - Zapper AR PlayCanvasの開発段階では登録不要で開発ができます PlayCanvasのプロジェクト新規作成の画⾯
27. 2023/10/18 PWA Night vol.56 〜WebXR〜 Zapper ARのプロジェクトの初期画⾯ Zapper ARを利⽤したモバイルでのAR 27
 1. インスタントワールドトラッキング 2. イメージトラッキング 3. フェイストラッキング プロジェクトを起動をするとこのようなロケットが表⽰されているような画⾯になっています。 このプロジェクトでは、下記のARの機能を作ることに適しています。 テンプレートというオブジェクトをまとめるPlayCanvasの機能で それぞれのARの機能がまとまって⼊っているプロジェクトです。
28. 2023/10/18 PWA Night vol.56 〜WebXR〜 1. インスタントワールドトラッキング 28
 インスタントワールドトラッキングは、イメージやマーカーを 使わずに、3Dモデルやアニメーションキャラクターをリアル ワールドの特定の場所に配置する技術です。 インスタント ワールド トラッキングは、現実世界にキャラク ターを配置したり、3D オブジェクトを単純に視覚化したりする 場合に最適です。 インスタントワールドトラッキング (WebAR) ZapWorks URL https://playcanv.as/e/p/DzNcn2QV/ インスタントワールドトラッキング Zapper ARのプロジェクトの初期画⾯
29. 2023/10/18 PWA Night vol.56 〜WebXR〜 1. インスタントワールドトラッキング 29
 URL https://playcanv.as/e/p/DzNcn2QV/ インスタントワールドトラッキング Zapper ARのプロジェクトのデモ
30. 2023/10/18 PWA Night vol.56 〜WebXR〜 1. インスタントワールドトラッキング マテリアルの変更 30
 URL https://playcanv.as/e/p/DzNcn2QV/ インスタントワールドトラッキング Zapper ARのプロジェクトのデモ 2
31. 2023/10/18 PWA Night vol.56 〜WebXR〜 URL https://playcanv.as/e/b/02007043 イメージトラッキング 2. イメージトラッキング 31
 イメージトラッキングは、3D空間で平⾯画像を検出‧追跡する 技術で、名刺、ポスター、雑誌のページなどにコンテンツを拡 張するのに適しています。 イメージトラッキングのデモプロジェクト
32. 2023/10/18 PWA Night vol.56 〜WebXR〜 32
 2. イメージトラッキング URL https://playcanv.as/e/b/02007043 イメージトラッキング イメージトラッキングのデモ
33. 2023/10/18 PWA Night vol.56 〜WebXR〜 33
 マーカー（この画像を読み取れます） 2. イメージトラッキング URL https://playcanv.as/e/b/02007043 イメージトラッキング
34. 2023/10/18 PWA Night vol.56 〜WebXR〜 URL https://playcanv.as/e/p/tKBjGCxE/ フェイストラッキング 3. フェイストラッキング 34
 Universal AR Face Trackingは、ユーザーの顔を検出‧追跡する 技術です。Zapparのライブラリを使⽤すると、顔に3Dオブジェ クトを貼り付けたり、顔の動きや表情に応じて3Dメッシュを調 整したりすることが可能です。これにより、ARでの帽⼦や眼鏡 の試着、バーチャルフェイスペイントなどの体験が提供できま す。 フェイストラッキング (WebAR) ZapWorks フェイストラッキングのデモプロジェクト モデルデータ: ハオラン-HAOLAN https://booth.pm/ja/items/3818504
35. 2023/10/18 PWA Night vol.56 〜WebXR〜 3. フェイストラッキング 35
 URL https://playcanv.as/e/p/tKBjGCxE/ フェイストラッキング モデルデータ: ハオラン-HAOLAN https://booth.pm/ja/items/3818504 フェイストラッキングのデモ
36. 2023/10/18 PWA Night vol.56 〜WebXR〜 URL https://playcanv.as/e/p/MsNYkGDF/ フェイスペイント 36
 3. フェイストラッキング - フェイスペイント フェイスペイントのデモプロジェクト
37. 2023/10/18 PWA Night vol.56 〜WebXR〜 37
 3. フェイストラッキング - フェイスペイント URL https://playcanv.as/e/p/MsNYkGDF/ フェイスペイント フェイスペイントのデモ
38. 2023/10/18 PWA Night vol.56 〜WebXR〜 モバイルでのWebXR (AR)まとめ その他の各テンプレートについてのまとめはこちらとなります。 PlayCanvas以外のライブラリ ( Three.js / Babylon.js) にも対応をしているのでお試しください！ 38
 テンプレート モバイルの対応状況 備考 WebXR AR Starter Kit Android ( Meta Questなど ) Zappar AR Android / iOS対応 PlayCanvasの開発段階では APIキーは不要で開発ができます。 8thwall Android / iOS対応 PlayCanvasでの開発段階から ⽉額99$プランが必要
39. 2023/10/18 PWA Night vol.56 〜WebXR〜 WebXR (VR)のシーンを作る - PlayCanvasの紹介 - PlayCanvas エンジン (OSS )について - PlayCanvas エディター (開発ツール)について - PlayCanvasでのWebXR - WebXR (AR)を利⽤したデモの紹介 - WebXR (VR)のシーンを作る - エミュレーター「Immersive Web Emulator」の紹介 - WebXR (VR)のワールド（シーン）の作成⽅法 - まとめ 39

40. 2023/10/18 PWA Night vol.56 〜WebXR〜 エミュレーター「Immersive Web Emulator」の紹介 40
 Google Chromeの拡張機能「Immersive Web Emulator」を インストールすることで、「Quest3」や「Quest 2」に対応し たエミュレーターを実⾏することができます。 ヘッドマウントディスプレイの位置を調整したり、ハンドト ラッキングやコントローラーでの切り替えができます。 この拡張機能を⼊れることで、WebXRに対応をしていないと ⾒れないウェブページも⾒ることができるようになります。
41. 2023/10/18 PWA Night vol.56 〜WebXR〜 PlayCanvasでVRの開発を始める 41
 - VR Kit テンプレートプロジェクト、 簡単なWebXR (VR) のシーンの構築ができます。 - VR Interaction Framework 次のページで紹介 - Web VR Template このあとのページで紹介 今回はこちらを使って作る⽅法を紹介します。
42. 2023/10/18 PWA Night vol.56 〜WebXR〜 PlayCanvasでVR開発をするためのおすすめのフレームワーク 42
 - VR Interaction Framework Daniel Yuさんが作成した「VR Interaction Framework」 - シンプルかつ軽量でありながら、オブジェクトの操作、ドアや 引き出しの開閉、鍵を使ったロックの解除など、リアルタイム でのインタラクティブなアクションをサポートしています。 - VRに馴染みがある⼈は直感的に操作ができます。作者が情報を Publicで公開をしてくれていますため拡張も容易です。 URL https://playcanv.as/p/E2ZqRBfZ/ VR Interaction Framework
43. 2023/10/18 PWA Night vol.56 〜WebXR〜 URL https://playcanv.as/p/2lE3DDTD/ Web VR Template PlayCanvasでVR開発をするためのおすすめのフレームワーク 43
 - Web VR Template はが (@mxcn3)の作成中のテンプレート、デスクトップ / モバイ ル / VRの端末でアクセスをしたときそれぞれに適したコント ロールができるようにしているテンプレートです。
44. 2023/10/18 PWA Night vol.56 〜WebXR〜 44
 WebXR (VR )のシーン（ワールド）を作る流れ
45. 2023/10/18 PWA Night vol.56 〜WebXR〜 WebXR (VR )のシーン（ワールド）を作る流れ 45
 1. 3Dモデルの作成 & 3Dモデルのエクスポート 2. PlayCanvasプロジェクトの作成 & 3Dモデルのインポート 3. Quest3のブラウザで実⾏ PlayCanvasでWebXR開発を進める基本的な流れを含めて紹介をします。 3Dのメッシュのデータを元にシーンを構築して Quest 3で実⾏する流れとなります。
46. 2023/10/18 PWA Night vol.56 〜WebXR〜 1. 3Dモデルの作成 & 3Dモデルのエクスポート 46
 3Dモデルの作成 対応しているマテリアル（⾊ / テクスチャ）を そのままPlayCanvas上に持っていくことができます。 3Dモデルのエクスポート モデルデータは「fbx」または、「glTF / glb」 形式でエクスポートをします。 ※ 現在推奨されているのは、glTF / glbとなります。 アニメーションのデータなどもインポート可能です。
47. 2023/10/18 PWA Night vol.56 〜WebXR〜 3Dモデルのインポート & シーンの調整 Blenderでエクスポートしたモデルデータ ( .glb)をシーン上にドラッグアンドドロップ します。モデルデータがマテリアルを引き継いだ状態で反映されます。 2. PlayCanvasプロジェクトの作成 & 3Dモデルのインポート 47
 テンプレートプロジェクトを元に作成 PlayCanvasではパブリックのプロジェクトとプライベートのプロジェクトがあり、 パブリックのプロジェクトは「フォーク」としてプロジェクトを元に新規にプロジェク トが作成できます。今回は「Web VR Template」を元に作成します。
48. 2023/10/18 PWA Night vol.56 〜WebXR〜 48
 実機でPlayCanvasにログイン（例: Quest 3) PlayCanvasはブラウザ上で動くゲームエンジン（開発環境）のためQuest Browserか らログインができます。そのままゲームの起動や簡単なデバッグなどは可能です。 プロジェクトの実⾏ これでVRのプロジェクトの起動ができます。 修正が必要な場合には、Questで編集をするかパソコンでシーンを編集します。 3. Quest3のブラウザで実⾏
49. 2023/10/18 PWA Night vol.56 〜WebXR〜 3. Quest3のブラウザで実⾏ 49
 実機でPlayCanvasにログイン（例: Quest 3) PlayCanvasはブラウザ上で動くゲームエンジン（開発環境）のためQuest Browserか らログインができます。そのままゲームの起動や簡単なデバッグなどは可能です。 プロジェクトの実⾏ これでVRのプロジェクトの起動ができます。修正が必要な場合には、Questで編集をす るか、パソコンでシーンを編集します。
50. 2023/10/18 PWA Night vol.56 〜WebXR〜 ※ シーンの調整 50
 エディターでパーティクルの設定などの調整ができます。 「パーティクル」や「マテリアル」「オブジェクト」の位置の調整などができます。 パーティクル設定後の実⾏画⾯ パーティクルの設定などについては設定後、リロードなど無しで実⾏画⾯に反映されま す。 このように実機で⾒ながらシーンの調整などができます。
51. 2023/10/18 PWA Night vol.56 〜WebXR〜 ヘッドマウントディスプレイを使ったAR ( パススルー ) 51
 Questのパススルー表⽰についてもPlayCanvasのカメラコンポーネントを利⽤して、ARのセッションを始める ことができます。startXrの実⾏と、カメラの設定をすることでパススルーの実装ができます。 1. ユーザーの⼊⼒からARセッションを開始する this.button.element.on(“click”, () => { // ARのサポートをしているかのチェック if(this.app.xr.isAvailable(pc.XRTYPE_AR)){ // カメラ(“Camera”)のエンティティをスクリプトから取得 const cameraEntity = pc.app.root.findByName(“Camera”) // ARのセッションを開始 cameraEntity.camera.startXr(pc.XRTYPE_AR, pc.XRSPACE_LOCALFLOOR); } }, this); 2.カメラのクリアカラーの設定（アルファを０に設定）
52. 2023/10/18 PWA Night vol.56 〜WebXR〜 ヘッドマウントディスプレイを使ったAR ( パススルー ) 52
 Questのパススルー表⽰についてもPlayCanvasのカメラコンポーネントを利⽤して、ARのセッションを始める ことができます。startXrの実⾏と、カメラの設定をすることでパススルーの実装ができます。 1. ユーザーの⼊⼒からARセッションを開始する this.button.element.on(“click”, () => { // ARのサポートをしているかのチェック if(this.app.xr.isAvailable(pc.XRTYPE_AR)){ // カメラ(“Camera”)のエンティティをスクリプトから取得 const cameraEntity = pc.app.root.findByName(“Camera”) // ARのセッションを開始 cameraEntity.camera.startXr(pc.XRTYPE_AR, pc.XRSPACE_LOCALFLOOR); } }, this); 2.カメラのクリアカラーの設定（アルファを０に設定）
53. 2023/10/18 PWA Night vol.56 〜WebXR〜 WebXR AR Hit Test 「WebXR Hit Test API」を利⽤して現実の対象物（床など）の位置にレイキャストして ヒットした部分に草を⽣やすようなデモとなります。 WebXR AR Raycasting Shapes コントローラー / ハンドトラッキングの⼊⼒がAR表⽰されている対象物に対してひっと をしていたか検出ができます。 ヘッドマウントディスプレイを使ったAR ( パススルー ) 53

54. 2023/10/18 PWA Night vol.56 〜WebXR〜 WebXR AR Hit Test 「WebXR Hit Test API」を利⽤して現実の対象物（床など）の位置にレイキャストして ヒットした部分に草を⽣やすようなデモとなります。 WebXR AR Raycasting Shapes コントローラー / ハンドトラッキングの⼊⼒がAR表⽰されている対象物に対してひっと をしていたか検出ができます。 ヘッドマウントディスプレイを使ったAR ( パススルー ) 54

55. 2023/10/18 PWA Night vol.56 〜WebXR〜 まとめ / 補⾜ 55
 • 現状、PlayCanvasでモバイルのWebARを開発する場合には、Android / iOSに対応するためには ライブラリを使う⽅法も考えられます。 • VRの開発に関しては、エミュレーターを⼊れることで実機が無くても開発ができます。 実機がある場合には実機側でログインをして簡単な編集などができます。 • テンプレートなどを使って作る⽅法を紹介をしましたが、１から作ることもできます。 また、テンプレートの中⾝のコードはすべて読めるので参考にしてコードを書くことができます。
56. 2023/10/18 PWA Night vol.56 〜WebXR〜 PlayCanvasの情報について 56
 それぞれマニュアルやフォーラムでもPlayCanvasに関する情報が⼊⼿できますので 開発にあたってはこちらもご覧ください！Slackコミュニティなどもありますのでぜひご参加ください。 APIリファレンス https://developer.playcanvas.com/en/api/ ユーザーマニュアル（⽇本語化されました🎉） https://developer.playcanvas.com/ja/user-manual/ チュートリアル https://developer.playcanvas.com/ja/tutorials/ フォーラム https://forum.playcanvas.com/ Slackコミュニティ https://playcanvas.jp/joincommunity/