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

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

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

画像の準備

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

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

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

addfile.png

テクスチャマッピング

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

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);
}
wall.png

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

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

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

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

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

モデル表示

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

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

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

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

Model3DView

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

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

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

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

mqoloader.png

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

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

課題の提出先・提出方法

招待されているBoxアップロードフォルダ「メディア演習C(CG)前後期」へ,完成させた各課題のスケッチフォルダをまとめてZIP圧縮したファイルを以下の名前でアップロードしてください.

ファイル名:XXFIXXX_5th.zip(例:19FI999_5th.zip)

提出締め切り:7月22日(水) 18:00

課題

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

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

提出スケッチ名:BASIC5_1 (フォルダごと提出)

テクスチャ: PNG:

road.png

JPEG:

road.jpg

モデル:

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

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

押されたキーの検出

任意課題

上記課題をゲーム化せよ

提出スケッチ名:ADVANCE5_1 (フォルダごと提出)

実装例:

filesample.zip(Windows用)

advance.png
  • 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);

添付ファイル: fileadvance.png 595件 [詳細] fileadvance.mp4 792件 [詳細] fileHelloModel.zip 1094件 [詳細] filecar.mqo 2084件 [詳細] filesample.zip 791件 [詳細] filekadai.mp4 1557件 [詳細] filewall.png 606件 [詳細] fileroad.png 1031件 [詳細] fileroad.jpg 891件 [詳細] filemqoloader.png 559件 [詳細] fileaddfile.png 560件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2020-07-15 (水) 15:02:07