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

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

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

画像の準備

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

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

ダウンロードした画像は,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が表示されていればインストール成功です.

mqoloader.png

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

課題

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

テクスチャ: PNG:

road.png

JPEG:

road.jpg

モデル:

任意課題

上記課題をゲーム化せよ

実装例:


添付ファイル: filesample.zip 809件 [詳細] fileHelloModel.zip 486件 [詳細] fileroad.jpg 1094件 [詳細] filekadai.wmv 1415件 [詳細] filecar.mqo 1156件 [詳細] fileroad.png 1190件 [詳細] filemqoloader.png 1179件 [詳細] filewall.png 1163件 [詳細] fileaddfile.png 1232件 [詳細]

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