メディア演習C(CG)/第5回

テクスチャマッピング，モデル表示 †

図形の面に画像（面に貼り付ける画像をテクスチャと呼ぶ）を張ることで図形の表現力を向上します．

また，より複雑な図形を表示するため，ライブラリを使用してみます．

画像の準備 †

まずは貼り付けたい画像を準備します．

ここでは例として以下の画像を用います．

• http://pixabay.com/en/brick-wall-bricks-building-302589/

ダウンロードした画像は，Processingの[Sketch]⇒[Add File]からSketchに追加しておく必要があります．

テクスチャマッピング †

早速テクスチャマッピングしてみます．

PImage img;

void setup()
{
  size(640, 480, P3D);
  img = loadImage("brick-wall.jpg");
}  

void draw()
{
  background(127, 127, 127);
  camera(100, -100, 100, 0, 0, 0, 0, 1, 0);
  axis(100);
  noStroke();
  beginShape(QUADS);
  texture(img);
  vertex(0, 0, 0, 0, 480);
  vertex(0, -50, 0, 0, 0);
  vertex(50, -50, 0, 640, 0);
  vertex(50, 0, 0, 640, 480);
  endShape();
} 

void axis(float l)
{
  stroke(255, 0, 0);
  line(0, 0, 0, l, 0, 0);
  stroke(0, 255, 0);
  line(0, 0, 0, 0, l, 0);
  stroke(0, 0, 255);
  line(0, 0, 0, 0, 0, l);
}

変更点としては，画像を読み込むため，PImageクラスのインスタンスをloadImage("brick-wall.jpg");で作成しています．テクスチャを貼り付ける指示はtexture(img);です．

またテクスチャを面にどのように貼り付けるのか指定する必要があります．

以下のように，vertex関数に引数が追加されています．

vertex(0, 0, 0, 0, 480);

前半3つは従来から使っていたx,y,z，後半2つがテクスチャマッピングのために追加された引数u,vです．テクスチャをどのように貼り付けるかは，このUV座標によって指示します．

モデル表示 †

ここまで図形（以降モデルと呼びます）はプログラムで作成してきました．

しかしながら，より複雑なモデルを表示するには，モデルを作成するソフトを用いて作成し，作成したモデルをプログラム側で読み込み，表示するのが一般的です．

自分で一からモデルを読み込むプログラムを書いても良いですが，Processing用にモデルを読み込むプログラムの集合（以下ライブラリと呼ぶ）が公開されています．

ここでは一例として，国産のモデリングソフトである「メタセコイア」のファイルを読み込むライブラリを使用してみたいと思います．

• メタセコイア：http://metaseq.net/jp/

Model3DView †

Writing Cafeさんにて公開されているライブラリModel3DViewを使用してみます．

• http://cafe.eyln.com/p5/Model3DView/

配布されているライブラリ（MQOLoader.zip）をダウンロードし，展開，展開してできたMQOLoaderフォルダをまるごと ユーザ名\Documents\Processing\libraries へコピーします．

Processingを起動し，[File]⇒[Examples]でMQOLoaderが表示されていればインストール成功です．

Processing Ver.2以降ではエラーが発生するため，修正したファイル一式を以下にアップロードしました．

具体的な使い方は「HelloModel」のコードを見るのが早いので，そちらを参照してください．

自身のプログラムでMQOModelクラスを使用したい場合は，MQOModel.pdeを[Sketch]⇒[Add File]してください．

課題の提出先・提出方法 †

招待されているBoxアップロードフォルダ「第05回」に自身の学籍番号のフォルダ（アルファベット大文字，例：20FI999）を自身で作成し，その中に各課題，指定された名前で完成させたスケッチフォルダごとアップロードしてください．

提出締め切り：12月20日（金） 23:59

BOXアップロードフォルダの招待メールが来ていない，また，WebClassで本講義が見えない方は森谷まで連絡ください．

課題 †

以下のようなアプリケーションを作成せよ．

• 使用するテクスチャ，モデルは自身で作成しても構わない
• ライトの設定は自由とする

提出スケッチフォルダ名：BASIC5_1　

テクスチャ： PNG：

JPEG：

モデル：

右クリック→[名前を付けて保存]で保存する．（ブラウザによってはindex.phpなど名前が変わってしまうのでcar.mqoに直す）

プログラムから読み込んで使うので[スケッチ]→[ファイルを追加]でスケッチフォルダに追加する．

押されたキーの検出 †

• https://www.mlab.im.dendai.ac.jp/programming/2021/intro/lesson06.html#(13)

任意課題 †

上記課題をゲーム化せよ

提出スケッチフォルダ名：ADVANCE5_1

実装例：

https://tdu.box.com/s/wamqjhv7ew78cknw8v6mot16d6uamw8s （box，学籍メール認証，WindowsまたはmacOS用）

• Windows10の場合，実行をセキュリティ関係で止められてしまうので，exeファイルを右クリック-[プロパティ]で[ブロック解除]にチェック

ヒント：ゲームのプログラム †

グローバル変数とif文を用いた昔ながらの疑似ゲームプログラム例を示す．

boolean gameover = false;

...

void draw()
{
  if (gameover == false){ //ゲームオーバーではない（＝ゲーム進行中）の処理
    プレイヤーを動かす();
    敵を動かす();
    if (プレイヤーと敵が接触していたら){
      gameover = true;
    }
  }else{
    ゲームオーバー時の処理();
    //プレイヤー，敵は止める
    //"GAMEOVER"，スコアの表示など
  }
}

ヒント：プレイヤーと障害物の当たり判定の例 †

双方の位置ベクトル間の距離を求め，それが特定の値以下であれば衝突したと判断できる

//px, py, pz:プレイヤーの座標
//ex, ey, ez:障害物の座標
float dx = px - ex;
float dy = py - ey;
float dz = pz - ez;
float l = sqrt(dx * dx + dy * dy + dz * dz);
if (l < 3)　//3という値は適当，各自要調整
{
  //衝突した際の処理
}

ヒント：テキスト表示 †

P3Dが有効の場合，text関数は3Dとなり3次元の座標を指定する

text("GAMEOVER", -50, -10, -50);

Top