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

Papervision3DのMaterial

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

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

Materialとは

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

Materialの種類を紹介

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

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

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

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

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 (クリックで拡大)

WireframeMaterial (クリックで拡大)

Papervision3Dのオブジェクトの作成手順として(1)マテリアルを作成 (2)プリミティブオブジェクトを作成という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 (クリックで拡大)

FlatShadeMaterial (クリックで拡大)

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

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

BitmapMaterialの実装方法

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

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

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

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

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

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
})

結果は次のとおり。

BitmapAssetMaterial (クリックで拡大)

BitmapAssetMaterial (クリックで拡大)

Bitmap系Materialの兄弟でMovieAssetMaterialというものがあり、マテリアルにムービークリップを指定することもできます。例えばMovieClipのタイムラインアニメーションをマテリアルに指定することもできますので興味のある方はぜひ試してみてください。

まとめ

今回は比較的使いやすく、使用頻度の高い3つのマテリアルについて紹介しました。前回のプリミティブジェネレーターをあわせて球面以外の形状に対してもチャレンジしてみてください。

また今回紹介できなかったマテリアルは次のウェブデザイニングの特集記事が大変参考になりますので、もしよければそちらもあわせてご覧ください。

今回のソースファイル

連載目次

投稿者 : 池田 泰延

BookMark

いかがでしたでしょうか、ブックマークはこちらからどうぞ。

このエントリーをはてなブックマークに追加

Comment/Trackback 2件