見出し画像

AR(拡張現実)のつくり方

ビッグサン(おおやまゆういち)

最近、AR(拡張現実)という言葉を耳にしませんか？

たとえば「ポケモンGO」。
ポケモンGOはARの技術をつかった有名なゲームです。
あたかも現実世界にポケモンがいるように見える仕組みがARです。

百聞は一見にしかず、AR知識ゼロのぼくが↓こんなARをつくりました。

※動画の中のメニュー表作成はぶんぶんさん


また、以下サイトでもARが見れます。


ARをつくることになったのは、ぼくが所属しているクリエイティブ集団「前田デザイン室」が「お初天神裏参道」とコラボレーションしたのがきっかけです。

コラボレーションのくわしい経緯については、同じく前田デザイン室の浜田綾さんが書いた↓こちらの記事をぜひご覧ください。

[対談]お初天神裏参道 X 前田デザイン室
異色のコラボレーションプロジェクトの軌跡
https://urasan.maeda-design-room.net/taidan/


ぼくがAR担当になった細かい経緯や、プロジェクトについては別noteで書きます。

この記事ではARをつくることができた感謝を込めて、どうやってARをつくったか、ちょっと技術寄りな手順を書きます。

初めてARをつくってみたいなと思った方へ制作のヒントになったり、ARつくるのが楽しい！と感じてもらえるとうれしいです。

また、ぼく自身の技術力は、今回はじめてGitHubを利用してARを制作したレベルです。詳しい方が見ると言葉足らずなところもあるかもしれませんが、ご容赦ください。

それではどうやってつくったかを書いていきます。
おおまかな流れは以下の通りです。


順番に書いていきます。

（１）ARの仕様を決める

まずはどんなARをつくるかを決めます。

プロジェクトメンバーのやりとりを先ほど見返したところ、
当初は「お店に貼るポスター」にARのキャラ（通称ウラサン団）を表示させる予定でした（最終的にはサイトにも載せることになりました）。

よって「紙にスマホをかざしてARを表示させる」ことを想定します。

また、お店にくるお客さんがARをみるということは「できるだけ手軽にみられる」というのもポイントです。

＜ARの仕様＞
・お店に貼るポスター（紙にスマホをかざしてARを表示させる）
・できるだけ手軽にみられる



（２）ARの仕組みを決める

「お店に貼るポスター（紙にスマホをかざしてARを表示させる）」という条件から、ARの仕組みは「マーカー型」という方法を選びました。
ARマーカーと呼ばれる画像にスマホをかざすとARが表示される仕組みです。

ARの技術は以下サイトをみて理解しました。

参考：
ARの仕組みを理解できれば、技術力がなくとも現実を拡張できるのか
https://tech-camp.in/note/technology/16274/



（３）ARの開発ツールを決める

ARをつくるツールはいくつかありますが、今回は「できるだけ手軽にみられる」という条件から、「WebAR」という方法を選びました。
ブラウザでARを動かす仕組みです。

また、WebAR以外でつくろうとしたときに、初めてARをつくろうと思った方は、以下noteはとても参考になると思います。

参考：
初めてARアプリを開発する人が抱えやすい３つの悩みとその解決法
https://note.mu/ar_ojisan/n/n6db8d7435a82



（４）ARの試作品をつくる

ここまででおおかた条件が決まったので、いよいよつくっていきます。

WebARが動く試作品をつくります。
ネットにあるいくつかのWebARを試しましたが、土台となるプログラムは↓以下を参考にしました。

参考：
JavaScript: AR.jsで年賀状を作ってみる
https://techracho.bpsinc.jp/gengen/2018_12_17/66732

AR.js - Efficient Augmented Reality for the Web
https://www.youtube.com/watch?v=0MtvjFg7tik

Youtubeの詳細にもありますが、GitHubのURLは以下です。
https://github.com/jeromeetienne/AR.js

エンジニアの方はGitHub自体を知ってるなんて常識中の常識ですが、あらためて素晴らしい仕組みだと感じました。もう存分に助けられたので。

また、A-FRAMEのサイトを前田デザイン室のはちぼーくんに教えてもらいました。ありがとうございました。

A-FRAME
https://aframe.io/



（５）オリジナルARマーカーをつくる

ARを表示させるためのARマーカーの画像はオリジナルでつくることができます。以下サイトを参考につくりました。

参考：
「AR.js」でオリジナルのマーカーを設定する方法
https://liginc.co.jp/457071



（６）3Dドットのキャラをつくる

3DドットのキャラはMagicaVoxelでつくることができます。
同じ前田デザイン室のけーらんさんに教えてもらいました。ありがとうございました。

一番最初に貼ったツイート動画のライオンはMagicaVoxelでつくりました。

MagicaVoxel
https://ephtracy.github.io/



（７）WebARを公開する

WebARはNetlifyというWebサイトのホスティングサービスをつかって公開します。
Netlifyは静的なWebサイトであれば簡単に公開できます。

Netlify
https://www.netlify.com/

参考：
【Netlify】ドラッグ＆ドロップでWEBサイトを公開する
https://qiita.com/NaokiIshimura/items/40ed08203b35aa0b527c



（８）ARマーカーをQRコードに埋め込む

ARを気軽に見れるということで、手順をなるべく減らすためにQRコードにARマーカー埋め込む方法にしました。
ここだと手軽に作成できます。

・QRCODEMONKEY
https://www.qrcode-monkey.com/


ここまでできればARを動かせると思います。
あとはおまけです。



（９）WebARのテキストを日本語にする


ここまでの流れでAR自体は全然問題ないのですが、テキストを日本語にする方法があります。
日本語にするという情報がなかなかなかったのですが、唯一ここにありました。

参考：
A-Frameで日本語フォントする方法
http://yonemura.hatenablog.com/entry/2018/08/14/162700



ARをつくる手順を書きました。最後に苦労した点です。

苦労した点

もっとも苦労した点は、ネットにある情報をいかに組み合わせてつくりあげるか、ということです。

また、最終的にはWebサイトと紙の両方にARのキャラ（ウラサン団）を出現する必要があったので、キャラの表示位置、キャラの大きさ調整に苦労しました。

この調整は根気よく少しづつ位置や大きさを変えるのが良いと思います。

ただ、なんだかんだARができるあがるとうれしいです！感動します。
実際にARをやってもらった方の反応も上々でした。

はじめてARをつくる方の参考になれば幸いです。
詳細な手順はいつか自分のブログで解説します。

この記事が気に入ったらサポートをしてみませんか？