LoginSignup
10
15

More than 3 years have passed since last update.

@tamoco

AR.jsを段階的に学習できるサイトを作成【ソースコードも公開】

Last updated at Posted at 2021-04-18

概要

  • AR.js を使ってブラウザからカメラで AR のコンテンツを表示します
  • 公式の Hello World から始まりカスタムのマーカーを使用するなど段階的につくっていきます
  • このサイトでは段階的に学んだことを１つずつサイトとして作って記録しました
  • 実際に作ったモノはスマホで AR を楽しむことができます

構成

  • 静的なサイトで構成されています
  • コンテンツの内容はマークダウンのテキストから読み込むようにしています
  • それ以外は AR.js のコンテンツごとにページを作っています
  • Vue.jsなどのフレームワークを使用するとAR.jsの読み取れないときの原因特定が難しいためシンプルに作っています

diagram.jpg

ソースコード

スマホで AR.js の AR を楽しむために・・・

準備

  • まずはパソコンで開きながらスマホでもこのサイトを開いて準備します
  • トップページはほぼこのQiitaの記事の内容とほぼ同じモノになります
    • すでにこの記事をパソコンで開いている場合はスマホでQRCodeのサイトを開いてください
  • スマホで開く場合は以下の QRCode をご利用ください

AR のサイトを開いたときの注意

  • このサイトの AR のサイトを開く場合は Chrome の利用を推奨します
  • カメラの許可を求められますので必ず許可してください

AR.js Lesson Start

01: Hello World

  • スマホで特定のマーカーを写すと AR のコンテンツを表示するモノをつくります
  • 公式の Marker Based Example を使ってみます
  • パソコンで移した画像で AR を楽しむためにpositionとrotationを以下のように設定します
    • position="0 0 1"
    • rotation="-90 0 0"

ソースコード

Glitch を開いてコードを確認できます (01-ar-hello-world.html)

スマホでの動作

01-screen_shot.jpg

02: 任意の 3D モデルファイルを読み込む

  • Hello World では公式の恐竜の 3D モデルを表示していました
  • 3D のモデルファイルを任意のモノを読み込ませ表示させてみます
  • 使用する 3D モデルは以下を利用させていただきました
  • 注意点としては 3D モデルが読み込めず表示できないことがあります
  • 最初はモデルの問題かソース側の問題か切り分けが難しいので慣れてから 3D モデルにチャレンジするのがオススメです

ソースコード

スマホでの動作

03: 自分で作成したマーカーを認識させる

  • Hello World ではプリセットのマーカーで AR コンテンツを表示していました
  • 今回は自分で用意した画像をマーカーにします
  • 以下のサイトでマーカーの設定ファイル(.patt)とマーカーの画像ファイルを生成します
  • マーカーを作るポイントとしては背景は少し灰色にしてシンプルな模様にすると読み取りやすいです
  • 色も多くなると読み取りづらいので灰色背景に黒い簡単な図形を描くことをオススメします

ソースコード

スマホでの動作

04: AR で任意の画像を表示する

  • 3D モデルだと自作しづらいので AR で画像を表示させてみます
  • カワイイ女の子の画像を AR で飛び出させてみます
  • カワイイ女の子の画像の素材は以下のサイトから利用させていただきました

ソースコード

スマホでの動作

05: AR で任意の Gif 画像を表示する

  • AR.js は aframe を使用しています
  • aframe の拡張ライブラリも使用できます
  • 今回は Gif 画像を使用するために aframe-gif-shader を使用します
  • Gif 画像は以下のサイトから利用させていただきました

ソースコード

スマホでの動作

06: ARで複数のマーカーを設定する

  • これまでの応用として複数の任意のマーカーを設定します
  • それぞれのマーカーから異なるカワイイ女の子の画像を表示します
  • マーカーさえ準備できればハーレムにできます

ソースコード

スマホでの動作

ふりかえり

初心者にもチャレンジしやすいかもしれない

  • 段階的に学ぶように作ったため初心者にも学習しやすいと思います
  • ARという実際にスマホで確認しながら楽しめるので取っつきやすいかもしれません

ハマったときがキツイかも

  • AR.jsでキツイのはモデルやパターンの読み込みがされないときで原因の特定がしづらいです
  • デバッグモードもありますがそれでも特定するのに工夫が必要そうです
  • 今回はできるだけ切り分けしやすいように静的なサイトで構築しました

次やりたいこと

  • AR.jsでマーカーの記述のみ違うので変更箇所だけHTMLレンダリングで変えるようできればよさそうです
    • ExpressやReactなどを採用してマーカーの記述部分のみ返すようにしてあげればイイかと
10
15
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
10
15