拡張現実感

拡張現実感(AR)とは?

現実の知覚情報にコンピュータで作り出された情報を重ね合わせることによって、現実世界の情報を強化する技術である。英語ではAugmented Realityであり、頭文字をとってARとも呼ばれる。ARは情報提示や作業支援に役立つ新しいユーザインターフェースとして、さまざまな分野への応用が期待されている。

アイバン・サザランド氏がVR(Virtual Reality 人工現実感)の研究として行ったシースルー型のヘッドマウントディスプレイ装置「The Ultimate Display」(1965)が最初のARだと言われている。

アニメ作品の中でARの片鱗を見ることができる。『ドラゴンボール』のスカウター、『攻殻機動隊』の電脳化、『電脳コイル』の電脳メガネ。近年のSF映画でも当たり前のようにARの表現が使われている。

AR製品の事例としては、見た目が完全にスカウターのGoogle Glassが注目されていたが、プライバシー侵害などの問題から一般発売は中止された。開発者向けには販売されている。

Google Glassのコンセプト映像ではARを実現できているように謳っているが、実際には現実世界のモノの位置に情報を重ねて表示できるようなものではないことから、単なるメガネ型情報端末と言える。

次の映像は、ARを倉庫管理システムに取り入れたスマートグラス。この事例のようにARを活用すれば人間の作業をサポートするツールとして有効なのがわかる。ただし、これらの仕事自体がロボットに置き換わっていくだろう。

次の映像は、ディズニーリサーチによる塗り絵とARが融合したシステム。

Back To Top

プログラムの動作環境

本講義ノートで紹介するプログラム(スケッチ)の動作確認は以下の環境で行っている。

OS: macOS Sierra(10.12.6)
Processing:バージョン3.3.5
ARライブラリ:nyar4psg(NyARToolkit for Processing)
ビデオライブラリ:Video

Videoライブラリはスケッチメニュー>ライブラリをインポート>ライブラリを追加から行う。ARライブラリはココからダウンロードして解凍し、ライブラリフォルダへ移動する。

Back To Top

マーカーの準備

NyARToolkit for Processingのマーカーデータは、/ユーザ/st/書類/Processing3/libraries/nyar4psg/data/の中にある。

NyARToolkit標準のマーカー「Hiro」「人」は配布する。
下図右のように、オリジナルマーカーを作成して使用することもできる。

Back To Top

サンプルスケッチ

ファイルメニュー>サンプルをクリックする。

Contributed Libraries>nyar4psgを開くとたくさんのサンプルが用意されている。
ダブルクリックしてスケッチを開き、Runすることで実験できる。

Back To Top

simpleLite(Cubeの表示/Hiro)

サンプルからsimpleLiteスケッチをダブルクリックして開いてRunする。

このサンプルではHiroマーカーを使用する。

Back To Top

rotation(Cubeの回転/Hiroと人)

サンプルからrotationスケッチをダブルクリックして開いてRunする。

※同じカメラを2つのスケッチからは認識できないので、前のスケッチは停止してから行うこと。

このサンプルではHiroと人マーカーの2つを使用する。

2つのCubeが表示され、反対方向へ回転する。複数のマーカーを認識させ、異なる挙動を指定できるのが理解できる。

Back To Top

オリジナルマーカーの作り方(3種)

マーカーの制作方法にはいくつか存在する。ここでは紹介のみにとどめる。

 

①ARToolkit付属のパターンファイル作成ツール(Windowsのみ)

http://kougaku-navi.net/ARToolKit/

 

②Flashアプリ

http://flash.tarotaro.org/ar/MarkerGeneratorOnline.html

カメラでの読み込みだけでなく、画像ファイルから作成も可能。画像ファイルの場合は幅300pix程度でないとうまくいかない。カメラでの読み込みであれば、手書きマーカーでも認識させることができる。

 

③PNG画像タイプ

サンプルのpngMarkerの例のように、PNGやJPEG画像もマーカーとして利用できる。
マーカーのデザインには制約があるのでココを参考にして制作する。

Back To Top

2コマアニメの表示(PNGマーカー)

pngMarkerを改造して2コマアニメを表示するスケッチを作成した。

 

①スケッチの準備

画像データの表示スケッチのコードを削除して、以下のコードをコピー&ペーストする。dataフォルダ内のデータはそのまま利用する。

