A-Frameで始めようお手軽WebAR (Tango/ARCore対応)

Webブラウザ上で動くVRを実現できることで今注目のA-Frameですが、他のライブラリと組み合わせることでマーカー認識を用いたARはもちろん、Google TangoやARCore等の次世代ARプラットフォーム対応のARも実現できます。
そこで今回はA-Frameを用いてTango/ARCore対応の下記コンテンツを作るまでの基本手順をご紹介します。

もし、A-Frameの使い方からマーカーベースAR、そしてTango/ARCore対応コンテンツの作成までを一通り体験したい方は下記のスライドの方をご覧ください。

ARコンテンツ作成勉強会資料

これまでのARコンテンツ作成勉強会でのハンズオン資料が増えてきたのでリンクをまとめておきます。 

1.スマホ対応AR

　はじめようARCore (基本機能編) 

　はじめようARCore (平面との相互作用と3Dお絵描き) 

　はじめようARCore(自己推定・平面検出・FaceTracking) ←new!

　UnityとVuforiaではじめるAR(Unity2018)

　VuforiaでつくるスマホAR+VRアプリ by早井さん 

　Webブラウザで簡単作成！スマホAR(Zappar編)

　使ってみようSmartAR 基礎から支援ツール活用まで

　ARCore/Tangoと簡易ヘッドセットHoloKitで光学シースルーAR 

2. Windows Mixed Reality (HoloLens, Immersive)

　HoloLensハンズオン：Gaze,Tap And Hold編

　HoloLensハンズオン：両手操作 vs Vuforia編

　HoloLensハンズオン：AirTap & SpatialMapping編

　HoloLensハンズオン：ハンドトラッキング&音声入力編

　A-Frameで始めるWindows Mixed Reality

Dropping Objects on the Horizontal Plane detected with ARCore.

1. Introduction

ARCore, AR platform for Android, was announced from Google at the end of August.
As written on the following site, ARCore can track position and orientation of smartphone without using marker detection, and can detect horizontal plane such as floor or table.

ARCore Overview  |  ARCore  |  Google Developers

SDK is very simple and also providing sample project which realize put objects in the favorite location of flat plane with screen tapping.

Choose Your Development Environment  |  ARCore  |  Google Developers

However, due to only one provided sample, in case of creating contents expressing falling object staying on the floor, some programming skill is required.
(as of 2017/9/19)

So this article introduces how to create AR content wich interacting horizontal plane and object with editing basic sample.

ARCoreで検出した水平面にオブジェクトを落とす

※情報が古くなっています。ARCore1.3以降をお使いの方はコチラをご覧ください。(2018/08/06)

1.はじめに

8月末にGoogleからAndroid用ARプラットフォームのARCoreが発表されました。
下記サイトにも書かれているようにARCoreによってマーカーを使わずに端末の位置・姿勢のトラッキングができたり、床やテーブルなどの水平面の検出ができたりします。

ARCore Overview  |  ARCore  |  Google Developers

またSDKも非常にシンプルで、提供されているサンプルを活用すれば画面をタップするだけで空間の好きな位置にオブジェクトを配置するアプリをすぐ実現できます。

Choose Your Development Environment  |  ARCore  |  Google Developers

ところが提供されているサンプルの数は1つのみのため、例えば落下したオブジェクトが床でとどまるような表現をするコンテンツを作る場合には、ある程度プログラムを書く必要ありますが情報が少ないのが現状です。(2017/9/19現在)

 という訳で今回は水平面とオブジェクトが相互作用するようなコンテンツの作り方を基本サンプルを編集する形で紹介します。

Windows Mixed Reality Headsetで自作コンテンツを動かす with A-Frame

1.はじめに

　前回の記事で紹介した、Unityを用いたWindows Mixed Reality Headset (以下WinMR)対応コンテンツの作り方に続き、今回はウェブブラウザ上でVRを実現できるWebVR対応ライブラリのA-Frameとの連携についてご紹介。既存サンプルを編集しWinMRで利用するまでの手順をまとめます。

Windows Mixed Reality Headsetで自作コンテンツを動かす with Unity

1.はじめに

Windows Mixed Reality(HP製) ヘッドセットが届いたので自作コンテンツを動かすまでの手順をまとめておきます。

HoloKitとGoogleTangoで手軽に光学シースルーAR

手軽に光学シースルーARが実現できるHoloKitを入手したのでレポート。
光学シースルーARというのはカメラで撮影した風景映像にCGを重ねるのではなく、HoloLensのように目で見ている風景の上にCGのみが重畳される方式のARです。
それをGoogleTangoやARKitに対応したスマートフォンと、段ボール製のヘッドセットで実現できてしまうのがHoloKitです。

1.体験

外観は大きめのハコスコといったところ。上部に挿入したスマートフォンの画面に表示された3Dコンテンツが鏡やハーフミラーで反射してユーザーの目に到達する仕組みになっています。

さらにTangoやARKitは端末の位置や向きをリアルタイムに推定することができるのでHoloKitを装着したまま動き回ることで色々な位置・角度でCGを観察することができます(動画参照)。