mieki256's diary

_sketch_3d_test_box (Processing.jsで動作する版)

// 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() を呼ぶと、陰影をつけてレンダリングしてくれる。

Processing って、このあたり随分簡単にしてあるなと感心してしまったり。楽チンだ。素晴らしい。

_sketch_texturepoly_draw (Processing,jsで動作する版)

// テクスチャ付きポリゴンの描画テスト
// 四角形が三角形ポリゴン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() で図形描画終了。

たしかにテクスチャマッピングができた。

しかし、右側のテクスチャは歪んでる。四角形1つを三角形2つで表現してますよーって時の歪みが出てるというか。

この手のテクスチャの歪みは2つあって。

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

Processing 3.0.2 で試したところ、前者の場合はテクスチャが歪むことは無かった。透視変換して表示した際にテクスチャが歪んでしまう状態を補正するソレを _パースペクティブコレクト と呼ぶらしいけど、Processing 3.0.2 はパースペクティブコレクトとやらをちゃんとやってくれてるらしい。 *1

ただ、前述の図の右側は、後者の事例。元の図形がそもそも矩形(長方形)じゃないので歪んでる。この歪みを簡単に解決する方法は見つからなかった。何かを指定すればサクッと解決しちゃうのかなと期待したけど、そういう機能は用意されてないらしい。

じゃあ、どうやって解決したらいいのか…。今のところ、ポリゴンを分割するしかないのかなと思っているところ。

例えば DXRuby の Window.draw_morph も、四角形1つを三角形2つで表現してるけど、標準では縦横2分割 ―― 1枚のポリゴンを4分割して誤魔化して(?)いるし。たしかそのはず。

プレステ1で3Dゲームを作ってた頃も、こういう状態が頻繁に起きていて。せめて、視点に近いポリゴンだけでも分割して、とかやってた記憶があるのだけど。ググっても、当時のやり方が出てこないんだよな…。