スキャンから演出が現れるまで、スマホがしていること。
QRコードが開くのは、ごく普通のWebページです。そのページがカメラの使用を求め、そこから先は1秒に約30回のループを回します。フレーム内の特徴的な点を見つけ、作品のフィンガープリントと照合し、印刷物が空間のどこにあるかを割り出し、その同じ変換を通してレイヤーを描きます。サーバーが目にするフレームは1枚もありません。
4つのステップを、1秒に30回。
-
1
トラッキングに向く点を見つける
角や、コントラストの強い質感 — 画像が2方向に同時に変化する場所です。スマホが動いたときに確実に見つけ直せるのは、そうした点だけだからです。平坦な部分やまっすぐな輪郭は、この用途には役に立ちません。
-
2
作品と照合する
作品はアップロード時に一度だけ解析され、そうした点のフィンガープリントにまとめられています。いま映っているフレームをこれと照合することで、見えている点が印刷物上のどの点にあたるかがわかります。
-
3
印刷物の位置を割り出す
対応する点の組が十分にそろえば、ホモグラフィというひとつの計算で、カメラの画面内での平らな長方形の位置と傾きが求まります。誤った対応はそのまま信用せず、全体の合意によってふるい落とします。
-
4
その変換でレイヤーを描く
同じ変換で動画やテキストの位置を決めるので、それらは画面の上に浮かぶのではなく、印刷物の上に乗ります。そして次のフレームが届き、すべてがまた繰り返されます。
ブラウザの話を抜きにした概念編は、画像トラッキングの仕組みへ。
3つのブラウザAPIだけ。プラグインは不要。
ビデオ通話で使われるのと同じ、標準の許可ダイアログです。ストリームは普通の video 要素で、ページはそこからピクセルを読み取れます。許可はサイトごとで、観る人が取り消すこともできます。これは、インストール型のアプリがふつう提供している以上のものです。
特徴点の検出と照合は、数値計算をひたすら繰り返すループで、まさに JavaScript が最も苦手とする処理です。この部分を WebAssembly にコンパイルすることで、ミドルレンジのスマホでも1フレームおよそ30msという予算を守れるようになります。
レイヤーは、トラッカーが求めた姿勢を使って、その姿勢を求めたのと同じフレームに GPU で描かれます。古いフレームから計算した姿勢でフレームを合成すると、重ねた映像が泳ぐようにずれてしまいます。
スマホを向ける作品にとって、これが意味すること。
これらは特定のプラットフォームではなく、手法そのものの性質です — 画像トラッキングを使うあらゆるARツールに当てはまります。
描き込みの多いイラストは見事にトラッキングできます。平坦な面が大きいミニマルな作品では、トラッカーがつかめるものがほとんどありません。繰り返し模様は、何もないよりさらに厄介です。どの点もほかのすべての点と同じに見えるからです。
カメラのフレームは端末上で処理され、そのまま破棄されます。やり取りされるのはデザイン — 作品のフィンガープリントとあなたのレイヤー — だけで、ダウンロードは一度きりです。これは処理を端末上で行うことから来る性質であって、いつの間にか変わりうる方針ではありません。
ブラウザには、ネイティブアプリが使える深度センサーや永続的な空間アンカーが与えられていません。印刷された長方形に固定するレイヤーなら、これは何の損にもなりません — その長方形こそがアンカーであり、床の位置を推測するよりも優れたアンカーだからです。
テンプレートを開いて、自分のものに。
Interart の AR テンプレートは完成済みの実働デザイン。ブラウザのエディタで開いて、自分のアートに差し替えれば、あなたの作品になります。各テンプレートには操作を教えるガイドツアー付き。
アカウント不要 — サインアップすると作業はそのまま引き継がれます。
スマホを向けて、確かめてみてください。
ブラウザのエディタで、あなた自身の絵から始めましょう — 最初の演出は数分でできます。
疑問に、お答えします。
いいえ。フレームはスマホ上で処理されて破棄され、どこにも送られません。これは約束ではなく、処理がどこで行われるかから導かれることです — トラッキングはページの中、つまり端末上で動きます。フレームごとにサーバーと往復していては、30msの予算に収まるはずがないからです。
ほとんどの場合、不規則な細部が少なすぎるか、繰り返しが多すぎるかのどちらかです。トラッキングには互いに見分けのつく点が必要です。大きな平坦な面にはそれがまったくなく、繰り返し模様には見分けのつかない点がたくさんあります。描き込みが多く、質感があり、非対称な作品ほどよくトラッキングできます。
いいえ。カメラに getUserMedia、画像認識の処理に WebAssembly、描画に WebGL を使う Webページです — いずれも iOS の Safari と Android の Chrome に標準で備わっています。観る人がコードをスキャンすれば、そのまま動きます。
確実にはできません。それは別の技術です。部屋に物を置くには深度センシングと永続的なワールドアンカーが必要ですが、ブラウザにはそれが与えられていません。画像トラッキングは代わりに印刷物に固定します。印刷物は形のわかっている平らな長方形なので、はるかに正確に固定できる対象です。