« タイルで作ってみた
今朝のニュース »

ふわっふわ！ファーのレンダリング

by key

名刺の上に出てくる子達は、PV3DではなくFlashPlayer10で追加された描画APIを直に使っています。これらのAPIを使った描画は、パースペクティブコレクトをサポートしているうえ、今まで使われていた3D描画手法より高速に動きます。もうDisplacementMapFilterで地球を回してる場合じゃないよ！

そこで、ふわふわ大好きなBOWメンバーの要望に答え、ふわふわの毛皮が生えたようなエフェクト、いわゆるファーを力技で作ってみました。

fluffy_fur_rendering-300x225.jpg

クリックで再生（要FlashPlayer10）

目の周りの段差が良いですね！作り方は続きに。

作り方は非常に単純で、表示するモデルを同じ形状の一回り大きいモデルで包み、ファーの断面形状のテクスチャを設定するだけです。これをファーの長さに達するまで繰り返します。

一回り大きいモデルはモデリングツールで作ると簡単なのですが、それでは面白くないので実行時に計算させています。コードは以下のような感じで、元となるモデルの各頂点を、その頂点の法線方向に移動しています。頂点の法線は、その頂点が所属する各面の法線の合成で求めています。

  1. protected function expandGeometry(geometry:MeshGeometry3D, amount:Number):void {
  2.     var normals:Vector.<Vector3D> = new Vector.<Vector3D>(geometry.vertices.length / 3, true);
  3.     var i:uint = 0;
  4.     for (i=0; i<normals.length; i++) {
  5.         normals[i] = new Vector3D(0, 0, 0, 1);
  6.     }
  7.     for (i=0; i<geometry.indices.length; i+=3) {
  8.         var i1:uint = geometry.indices[i+0];
  9.         var i2:uint = geometry.indices[i+1];
  10.         var i3:uint = geometry.indices[i+2];
  11.         var v1:Vector3D = new Vector3D(geometry.vertices[i1 * 3 + 0], geometry.vertices[i1 * 3 + 1], geometry.vertices[i1 * 3 + 2]);
  12.         var v2:Vector3D = new Vector3D(geometry.vertices[i2 * 3 + 0], geometry.vertices[i2 * 3 + 1], geometry.vertices[i2 * 3 + 2]);
  13.         var v3:Vector3D = new Vector3D(geometry.vertices[i3 * 3 + 0], geometry.vertices[i3 * 3 + 1], geometry.vertices[i3 * 3 + 2]);
  14.         var a:Vector3D = v2.subtract(v1);
  15.         var b:Vector3D = v3.subtract(v1);
  16.         var normal:Vector3D = a.crossProduct(b);
  17.         normal.normalize();
  18.         normals[i1] = normal.add(normals[i1]);
  19.         normals[i2] = normal.add(normals[i2]);
  20.         normals[i3] = normal.add(normals[i3]);
  21.     }
  22.     for (i=0; i<normals.length; i++) {
  23.         geometry.vertices[i * 3 + 0] += normals[i].x * amount;
  24.         geometry.vertices[i * 3 + 1] += normals[i].y * amount;
  25.         geometry.vertices[i * 3 + 2] += normals[i].z * amount;
  26.     }
  27. }

 
関数の呼び出し側を見るとamountに負数を渡してたりしますが気にしないでください。

苦労したのはファーテクスチャで、この出来でファーのふわっふわ具合が決まります。もう一度言いますがふわっふわです。最終的にできたのはこんな画像。画像を見ても仕上がりが全然分かりません。

ソースはこちら。

今後の予定ですが、ファーにバンプマップを行うと実物感が出るので、それやってみたいなあ。うまいやり方を思いついたら。また軽量化にも挑戦して、名刺のアバターエディットで選べるようにもしたいです。

タグ: , , , ,

この投稿は 2008 年 12 月 14 日 日曜日 6:27 AM に dev, flash カテゴリーに公開されました。 この投稿へのコメントは RSS 2.0 フィードで購読することができます。 コメントを残すか、ご自分のサイトからトラックバックすることができます。

コメント / トラックバック 3 件

  1. kagikko より:
    2008 年 12 月 17 日 5:45 PM

    耳穴がめちゃ毛深い！
    もりあがっとる。

  2. key より:
    2008 年 12 月 18 日 4:15 PM

    耳穴！

  3. links for 2009-01-13 « Web、プログラミングの技術など - gentenzero blog より:
    2009 年 1 月 14 日 12:02 AM

    [...] pekolog» ブログアーカイブ » ふわっふわ！ファーのレンダリング キャラクターがいい。 ふわっふわ。 (tags: actionscript) [...]

コメントをどうぞ