mieki256's diary

// 3D BOX draw test

void setup() {
  size(400, 400, P3D); // P3Dをつけると3D描画ができる
}

void draw() {
  background(0); // 背景を黒に
  lights();  // ライト設定

  // 全体を移動
  translate(width / 2, height / 2);

  float mx = mouseX - width / 2;
  float my = mouseY - height / 2;

  // 全体を回転
  rotateY(radians(mx));
  rotateX(radians(-my));

  // 箱を描画
  box(150, 150, 150);
}

• size() の3番目の引数に「P3D」をつけると、3D描画ができる
• translate() や rotateX()、rotateY()、rotateZ() で、全体の移動や回転ができる。
• lights() を呼ぶと、陰影をつけてレンダリングしてくれる。

// テクスチャ付きポリゴンの描画テスト
// 四角形が三角形ポリゴン2つで描画されてるのが分かる

// Processing.js で画像ファイルを読み込みたい時は以下の指定が必要

/* @pjs preload="uvmap.png"; */

PImage img;

void setup() {
  size(640, 480, P3D);

  img = loadImage("uvmap.png");
}

void draw() {
  background(0);
  translate(width / 2, height / 2);

  beginShape(); // 図形描画開始
  texture(img); // テクスチャを指定

  // 各頂点の位置と、対応するテクスチャ座標を指定
  vertex(-300, -100, 0, 0, 0);
  vertex(-100, -100, 0, img.width, 0);
  vertex(-100, 100, 0, img.width, img.height);
  vertex(-300, 100, 0, 0, img.height);
  endShape();
  
  beginShape();
  texture(img);
  vertex(0, -100, 0, 0, 0);
  vertex(300, -100, 0, img.width, 0);
  vertex(250, 100, 0, img.width, img.height);
  vertex(100, 100, 0, 0, img.height);
  endShape();
}

• Processing.js (JavaScript) を使ったスクリプトで、画像ファイルを読み込みたいときは、/* @pjs preload="uvmap.png"; */ といった指定が必要。コレをしないと loadImage() で画像ファイルを読み込んでくれない。ハマった。
• beginShape() で図形描画を開始。
• beginShape() には、beginShape(QUADS); 等も指定できるらしい。
• texture() で、マッピングするテクスチャを指定できる。
• vertex(x, y, z, u, v) で、頂点1つのx,y,z座標と、割り当てるテクスチャのu,v座標を指定。
• endShape() で図形描画終了。

• 元のポリゴンは長方形だけど、回転を加えたり透視変換した際に見た目が長方形じゃなくなって歪む場合。
• 元のポリゴンがそもそも長方形じゃないので歪む場合。