はじめに
PlayCanvasでWebARを利用するためのライブラリとしてZap Worksを利用してみました。
使い方について紹介致します。
PlayCanvasについて
PlayCanvasはJavaScriptで記述されたWebGLのエンジンで、最近GitHubのスター数が7000を超えました。SaaS型のエディターを兼ね備えているゲームエンジンです。engineについては主にSnapのメンバーWill Eastcottを中心にOSSとして公開及び継続的に開発が進められています。Engine単体として利用する場合には、Three.js, Babylon.jsなどのWebGLライブラリと似た使い方を使用することができます。またビジュアルエディターとコードエディターが存在しており。エディターはクラウド上でプロジェクトの作成から公開までが出来ます。FBXやOBJといった3Dモデルの素材については、ブラウザへドラッグアンドドロップをすることでGUIから操作・配置ができるエディターがあります。
Zap Worksについて
Zappar社の提供しているサービスです。Zap WorksのUnivarsal ARはFace Tracking, Image Tracking, World Trackingの機能を持っているSDKです。PlayCanvasの他にもThree.js, A-frame, JavaScript, Unity, React-Three.js, Babylong.jsに対応しており、それぞれドキュメントが公開されています。
https://docs.zap.works/universal-ar/
プランはStarter,Pro,Enterpriseのプランがあります。また商用利用ではない場合は利用できるHobbyプランがあります。今回はホビープランを利用してプロジェクトを作成します。
1. 公式サイトから登録
2. Download & SDKsから「SDK for PlayCanvas」をクリック
PlayCanvasのアカウントをまだ登録されていない方はこちらから登録してください。
※PlayCanvasに登録（PlayCanvasアカウントがない方)
現在PlayCanvasにのアカウントが無い場合には公式サイトからPlayCanvasのアカウントを登録します。
3. 「Open on PlayCanvas」を選択
4. Forkボタンをクリック
Open on PlayCanvasをクリックするとPlayCanvasのプロジェクトページが開かれます。
このプロジェクトは元となるプロジェクトですのでForkボタンを押してプロジェクトを自分で編集できるようにします。
5. プロジェクト名を入力
プロジェクト名は好きな名前を入力してください。今回は「WebAR」と入力します。
6. エディターを開く
プロジェクトをフォークした後のページで「EDITOR」ボタンをクリックしてプロジェクトを開きます。
シーン「Untitled」というシーンがデフォルトでありますのでこちらをクリックしてシーンを開きます。
7. プロジェクトについて
これでシーンが開かれました。
最初は「Face Tracking」のデモがシーン上に配置されています。この配置されているエンティティ（Face Tracking)は、テンプレート化されており、Assets内にあるものをシーン上に配置することが出来ます。
Assetsには「ASSET」 -> 「Zapper」 -> 「Templates」の中に、他にも「Instant Tracking(World Tracking」 / 「Image Tracking」のテンプレートが存在しています。これらのテンプレートはドラッグアンドドロップでPlayCanvasシーン上に配置できます。
8. 起動
現在のプロジェクトはこちらから起動できます。
起動するには「Launch」をクリックします。
初期設定の「Face Tracking」について
動作確認用プロジェクトURL: https://playcanv.as/p/0oPMgSY5/
Face Trackingを実行するとこちらで公開されているようなシーンとなります。
22:40よりデモ
また、こちらのプロジェクトはパソコン及びスマートフォンで動作することが確認できました。
スマートフォンでの確認にはQRコード作成器などの拡張機能を入れておくと簡単に起動できるようになります。
Instant Tracking
動作確認用プロジェクトURL: https://playcanv.as/p/j5WoLR6V/
Face Trackingの設定が初期では配置されておりましたが、次にマーカーレスで空間に配置するためのInstant Trackingのテンプレートを利用する方法を紹介します。
こちらを利用するにはまずFace Trackingのエンティティを削除します。
エンティティを削除
Face Trackingのエンティティを右クリックから「DELETE」を選択して削除
テンプレートを配置
「Instant Tracking」のテンプレートをAssetから選択して配置します。
これで配置ができました。
起動
「Launch」を押して起動します。
起動されたプロジェクトについて
これで「Launch」できました。プロジェクト内のエンティティ（Box）が配置されることが確認できます。
また、「Tap to place」をクリックすると位置がリセットされます。
Image Tracking
動作確認用プロジェクトURL: https://playcanv.as/p/pR3jdBQN/
Image Trackingのテンプレートでは、任意の画像を利用してマーカー化する事ができます。
先程と同様に、Instant Trackingを削除し、テンプレートからImage Trackingをドラックアンドドロップをします。
Image Trackingを配置
表示するモデルを配置
Image Tracking内に表示するモデルを配置します。
今回は、プリミティブののBoxを右クリックー＞ New Entity ー＞ Boxから配置します。
起動
Launchを押して起動します。
マーカーを確認
起動後はカメラの権限を許可した後こちらの画像（マーカー）をにカメラかざすとエンティティが表示されます。
マーカーを自作する方法
今回デフォルトで設定されているマーカーはexample-tracking-image.zptが設定されています。
マーカー(zpt)ファイルを画像から生成するにはnpmで公開されている、@zappar/zapworks-cliを利用します。
1. インストール
npm i -g @zappar/zapworks-cli
2.画像をマーカー化
zapworks train myImage.png #myImage.pngをマーカー化
3. PlayCanvasへアップロード
zptファイルが生成されるのでそのファイルをPlayCanvasへアップロードします。
4.エンティティへ設定
PlayCanvasにアップロードしたzptファイルをImage Trackerエンティティに設定されているzapperImageTrackerにドラックアンドドロップをしてファイルを置き換えます。
これで起動をすると新しいマーカーでWebARが利用できるようになっているかと思います。