2007-09-16

papergraph

隣の同僚が papervision 3d で遊んでいた. 案外よくできていて面白い. 私もコードを眺めてみようと まず Google Code にある レポジトリからチェックアウト. まえ "かさぶた。" に Z ソートだと書いてあったのを思いだし調べてみたら, たしかにソートしている. わーおい...

そんなかんじで読み進めたけれど, いまいち好みが合わない. それにシーングラフの API だけなのはもどかしい. もっと DirectX や OpenGL みたいな切り口にできないものか ... というわけで書いてみた. 本家に敬意を表し "papergraph" と命名した: デモ, レポジトリ, スナップショット

最小限のコードはこんなかんじ:


package
{
    ....
    public class Hello extends Sprite
    {
        ....
        public function Hello()
        {
            var attrs:RenderingAttributes = new RenderingAttributes();

            var eye:Tuple = new Tuple(0.0, 0.0, 100.0);
            var center:Tuple = new Tuple(0.0, 0.0, 0.0);
            var up:Tuple = new Tuple(0.0, 1.0, 0.0);
            attrs.modelMap = Map.lookAt(eye, center, up);
            attrs.projectionMap = Map.perspective(Math.PI/3.0, WIDTH/HEIGHT);
            attrs.viewport = new Rectangle(0.0, 0.0, WIDTH, HEIGHT);

            var v0:Vertex = new Vertex(-50.0, -50.0, 0.0);
            var v1:Vertex = new Vertex(-50.0,  50.0, 0.0);
            var v2:Vertex = new Vertex( 50.0,  50.0, 0.0);
            var v3:Vertex = new Vertex( 50.0, -50.0, 0.0);
            var verts:Array = [ v0, v1, v2, v3 ];
            var faces:Array = [ new Face(v0, v1, v2), new Face(v0, v2, v3) ];

            var vs:PlainVertexShader = new PlainVertexShader();
            var fs:WireFaceShader = new WireFaceShader();
            fs.fillColor = 0xaaaacc;
            fs.lineColor = 0x9999aa;

            var r:Renderer = new Renderer(graphics, attrs);
            r.emitFaces(verts, vs, faces, fs);
            r.render();
        }
    }
}

シーングラフよりは素朴でしょ.

実体は papervision 本体や 赤本, 橙本, RTR などを 切り貼りして寄せ集めただけなので, おおよそのアルゴリズムも papervision と大差ないはず. 最初は座標変換とソートだけ書いたら Flash で 3D をやる 最低限の仕組みを説明するつもりだったけれど, 絵がでると嬉しくなってちょこちょことコードをいじり, 時間がかかってしまった.

なんだか 90 年代の 3DCG みたい. ノスタルジーがある. 私は学生のころ Web の 3DCG プログラマコミュニティにいて, でも自分でレンダラを書くほどの腕はない落ちこぼれだった. だから書いたコードで環境マップつきティーポットがくるくる回るのは ちょっと感無量. まあクリッピングとかラスタライズみたいに 一番面倒な部分は Flash がやってくれるんだけど...

詳しい話は次回. (たぶん.)

追記.