Processing + Android mode (pre 4.0+) + cardboard library で手軽に VR アプリを作成しました。

1. Processing で作る VR アプリ
高石武史

2. 内容
Processing で Google Cardboard 用アプリを作成する
1.準備
2.最初のサンプル
• Processing サンプル中の 3D object 表示プログラムを VR 化
3.応用プログラム
• コード作成手順
4.注意すること

3. 1.準備

4. Adroid Cardboard SDK を利用するために
• Unity 3D
• Windows/ MacOS
• Cardboard SDK で正式サポート
• Processing + Android mode + Processing-cardboard library
• Windows/ MacOS/ Linux
• Processing で P3D モードで作成した 3D CG は、少ない変更で動作
• Cardboard 非対応機 (Nexus7 2012：バックカメラなし)でも動作 (原因
不明)
• Processing 4 から正式対応予定
• その他
• Android SDK, iOS SDK, Uureal Engine 4

5. 準備 (Windows10)
1. Processing-3.2.x をダウンロードし，インストール
2. Java SE Development Kit 8をインストール
3. Android Studioをインストール
1. SDK Manger で Android 5.1などの対応バージョン, USB driver を忘れず
に追加
4. Android Mode (Pre 4.0+) を Processing/modes にインストール (私が利用したのは 0255)
5. processing-cardboard libraryを Processing/libraries にインストール
6. Processing
1. Android Mode に設定 (slelect path で SDK のフォルダーを指定: 全ての
フォルダが見えるように設定が必要)
2. ツールバーメニューで Android - Cardboard (この指定が無いと動きませ
ん!!)
3. Android device を USB debug mode で接続し、ツールバーメニューの
Android - connect devicesで確認
4. run でコンパイルし、実機で動作(インストールもされる)

6. 2. 最初のサンプル

7. 最初のサンプル
1. Processing を起動
2. java モードであることを確認
3. サンプルを開く
• メニューから[ファイル]->[サンプル]で Basics:Shape:LoadDisplayOBJ
4.実行結果を確認
5. ファイル名を付けて自分のフォルダに保存
6. Android モードに変更
7. メニューから [Android]->[Cardboard] をチェック
8. Android スマートフォンをUSBで接続
9. メニューから [Android]->[Devices] で接続を確認
10.コードの変更

8. PShape rocket;
float ry;
public void setup() {
size(640, 360, P3D);
orientation(LANDSCAPE);
rocket = loadShape("rocket.obj");
}
public void draw() {
background(0);
lights();
translate(width/2, height/2 + 100, -200);
rotateZ(PI);
rotateY(ry);
shape(rocket);
ry += 0.02;
}
import processing.cardboard.*;
PShape rocket;
float ry;
public void setup() {
fullScreen(PCardboard.STEREO);
rocket = loadShape(“rocket.obj”);
}
public void draw() {
background(0);
lights();
translate(0,0,(float(height)/2.0) / tan(PI/6.0));
translate(0,0,-200); // 中心からずらして表示
scale(1,-1,1);
translate(0, 100, 200);
rotateZ(PI);
rotateY(ry);
shape(rocket);
ry += 0.02;
}
Basics:Shape:LoadDisplayOBJ

9. Cube[] cubies = new Cube[20];
float bounds = 300;
void setup() {
size(640, 360, P3D);
for (int i = 0; i < cubies.length; i++) {
// Cubies are randomly sized
float cubieSize = random(5, 15);
cubies[i] = new Cube(cubieSize, cubieSize, cubieSize);
}
}
void draw() {
background(50);
lights();
// Center in display window
translate(width/2, height/2, -130);
// Rotate everything, including external large cube
rotateX(frameCount * 0.001);
rotateY(frameCount * 0.002);
rotateZ(frameCount * 0.001);
stroke(255);
// Outer transparent cube, just using box() method
noFill();
box(bounds);
// Move and rotate cubies
for (Cube c : cubies) {
c.update();
c.display();
}
}
import processing.cardboard.*;
Cube[] cubies = new Cube[20];
float bounds = 300;
void setup() {
fullScreen(PCardboard.STEREO);
for (int i = 0; i < cubies.length; i++) {
// Cubies are randomly sized
float cubieSize = random(5, 15);
cubies[i] = new Cube(cubieSize, cubieSize, cubieSize);
}
}
void draw() {
background(50);
lights();
// Center in display window
translate(0,0,(float(height)/2.0) / tan(PI/6.0));
translate(0,0,130);
scale(1,-1,1);
// Rotate everything, including external large cube
rotateX(frameCount * 0.001);
rotateY(frameCount * 0.002);
rotateZ(frameCount * 0.001);
stroke(255);
// Outer transparent cube, just using box() method
noFill();
box(bounds);
// Move and rotate cubies
for (Cube c : cubies) {
c.update();
c.display();
}
}
Topics:Motion:CubesWithinCube

10. Processing のサンプルの活用
いろいろなサンプルをVR化してみよう
1.P3D モードのプログラムを探す
2.短いプログラムから挑戦する
a. データ量の少なそうなサンプルを探す
3.表示位置の調整に気を付ける
4.あまり長時間続けない（気持ち悪くなります）

11. 3. 応用プログラム

12. コード作成手順
1.アプリの構造を検討
2.Java モードで作成し動作を確認
• 必要なデータの確認
3.VR モードに書き換え
• 別名で保存して修正
4.表示位置の修正
5.センサーによる動作の確認
• Sensors Overview
• Sensor

13. 4. 注意すること

14. 注意すること
1. 画像データ等は、プログラムの data フォルダー内に入れておく
• データが大きいと動かなくなる場合があるみたい
2. 地面やパネルはできるだけ shape として事前に作成しておく
• 動作速度の問題
3. 位置の微調整が必要
• camera の near と far で画面が切れないように調整する
4. Processing コンパイル時の注意
• Android mode
• Menu [ Android ] で Cardboard を選択
• Menu [ Android ] で device が選ばれていること
5. 不明な点はソースコードをあたる
https://github.com/codeanticode/processing-cardboard

15. Default values (from reference):
• camera(), perspective()
• cameraZ=((height/2.0) / tan(PI*60.0/360.0));
• perspective(PI/3.0, width/height, cameraZ/10.0, cameraZ*10.0);
• camera(0.0f, 0.0f, cameraZ, 0.0f, 0.0f, 0.0f, 0.0f, 1.0f, 0.0f); *
• lights()
• ambientLight(128, 128, 128);
• directionalLight(128, 128, 128, 0, 0, -1);
• lightFalloff(1, 0, 0);
• lightSpecular(0, 0, 0);
* はcardboardのみ

16. 参考になるリンク
1.Google Cardboard
a. Google VR
b. Google VR Concepts
c. Google VR SDK for Android
d. Google VR for Android SDK Overview
2.Processing for Android
a. Introduction to Cardboard
b. Using the sensors
3.Android SDK
a. Sensor