8th Wallで始めるインストール不要なWebAR開発【PlayCanvas】

# <font color="OrangeRed">**8th Wallとは**</font>
[8th Wall ](https://www.8thwall.com/)というARのライブラリ / プラットフォームをご存知でしょうか？これは、WebARを簡単に行う事ができるようになるもので、世界初のモバイルWeb用のARプラットフォームです。
表面の検出や照明の検出が出来る マーカレス・任意の画像をマーカーとして 使用すること可能です。


## <font color="OrangeRed">**8th Wallで作れるコンテンツ**</font>
サンプル集はGitHubに存在していますが、マーカを使った面白い表現や、オフィス木を生やしたりと面白い表現がいくつかあります。

[https://github.com/8thwall/web](https://github.com/8thwall/web)

![8thwalldemo.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/f067a19a-4ffd-5554-7fe9-fefb8f58377a.png)

<iframe width="560" height="315" src="https://www.youtube.com/embed/G-5ealr3Zi0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

[8th Wall - Products](https://www.8thwall.com/products)をみると各種3D系のフレームワークに対応をしており、

- A-Frame
- three.js
- babylon.js
- Amazon Sumerian
- PlayCanvas

に対応しております。


その中でも今回はPlayCanvasと8th Wallを使ってARのコンテンツを出すための手順を紹介します。

## <font color="OrangeRed">**8th Wallのテンプレートを使用してARコンテンツを動かす**</font>

この章のためには事前に２つのサービスのアカウントを無料登録しておきます。

- [https://playcanvas.jp](https://playcanvas.jp)
- [https://www.8thwall.com/](https://www.8thwall.com/)

#### <font color="OrangeRed">**1. PlayCanvasに登録をしてプロジェクトをフォークする**</font>


PlayCanvasで8th Wallのテンプレートを使用してプロジェクトをフォークします。PlayCanvasにはフォークという機能があり、`Public`かつ`Fork`が可能なプロジェクトに関してはGitHubのようなフォークをすることができます。
今回は`8th Wall`と`PlayCanvas`の開発者が用意しているプロジェクトを使用してARで動くコンテンツを実行していきます。
![fprl](https://user-images.githubusercontent.com/39250588/67825930-d8d5cb00-fac2-11e9-86ad-e32d79ee5694.png)

こちらのうち*AR World Traking Starter Kit*の方を今回使用します。
- [https://playcanvas.com/project/631719](https://playcanvas.com/project/631719)
![8thwall](https://user-images.githubusercontent.com/39250588/67825465-4da80580-fac1-11e9-9d57-e7b48b4a1b1d.png)

#### <font color="OrangeRed">**2. APIキーを設定する**</font>

a. 8th WallのAPIキーを取得
![apikey](https://user-images.githubusercontent.com/39250588/67827246-54d21200-fac7-11e9-9e74-ec107c58f2c5.png)

b. PlayCanvasのSettings → External Scriptsの設定から`????`となっている部分に8th WallのダッシュボードからAPIを取得したものを記入

![2](https://user-images.githubusercontent.com/39250588/67825574-ad9eac00-fac1-11e9-92c0-113595320975.png)

#### <font color="OrangeRed">**3. デバイスの認証をする**</font>

8th Wallのフリープランでは認証した端末のみがARの機能が使えるため、事前に使用するパソコン、スマートフォンのデバイスを8th Wallの管理画面からで認証をします。

*デバイスの認証方法はQRコードを読み取りブラウザでアクセスするだけです*
![3](https://user-images.githubusercontent.com/39250588/67825575-ad9eac00-fac1-11e9-893a-a74a0d12afd2.png)

#### <font color="OrangeRed">**4. PlayCanvasのEditorから起動する**</font>
PlayCanvasの管理画面から起動をします。
![4](https://user-images.githubusercontent.com/39250588/67825609-c60ec680-fac1-11e9-8aaa-71de2bb9884c.png)

#### <font color="OrangeRed">**5. QRコードを読み取る**</font>

このような画面が出てくれば成功です。
![fp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/cbb32c9c-4e2e-d90f-c626-7b374285daf0.png)

PlayCanvasのゲームを実行するとまず最初に8th WallのQRコードが表示されますのでそちらを読み取りスマートフォンで実行します。このときカメラと傾きの情報の取得を求められますが、どちらも許可します。

# <font color="OrangeRed">**おわりに**</font>
ロボットの部分を自分で作ったモデル(OBJ, FBX)などをアップロードをすることで変更できますのでモデルがある方はそちらをアップロードすることで簡単にAR空間上にモデルを出現させることができます。

次に書きますがサイコロを現実世界で投げれるようにするというプロジェクトも作りました。このように8th wallを使用すると、自由にコンテンツを作ることができます。
[ARでサイコロを投げれるプロジェクト - PlayCanvas](https://playcanvas.com/project/646348/overview/arproject)
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">WebARの利点<br> - 花壇でサイコロを投げることが出来る<a href="https://twitter.com/hashtag/playcanvas?src=hash&amp;ref_src=twsrc%5Etfw">#playcanvas</a> <a href="https://twitter.com/hashtag/8thwall?src=hash&amp;ref_src=twsrc%5Etfw">#8thwall</a> <a href="https://t.co/uzQ6TGpQM9">pic.twitter.com/uzQ6TGpQM9</a></p>&mdash; はが (@Mxcn3) <a href="https://twitter.com/Mxcn3/status/1189389334434074624?ref_src=twsrc%5Etfw">October 30, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### 書きました

[ARでサイコロを投げるまで ～Blenderを使って３Ｄモデルの作成~JavaScriptでサイコロを動かす～[PlayCanvas / 8th Wall]](https://qiita.com/yushimatenjin/items/143c0aa22953864fa2fd)

<font color="OrangeRed">
PlayCanvas開発で参考になりそうな記事の一覧です。
</font>
<font color="OrangeRed">
入門

- [PlayCanvas入門- モデルの作成～ゲームに入れ込むまで](https://qiita.com/yushimatenjin/items/2a2c35fe7b1d08f9e361)
- [JavaScriptでスロットを実装する。【PlayCanvas】](https://qiita.com/yushimatenjin/items/e84c42da74df1eb07386)
- [3Dモデルのビューワーを3分で作る【初めてのPlayCanvas】](https://qiita.com/yushimatenjin/items/4b09c9e2076a0b2a6933)
</font>
<font color="OrangeRed">
応用
</font>

- [PlayCanvasのコードエディターでes6に対応する](https://qiita.com/yushimatenjin/items/a61a21c64c1c1a550dd4)
- [Gulpのプラグインを書いたらPlayCanvasでの開発がめちゃくちゃ便利になった](https://qiita.com/yushimatenjin/items/5f0f178e8a4ba4a5ee57)
- [PlayCanvas Editorに外部スクリプトを読み込む新機能が追加されたので開発方法を考える。- Reduxを組み込む](https://qiita.com/yushimatenjin/items/7a64220cceac66843d7d)
</font>
<font color="OrangeRed">
その他の記事はこちらになります。

- [React Native + PlayCanvasを使ってスマートフォンゲームを爆速で生み出す](https://qiita.com/yushimatenjin/items/7c7ad5d35473c11f32f2)
- [PlayCanvasのエディター上でHTML, CSSを組み込む方法](https://qiita.com/yushimatenjin/items/814b4a32db53397219df)
- [【iOS13】新しくなったWebVRの使い方 ](https://qiita.com/yushimatenjin/items/344d86b3d193e0a88567)
</font>

<font color="OrangeRed">
その他関連
- [PlayCanvasタグの付いた記事一覧](https://qiita.com/tags/playcanvas)
</font>