オレ向けメモの続き。表示系の土台たるView3Dを押さえてみる。
クラス名の雰囲気的にPV3DのViewport3Dと同じものかと思っちゃうけど、どちらかというとBasicViewクラスに近い。

View3Dを生成すると、主なものとして

• Scene3D
• カメラ
• レンダラ
• AbstractRenderSession
• クリッピング領域
• hud、interactiveLayer、backgroundという3つのSprite

が定義される。
このうちhud、interactiveLayer、backgroundについては下記のようになってる。

3D空間のレンダリング結果が描画される_session.container（AbstractRenderSession.container）を挟む形で、画面手前からhud、interactiveLayer、_session.container、backgroundの順。hudは、3D空間より手前に表示したいもの（ゲームとかだと体力ゲージとか、エースコンバットみたいなものならまさにHUDを）をここにaddChildしとけってことか。

逆にbackgroundは、3D空間よりも奥にあって、遠景の画像とかを配置するみたいな使い方かな。interactiveLayerは、MovieMaterialに割り当てたMovieClipがインタラクティブ要素を含む場合に使われてるみたいなんだけどイマイチわかんね。パッと見た感じ_session.containerには外部からアクセスできないみたいなので、PV3DのマルチViewportみたいなことは、とりあえずムリかもしれない。

View3D自体もSpriteを継承していて、3D空間ごとStageに配置するようなイメージ。View3Dの原点は（矩形領域と考えて）左上ではなく（矩形領域の）中心になるのでView3Dのx、y座標を定義する場合に注意。例えばステージのセンターにView3Dを配置する場合は

var view:View3D = new View3D();
view.x:stage.stageWidth/2;
view.y:stage.stageHeight/2;

もしくは

var view:View3D = new View3D({x:stage.stageWidth/2, y:stage.stageHeight/2});

てな感じに。
hudやbackgroundも、つい左上が原点と考えがちだけど、これらも中心が原点になる。

コンストラクタへの引数はオブジェクトで渡す。表記は冗長になるけどコードを見た時にパラメータの意味が把握しやすい。

View3D({scene:hoge, camera:fuga, stats:false, x:500, y:300});

引数は下記のような感じ。

