Loading...

トカチニッチ

北海道十勝の超ローカルウェブメディア「トカチニッチ」ニッチな情報毎日更新中!

Google翻訳

Three.jsとAr.jsで十勝のAR地図を作って遊ぶ

荒草

荒草

6188 VIEW
投稿記事
注目タグ

これまでも触れてきたとおり、平成が終わり令和を迎えても凄まじい進化を続けているインターネットブラウザ。スマートフォンなどのデバイスで、ブラウザアプリがカメラを起動して(!)マーカーを利用したARコンテンツを表示できる(!)のだから驚きである。

専用アプリを必要としない、誰もが持っているブラウザアプリで利用可能なコンテンツ・・・これがいかに重要か。まだコードを工夫して解説できるほど勉強していないので、先人の知識を頼り作成した「十勝AR地図」だけご紹介。

十勝AR地図

ARを駆使して市町村に関連したイラストを表示してみる。
ARマーカーがどのくらいの数まで登録できて、どのくらいまでマーカーの認識ができるのか。

十勝AR地図の遊び方

  1. 地図画像をPCのモニタに表示したり、印刷してスマホカメラで写せるようにする
    [画像ファイル] [PDFファイル]
  2. スマートフォンで下記ページにアクセスする
    [スマートフォン用ページ]
    ※iOSはSafari/androidはChromeをご利用ください
    ※QRコードからもアクセス可能
  3. 起動したカメラで十勝AR地図を映す

どうだろう、各市町村に関連するイラストが表示されただろうか。
今回はイラストにしたが、3Dモデルをアニメーションさせるのも余裕である。

それでも、やっぱり試すのが面倒という方は↓のテスト動画をご覧ください。

ただし19市町村分のマーカーを用意すると、やはり多少は認識が混在してコンテンツが誤表示されることがある様子。
※手を抜いてマーカーを似たレイアウトにしたのが不味かったか。

待ち望まれるマーカーレス方式の標準実装

今回のARコンテンツはマーカーを利用した“マーカー方式”であるが、(たしか)現在研究が進められている“マーカーレス方式”の実装もそう遠くない。専用のアプリを必要とせず、カメラの画像から地面などの空間を認識してコンテンツを配置できるのである。

そう、標準のブラウザで、目の前にいるすべての人間に、裸の胴体を上書きすることも可能なのだ!!

絶対に楽しい、令和の時代が幕を開ける。

今回無断で使用したイラストの詳細はこちら

PRAmazonで「Three.js」を探す!


この記事が気に入ったら

※現在、こちらのコメント欄でのご質問・お問い合わせは受付けておりません。 恐れ入りますが、ご利用に関する不明点などは「お問い合わせフォーム」よりご連絡ください。

※投稿内容に関係のないコメントや、不適切な表現に該当すると判断したコメントは、投稿者に断りなく削除する場合があります。

じゃあ宝探しでハズレだったら貞子が出てくるようにするか!

テレビに映し出されたマーカーから、貞子が這い出てくる!なんてどうでしょうか。

街中にマーカー書き込んでヒントを表示してジオキャッシュみたいな宝さがしができそだな。

ぜひぶっ飛んだ感じで!

企画…本当にいいんですの?(*^∇^*)
何回か頭を強打してますけど?(*^∇^*)

とにかく可能性が無限すぎて頭の中がお祭り騒ぎ。自分は何を見たいのか?己の声に集中しま…わっしょいわっしょいわっしょいわっしょ

専用のアプリが必要ないのか…。
しかも表示させるコンテンツは自由自在ときた。
これヤバイね。

なんか面白いAR企画考えてくださいよ↓

パケージやらなんやらかんやら「健全な動機」で色々使えそう!
「健全な動機」NE☆ ひゃー!!!!!

ちょ!!著作物の無断し… ←どうでもいいとして
すげぇえええええ!!!!!!!!!!!!!!!

  • コメント
  • ランキング
  • オススメ
コメント一覧
ランキング一覧
オススメ一覧