PlayCanvasで XRコンテンツ開発体験 [2023/09/28]

Slide 1

Slide 1 text

PlayCanvasで XRコンテンツ開発体験 2023/09/28 PlayCanvas運営事務局城⼾‧津⽥

Slide 2

Slide 2 text

PlayCanvasとは Webブラウザ向けに作られた WebGL/HTML5ゲームエンジン ● オープンソース（MIT） ● 制作したコンテンツはブラウザ上で動作 ● 閲覧するのに特別なアプリは必要なし ● 開発はブラウザ完結、環境構築の必要もなし ● コーディングに使うのはJavaScript ゲーム、産業、建築など幅広く活⽤されています

Slide 3

Slide 3 text

PlayCanvas運営事務局とは⽇本独占代理店としてPlayCanvasの販売また、⽇本国内でのPlayCanvasの普及を⽬的に活動しています。お問い合わせによるテクニカルサポートや開発‧運⽤‧新着情報などあらゆる知⾒や情報をヘルプセンターやSNSで共有をおこなっています。お問い合わせ: https://playcanvas.jp/contact/ ヘルプセンター: https://support.playcanvas.jp/hc/ja/

Slide 4

Slide 4 text

登壇者 / ⾃⼰紹介 ● 城⼾雄⼤ ○ Webエンジニア / CRE ● 津⽥良太郎 ○ 事業責任者

Slide 5

Slide 5 text

今回のハンズオン PlayCanvasで XRコンテンツ開発を体験してみましょう！ 1. テンプレートについて 2. プロジェクト準備 2.1. Zap Worksの準備 2.2. スターターキットについて 3. ZapWorksの機能を体験 3.1. Face Tracking 3.2. Instant Tracking 3.3. Image Tracking

Slide 6

Slide 6 text

XR(VR/AR)プロジェクトを作成するには４つのプロジェクトが選択できます ● VR Kit ● WebXR AR Starter Kit これら２つは WebXR は iOS 未対応 ● 8th Wall AR World Tracking ○ 8th Wallの有償プラン必要 ● Zapper AR Instant Tracked ○ セルフホスティング時にEnterprise必要これら２つは iOS / Andorid に対応 1.テンプレートについて

Slide 7

Slide 7 text

● Zap Worksとは ○ Zappar社提供のサービス ○ Zap WorksのUnivarsal ARは以下の機能を持っているSDKです ■ Face Tracking ■ Image Tracking ■ World Tracking ○ Universal ARはPlayCanvasの他にも Three.js, A-frame, JavaScript, Unity, Babylon.jsなどに対応しており、それぞれドキュメントが公開されています。 → https://docs.zap.works/universal-ar/ 今回はこのSDKをPlayCanvasで利⽤します。 2. プロジェクト準備

Slide 8

Slide 8 text

ZapWorksにアクセスします → https://zap.works/ ● Loginをクリックアカウントを作成していない場合は新規アカウントを作成します 2.1 Zap Worksの準備

Slide 9

Slide 9 text

1. ZapWorksのプロジェクトページからDownloads & SDKsをクリック 2. SDK for PlayCanvasを選択 2.1 Zap Worksの準備 Downloads & SDK ページを開く SDK for PlayCanvasを選択

Slide 10

Slide 10 text

1. Open on PlayCanvas をクリック 2.1 Zap Worksの準備

Slide 11

Slide 11 text

1. Zapperが所有するプロジェクトにアクセスしたら、Forkします 2. ForkしたらEditorをクリックしてエディター画⾯に進みます 2.1 Zap Worksの準備

Slide 12

Slide 12 text

SETTINGSのEXTERNAL SCRIPTSから2つのSDKがPlayCanvasがロード前に読み込まれています 2.2 スターターキットについて SETTINGSをクリック 2つのSDKが読み込まれています https://libs.zappar.com/zappar-js/2.1.1/zappar.js https://libs.zappar.com/zappar-mobile-only/0.0.2/zappar-mobileonly.js

Slide 13

Slide 13 text

ASSETSにはSDKのTrackingテンプレートが⽤意されています 2.2 スターターキットについて

Slide 14

Slide 14 text

Launch をクリックし、実⾏します 3. ZapWorksの機能を体験

Slide 15

Slide 15 text

カメラアクセスの権限を付与し、実⾏ 3.1 Face Tracking

Slide 16

Slide 16 text

新規シーンを作成するために、Manage Sceneを開く 3.2 Instant Tracking

Slide 17

Slide 17 text

Duplicate Sceneをクリックし、シーンを複製作成できたら複製したシーンをクリック 3.2 Instant Tracking

Slide 18

Slide 18 text

Face Tracking は削除します 3.2 Instant Tracking

Slide 19

Slide 19 text

ASSETSから Instant Tracking のテンプレートをドラッグ&ドロップ 3.2 Instant Tracking

Slide 20

Slide 20 text

Launchで実⾏します 3.2 Instant Tracking

Slide 21

Slide 21 text

QR先はLaunchの実⾏URLのためPlayCanvasにログインが必要です。 Publishすればログインせずに実⾏することができます。 3.2 Instant Tracking

Slide 22

Slide 22 text

先と同様にシーンを複製し、Image Tracking のテンプレートを追加します 3.3 Image Tracking

Slide 23

Slide 23 text

Image TrackingにBoxを追加しておきます。画像を読み込んだ時に表⽰するエンティティを設定しています。 3.3 Image Tracking

Slide 24

Slide 24 text

LaunchするとPCで起動してしまうので、CameraエンティティのzapparBrowserUtilのMobile Onlyにチェックを⼊れます。 3.3 Image Tracking

Slide 25

Slide 25 text

LaunchするとQRコードが表⽰されるのでスマホで読み込み、以下の画像を映すとBoxが表⽰されます。 3.3 Image Tracking

Slide 26

Slide 26 text

マーカーとなる画像はマーカー(zpt)ファイルを設定することで指定することができます。マーカー(zpt)ファイルを⽣成するには、@zappar/zapworks-cli を利⽤します。 ● Node.jsパッケージをインストール　npm i -g @zappar/zapworks-cli　 ● マーカー化する画像を⽤意したら以下を実⾏　zapworks train myImage.png #myImage.pngを.zptに変換　 ● ASSETSにアップロードして .zpt を差し替え Image Trackerのスクリプト属性で読み込む 3.3 Image Tracking（補⾜）

Slide 27

Slide 27 text

PlayCanvasでのWebXR体験 PlayCanvasの新規テンプレートからでもほぼ同じプロジェクトから始められますぜひ体験ください！

Slide 28

Slide 28 text

ARだけじゃないPlayCanvas 津⽥

Slide 29

Slide 29 text

ここまでWebARがメインでしたが、、、、皆さんが知りたいのはVRですよね？

Slide 30

Slide 30 text

WebXR Device APIを利⽤可能

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

気になるのは対応状況ですよね

Slide 35

Slide 35 text

WebXR Device APIの対応状況微妙...

Slide 36

Slide 36 text

ですが朗報です！

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

対応！

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

Meta Quest ブラウザが対応してるから多分対応！

Slide 41

Slide 41 text

WebXRアプリならではのメリットインストール不要ストアへの出展審査など不要 APIはオープン（特別なSDKは不要） → すぐ作れる！すぐ公開できる！

Slide 42

Slide 42 text

まとめ PlayCanvasでWebXRアプリを作って誰よりも早くVision ProやMeta Quest 3で動かそう