グッドパッチのiOSエンジニア田中です。
WWDC23の真っ最中、キーノートで発表された待望のApple Vision Proが、世界中を賑わせています。
今回は、そんな世間の高まるXRへの注目にあやかって、弊社が制作した子ども向けAR体験の試みをご紹介いたします。
つくったもの
なにを作ったのかは、以下動画を観ていただくと一目瞭然です。
- キャラクターのボクセルをなぞって、好きな色で塗ることができる
- キャラクターと一緒にAR空間で記念写真を撮影ことができる
- 写真はQRコードを読み取ることで持ち帰ることができる
経緯
このアプリを作ることになった発端は、北海道上川町のまちづくり企画に、弊社グッドパッチのブース出展が決定したことでした。 出展では子ども向けのワークショップを実施するのですが、加えて子どもが楽しめるARアプリを展示できないか、という相談を受けたのでした。
www.town.hokkaido-kamikawa.lg.jp
実は過去に簡単なARアプリを実験的に作ってみたことがあり、それがこの相談に繋がったわけですが、
これは弊社ロゴを色塗りするアプリですが、上川町の方々に弊社ロゴは当然馴染みがなく、このままでは面白がって頂けないでしょう。
なにか上川町にぴったりで、かつ子どもたちにとっても親しみやすい題材はないか、と上川町ホームページを眺めてていたところ、、発見したのが上川町のマスコットキャラクター「かみっきー」だったのです。
上川町マスコットキャラクター「かみっきー」 | 北海道上川町
小熊であれば、子どもたちと並んで記念撮影するのにもちょうどいい大きさです。 上川町の担当者様にも、「かみっきー」の使用許可を快く頂け、おおまかな内容は決定しました。
さて、この時点から出展日まで、実は1ヶ月もありませんでしたので、スキマ時間を見つけては制作する、という日々が始まりました。
反響
現地はこのような様子でした。
最終的に50枚ほどの撮影をいただけ、さまざまな方に楽しんで頂けたことが何よりでした。
つくりかた
さて、ここからはどのように作ったのかという舞台裏をご紹介します。
企画と実装
企画内容から、ターゲットユーザーはワークショップ参加者の子どもたちと定め、次のような流れで体験を提供したいと考えました。
- タブレット（iPad）をかざして、近くにかみっきーを登場させる
- かみっきーの身体をなぞって色塗りをする（保護者がタブレットを持つかたわら、子どもがディスプレイをなぞる想定）
- 色塗りが終わったら、かみっきーと記念撮影をする（保護者またはスタッフがシャッターを押す想定）
- 撮影写真は何かしらの手段で参加者が持ち帰る
技術面では以下のように実現することとしました。
- iOSアプリとして、AR機能にはRealityKitを採用する
- キャラクターを登場させる平面（床）の検出
- カメラ映像と重ね合わせたキャラクター表示
- 色塗りは、タップやパン操作を受け
RealityKit.ARView上のタッチ位置から対象ボクセルを特定し、そのマテリアルを変更 - 撮影は
RealityKit.ARView.snapshot(saveToHDR:completion:)によりARViewのスクリーンショットを作成 - 撮影画像はFirebase Cloud Storageに送信
- アップロード先のURLをCIFilterの
CIQRCodeGeneratorフィルタを用いてQRコード化- AirPlayといった転送方法もありますが、OSや端末設定に依存せず直感的に共有するために、QRコードを採用しました
また筆者は現地に行けない都合上補助に入れないため、誰でも迷わず使えることを意識して操作フローをデザインしました。そのために、心がけたことは以下です。
- 操作の分岐を作らず一方通行に操作を進められること
- 操作のトリガーとなるボタンをわかりやすく表示すること
気づきや試行錯誤
作ってみるとさまざまな気づきがあったのでまとめてみます。
ピクセルアート化の難しさ
AR実装以前に、絵描き素人にとっての最初の難関となったのが、かみっきーのピクセル化でした。ただ低解像度すればいいのではなく、適度に単純化しつつ、可愛さを保ちつつ、ピクセルに落とし込む必要があります。
もちろん、画素数を増やせば高精細にはなりますが、その分塗りが複雑になったり、ボクセルが増えることで処理が遅くなったりと（技術不足な側面もありますが）弊害があります。
特に、かみっきーの被っている鐘（ベル）は、曲線の機微がある上、本来線対象形でありながら斜めになっており、これを再現するのが高難度でした。
塗り操作におけるあれこれ
当初、タップやパン操作の当たり判定で特定されたボクセルの色を変更する仕様としていました。これによって指直下のボクセルをひとつずつ塗りつぶしていくのですが、服を一色で塗り潰したい時に大変手間です（服だけでボクセル数はおよそ200）。
そこでタッチ位置に対し周辺8ボクセルも同時に塗ることにしました。
とはいえ、縞模様など細かく塗り分けたいケースに備えて、筆の半径は使い分けられるようにしたい気もします。
そこで、三次元だからこそ被写体との遠近に応じて指に隠れるボクセル数が増減することに注目し、かみっきーとの距離に比例して筆半径の大小が変わるよう実装してみました。動画を見ると分かる通り、離れていればざっくりと塗りつぶせ、肩紐のように細かい調整は、近づいて塗り分けられる、という具合です。
（が、撮影写真から察するに、この使い分けはまったく活用されていなかったようです。）
出現マーカーの位置
出現ポイントを決める際に表示するマーカーの位置にも、小さな工夫があります。
当初、マーカーの表示位置は、スクリーン中央からスクリーン平面の法線を延ばし、それが床と交わる点としていました。
これ自体はいたってシンプルなのですが思わぬ課題が潜んでしました。タブレットを地面に対し垂直に立てるにつれ、スクリーン法線が床平面と水平に近づくことで、マーカーは無限遠に遠ざかっていくのです。
その結果、出だしからマーカーの位置に気が付けない、あるいは出現ポイントが遠すぎることで物理的に辿り着けない、ということが判明しました。
この問題を回避するため、マーカーの出現位置を現在位置から半径3m以内に制限する制御を加えました。
オクルージョンの有効性
RealityKitでは、オクルージョンを簡単に実装することができます。オクルージョンによって、仮想物体がまるで本当にその場に存在するかのような実存感を与えることができます。
たとえば今回の場合、ARConfigurationに対しframeSemantics = .personSegmentationWithDepthと指定するだけで、人物が仮想物体を遮蔽するようにレンダリングすることができます。
しかし実際に使ってみると、被撮影者が無自覚にキャラクターを覆い隠してしまうということに気がつきました。撮影者はスクリーン上で仮想物体の位置を把握しているものの、被撮影者には当然それが見えないことが原因です。
撮影者が細かく立ち位置を指示することで回避できそうですが、、リアリティよりもラフな撮影体験を優先したい場合には不向きであると感じました。（オクルージョン処理は描画パフォーマンスにも影響しますし）
というわけで、オクルージョンの導入はお蔵入りしました。
現場検証の大切さ
開発現場の環境とワークショップ環境の差から発生した問題もありました。
ワークショップの最中に送られてきた写真ですが、かみっきーが黒く潰れてしまっているのが分かります。
これを見て思い当たった原因は、恐らくキャラクターを明るく照らすために追加した光源がかみっきーの後ろに回り込んだのではないか、ということでした。しかしこうした状況は本来起こり得ないはずで、なぜなら光源はかみっきーの登場と同時にカメラ位置に配置するよう実装していたためです。
あとで現場の状況を尋ねると、どうやら子どもたちは、タブレットをかざしながら広い会場を動き回って遊んでくれていたようでした。そういうことなら、上記状況も十分起こり得ます。
実装当時にこれに気がつけなかった原因のひとつは、開発環境にあると考えました。開発は基本、デスクを前に椅子に腰掛けたまま、ビルド、実行、デバッグの繰り返し。自室やオフィスは広さに限りがあります。加えて社内での試運用は必然的に大人相手、となると上記条件にはなりづらかったのです。
現実を拡張するAR体験の設計や実装においては、現場環境やユーザーの特性をよく知っておく必要があると痛感したのでした。
おわりに
一見単純なアイデアも、実際に手を動かしてみるとさまざまな発見と試行錯誤の繰り返しでした。
Apple Vision Proを支えるvisionOSには、RealityKitの技術が欠かせません。来年の発売開始に備えて、ぜひ簡単なものから実装にチャレンジしてみてはいかがでしょうか。
最後に、こうした機会を提供くださった北海道上川町、そしてかみっきーに感謝いたします！
