続・拡張現実感

本講義ノートについて

Sculptrisで作成した3DデータをProcessingのAR上に表示する方法を解説する。

SculptrisのデータはProcessingに直接読み込むことができないのでBlenderを用いて変換する。

Back To Top

Sculptrisでの3Dペイント

Sculptrisの使い方は「Sculptris基礎」を参照。
ProcessingのP3D Rendererでは環境マップデータを使えないので、SculptrisのMATERIALはdefaultのままで作成する。

下図はSculptrisに付属しているhead.sc1を利用してキャプテンアメリカ風?に3Dペイントしたもの。

Back To Top

Sculptrisからデータの書き出し

ペイントモードから作業を行う。

OBJファイルの保存を行う。

名前を変更(任意)してSaveボタンを押す。出力名は必ず半角英数を入力する。

続いて、テクスチャデータを保存する。

下図のShow advanced toolsをクリックするとボタンが表示される。

SAVE TEXMAPをクリックする。

名前を変更(任意)してSaveボタンを押す。出力名は必ず半角英数を入力する。

下図が保存されたテクスチャ画像。

以上の作業でOBJとPNGデータの準備完了。

Back To Top

BlenderでのUVマップ処理

Blenderを起動する。

Boxを右クリックで選択した状態でXキーを押して削除する。

Fileメニュー>Import>Wavefront(.obj)から、Sculptrisから出力したOBJファイルを読み込む。

サイズが大きいのでマウスのスクロールホイールで視点を調整する。
オブジェクトサイズは変更しない。
読み込んだオブジェクトを右クリックして選択する。
明るいオレンジになったときが単独オブジェクトの選択状態。濃いオレンジは複数選択状態。

右側のProperties EditorからTextureタブをクリックする。

NEW textureボタンをクリックする。

Texture TypeがImage or Movie(下図上部)になっていることを確認して、Image PanelのOpen(下図下部)をクリックする。

Sculptrisで書き出したPNGデータを読み込むと、下図のようにPreviewが表示される。

Mapping PanelでCoodinates:UV、Projection:Flatであることを確認する。

そのままではテクスチャを確認できないので、左側のCreate TabからLamp:Sunをクリックしてサンライトを追加する。

Viewport ShadingをRenderedに切り替える。

テクスチャに問題ないか確認する。

Fileメニュー>Export>Wavefront(.obj)から、OBJとMTLデータを出力する。(2つ同時に出力される)

 

これまでの作業で作成した以下のデータを利用して次の作業を行う。それぞれ名称は任意。

Sculptrisから出力したテクスチャデータ 例)captain.png
Blenderから出力したOBJデータ 例)captain_blender.obj
Blenderから出力したマテリアルデータ 例)captain_blender.mtl

Back To Top

Processingスケッチの準備

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

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("captain_blender.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.7, 0.7, 0.7); //大きさ
  translate(0, 0, 200); //位置調整
  rotateX(PI/2); //X軸90度回転
  rotateY(r); //Y軸回転
  shape(obj); //3Dデータの表示
  nya.endTransform();
  r += 0.06;
}

上コード15行目のcaptain_blender.objをBlenderから出力した名前に変更する。

obj = loadShape("captain_blender.obj"); //3Dオブジェクトデータの読み込み

Back To Top

スケッチの保存

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

Back To Top

dataフォルダの作成

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

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

Back To Top

camera_para.datとpatt.hiroの準備

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

Back To Top

OBJ、MTL、PNGをdataフォルダに入れる

SculptrisとBlenderで作成した3つのデータ(OBJ、MTL、PNG)をdataフォルダに入れる。

Back To Top

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

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

camera_para.dat カメラパラメータファイル
patt.hiro マーカー解析用データ
captain.png(名称任意) Sculptrisから出力したテクスチャデータ
captain_blender.obj(名称任意) Blenderから出力したOBJデータ
captain_blender.mtl(名称任意) Blenderから出力したマテリアルデータ

Back To Top

Runして実験

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

下図は印刷したものではなく、iPhone上にマーカーを表示させて実験。

Back To Top

影の表示(参考)

少し強引な影の作り方を紹介する。参考程度。

 

①スケッチの保存

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

import processing.video.*;
import jp.nyatla.nyar4psg.*;
PShape obj, shadow;
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("captain_blender.obj"); //3Dオブジェクトデータの読み込み
  shadow = loadShape("captain_shadow.obj"); //影用オブジェクトデータの読み込み
  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();  //ライトの追加
  
  pushMatrix();
  scale(0.7, 0.7, 0.7); //大きさ
  translate(0, 0, 220); //位置調整
  rotateX(PI/2); //X軸90度回転
  rotateY(r); //Y軸回転
  shape(obj); //3Dデータの表示
  popMatrix();
  
  pushMatrix();
  shadow.setFill(color(25)); //グレーに着色
  scale(0.6, 0.6, 0.01); //縦につぶす
  translate(0, 0, 80);
  rotateX(PI/2); //X軸90度回転
  rotateY(r); //Y軸回転
  shape(shadow); //影の表示
  popMatrix();
  
  nya.endTransform();
  r += 0.06;
}

 

②影用オブジェクトデータの作成

Blenderから出力すたOBJデータをコピーして名前(任意)を変更する。

OBJデータをテキストエディタで開き、マテリアル部分を削除する。

# Blender v2.78 (sub 0) OBJ File: ''
# www.blender.org
mtllib captain_blender.mtl ←ここを削除
o captain
v 65.896652 21.586599 -14.600577
v 65.697227 16.047176 -12.401533
v 65.891083 17.134825 -14.749624
v 65.702179 22.728895 -10.701628

 

③コードの修正

コード16行目のcaptain_shadow.objを②の名前に変更する。

shadow = loadShape("captain_shadow.obj"); //影用オブジェクトデータの読み込み

 

④Runして実験

影が加わることで臨場感が出る。

Back To Top