ガイド

スキャンから演出が現れるまで、スマホがしていること。

QRコードが開くのは、ごく普通のWebページです。そのページがカメラの使用を求め、そこから先は1秒に約30回のループを回します。フレーム内の特徴的な点を見つけ、作品のフィンガープリントと照合し、印刷物が空間のどこにあるかを割り出し、その同じ変換を通してレイヤーを描きます。サーバーが目にするフレームは1枚もありません。

ループ

4つのステップを、1秒に30回。

  1. 1

    トラッキングに向く点を見つける

    角や、コントラストの強い質感 — 画像が2方向に同時に変化する場所です。スマホが動いたときに確実に見つけ直せるのは、そうした点だけだからです。平坦な部分やまっすぐな輪郭は、この用途には役に立ちません。

  2. 2

    作品と照合する

    作品はアップロード時に一度だけ解析され、そうした点のフィンガープリントにまとめられています。いま映っているフレームをこれと照合することで、見えている点が印刷物上のどの点にあたるかがわかります。

  3. 3

    印刷物の位置を割り出す

    対応する点の組が十分にそろえば、ホモグラフィというひとつの計算で、カメラの画面内での平らな長方形の位置と傾きが求まります。誤った対応はそのまま信用せず、全体の合意によってふるい落とします。

  4. 4

    その変換でレイヤーを描く

    同じ変換で動画やテキストの位置を決めるので、それらは画面の上に浮かぶのではなく、印刷物の上に乗ります。そして次のフレームが届き、すべてがまた繰り返されます。

ブラウザの話を抜きにした概念編は、画像トラッキングの仕組みへ。

それを支えるもの

3つのブラウザAPIだけ。プラグインは不要。

getUserMedia — カメラ

ビデオ通話で使われるのと同じ、標準の許可ダイアログです。ストリームは普通の video 要素で、ページはそこからピクセルを読み取れます。許可はサイトごとで、観る人が取り消すこともできます。これは、インストール型のアプリがふつう提供している以上のものです。

WebAssembly — 画像認識の処理

特徴点の検出と照合は、数値計算をひたすら繰り返すループで、まさに JavaScript が最も苦手とする処理です。この部分を WebAssembly にコンパイルすることで、ミドルレンジのスマホでも1フレームおよそ30msという予算を守れるようになります。

WebGL — 合成

レイヤーは、トラッカーが求めた姿勢を使って、その姿勢を求めたのと同じフレームに GPU で描かれます。古いフレームから計算した姿勢でフレームを合成すると、重ねた映像が泳ぐようにずれてしまいます。

制約を率直に

スマホを向ける作品にとって、これが意味すること。

これらは特定のプラットフォームではなく、手法そのものの性質です — 画像トラッキングを使うあらゆるARツールに当てはまります。

トラッキングされるのは細部

描き込みの多いイラストは見事にトラッキングできます。平坦な面が大きいミニマルな作品では、トラッカーがつかめるものがほとんどありません。繰り返し模様は、何もないよりさらに厄介です。どの点もほかのすべての点と同じに見えるからです。

何もアップロードされない

カメラのフレームは端末上で処理され、そのまま破棄されます。やり取りされるのはデザイン — 作品のフィンガープリントとあなたのレイヤー — だけで、ダウンロードは一度きりです。これは処理を端末上で行うことから来る性質であって、いつの間にか変わりうる方針ではありません。

深度もワールドアンカーもなし

ブラウザには、ネイティブアプリが使える深度センサーや永続的な空間アンカーが与えられていません。印刷された長方形に固定するレイヤーなら、これは何の損にもなりません — その長方形こそがアンカーであり、床の位置を推測するよりも優れたアンカーだからです。

スマホを向けて、確かめてみてください。

ブラウザのエディタで、あなた自身の絵から始めましょう — 最初の演出は数分でできます。

よくある質問

疑問に、お答えします。

WebARはカメラの映像をアップロードしますか?

いいえ。フレームはスマホ上で処理されて破棄され、どこにも送られません。これは約束ではなく、処理がどこで行われるかから導かれることです — トラッキングはページの中、つまり端末上で動きます。フレームごとにサーバーと往復していては、30msの予算に収まるはずがないからです。

作品がうまくトラッキングされないのはなぜですか?

ほとんどの場合、不規則な細部が少なすぎるか、繰り返しが多すぎるかのどちらかです。トラッキングには互いに見分けのつく点が必要です。大きな平坦な面にはそれがまったくなく、繰り返し模様には見分けのつかない点がたくさんあります。描き込みが多く、質感があり、非対称な作品ほどよくトラッキングできます。

アプリやプラグインは必要ですか?

いいえ。カメラに getUserMedia、画像認識の処理に WebAssembly、描画に WebGL を使う Webページです — いずれも iOS の Safari と Android の Chrome に標準で備わっています。観る人がコードをスキャンすれば、そのまま動きます。

ブラウザのARで、モデルを床に置けますか?

確実にはできません。それは別の技術です。部屋に物を置くには深度センシングと永続的なワールドアンカーが必要ですが、ブラウザにはそれが与えられていません。画像トラッキングは代わりに印刷物に固定します。印刷物は形のわかっている平らな長方形なので、はるかに正確に固定できる対象です。