シェアありがとうございます!

【javacript】AR.jsでiPhoneでもブラウザARが可能になっていた件

 こんにちわ。ポケモンGOの大ヒットにより一般的にもいよいよ定着してきた「AR」ですが、いよいよiPhone、Androidともにブラウザ上でARが実現できるようになっていたので簡単に紹介したいと思います。

「AR」とは?

 「AR」とは「Augmented Reality」の略で、日本では「拡張現実」とも呼ばれています。

 ポケモンGOをプレーしたことある方ならご存知ですが、「AR」とはカメラを通して現実の風景にバーチャルの視覚情報を重ねて表示することで仮想空間を作り出すことになります。

 これまでエンジニアにとって、この「AR」はスマートフォンで言えばポケモンGOのように基本的にネイティブアプリの中での話しでした。

javascriptライブラリ「AR.js」の登場

 しかし、2017年3月にThree.jsの創業者アレクサンドラ・エティエンヌ氏Javascript開発者のジェローム・エティエンヌ氏の共同開発によって、AndroidとWindows Mobile端末向けにブラウザでもAR体験ができる「AR.js」というjavascriptライブラリが公開されました。

 「AR.js」はオープンソースとしてGithubに公開されており、下記の特徴を持っています。

AR.jsの特徴

  • 2年落ちのスマホでも60fps(1秒間に60枚の静止画)で動作する高速性
  • three.jsとjsartoolkit5に基づくjavascripライブラリであり、インストールの必要性がない完全なるWebベース
  • オープンソース(無料)
  • webglとwebrtcを備えた端末であればどのスマホでも動作する
  • 軽量

 「AR.js」は、上の特徴のようにとても優れたライブラリですが、公表段階ではios端末(iPhone、iPad等)は非対応になっており、正直需要を満たすレベルには達していませんでした。

 しかし、2017年9月にAppleがios11を正式にリリースし、そのios11から「ARKit」というARフレームワークも搭載されるようになったことで、ios端末でも「AR.js」を使用してブラウザでAR体験ができるようになりました。これは日本のようにiPhoneユーザーが圧倒的に多い市場にはとても大きなインパクトになります。

実際にiPhoneで公式のデモを試してみる

 では、実際にiPhoneでも動くのか、下記の手順通りやってみましょう。

  1. こちらの画像をPCのデスクトップにダウンロード
  2. こちらのページにsafariからアクセス
  3. カメラへのアクセスを許可
  4. 1でダウンロードした画像を写す

 これで下の画像のような立体的なバーチャルな物体が現れると思います。

まとめ

 今回は、ブラウザでもAR体験ができるjavascriptライブラリ「AR.js」を紹介しました。

 実際に、これまでお客さんからARを駆使したキャンペーン等をブラウザでできないかという相談もあったのですが、「AR.js」を使用すればiosでもブラウザARが実現できることがわかったのでARを活かした簡単な企画等はwebアプリでも出来るようになると思います。

 今回は、公式のデモを紹介しただけですが、時間がある時に実際にサンプルを作ってみたいと思います!

 それでは今回はここまで!また!

この記事のまとめ

  • ブラウザでもAR体験ができるjavascriptライブラリ「AR.js」
  • ios11からios端末でもブラウザARが実現可能になっていた
  • 簡単なARキャンペーン企画ならwebアプリでも可能
お仕事の依頼はこちら

人気記事

著者プロフィール

Takanori Hashi

東京、奄美大島、宮崎の3拠点生活を目指すフリーランスのWEBエンジニア兼デザイナー。仕事の傍、子育て&趣味に精を出す一児のパパ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です