さて、COLLADAオブジェクトに、画像テクスチャを貼り、なおかつライトによるシェーディングを設定できるか、という件です。
まず、昨日の要領で、LWのサーフェイス名にマテリアルを割り当て、マテリアル設定ができるようにします。いつまでもサイコロのサンプルというのも何なので、以前に仕事で使ったPCをサンプルに使います。
var mat1:BitmapFileMaterial = new BitmapFileMaterial("collada/pc.jpg",true);
var materials:MaterialsList = new MaterialsList(
{
NotePc: mat1 //「NotePc」というのが、LW側のサーフェイス名（※頭を数字にしないこと）
} );
// Colladaファイルの読み込み
var dae:DAE = new DAE();
dae.load("collada/pc.dae",materials);
scene.addChild(dae);
で、以下のようになります。（画像をクリックしてください）
テクスチャに少し陰影も付けているので、これはこれで良さそうなのですが、実験のためにこれにシェーディングをつけてみます。
で、その後、いろいろ試行錯誤がありました。
●「CompositeMaterial」でテスト
まず、テクスチャーを複数重ねるなら、「CompositeMaterial」クラスというのがあるからそれで画像とシェーディングを重ねれば良いだろうと思い、ためしてみました。
結果、画像テクスチャを設定することはできたのですが、「Flatshadematerial」など、シェーディングマテリアルを追加すると、長いエラーが出てフリーズしてしまいます。
どうやら、「CompositeMaterial」は、Colorと画像や、Colorとワイヤーフレームなどの組み合わせなら大丈夫なのですが、「Flatshadematerial」以上のシェーディングマテリアルは重ねられないようでした。
ちなみに、重ねる際は先に設定したマテリアルが下になるようです。ある地色の上に画像マップを適用したかったら、先に画像マップを「.addMaterial」で追加してから、色を追加し、色にアルファ値（0～1.0）を指定して透過させると良いようです。
●「ShadedMaterial」でテスト
よくよく調べてみましたら、「ShadedMaterial」というクラスがあることが分かりました。これは、画像とシェーダーを組み合わせてマテリアルを作成し、それをオブジェクトに設定する、というものです。
設定したのが以下です。（画像をクリックしてください）
このサンプルでは、マウスカーソルに合わせて照明が移動するよう設定しました。マウスを動かして効果を試してみてください。
ソースは以下のようになります。
//ライトを作成
var light:PointLight3D = new PointLight3D(true);
//ベースとなる画像マテリアルを作成
var baseMat :BitmapAssetMaterial = new BitmapAssetMaterial("pc",true);
//シェーダーを作成
var shader:GouraudShader = new GouraudShader(light, 0xFFFFFF, 0x333333, 0);
//シェーデッドマテリアルを作成
var material:ShadedMaterial = new ShadedMaterial(baseMat, shader, 0);
var materials:MaterialsList = new MaterialsList({NotePc: material} );
// 「NotePc」はLWでのサーフェイス名
// Colladaファイルの読み込み
var dae:DAE = new DAE();
dae.load("collada/pc.dae",materials);
scene.addChild(dae);
※注意点
注意すべき点は赤字の行なのですが、「BitmapFileMaterial」ではなく、「BitmapAssetMaterial」を使っています。これは、Flashのライブラリに取り込んだ画像ファイルを利用するクラスです。画像は取り込んだ後、「プロパティ」→「リンケージ」で「pc」というクラス名にしてあります。
「BitmapFileMaterial」で「collada/xxx.jpg」みたいに読み込むと、どういうわけかシェーディングが反映されませんでした。
ということで、画像と、ライトによるシェーディングは反映できることが分かりました。
でも、テクスチャに書き込んじゃった方が作業的には早そうです。
作るコンテンツの性質次第で使い分けるべきでしょうね。
てことで、「画像とシェーディング」の設定についてのメモでした。
次回は、
・LWで簡単に作ったサンプルで、本当にアニメーションが書き出されないか、確認。
アニメーションは書き出されないと思われるので、対処方法の検討、です。
まず、昨日の要領で、LWのサーフェイス名にマテリアルを割り当て、マテリアル設定ができるようにします。いつまでもサイコロのサンプルというのも何なので、以前に仕事で使ったPCをサンプルに使います。
var mat1:BitmapFileMaterial = new BitmapFileMaterial("collada/pc.jpg",true);
var materials:MaterialsList = new MaterialsList(
{
NotePc: mat1 //「NotePc」というのが、LW側のサーフェイス名（※頭を数字にしないこと）
} );
// Colladaファイルの読み込み
var dae:DAE = new DAE();
dae.load("collada/pc.dae",materials);
scene.addChild(dae);
で、以下のようになります。（画像をクリックしてください）
テクスチャに少し陰影も付けているので、これはこれで良さそうなのですが、実験のためにこれにシェーディングをつけてみます。
で、その後、いろいろ試行錯誤がありました。
●「CompositeMaterial」でテスト
まず、テクスチャーを複数重ねるなら、「CompositeMaterial」クラスというのがあるからそれで画像とシェーディングを重ねれば良いだろうと思い、ためしてみました。
結果、画像テクスチャを設定することはできたのですが、「Flatshadematerial」など、シェーディングマテリアルを追加すると、長いエラーが出てフリーズしてしまいます。
どうやら、「CompositeMaterial」は、Colorと画像や、Colorとワイヤーフレームなどの組み合わせなら大丈夫なのですが、「Flatshadematerial」以上のシェーディングマテリアルは重ねられないようでした。
ちなみに、重ねる際は先に設定したマテリアルが下になるようです。ある地色の上に画像マップを適用したかったら、先に画像マップを「.addMaterial」で追加してから、色を追加し、色にアルファ値（0～1.0）を指定して透過させると良いようです。
●「ShadedMaterial」でテスト
よくよく調べてみましたら、「ShadedMaterial」というクラスがあることが分かりました。これは、画像とシェーダーを組み合わせてマテリアルを作成し、それをオブジェクトに設定する、というものです。
設定したのが以下です。（画像をクリックしてください）
このサンプルでは、マウスカーソルに合わせて照明が移動するよう設定しました。マウスを動かして効果を試してみてください。
ソースは以下のようになります。
//ライトを作成
var light:PointLight3D = new PointLight3D(true);
//ベースとなる画像マテリアルを作成
var baseMat :BitmapAssetMaterial = new BitmapAssetMaterial("pc",true);
//シェーダーを作成
var shader:GouraudShader = new GouraudShader(light, 0xFFFFFF, 0x333333, 0);
//シェーデッドマテリアルを作成
var material:ShadedMaterial = new ShadedMaterial(baseMat, shader, 0);
var materials:MaterialsList = new MaterialsList({NotePc: material} );
// 「NotePc」はLWでのサーフェイス名
// Colladaファイルの読み込み
var dae:DAE = new DAE();
dae.load("collada/pc.dae",materials);
scene.addChild(dae);
※注意点
注意すべき点は赤字の行なのですが、「BitmapFileMaterial」ではなく、「BitmapAssetMaterial」を使っています。これは、Flashのライブラリに取り込んだ画像ファイルを利用するクラスです。画像は取り込んだ後、「プロパティ」→「リンケージ」で「pc」というクラス名にしてあります。
「BitmapFileMaterial」で「collada/xxx.jpg」みたいに読み込むと、どういうわけかシェーディングが反映されませんでした。
ということで、画像と、ライトによるシェーディングは反映できることが分かりました。
でも、テクスチャに書き込んじゃった方が作業的には早そうです。
作るコンテンツの性質次第で使い分けるべきでしょうね。
てことで、「画像とシェーディング」の設定についてのメモでした。
次回は、
・LWで簡単に作ったサンプルで、本当にアニメーションが書き出されないか、確認。
アニメーションは書き出されないと思われるので、対処方法の検討、です。