tmdf.net | Processingでレイヤー表現

Processingでレイヤーっぽくオブジェクト同士が重なった表現をする場合、z座標を使って重なりを調整すると思うけど、カメラ位置とオーバーラップする3Dオブジェクトを配置すると、常に最前面に表示させたいメニューより前面に描画され、意図しない（調整しずらい）表示になったりします。

同階層に200x200pxの「Sample.png」という画像ファイルがあるとして、以下のようなプログラムで、png画像よりboxオブジェクトが前に来てしまう現象。

void setup() {
	size(200, 200, P3D);
}

void draw() {
	background(0);

	translate(100, 100, 0);
	box(100, 100, 100);

	translate(-100, -100, 0);
	PImage b = loadImage("Sample.png");
	image(b, 0, 0);
}

そこで、png画像を常に最前面に表示できないか試行錯誤した結果、PGraphicクラスを使ってレンダリングした画像を貼り付ける、または最前面に表示させたいオブジェクトを3Dオブジェクトより自分に近づける、この2つが今のところの解決方法。

まず、PGraphicクラスを使う場合。これは単純にPGraphics（仮の描画ステージ）でオブジェクトを描いてレイヤーっぽく貼り付けていく。でも、半透明や大きなサイズで使ったり、負荷が重そうな処理をすると、思った以上に描画速度が落ちていくので注意。プログラムは下記。

void setup() {
	size(200, 200, P3D);
}

void draw() {
	background(0);

	PGraphics pg = createGraphics(200, 200, P3D);
	pg.beginDraw();
	pg.background(0);
	pg.translate(100, 100, 0);
	pg.box(100, 100, 100);
	pg.endDraw();
	image(pg, 0, 0);

	PImage b = loadImage("Sample.png");
	image(b, 0, 0);
}

次にオブジェクトを自分に近づける方法。前者より負荷は少ないけど、最前面オブジェクトより前に表示、最前面オブジェクトが表示されない、ドットバイドットで表示しづらい、などがあるので微調整しながら使わないといけない。プログラムは以下のような感じ。変数cは等倍で表示できた距離、dはカメラを引き寄せと画像を同じだけ縮小するための変数。

float c = 175;
float d = 20;

void setup() {
	size(200, 200, P3D);
}

void draw() {
	background(0);

	camera(0, 0, c, 0, 0, 0, 0, 1, 0);
	box(100, 100, 100);

	camera(0, 0, c / d, 0, 0, 0, 0, 1, 0);
	imageMode(CENTER);
	PImage b = loadImage("Sample.png");
	image(b, 0, 0, b.width / d, b.height / d);
}