動機

長らく、Processing 1.5.1 と NyARToolkit で AR を楽しんできました。
少し自由な時間ができたので… さすがにもう、最新の環境に乗り移ろうと決心しました。最新の NyARToolkit は 3.0.2 以降、従来のマーカに加えて、NFT（Natural Feature Tracking; 自然特徴点追跡）もできるので、そのあたりも練習してみました。

環境

Windows 10
Processing 3.3
NyARToolkit for Processing 5.0.5

やったこと

ビデオキャプチャのテスト
最もシンプルな AR
OBJ 形式の 3DCG モデルで AR
マルチ NFT（自然特徴点追跡）による AR

コード

解説は主にコード中のコメントのみで恐縮です。

ビデオキャプチャのテスト

まずは、Processing 標準の video ライブラリでビデオキャプチャのテストです。
Processing 3 では、video ライブラリは自分でインストールするようです。Processing IDE の「ライブラリの追加...」で The Processing Foundation の video ライブラリをインストールしました。

Processing 1.5.1 時代に比べて（特に Windows 環境では）とても容易になりました。

cam_test.pde

// cam_test.pde
// Install "video" library via "Add Library" tool of Processing IDE.
// Connect a Web camera to your PC.
// Run this sketch once.
// Find a camera device number with "size=640x480,fps=30" from the list.
// * Rewrite "x" with the device number you use.
// Run this sketch again, and confirm the video is shown.
// Coded by Mitsuteru Kokubun, 2017/02/20

import processing.video.*;               // using "video" library

Capture cam;                             // declaration of Capture object

// setup() function is executed once
void setup() {
  size(640, 480);                        // setting size of window
  String[] cameras = Capture.list();     // getting available camera devices
  printArray(cameras);                   // listing available camera devices
  cam = new Capture(this, cameras[12]);  // * Rewrite [x] with the device number you use.
  cam.start();                           // starting capture
}

// draw() function is exectuted repeatedly
void draw() {
  if(cam.available() == false) {         // if camera is not available
    return;                              // do nothing and return
  }
  cam.read();                            // capturing image
  image(cam, 0, 0);                      // displaying captured image
}

最もシンプルな AR

NyARToolkit for Processing の GitHub リポジトリの指示通りに、nyar4psg ライブラリをインストールしました。
カメラのキャリブレーションパラメータもデフォルトの "camera_para.dat" を使いました。
また、NyID マーカを使っています（こちらのサイトで作成）。
実質20行くらいでできました。

ar_box.pde

// ar_box.pde
// A simple AR demo using NyARToolkit and Proceccing 3.
// Install "video" library via "Add Library" tool of Processing IDE.
// Install "nyar4psg" library according to the URL below.
//   -> https://github.com/nyatla/NyARToolkit-for-Processing/
// Connect a Web camera to your PC.
// * Rewrite "x" with the camera device number you use.
// Place "camera_para.dat" in "data" folder of this sketch.
//   - "camera_para.dat" is included within ./libraries/nyar4psg/data
// Print NyID markers on paper. ("NyId_000-005.pdf")
// Run this sketch, and check that an orange transparent box is superimposed on the marker.
// Coded by Mitsuteru Kokubun, 2017/02/20

import processing.video.*;               // using "video" library
import jp.nyatla.nyar4psg.*;             // using "nyar4psg" library

Capture cam;                             // declaration of Capture object
MultiMarker mm;                          // declaration of MultiMarker object

void setup() {
  // window and camera settings
  size(640, 480, P3D);                   // setting size of window with P3D mode
  String[] cameras = Capture.list();     // getting available camera devices
  printArray(cameras);                   // listing available camera devices
  cam = new Capture(this, cameras[12]);  // * Rewrite [x] with the device number you use.
  cam.start();                           // starting capture
  // NyARToolkit settings
  mm = new MultiMarker(this,             // initial settings of NyARToolkit
             width,                      // width of the input image
             height,                     // height of the input image
             "camera_para.dat",          // camera calibration parameter file
             NyAR4PsgConfig.CONFIG_PSG); // configuration for Processing
  mm.addNyIdMarker(0, 80);               // adding NyId marker(ID, marker_width[mm])
}

