フレームアクションで覚える PV3D Vol.03 : Materialを理解する

2009年05月23日 (土)
Tweet

フレームアクションで覚える PV3D Vol.03 : Materialを理解する

Papervision3DのMaterial(クリックで拡大)

Papervision3D のチュートリアル3回目です。今回は3Dを扱う上でテクスチャの設定方法を説明していきます。

Materialとは

3Dで形状を作る際には、見栄えを決める「マテリアル」を設定します。マテリアルとはポリゴンに貼付ける質感設定のことで、例えば着色したり、画像を貼付けたり、陰影を付けたりといったことを設定します。

Materialの種類を紹介

代表的なマテリアルを紹介してみます。

WireframeMaterial : 3D形状のポリゴンメッシュ
FlatShadeMaterial : 簡易的な陰影表示
BitmapMaterial : 指定したビットマップ画像

上記画像を見てイメージがつかめましたでしょうか。PV3Dのマテリアルはこの他にもいくつか種類がありますが、この３種類の表現方法を覚えておけば基本はばっちしです。

この他のマテリアルは次のサイトで紹介されているFlashが参考になりますので、他にも興味がある方はぜひ試してみてください。

Inspector de materiales de Papervision3D

Materialを実装してみる

では具体的にAction Script 3.0で実装してみましょう。1回目(1.5の補足も参考)の手順に従ってPapervision3Dのライブラリを準備した後、タイムラインの1フレーム目のフレームアクションに次のスクリプトを貼付けて、プレビューしてみてください。

// PV3Dライブラリをインポート
import org.papervision3d.view.*
import org.papervision3d.materials.*
import org.papervision3d.objects.primitives.*

// 3Dの初期設定をおこないます
var world:BasicView = new BasicView()
world.startRendering()
addChild(world)

// マテリアルを作成します
// ワイヤーフレームマテリアルは引数に16進数の色を指定します
var material:WireframeMaterial = new WireframeMaterial(0xFF0000)

// 球面(Sphere)を作成します
// Sphereの引数の1番目にマテリアルを指定します
// 2〜4番目の引数は球面の半径、横のポリゴン分割数、縦のポリゴン分割数
var sphere:Sphere = new Sphere(material, 400, 15, 15)

// 3D空間に球面を追加します
world.scene.addChild(sphere)

// 球面を回転させます
addEventListener(Event.ENTER_FRAME, function(e){
     sphere.rotationY += 1
})

すると次の球面が作成されたと思います。

WireframeMaterial (クリックで拡大)

Papervision3Dのオブジェクトの作成手順として(1)マテリアルを作成 (2)プリミティブオブジェクトを作成という２つの手順を踏むことになります。上の例ではWireframeMaterialを作成したあとに、Sphere生成の引数にそのマテリアルを指定しています。こうすることで指定したマテリアルをプリミティブオブジェクトに反映することができます。

// マテリアルを作成します
// ワイヤーフレームマテリアルは引数に16進数の色を指定します
var material:WireframeMaterial = new WireframeMaterial(0xFF0000)

// 球面(Sphere)を作成します
// Sphereの引数の1番目にマテリアルを指定します
// 2〜4番目の引数は球面の半径、横のポリゴン分割数、縦のポリゴン分割数
var sphere:Sphere = new Sphere(material, 400, 15, 15)

Papervision3Dの中で最も簡単なのがWireframeMaterialです。ポリゴンのワイヤーフレームを表示するもので、new WireframeMaterialの引数にワイヤーフレームの色を指定するだけです。

FlatShadeMaterialの実装方法

次はFlatShadeMaterialを実装方法を紹介します。次のAction Scriptをフレームアクションに貼付けてみてください。

// PV3Dライブラリをインポート
import org.papervision3d.view.*
import org.papervision3d.materials.shadematerials.*
import org.papervision3d.objects.primitives.*
import org.papervision3d.lights.*

// 3Dの初期設定をおこないます
var world:BasicView = new BasicView()
world.startRendering()
addChild(world)

// ライトを作成します
var light:PointLight3D = new PointLight3D()

// マテリアルを作成します
// フラットシェードマテリアルは引数にライトと16進数の色を指定します
var material:FlatShadeMaterial =
new FlatShadeMaterial(light, 0x3399FF)

// 球面(Sphere)を作成します
// Sphereの引数の1番目にマテリアルを指定します
// 2〜4番目の引数は球面の半径、横のポリゴン分割数、縦のポリゴン分割数
var sphere:Sphere = new Sphere(material, 400, 20, 20)

// 3D空間に球面を追加します
world.scene.addChild(sphere)

// 球面を回転させます
addEventListener(Event.ENTER_FRAME, function(e){
     sphere.rotationY += 1
})

実行例は次のとおり。

FlatShadeMaterial (クリックで拡大)

WireframeMaterialと違って、FlatShadeMaterialではライトの陰影の機能を使う必要がでてきます。プリミティブオブジェクトに陰影をつけることをシェーディングと呼びますが、その場合の手順は(1) ライトを作成 (2)マテリアルを作成 (3) プリミティブオブジェクトを作成となります。

シェーディングについてはこのブログでまとめて記事がありますのでそちらをご参考ください。

Papervision3D 2.0(GreateWhite)で反射を比較する

BitmapMaterialの実装方法

おそらく一番使用頻度が高いと思われれるのが、Bitmap系Material。実はBitmapMaterialには様々な種類があり、使い方に応じて使用するクラス名が違ってきます。

BitmapMaterial : BitmapDataを指定(上級者向け)
BitmapAssetMaterial : Flash CS3/CS4上のライブラリの画像を指定
BitmapFileMaterial : 外部画像を指定

画像の取り込み方法が違うだけで、結果は同じとなります。本記事ではBitmapAssetMaterialで紹介します。

まずは.flaファイル内に画像を取り込み、画像の「クラス」を設定します。

Bitmapのクラス設定方法 (クリックで拡大)

なお、画像はPlanet Earth Texture Mapsの低解像度の画像(フリー)がお勧めで、今回はこれを使います。

準備ができましたら次のスクリプトをフレームアクションにコピペします。

// PV3Dライブラリをインポート
import org.papervision3d.view.*
import org.papervision3d.materials.*
import org.papervision3d.objects.primitives.*

// 3Dの初期設定をおこないます
var world:BasicView = new BasicView()
world.startRendering()
addChild(world)

// マテリアルを作成します
// ビットマップアセットマテリアルは引数にライブラリの画像を指定します
var material:BitmapAssetMaterial = new BitmapAssetMaterial('EarthMap')

// 球面(Sphere)を作成します
// Sphereの引数の1番目にマテリアルを指定します
// 2〜4番目の引数は球面の半径、横のポリゴン分割数、縦のポリゴン分割数
var sphere:Sphere = new Sphere(material, 400, 15, 15)

// 3D空間に球面を追加します
world.scene.addChild(sphere)

// 球面を回転させます
addEventListener(Event.ENTER_FRAME, function(e){
     sphere.rotationY += 1
})

結果は次のとおり。