import processing.video.*;
import jp.nyatla.nyar4psg.*;
PImage img1, img2;  //画像用の構造体の宣言
float size = 0.5; //画像のサイズ変更 1.0が等倍表示
int cnt = 0; //アニメーション用カウント

Capture cam;
MultiMarker nya;

void setup() {
  size(640,480,P3D);
  colorMode(RGB, 100);
  println(MultiMarker.VERSION);
  cam=new Capture(this,640,480);
  nya=new MultiMarker(this,width,height,"camera_para.dat",NyAR4PsgConfig.CONFIG_PSG);
  nya.addARMarker(loadImage("dc_marker.png"),16,25,80); //自作マーカー
  img1 = loadImage("face.png"); //画像データはSketchのdataフォルダに置く
  img2 = loadImage("face_wink.png"); //2枚目画像
  cam.start();
}

void draw()
{
  if (cam.available() !=true) {
      return;
  }
  cam.read();
  nya.detect(cam);
  background(0);
  nya.drawBackground(cam);//frustumを考慮した背景描画
  if((!nya.isExist(0))){
    return;
  }
  if (cnt>50) cnt = 0;
  
  nya.beginTransform(0);
  rotateY(PI); //画像のY方向(上下)回転
  pushMatrix();
  rotateX(PI/2); //画像のX方向回転(マーカーに対して垂直に)
  if (cnt > 0 && 25 > cnt) { 
    image(img1,img1.width*size*-0.5, img1.height*size*-1, img1.width*size, img1.height*size ); //画像表示および原点とサイズの変更
  } else {
     image(img2,img2.width*size*-0.5, img2.height*size*-1, img2.width*size, img2.height*size ); //2枚目の画像の表示1
  }
  popMatrix();
  nya.endTransform();
  
  cnt = cnt+1;
}

 

②スケッチの保存

ファイルメニュー>保存をクリックする。保存場所は制限しない。

 

③dataフォルダの作成

スケッチメニュー>スケッチフォルダーを開くをクリック。

表示されたフォルダ内にdataフォルダを作成する。

 

④2つの画像の準備

下画像2つを保存してdataフォルダ内に入れる。
ブラウザ上からドラック&ドロップすることが可能。

 

⑤マーカーデータの準備

下図は認識用のマーカーデータの例(dc_marker.png)。
dataフォルダ内にドラック&ドロップしても利用できる。

 

⑥camera_para.datの準備

ユーザ/st/書類/Processing/libraries/nyar4psg/data/の中にcamera_para.datがあるので、先ほど作成したdataフォルダの中にコピーする。

 

⑦dataフォルダ内のデータ確認

今回のスケッチを動作させるためには以下のデータが全てdataフォルダ内に存在する必要がある。

camera_para.dat カメラパラメータファイル
dc_marker.png マーカーデータ(コードを自作したファイル名に変更)
face.png 表示させる画像データ
face_wink.png 表示させる画像データ

 

⑧Runして実験

Back To Top

演習課題

①オリジナルマーカーの作成

・以下のIllustratorテンプレート(CS6形式)をダンロードする。

https://lecture.nakayasu.com/data/dc_marker.zip

・Illustratorを利用して、非対称の文字や図形でマーカーを作成する。

・A4用紙に印刷。

・PNG画像を150ppiで書き出す。ファイル名は自由。

・dataフォルダにPNG画像を移動。

・コード内のマーカーファイル名を修正する。

 

②オリジナル2コマアニメーションの作成

・以下にあるface.pngをPhotoshopで開き、アニメーション用の2つの画像を作成する。

書類/Processing/libraries/nyar4psg/data/

・作成した2つのPNG画像をdataフォルダに入れる。

・コード内の該当箇所を修正する。

Back To Top

3Dオブジェクトの表示(Hiro)

①スケッチの準備

以下のコードを空のスケッチにコピー&ペーストして、スケッチを保存する。

import processing.video.*;
import jp.nyatla.nyar4psg.*;
PShape obj;
float r = 0; //回転角度用変数
Capture cam;
MultiMarker nya;

void setup() {
  size(640,480,P3D);
  colorMode(RGB, 100);
  println(MultiMarker.VERSION);
  cam=new Capture(this,640,480);
  nya=new MultiMarker(this,width,height,"camera_para.dat",NyAR4PsgConfig.CONFIG_PSG);
  nya.addARMarker("patt.hiro",80);
  obj = loadShape("rocket.obj"); //3Dオブジェクトデータの読み込み
  cam.start();
}

