Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
PlayCanvasで XRコンテンツ開発体験 [2023/09/28]
Search
PlayCanvas運営事務局
September 28, 2023
Programming
0
150
PlayCanvasで XRコンテンツ開発体験 [2023/09/28]
PlayCanvas運営事務局
September 28, 2023
Tweet
Share
More Decks by PlayCanvas運営事務局
See All by PlayCanvas運営事務局
PlayCanvas で作るバーチャルショールーム
playcanvasjp
0
290
PlayCanvasで作るバーチャルコンテンツの紹介
playcanvasjp
0
190
Other Decks in Programming
See All in Programming
生成AIで加速するテスト実装 - ロリポップ for Gamersの事例と 生成AIエディタの活用
kinosuke01
0
130
推しメソッドsource_locationのしくみを探る - はじめてRubyのコードを読んでみた
nobu09
2
340
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
240
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
9
2.5k
AWS Step Functions は CDK で書こう!
konokenj
4
620
はじめての Go * WASM *OCR
sgash708
1
110
ABEMA iOS 大規模プロジェクトにおける段階的な技術刷新 / ABEMA iOS Technology Upgrade
akkyie
1
220
PEPCは何を変えようとしていたのか
ken7253
3
290
クリーンアーキテクチャから見る依存の向きの大切さ
shimabox
5
1.1k
ナレッジイネイブリングにAIを活用してみる ゆるSRE勉強会 #9
nealle
0
160
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
230
LINE messaging APIを使ってGoogleカレンダーと連携した予約ツールを作ってみた
takumakoike
0
120
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
91
5.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
11
1.3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Building Your Own Lightsaber
phodgson
104
6.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The World Runs on Bad Software
bkeepers
PRO
67
11k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
The Cult of Friendly URLs
andyhume
78
6.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Transcript
PlayCanvasで XRコンテンツ開発体験 2023/09/28 PlayCanvas運営事務局 城⼾‧津⽥
PlayCanvasとは Webブラウザ向けに作られた WebGL/HTML5ゲームエンジン • オープンソース(MIT) • 制作したコンテンツはブラウザ上で動作 • 閲覧するのに特別なアプリは必要なし •
開発はブラウザ完結、環境構築の必要もなし • コーディングに使うのはJavaScript ゲーム、産業、建築など幅広く活⽤されています
PlayCanvas運営事務局とは ⽇本独占代理店としてPlayCanvasの販売 また、⽇本国内でのPlayCanvasの普及を⽬的に活動しています。 お問い合わせによるテクニカルサポートや開発‧運⽤‧新着情報などあらゆる知 ⾒や情報をヘルプセンターやSNSで共有をおこなっています。 お問い合わせ: https://playcanvas.jp/contact/ ヘルプセンター: https://support.playcanvas.jp/hc/ja/
登壇者 / ⾃⼰紹介 • 城⼾ 雄⼤ ◦ Webエンジニア / CRE
• 津⽥ 良太郎 ◦ 事業責任者
今回のハンズオン PlayCanvasで XRコンテンツ開発を体験してみましょう! 1. テンプレートについて 2. プロジェクト準備 2.1. Zap Worksの準備
2.2. スターターキットについて 3. ZapWorksの機能を体験 3.1. Face Tracking 3.2. Instant Tracking 3.3. Image Tracking
XR(VR/AR)プロジェクトを作成するには 4つのプロジェクトが選択できます • VR Kit • WebXR AR Starter Kit
これら2つは WebXR は iOS 未対応 • 8th Wall AR World Tracking ◦ 8th Wallの有償プラン必要 • Zapper AR Instant Tracked ◦ セルフホスティング時にEnterprise必要 これら2つは iOS / Andorid に対応 1.テンプレートについて
• 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. プロジェクト準備
ZapWorksにアクセスします → https://zap.works/ • Loginをクリック アカウントを作成していない場合は 新規アカウントを作成します 2.1 Zap Worksの準備
1. ZapWorksのプロジェクトページからDownloads & SDKsをクリック 2. SDK for PlayCanvasを選択 2.1 Zap
Worksの準備 Downloads & SDK ページを開く SDK for PlayCanvasを選択
1. Open on PlayCanvas をクリック 2.1 Zap Worksの準備
1. Zapperが所有するプロジェクトにアクセスしたら、Forkします 2. ForkしたらEditorをクリックしてエディター画⾯に進みます 2.1 Zap Worksの準備
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
ASSETSにはSDKのTrackingテンプレートが⽤意されています 2.2 スターターキットについて
Launch をクリックし、実⾏します 3. ZapWorksの機能を体験
カメラアクセスの権限を付与し、実⾏ 3.1 Face Tracking
新規シーンを作成するために、Manage Sceneを開く 3.2 Instant Tracking
Duplicate Sceneをクリックし、シーンを複製作成できたら複製したシーンをクリック 3.2 Instant Tracking
Face Tracking は削除します 3.2 Instant Tracking
ASSETSから Instant Tracking のテンプレートをドラッグ&ドロップ 3.2 Instant Tracking
Launchで実⾏します 3.2 Instant Tracking
QR先はLaunchの実⾏URLのためPlayCanvasにログインが必要です。 Publishすればログインせずに実⾏することができます。 3.2 Instant Tracking
先と同様にシーンを複製し、Image Tracking のテンプレートを追加します 3.3 Image Tracking
Image TrackingにBoxを追加しておきます。 画像を読み込んだ時に表⽰するエンティティを設定しています。 3.3 Image Tracking
LaunchするとPCで起動してしまうので、CameraエンティティのzapparBrowserUtilのMobile Onlyに チェックを⼊れます。 3.3 Image Tracking
LaunchするとQRコードが表⽰されるのでスマホで読み込み、以下の画像を映すとBoxが表⽰されます。 3.3 Image Tracking
マーカーとなる画像はマーカー(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(補⾜)
PlayCanvasでのWebXR体験 PlayCanvasの新規テンプレートからでもほぼ同じプロジェクトから始められます ぜひ体験ください!
ARだけじゃないPlayCanvas 津⽥
ここまでWebARがメインでしたが、、、、 皆さんが知りたいのはVRですよね?
WebXR Device APIを利⽤可能
None
None
None
気になるのは対応状況ですよね
WebXR Device APIの対応状況 微妙...
ですが朗報です!
None
対応!
None
Meta Quest ブラウザが対応してるから 多分対応!
WebXRアプリならではのメリット インストール不要 ストアへの出展審査など不要 APIはオープン(特別なSDKは不要) → すぐ作れる!すぐ公開できる!
まとめ PlayCanvasでWebXRアプリを作って 誰よりも早くVision ProやMeta Quest 3で動かそう