WebGL版Away3D入門―第2回 マテリアルとライティング

WebGL版Away3D入門―第2回 マテリアルとライティング

公開

WebGL対応のJavaScriptフレームワークAway3Dのチュートリアル第2回では3Dの見栄えを決定するマテリアルとライティングについて説明していきます。これからAway3Dをはじめようという方はまずは第1回の入門編の記事を参考にして頂ければと思います。

マテリアルとは

マテリアルとは物体の質感設定のことです。3Dで形状を作る際には、見栄えを決める「マテリアル」を指定することで、例えば着色したり、画像を貼付けたり、陰影を付けたり、ライティングの反射などを適用することができます。

140926_away_8

代表的なマテリアルとして「単色塗りのマテリアル」と「画像を使ったマテリアル」の二種類があります。どちらもaway.materials.TriangleMethodMaterialクラスを使用しますが、コンストラクタの引数に色(16進数表記の色)か画像テクスチャを指定するかで自動的にそれに適したマテリアルになります。

マテリアルを実装してみる

具体的にJavaScriptで実装してみましょう。第1回の記事の手順に従ってAway3Dのライブラリを準備した後、次のスクリプトを貼付けてブラウザで確認してみてください。

var view;
var mesh;
function init() {
    // 3Dの土台を作成します
    var renderer = new away.render.DefaultRenderer();
    view = new away.containers.View(renderer);
    view.width = window.innerWidth; // 画面全体で表示
    view.height = window.innerHeight;
    // マテリアルを作成します
    var material = new away.materials.TriangleMethodMaterial(0xFF0000);
    // ライトを作成します
    var light = new away.entities.DirectionalLight();
    // マテリアルにライトを適用します
    material.lightPicker = new away.materials.StaticLightPicker([light]);
    // 球体の形状を作成します
    var prefab = new away.prefabs.PrimitiveSpherePrefab(300);
    // 形状とマテリアルからメッシュを作成します
    mesh = prefab.getNewObject();
    mesh.material = material;
    // 3D表示インスタンスのsceneプロパティーが3D表示空間となります
    view.scene.addChild(mesh);
    // アニメーションさせるためにループイベントを指定します
    var raf = new away.utils.RequestAnimationFrame(tick, this);
    raf.start();
}
// 毎フレーム時に実行されるループイベントです
function tick() {
    mesh.rotationY += 1;
    view.render(); // レンダリング
}
// ページが読み込まれてから実行します
window.onload = init;

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

クリックすると別ウインドウで再生されます

クリックすると別ウインドウで再生されます

Away3Dのオブジェクトの作成手順として(1)マテリアルを作成 (2)ジオメトリを作成 (3)メッシュを作成という3つの手順を踏むことになります。上の例ではTriangleMethodMaterialクラスのインスタンスを作成したあとに、 PrimitiveSpherePrefab(球体の形状)を作成し、Meshオブジェクトのmaterialプロパティにマテリアルのインスタンスを指定しています。

しかしライティングがないと陰影がなく3Dの質感がわからないため、上記のスクリプトでは冒頭でDirectionalLightクラスのインスタンスを作成し、マテリアルに適用しています。DirectionalLightクラスは指定した方向からライトを適用することができます。

ライティングについて

Away3Dで使用できるライティングには以下の種類があります。

  • away.lights.DirectionalLight クラス
    方向ライト。ライトの位置と方向を指定し平行に到達する光として使用できます。
  • away.lights.PointLight クラス
    点ライト。ライトの位置、半径、フォールオフ(減衰)を指定し、その周囲をふんわりと照らす光として使用できます。
  • away.lights.LightProbe クラス
    ライトプローブ。3D空間内のライトの情報を事前に計算しておく手法のこと。計算コストを抑えた雰囲気のある光の表現が可能です。

各ライトには、ライトの色、アンビエント(環境光の色)、デフューズ(光の強度)、スペキュラ(光沢)等を指定するプロパティを備えています。今回はDirectionalLightのみを使用しています。

画像をマテリアルに使用する方法

おそらく一番使用頻度が高いと思われれるのが、画像を使ったマテリアルです。画像はGPUの制約から、2の累乗の高さ・幅である画像のみが利用できます。

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

準備ができましたら次のJavaScriptを使って試してみましょう。

var view;
var image;
var mesh;
function init() {
    // <img>タグのImageオブジェクトを作って画像読み込み
    image = new Image();
    image.onload = onLoadImage;
    image.src = "../imgs/earthmap1k.jpg";
}
function onLoadImage() {
    // 3Dの土台を作成します
    var renderer = new away.render.DefaultRenderer();
    view = new away.containers.View(renderer);
    view.width = window.innerWidth; // 画面全体で表示
    view.height = window.innerHeight;
    // HTMLの<img>オブジェクトからテクスチャを作成
    var ts = new away.textures.ImageTexture(image);
    // マテリアルを作成します
    var material = new away.materials.TriangleMethodMaterial(ts);
    // ライトを作成します
    var light = new away.entities.DirectionalLight();
    // マテリアルにライトを適用します
    material.lightPicker = new away.materials.StaticLightPicker([light]);
    // 球体の形状を作成します
    var geometry = new away.prefabs.PrimitiveSpherePrefab(300);
    geometry.material = material;
    // 形状とマテリアルからメッシュを作成します
    mesh = geometry.getNewObject();
    // シーンにメッシュを追加します
    view.scene.addChild(mesh);
    // アニメーションさせるためにループイベントを指定します
    var raf = new away.utils.RequestAnimationFrame(tick, this);
    raf.start();
}
// 毎フレーム時に実行されるループイベントです
function tick() {
    mesh.rotationY -= 0.5;
    view.render(); // レンダリング
}
// ページが読み込まれてから実行します
window.onload = init;

画像を使うには事前に画像ファイルの読み込みを済ませておく必要があります。そのためImageオブジェクトを作成し、onloadイベントを使って画像の読み込み完了タイミングを待ってから初期化するようにしています。

クリックすると別ウインドウで再生されます

クリックすると別ウインドウで再生されます

まとめ

今回のチュートリアルでは、マテリアルとライティングについての解説を行いました。3Dオブジェクトの見栄えを構成する要素のため、コーディングの結果がすぐに見た目に反映され、3Dのプログラミングにおいてとても楽しい部分です。ぜひサンプルを元に色々と試してみてください。

第2回は以上です。今回のソースファイルはこちらからダウンロードできます。

次回の記事では、様々な基本的な形状の作成方法を説明します。

連載目次

池田 泰延

池田 泰延

ICS代表。筑波大学 非常勤講師。ICS MEDIA編集長。個人実験サイト「ClockMaker Labs」やセミナー・書籍執筆などの活動を通して積極的にインタラクションデザインの情報共有に取り組んでいる。著書に「Flash for HTML5」「Stage3Dプログラミング」など多数。