void draw()
{
  if (cam.available() !=true) {
      return;
  }
  cam.read();
  nya.detect(cam);
  background(0);
  nya.drawBackground(cam);//frustumを考慮した背景描画
  if((!nya.isExist(0))){
    return;
  }
  nya.beginTransform(0);
  lights();  //ライトの追加
  scale(0.6, 0.6, 0.6); //大きさ
  translate(0, 0, 80); //位置調整
  rotateX(PI/2); //X軸90度回転
  rotateY(r); //Y軸回転
  shape(obj); //3Dデータの表示
  nya.endTransform();
  r += 0.06;
}

 

②スケッチの保存

ファイルメニュー>保存をクリックする。保存場所は制限しない。

 

③dataフォルダの作成

スケッチメニュー>スケッチフォルダーを開くをクリック。

表示されたフォルダ内にdataフォルダを作成する。

 

④3Dデータ(obj、mtl、png)の準備

Processingに最初から準備されているデータを利用する。

サンプル>Basic>Shape>LoadDisplayOBJをダブルクリックする。

スケッチをRUNして、3Dオブジェクトが表示されるのを確認する。確認できたらスケッチを停止する。

LoadDisplayOBJスケッチが開いた状態で、スケッチメニュー>スケッチフォルダーを開くをクリック。

dataフォルダの中にrocket.objrocket.mtlrocket.pngの3つのデータがあるので、先ほど作成したdataフォルダにコピーする。

 

④camera_para.datとpatt.hiroの準備

/ユーザ/st/書類/Processing/libraries/nyar4psg/data/の中にcamera_para.datpatt.hiroがあるので、先ほど作成したdataフォルダの中にコピーする。

 

⑤dataフォルダ内のデータ確認

今回のスケッチを動作させるためには以下のデータが全てdataフォルダ内に存在する必要がある。

camera_para.dat カメラパラメータファイル
patt.hiro マーカー解析用データ
rocket.mtl マテリアルデータ
rocket.obj OBJデータ
rocket.png テクスチャデータ

 

⑥Runして実験

「Hiro」マーカーを使って実験してみよう。

Back To Top

VR or MR or AR?

2016年、MicrosoftからHoloLens(上写真)が発表された。広い意味でのVirtual Reality(VR)技術には、HMDを利用したVR、今回扱うAR(拡張現実, Augmented Reality)のほかにMR(複合現実, Mixed Reality)がある。HoloLensはMRを実現できる装置である。

以下、VR、MRを解説する。

 

VR(人工現実感, Virtual Reality)

HMD(ヘッドマウントディスプレイ)を装着して、外界の情報を遮断し、コンピュータで生成された世界に没入するもの。Oculus RiftPlayStation VRなどのデバイスが発表されている。

※Virtual Realityは「仮想現実(感)」とも呼ばれるが意味が正確でなく誤解を生む用語として推奨されていない。(Wiki参照)

次の映像は、HMDを利用したペイントアプリケーション「Tilt Brush」。

 

MR(複合現実感, Mixed Reality)

HoloLensはVRとARを合体させたようなもので、現実世界に情報を重ねるだけでなく、現実世界と人工現実が融合してシームレスに操作することができる。HMDのようなデバイスだが、視界を遮断せずに現実空間と仮想空間を重ねることができる。複数人が同時に同じ仮想空間を共有できるのも特徴。ジェスチャー操作と組み合わせることで、HoloLensだけであらゆる操作が可能。これまでPCやスマートフォンなどのデバイスを利用することがコンピュータやネットワークにアクセスする方法だったが、今後はHoloLensのようなデバイスのみで全ての作業が可能になる日も近い。

以上のように、VR、MR、ARそれぞれ特徴があるが、特にMRとARの違いがわかりにくい。MRはコンセプトとしても装置としてもARを含有している。ARは情報や映像を表示することはできるが、MRは頭部の動きをセンシングして現実空間の上にVR空間を表示できる。ポケモンGOはまだAR段階。わかりくいですね。技術の進歩や研究の段階が言葉に現れてくるので、このような言葉に関しては、将来的にはわかりやすいものが登場する可能性がある。

次の映像は、映像作品だが、MRの未来を表現しているものとして完成度が高いので紹介する。

HYPER-REALITY from Keiichi Matsuda on Vimeo.

Back To Top