WebXR AR Paint その１

# はじめに

完走できるか割と怪しい[Three.js Advent Calendar](https://qiita.com/advent-calendar/2019/threejs)、初日はひとまず先月末に公開された[Three.js r111](https://github.com/mrdoob/three.js/releases/tag/r111)に追加された新しいサンプル、[WebXR AR Paint](https://threejs.org/examples/webxr_ar_paint.html)を紹介し
てお茶を濁そうと思い
ます。いや、手を抜いているわけではなくて、最初のエントリでハードルを下げることで参加しやすくしようという深遠な理由があるんですよ、ホントに。

# WebXR AR Paint

WebXR AR PaintはARで空間上に線が描けるウェブアプリです。[ARCore](https://developers.google.com/ar)が公開されたときに[Just a Line](https://play.google.com/store/apps/details?id=com.arexperiments.justaline&hl=ja)というサンプルアプリも公開されましたが、同じようなアプリをウェブ技術だけで作成できるのはなかなか感動的ですね。（Just a Lineのように空間共有はできませんが）

<a href="ttps://www.youtube.com/embed/M5zxNMAQVR0" target="_blank"><img width="400" alt="スクリーンショット 2019-12-01 21.16.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8717/141b4184-a919-0440-dd11-06a8e80d8366.png"></a>

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

# 事前準備

それでは早速サンプルを試してみましょう。実際に動作を確認するにはバージョン80以上のARフラグを有効にしたモバイル版のChromeが必要です。つまり、ARCoreの利用できるそこそこ新しいモバイル端末とChrome Canary for Androidを用意して事前にフラグを有効にしておかなければいけません。

[Chrome Canary](https://play.google.com/store/apps/details?id=com.chrome.canary&hl=ja)はGoogle Chromeにもうすぐ搭載される機能を一足先に利用できる試験運用版です。もしまだインストールしていなければGoogle Playからインストールしてください。

ChromeのARフラグを有効にするには`chrome://flags`を開き、`WebXR AR`などで検索して、「WebXR AR Module」という項目を「Enabled」にします。設定変更後はブラウザの再起動が必要です。[WebXR AR Module](https://immersive-web.github.io/webxr-ar-module/)は[WebXR Device API](https://www.w3.org/TR/webxr/)の追加仕様で、この仕様をサポートしているブラウザはXRセッションで実際の周囲の環境の上に表示を重ねる`"immersive-ar"`モードが利用できます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8717/b4aa91e0-9a8b-b809-82da-b28d4de1aff5.png" width="400px" />

# 試してみる

Chrome Canary for Androidで[https://threejs.org/examples/webxr_ar_paint.html](https://threejs.org/examples/webxr_ar_paint.html)を開いてください。準備がただしくできていれば画面下方に「START AR」というボタンが表示されているはずです。ボタンが表示されない場合や、「WEBXR NOT AVAILABLE」というボタンが表示されている場合は準備になにか問題があります。一つ前のセクションの内容をもう一度確認してください。

「START AR」ボタンをタップするとダイアログが表示されるので「ARを開始」をタップします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8717/544092e7-204f-ddf8-4884-b42eece225fd.png" width="400px" />

ボタンを開始するとダイアログが表示されます。ここで表示されている

- 環境の3Dマップを作成する
- カメラの動きを追跡する

という項目がWebXR AR Moduleフラグを有効にして可能になった内容です。もちろん「ARを開始」をタップします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8717/af9fbcdf-8cee-981c-f1f2-5fad1a9ecb5e.png" width="400px" />

アプリケーションが開始すると、画面に映像が映し出され、画面をなぞるとその位置に線が引かれます。画面をタップしたまま端末を前後すると奥行方向に線を引くことも可能です。描いた図形は実際の環境に対応した3D座標を持っているので、360度好きな方向から眺めることができます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8717/264b0a60-f493-ad5e-9416-821bb288df70.png" width="40%" style="max-width:400px;" /><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8717/e024161c-0b0e-0b6a-1424-8131ce507a74.png" width="40%" style="max-width:400px;" />

# 実装を確認する

それではExampleのコードを確認してみましょう・・・と言いたいところですが、初日からいろいろコードが出てくるとハードルが上がってしまいそうなので今日はこの辺までにして、[3日後の次回その２](https://www.kabuku.co.jp/developers/webxrarpaint)で実装について説明したいと思います。

いや、時間がないとか手を抜いたとかではないんですよ。ただもう純粋にハードルを上げないためです。ホント。

# お願い

こんな感じにちょっと使ってみただけでもぜんぜん大丈夫なのでよろしければぜひ今からでも[Three.js Advent Calendar](https://qiita.com/advent-calendar/2019/threejs)にご参加ください。Three.jsコワクナイヨ！