void draw() {
  // video capture
  if(cam.available() == false) {         // if camera is not available
    return;                              // do nothing and return
  }
  cam.read();                            // capturing image
  // Start of AR process
  mm.detect(cam);                        // detecting marker within captured image
  mm.drawBackground(cam);                // drawing captured image on background
  if(mm.isExist(0) == false) {           // if marker[0] is not exist within the image
    return;                              // do nothing and return
  }
  mm.beginTransform(0);                  // starting coordinate projection based on marker[0]
    translate(0, 0, 40);                 // move the origin 40 mm in the Z axis direction
    fill(255, 165, 0, 127);              // fill color(R, G, B, opacity)
    box(80);                             // draw a 80 mm square box
  mm.endTransform();                     // ending coordinate projection
  // End of AR process
}

OBJ 形式の 3DCG モデルで AR

3DCG のモデルを読むには、Processing 1.5.1 時代は、saitoobjloader や MQOLoader などを使わせていただいてきました。
今回、saitoobjloader を試したところ、Processing 3.3 では動きませんでした。
少し調べたら、Processing 標準の PShape で OBJ 形式のモデルが読めることが分かったので、試したら、簡単にできました。実質30行くらいです。
OBJ 形式の 3DCG モデル（rocket.obj, rocket.mtl, rocket.png）は、Processing のサンプル「LoadDisplayObj.pde」で使われているものを使いました。Processing 本体のフォルダ内の、modes\java\examples\Basics\Shape\LoadDisplayOBJ\data の中にあります。

ar_obj.pde

// ar_obj.pde
// A 3DCG (*.obj) AR demo using NyARToolkit and Proceccing 3.
// Install "video" library via "Add Library" tool of the Processing IDE.
// Install "nyar4psg" library according to the URL below.
// Connect a Web camera to your PC.
// * Rewrite "x" with the camera device number you use.
// Place "camera_para.dat" in "data" folder of this sketch.
//   - "camera_para.dat" is included within ./libraries/nyar4psg/data
// Place "rocket.obj", "rocket.mtl", and "rocket.png" in "data" folder of this sketch.
//   - "rocket.*" are included within ./Processing_3.x.x/
//       modes/java/exmples/Basics/Shape/LoadDisplayOBJ/data
// Print NyID markers on paper. ("NyId_000-005.pdf")
// Run this sketch, and check that a rocket of 3DCG is superimposed on the marker.
// Coded by Mitsuteru Kokubun, 2017/02/20

import processing.video.*;               // using "video" library
import jp.nyatla.nyar4psg.*;             // using "nyar4psg" library

Capture cam;                             // declaration of Capture object
MultiMarker mm;                          // declaration of MultiMarker object
PShape obj;                              // declaration of PShape object
float ry;                                // variable for rotation of 3DCG model

void setup() {
  // window and camera settings
  size(640, 480, P3D);                   // setting size of window with P3D mode
  String[] cameras = Capture.list();     // getting available camera devices
  printArray(cameras);                   // listing available camera devices
  cam = new Capture(this, cameras[12]);  // * Rewrite [x] with the device number you use.
  cam.start();                           // starting capture
  // NyARToolkit settings
  mm = new MultiMarker(this,             // initial settings of NyARToolkit
             width,                      // width of the input image
             height,                     // height of the input image
             "camera_para.dat",          // camera calibration parameter file
             NyAR4PsgConfig.CONFIG_PSG); // configuration for Processing
  mm.addNyIdMarker(0, 80);               // adding NyId marker(ID, marker_width[mm])
  // PShape setting
  obj = loadShape("rocket.obj");         // loading a 3DCG model named "rocket.obj"
}

void draw() {
  // video capture
  if(cam.available() == false) {         // if camera is not available
    return;                              // do nothing and return
  }
  cam.read();                            // capturing image
  // Start of AR process
  mm.detect(cam);                        // detecting marker within captured image
  mm.drawBackground(cam);                // drawing captured image on background
  if(mm.isExist(0) == false) {           // if marker[0] is not exist within the image
    return;                              // do nothing and return
  }
  mm.beginTransform(0);                  // starting coordinate projection based on marker[0]
    lights();                            // adding lights in the 3D scene
    scale(0.3);                          // adjusting the size of the 3DCG model
    translate(0, 0, 80);                 // adjusting the position of the 3DCG model
    rotateX(PI/2);                       // rotating the 3DCG model 90 degrees around the X axis
    rotateY(ry);                         // rotating the 3DCG model ry radians around the Y axis
    shape(obj);                          // displaying the 3DCG model
  mm.endTransform();                     // ending coordinate projection
  // End of AR process
  ry += 0.1;                             // changing rotation angle
}

