みかづきブログ その3

3ヶ月つづけてみました。

【お詫びと訂正と追記】iOS11向けにウェブARコンテンツをつくってみました。(マーカーレスの超簡易版) 🏃

お詫びと訂正:(2017/06/09 00:16)
本記事内に掲載している動画キャプチャが、
Apple.Incの開発者利用規約(APPLE BETA SOFTWARE PROGRAM AGREEMENT APPLE INC.)に抵触しているというご指摘をいただきました。
掲載内容を不適切と判断し、該当箇所を削除させていただきます。Apple.Inc及び読者の皆様に深くお詫び申し上げます。

1. ざっくりGIFアニメでまとめると

f:id:kimizuka:20170609001246p:plain

こんな感じです。


2. はじめに

昨日、iOS11のMobile SafariがgetUserMediaでカメラにアクセスできることに気づき、しゃかりき急いで この記事サンプルコード を書き上げました。

techblog.kayac.com

記事の最後は、

Canvasに取り込みさえすればこっちのものなので、簡単なARアプリぐらいはつくれるかもしれません。

http://techblog.kayac.com/webcamera-preview-for-ios11 より引用

という感じで締めくくったのですが。
締めくくった途端に思いつきました。というか思い出しました。


サプライズ・ウィンドウ

8年前に頑張ってつくった、車窓用簡易ARコンテンツ、「サプライズ・ウィンドウ」の存在を。
ガラケーを使っているところに時代を感じますね。 ^ ^


3. サプライズ・ウィンドウとは

こどもの頃、車窓を眺めながら思い描いていたイメージを再現する、懐かしARコンテンツです。
f:id:kimizuka:20170606224901g:plain

詳しくはこちらのサイトなんかをご覧頂けると幸いです。
www.sensors.jp



4. 原理

ガラケーの画面を45度に張ったプラバンに反射させることによって、
画面の黒い部分が透過し、車窓とコンテンツを同時に鑑賞できるという画期的なシステムです。
子供の頃にハマったゲームである「技脳体」からヒントを得て制作しました。
(のちにペッパーズ・ゴーストという手法ということを知りました)

f:id:kimizuka:20170606194927p:plain

ちょっと形は違うんですが、この動画を観て頂ければ仕組みがわかると思います。


サプライズ・ウィンドウ

さてさて、こちらのコンテンツの最大の特徴なんですが、

コンテンツが景色に対してまったくインタラクティブでないことがあげられます。

つまり、景色を画像解析してキャラクターにぶつかるとかそういった類の処理を一切入れてないんですね。
(ガラケーだったんで、電波強度でキャラクターの活発さが変わるようにはなっています。完全に余談ですが。)

流れる景色に対して、ユーザーが手動で位置を合わせ、ボタンを押してジャンプさせる。
ただそれだけの単純なARコンテンツ、もはやARコンテンツと呼べるのかどうかも微妙なコンテンツなのですが、
流れる風景と一緒に鑑賞すると、なんとも言えないいい雰囲気を醸し出すんですよね。
逆にこのコンテンツならさくっと移植できそうです。


5. 今回つくったもの

そこで、今回はこのゆるいARコンテンツをiOS11向けウェブコンテンツとして蘇らせてみようと思いました。
キャラクターが走る(クリックすると飛ぶ)コンテンツはCSSで開発済みなので、これを流用すればちょちょいのほいでつくれるはずです。

See the Pen DOT RUNNING by kimmy (@kimmy) on CodePen.

videoタグにカメラの映像をリアルタイムプレビューするところは昨日すでに完成しているわけですら、

f:id:kimizuka:20170606225244p:plain

こんな感じでvideoタグの上にCSSでつくったコンテンツを重ねるだけでOKです。
なぜならマーカー認識とか画像解析とかしていないお手軽ARコンテンツだからですね。


6. 完成したもの

f:id:kimizuka:20170609001246p:plain

プロトタイプ名は、車 + キャンバスでカーンバスと名付けました。
iOS11であれば、これぐらいのオーバーレイコンテンツ(もはやARと呼ぶのもおこがましくなってきた)だったら余裕で作れそうですね。
あと、ランドスケープモードだとフルスクリーンになるのが良いですね。(最後にちょっとUIが見切れてますが)
iOS11のリリースが楽しみです!


7. これからやりたいこと

リリースまでにはオーバーレイコンテンツ以外もつくれるようになってたいですね。
まずはCanvasにキャプチャした画像を検出してマーカーを認識するところを頑張ろうと思います。


おまけ

f:id:kimizuka:20170609001246p:plain

「やばい!日が沈む」と思って焦って撮影したらiPhoneを落とした失敗バージョンです。

追記

スクリーンショットなしではまったく伝わらないかと思いますが、イメージ的にはこのような体験がiPhone単独でできるようになるかもしれないということです。


車の窓のそと from そうぞうの遊び on Vimeo.