stats:Boolean［true］… ステータスパネルのon/off
scene:Scene3D［new Scene3D()］… Scene3D設定
camera:Camera3D［new Camera3D({x:0, y:0, z:1000, lookat:"center"}］… カメラ設定
renderer:IRenderer［new BasicRenderer()］… レンダラ設定
session:AbstractRenderSession［new SpriteRenderSession()］… RenderSession設定
clip:Clipping［defaultclip / new Clipping()］… クリッピングする矩形領域の設定
x:Number［0］
y:Number［0］

※［］内はデフォルト値

【stats】swf再生時に3Dオブジェクトを[ctrl] + クリック（Windows環境なら右クリック）で表示されるコンテキストメニューからステータスパネルを呼び出す機能を活かすかどうか。

var view:View3D = new View3D({stats:false});

で、ステータスパネルを無効化。

【scene】通常デフォルトのままでいいと思うけど、Scene3Dのコンストラクタでphysicsと、tickTraverserが設定できるので、ここを指定したい場合なんかに

var scene3d:Scene3D = new Scene3D({physics});
var view:View3D = new View3D({scene:scene3d});

とかいう感じで設定するんだろうけど、肝心のphysicsと、tickTraverserについてが全くわかんね。とりあえず保留。

【camera】Camera3D以外のカメラ使う場合は必ず指定。

var targetCamera:TargetCamera3D = new TargetCamera3D();
var view:View3D = new View3D({camera:targetCamera});

【renderer】デフォルトのBasicRenderer以外に、QuadrantRendererってのがあって、空間分割最適化されたレンダラか？とか思ったけどよくわからん。追記：ねぎミクで遊んだ時に調べた事を完全に忘れて何をすっとぼけてるのかオレは…。レンダラについては別途まとめる。
あと、以前デモで使ったFogFilterのようなフィルタ類を適応したい場合も任意に指定する必要がある。

var fog:FogFilter = new FogFilter({material:new ColorMaterial(0xFFFFFF,{alpha:0.1}),minZ:5000,maxZ:20000});
var rend:BasicRenderer = new BasicRenderer(fog);
var view:View3D = new View3D({renderer:rend});

【session】PV3DのRenderSessionと同じようなもの（むしろPV3Dが取り入れた）と考えてたんだけど、Away3DはRenderSessionで描画処理を一局集中で行ってるみたい（PV3Dだと描画系の処理は各マテリアルで行う）なので全然違うシロモノかもしれない。よーわからんッス。

【clip】通常はデフォルト値で問題無いと思うけど、より狭い範囲で頂点クリップしたい場合は任意に指定する。

var rc:RectangleClipping = new RectangleClipping(-500,-500,500,500);
var view:View3D = new View3D({clip:rc});

※デフォルトは、RectangleClipping(-1000000,-1000000,1000000,1000000)

View3Dはこんな感じか。
それにしても、Away3DはASDocがほとんど役に立ちませんな；

とりあえず何か表示させるための基本を押さえる。
svnリポジトリの trunk > examples > HelloAway3D 超基本サンプルがあるんだけど、かなり以前のリビジョンベースのままずっと放置されてて、Away3D2.0だとコンパイルエラーになる。なんという一見さんお断りっぷり。
動くようにしたのが下記。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

package
{
    import flash.display.*;
    import flash.events.*;
    import flash.utils.*;
 
    import away3d.containers.*;
    import away3d.primitives.*;
    import away3d.materials.*;
 
    [SWF(backgroundColor="#222266", frameRate="60", width="600", height="400")]
    public class HelloAway3D extends Sprite
    {
        public var view:View3D;
        public var sphere:Sphere;
 
        public function HelloAway3D()
        {
            view = new View3D();
            view.x = 300;
            view.y = 200;
            addChild(view);
 
            var wcMat:WireColorMaterial = new WireColorMaterial(0xFF7700, {wirecolor:0xCC4400})
            sphere = new Sphere({material:wcMat, radius:250, segmentsW:12, segmentsH:9, y:50});
 
            view.scene.addChild(sphere);
            view.camera.lookAt(sphere.position);
 
            addEventListener(Event.ENTER_FRAME, onEnterFrame);
        }
 
        private function onEnterFrame(event:Event):void
        {
            view.render();
            sphere.rotationY = getTimer() / 100;
        }
 
    }
}

• とくにかくView3Dを生成する。
• View3Dオブジェクトに内包される形で、scene と camera が生成される。そこだけ承知しとけばPV3Dと流れは変わらない。
• View3D.render()でレンダリング。
• View3Dと、PV3DのViewport3Dは似て非なるものなので注意。

view.scene とか、view.camera とかいう記述がイマイチしっくりこないんで、もうちょっとPV3Dライクに。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

package
{
    import flash.display.*;
    import flash.events.*;
 
    import away3d.containers.View3D;
    import away3d.cameras.TargetCamera3D;
    import away3d.primitives.Sphere;
    import away3d.materials.WireColorMaterial;
 
    [SWF(backgroundColor="#000000")]
 
    public class Away3DBasic extends View3D
    {
        private var sphere:Sphere;
 
        public function Away3DBasic()
        {
            stage.frameRate = 60;
            stage.align = StageAlign.TOP_LEFT;
            stage.scaleMode = StageScaleMode.NO_SCALE;
            stage.quality = StageQuality.MEDIUM;
 
            stage.addEventListener(Event.RESIZE, onStageResize);
            addEventListener(Event.ENTER_FRAME, onEnterFrame);
 
            //View3D init
            var targetCamera:TargetCamera3D = new TargetCamera3D();
            super({camera:targetCamera, x:stage.stageWidth/2, y:stage.stageHeight/2});
 
            //Camera Setting
            camera.z = -2500;
            camera.focus = 500;
            camera.zoom = 12;
 
            //Material Setting
            var wcMat:WireColorMaterial = new WireColorMaterial(0x0099CC, {wirecolor:0x00CCFF});
 
            //3DObject Setting
            sphere = new Sphere({material:wcMat, radius:100, segmentsW:12, segmentsH:9});
            scene.addChild(sphere);
        }
 
        //Render Loop
        private function onEnterFrame(event:Event):void
        {
            //rotation Sphere
            sphere.rotationY += 0.5;
 
            //Rendering
            render();
        }
 
        private function onStageResize(event:Event):void
        {
            this.x = stage.stageWidth >> 1;
            this.y = stage.stageHeight >> 1;
        }
 
    }
}

View3Dの定義時に、わざわざTargetCamera3Dを設定してるのは、デフォルトのCamera3DがPV3DでいうところのFreeCamera3Dだから。動作確認のためのデモをゴリゴリ作る場合は、カメラがワールド原点注視しっぱなしのほうが個人的に楽なので。

Away3Dに関するオレのオレによるオレのための覚え書き開始。
地味だけど座標変換のキモとなる Matrix3D と Number3Dから。それと、理解が追いつかない Quaternion もついでに。

Matrix3D

まずはMatrix3D。行列を扱うクラス。

コンストラクタ

import away3d.core.math.Matrix3D;

var matrix:Matrix3D = new Matrix3D();

PV3Dの

var matrix:Matrix3D = Matrix3D.IDENTITY;

と等価。

各成分へのアクセス

var matrix:Matrix3D = new Matrix3D();
matrix.sxx; //1行1列目
matrix.sxy; //1行2列目
matrix.sxz; //1行3列目
matrix.tx;  //1行4列目
・
・
・
matrix.tz;  //3行4列目

行列から位置を取得

var matrix:Matrix3D = new Matrix3D();
var pos:Number3D = matrix.position();

やってることは以下と同じ

var pos:Number3D = new Number3D();
pos.x = matrix.tx;
pos.y = matrix.ty;
pos.z = matrix.tz;

行列式の取得

var matrix:Matrix3D = new Matrix3D();
var determinant:Number = matrix.det();

※逆行列が存在するかどうかの判別以外に行列式の使い道知らないんだけど、何かあるのかな？

行列のかけ算

var multiplymatrix:Matrix3D();
multiplymatrix.multiply(matrix1, matrix2);

回転成分だけをかけ算

var multiply3x3matrix:Matrix3D();
multiply3x3matrix.multiply3x3(matrix1, matrix2);

行列をスカラー倍

matrix.scale(2, 1, 1);

行列の複製

var newMatrix:Matrix3D = matrix.clone();

回転成分だけをコピー

var newMatrix:Matrix3D = Matrix3D.copy3x3(matrix);

回転行列の取得

Matrix3D.rotationMatrix(u:Number, v:Number, w:Number, angle:Number)

//X軸で40度回転する行列の取得
var rotationmatrix:Matrix3D = new Matrix3D();
rotationmatrix.rotationMatrix(1, 0, 0, 30*Math.PI/180);

//Y軸で20度回転する行列の取得
var rotationmatrix:Matrix3D = new Matrix3D();
rotationmatrix.rotationMatrix(0, 1, 0, 20*Math.PI/180);

//Z軸で15度回転する行列の取得
var rotationmatrix:Matrix3D = new Matrix3D();
rotationmatrix.rotationMatrix(0, 0, 1, 15*Math.PI/180);

移動行列の取得

//X軸方向に20、Y軸方向に30、Z軸方向に40移動する
var translationmatrix:Matrix3D = new Matrix3D();
translationmatrix.translationMatrix(20, 30, 40);

拡大縮小行列の取得

//X軸方向に2倍、Y軸方向に3倍、Z軸方向に4倍
var scalematrix:Matrix3D = new Matrix3D();
scalematrix.translationMatrix(2, 3, 4);

逆行列の取得

var inverseMatrix:Matrix3D = new Matrix3D();
inverseMatrix.inverse(matrix);

配列から行列を生成

var matArray:Array =
[
1,0,0,0,
0,1,0,0,
0,0,1,0
];
//4行目は0,0,0,1固定なので、3行4列分を定義

matrix.array2matrix(matArray);

行列からオイラー角に変換

var angle:Number = matrix.matrix2euler();

//角度はDegreeに変換される
obj.rotationX = angle.x;
obj.rotationY = angle.y;
obj.rotationZ = angle.z;

クォータニオンから行列に変換

var q:Quaternion = new Quaternion();
q.axis2quaternion(1,0,0,45*Math.PI/180);
var mat:Matrix3D = new Matrix3D();
mat.quaternion2matrix(q);

よくある使いどころ

//Cubeを生成
var wcMat:WireColorMaterial = new WireColorMaterial(0x0099CC, {wirecolor:0x00CCFF});
vae cube:Cube = new Cube({width:200, height:200, depth:200, faces:{left:wcMat, right:wcMat, bottom:wcMat,top:wcMat,front:wcMat,back:wcMat} });
scene.addChild(sphere);

//Z軸で45度回転する行列を取得
var rotationmatrix:Matrix3D = new Matrix3D();
rotationmatrix.rotationMatrix(0, 0, 1, 45*Math.PI/180);

//行列をcube.transform（Cubeの同次座標）にかける
cube.transform.multiply(cube.transform, rotationmatrix);

※これだけだったらrotationZ使えって話；

Number3D

次はNumber3D。ベクトルを扱うクラス。

コンストラクタ

import away3d.core.math.Number3D;
var vec:Number3D = new Number3D(x:Number, y:Number, z:Number, n:Boolean);

//引数を定義しなければ方向性を持たないゼロベクトルになる
var vec:Number3D = new Number3D();

各成分へのアクセス

var vec:Number3D = new Number3D(1,0,1);

trace(vec.x, vec.y, vec.z);

static変数

Number3D.FORWARD … Number3D(0, 0, 1)と等価
Number3D.BACKWARD … Number3D(0, 0, -1)と等価
Number3D.LEFT … Number3D(-1, 0, 0)と等価
Number3D.RIGHT … Number3D(1, 0, 0)と等価
Number3D.UP … Number3D(0, 1, 0)と等価
Number3D.DOWN … Number3D(0, -1, 0)と等価

ベクトルの正規化

var vec:Number3D = new Number3D(5, 1, 3);
vec.normalize();

//コンストラクタの第4引数をtrueにすることで代用可
var vec:Number3D = new Number3D(5, 1, 3, ture);

ノルム（ベクトルの大きさ）を取得

var vec:Number3D = new Number3D(2, 1, 8);
var mod:Number = vec.modulo;

ノルムの大きさを大まかに判別（ざっくりだけど高速？）

var vec:Number3D = new Number3D(20, 20, 0);
var mod:Number = vec.modulo2;
var magnitude:Number = 5;

//(mod > magnitude*magnitude) が true ならvecのノルムはmagnitudeより大きい
//(mod < magnitude*magnitude) が true ならvecのノルムはmagnitudeより小さい
//(mod == magnitude*magnitude) が true ならvecのノルムはmagnitudeと等しい

※PV3DのNumber3DにあるmoduloSquaredと同じものだと思うけど自信ない。

ベクトルを複製

var vec:Number3D = new Number3D(20, 20, 0);
var newVec:Number3D = vec.clone();

加算と減算

//加算
var result:Number3D = new Number3D();
var vec1:Number3D = new Number3D();
var vec2:Number3D = new Number3D();
result.add(vec1, vec2);

//減算
var result:Number3D = new Number3D();
var vec1:Number3D = new Number3D();
var vec2:Number3D = new Number3D();
result.sub(vec1, vec2);

内積と外積

//内積
var vec1:Number3D = new Number3D();
var vec2:Number3D = new Number3D();
vec1.dot(vec2);

//外積（法線ベクトル取得）
var crossResult:Number3D = new Number3D();
var vec1:Number3D = new Number3D();
var vec2:Number3D = new Number3D();
crossResult.cross(vec1, vec2);

ベクトルをスカラー倍

var vec:Number3D = new Number3D();
var vec1:Number3D = new Number3D(1,0,0);
vec.scale(vec1,2);

2つのベクトルのなす角度（ラジアン）を取得

var vec:Number3D = new Number3D(1, 0, 0);
var vec2:Number3D = new Number3D(0, 1, 0);
var angle:Number = vec.getAngle(vec2);

2つのベクトルの距離を取得

var vec:Number3D = new Number3D(1, 0, 0);
var vec2:Number3D = new Number3D(0, 1, 0);
var dist:Number = vec.distance(vec2);

Matrix3Dでベクトルを変換

//Number3D.rotate(v:Number3D, m:Matrix3D)
//回転のみ
var vecResult:Number3D = new Number3D();
var vec:Number3D = new Number3D(1, 0, 0);
var rotationmatrix:Matrix3D = new Matrix3D();
rotationmatrix.rotationMatrix(0, 0, 1, 45*Math.PI/180);
vecResult.rotate(vec,rotationmatrix);

//Number3D.transform(v:Number3D, m:Matrix3D)
//4x4
var vecResult:Number3D = new Number3D();
var vec:Number3D = new Number3D(1, 0, 0);
var translationmatrix:Matrix3D = new Matrix3D();
translationmatrix.translationMatrix(0, 30, 0);
vecResult.transform(vec,rotationmatrix);

ベクトルが無限平面と交わる位置を取得？

var p:Number3D = new Number3D(5,5,2); //任意のベクトル
var k:Number3D = new Number3D(10, 10, 10); //平面上の一点
var n:Number3D = new Number3D(0, 0, 1); //平面の法線ベクトル

var vecResult:Number3D;
vecResult = p.closestPointOnPlane(p,k,n); //vecResultにベクトルpが平面と交わる座標が返るのか？

※これについてはウソ書いてる可能性多いにアリ。PV3Dにも core.math.Plane3D に同様のメソッドがある。

Quaternion

最後はQuaternion。文字通りクォータニオン（四元数）を扱うクラス。永遠に理解できそうもない。
PV3Dと比べると限定的な機能しかなさげ。ライブラリ内部でもほとんど使われてない。SLERP（球面線形補完）のメソッドも無いので、どーしても使いたきゃ自力で実装しろってことか。

import away3d.core.math.Quaternion;
var q:Quaternion = new Quaternion();

※コンストラクタが無いので、クォータニオンを生成するには後述のaxis2quaternionか、euler2quaternionを使うと。

回転クォータニオンを得る

//axis2quaternion(x:Number, y:Number, z:Number, angle:Number)

var q:Quaternion = new Quaternion();
q.axis2quaternion(1,0,0,45*Math.PI/180);

オイラー角から回転クォータニオンを得る？

//euler2quaternion(ax:Number, ay:Number, az:Number)

var q:Quaternion = new Quaternion();
q.euler2quaternion(0,0,45*Math.PI/180);

※これも自信ないなぁ思惑と違う結果になる。引き続き意識の片隅に。

クォータニオンの大きさを得る

var q:Quaternion = new Quaternion();
q.euler2quaternion(rotationZ,rotationY,rotationX);

var mag:Number = q.magnitude;

クォータニオンを正規化

var q:Quaternion = new Quaternion();
q.euler2quaternion(rotationZ,rotationY,rotationX);
q.normalize();

クォータニオンのかけ算

var q:Quaternion = new Quaternion();
var q2:Quaternion = new Quaternion();
var ans:Quaternion = new Quaternion();

q.euler2quaternion(rotationZ,rotationY,rotationX);
q2.axis2quaternion(1,0,0,45*Math.PI/180);
ans.multiply(q,q2);

あと、Number2D っていうNumber3Dの2D版っぽいクラスもあって、MovieMaterialとかで使われてるみたいだけど、とりあえず割愛。

core.mathパッケージのクラスは、コードの書き方をまとめたところで何の役にも立ちませんな；
「ベクトルの内積が0なら、2つのベクトルは直角」とか「3Dベクトルの外積＝法線ベクトル」みたいな超基本的な事はもちろん、Number3DやMatrix3Dの各メソッドがどういう概念に基づいて実装されてるのかがわかってないと使いようがない。逆にそういった知識は3Dプログラミング全般で役に立つと思うので、もっと必死こいて勉強すれ！＞オレ

コツコツと地味にバージョンアップを重ねてきたAway3Dが、とうとう2.0リリース。
悶絶なデモまで併せて公開。脱帽でございます。

主要な追加機能は以下のような感じ。

• Simulated phong shading (with blinn-phong specular highlights)
  フォンシェーディングもどき？
• Environment-mapped materials
  環境マップ
• Normal-mapped materials (an open source first for Flash)
  法線マップ（！）
• Z-depth filter for large outdoor scenes
  Farclipみたいなものかと
• Fog filter
  フォグフィルタ
• Straight-to-bitmap rendering for fast scaled views
  よくわかんね。これのことかな？
• Surface caching for fast rendered lights
  ライトとの関係で変化するサーフェスのレンダリング結果をキャッシュ

バージョンアップ内容詳細

Z-depth filter と Fog filter 待ってた！いつか実装してくれると信じてた。これでようやくササヤカな野望の実現に向けて一歩前進。とりあえず、PV3DのFrustumCameraを使ったデモを移植しつつ、Z-depth filterとFog filterを使ってみた。

fogTest.swf（要：FlashPlayer9）
※地形データの読み込みに少々時間がかかります。
※画面クリック後、カーソルキーでカメラが移動

どんだけ濃霧なんだよって感じだけどイイっ！あとはニアクリップを上手いことやる方法がわかれば文句ないわ。盛り上がってまいりました。オレだけが。