マルチ NFT（自然特徴点追跡）による AR

最後に NFT も練習してみましした。せっかくなので、適当に写真を撮ってそれを NFT のターゲットに、重畳表示させる CG モデルも Blender を使って自作しました。

以下はターゲット用に撮影した写真です。

NyARToolkit のサンプルとして付属する NftFileGenerator を使って画像から特徴点を抽出し、特徴点ファイル（*.fset, *.fset3, *.iset の三つのファイル）を出力します。

Blender で適当に CG を作りました。

完成です。

ar_nft.pde

// ar_nft.pde
// An NFT(Natural Feature Tracking) AR demo using NyARToolkit and Proceccing 3.
// Install "video" library via "Add Library" tool of the Processing IDE.
// Install "nyar4psg" library according to the URL below.
// Connect a Web camera to your PC.
// * Rewrite "x" with the device number you use.
// Place "camera_para.dat" in "data" folder of this sketch.
//   - "camera_para.dat" is included within ./libraries/nyar4psg/data
// Place "drop.{obj, mtl}" and "time.{obj, mtl}" in "data" folder of this sketch.
//   - These obj models are made by using some modeling software, e.g. Blender.
// Place "faucet.{fset,fset3, iset}" and "time.{fset,fset3, iset}" in "data" folder of this sketch.
// Print "faucet.jpg" and "clock.jpg" on paper.
// Run this sketch, and check that the 3DCGs are superimposed on the marker.
// Coded by Mitsuteru Kokubun, 2017/02/20

import processing.video.*;               // using "video" library
import jp.nyatla.nyar4psg.*;             // using "nyar4psg" library

Capture cam;                             // declaration of Capture object
MultiNft nft;                            // declaration of MultiNft object
PShape[] obj;                            // declaration of PShape array object

void setup() {
  // window and camera settings
  size(640, 480, P3D);                   // setting size of window with P3D mode
  String[] cameras = Capture.list();     // getting available camera devices
  printArray(cameras);                   // listing available camera devices
  cam = new Capture(this, cameras[0]);   // * Rewrite [x] with the device number you use.
  cam.start();                           // starting capture
  // NyARToolkit settings
  nft = new MultiNft(this,               // initial settings of NyARToolkit
             width,                      // width of the input image
             height,                     // height of the input image
             "camera_para.dat",          // camera calibration parameter file
             NyAR4PsgConfig.CONFIG_PSG); // configuration for Processing
  nft.addNftTarget("faucet", 160);       // adding NFT target[0] (name, target_width[mm])
  nft.addNftTarget("clock", 160);        // adding NFT target[1] (name, target_width[mm])
  // PShape setting
  obj = new PShape[2];
  obj[0] = loadShape("drop.obj");        // loading a 3DCG model named "drop.obj"
  obj[1] = loadShape("time.obj");        // loading a 3DCG model named "time.obj"
}

void draw() {
  // video capture
  if(cam.available() == false) {         // if camera is not available
    return;                              // do nothing and return
  }
  cam.read();                            // capturing image
  // Start of AR process
  nft.detect(cam);                       // detecting marker within captured image
  nft.drawBackground(cam);               // drawing captured image on background
  for (int i=0; i<2; i++) {              // repeating for two NFT targets
    if(nft.isExist(i) == false) {        // if target[i] is not exist within the image
      continue;                          // do nothing and find next target
    }
    nft.beginTransform(i);               // starting coordinate projection based on target[i]
      lights();                          // adding lights in the 3D scene
      translate(-80, 40, 0);             // adjusting the position of the 3DCG model
      rotateY(PI);                       // rotating the 3DCG model 180 degrees around the Y axis 
      shape(obj[i]);                     // displaying the 3DCG model
    nft.endTransform();                  // ending coordinate projection
  }
  // End of AR process
}

所感と今後

移行して大正解でした。
たいていの私の用途は初期のプロトタイピングのため、通常のマーカーを使っていてもなんの問題もないのですが、NFT のほうがやっぱり楽しいですね。
引き続きいろいろ遊んでみたいと思います。