Wonderfulで始めるAlternativa3D

入門編1. とりあえず触ってみよう

残念ながら国内ではまったくといって良いほど、普及していない模様のAlternativa3Dなのですが、そのポテンシャルは、決して他の3Dライブラリに劣っていない・・・むしろ用途においては上の部分も多いと思っております。 (当サイトのポップアップ絵本メーカーや、ホームメーカーもAlternativa3Dで開発しています)

そもそも、開発元がロシアな上、日本語のドキュメントが無い、Tutorialやsampleも少ない、英語、ロシア語のDocにもほとんど使用例が無い。商用利用が有料などなど、様々な要因で、日本国内では、Papervision3D(以後Pv3D)に完全に押されている状況です。

そんな盛り上がるPv3D界を横目に指をくわえて、一人で悶々と悩み開発する事にも最近疲れ気味なので、 ここらでじっくりとAlternativa3Dの使い方を解説し、国内での同士を増やしたいと思います。

触る人が増えると、様々な使用例やライブラリも充実してくるのではないかと・・・いう目論みです。

ちょうど、Wonderfl(ブラウザ上でActionScript3を使ってFlashを作る事が出来るオンラインサービス)で、Alternativa3Dライブラリが使用できるようになり、またclockmakerさんが、初期設定を自動で行ってくれるAlternativa3D用テンプレートを投稿されていますので、そちらを利用させてもらいながら、色々と解説していきたいと思います。

もし、自分のPCで開発したいという方は、Alternativa3Dの導入方法(FlashCS3、4編)を参照してください。

参考記事

 

まずは触ってみる

再生ボタンで、動きます。
四角い箱が回っているはずです。

このAS3ソースは、Wonderflで閲覧できますので、Flashの下の
[Alternativa3D] Basic Template - wonderfl build flash onlineをClickして、参照してください。

なお、Wonderfl上での操作は、Wonderflヘルプをご覧ください。

以下がソースに書かれている内容です

package { 
    import alternativa.engine3d.materials.DevMaterial; 
    import alternativa.engine3d.primitives.Box; 
    import alternativa.types.Point3D; 
    import flash.display.Sprite; 
     
    [SWF(width = 465, height = 465, frameRate = 60)] 
    /** 
     * Alternativa3D を簡単に扱うためのベーシックテンプレート 
     * @author Yasu (clockmaker) 
     */ 
    public class SimpleDemo extends Sprite { 
         
        public function SimpleDemo():void { 
            // テンプレートを作成します 
            var template:BasicTemplate = new BasicTemplate(); 
            addChild(template); 
             
            // マテリアルを作成します 
            var material:DevMaterial = new DevMaterial(); 
             
            // プリミティブを作成します 
            var box:Box = new Box(600, 600, 600); 
            box.cloneMaterialToAllSurfaces(material); 
             
            // 3Dシーンのルートに追加します 
            template.scene.root.addChild(box); 
             
            // Event.ENTER_FRAME 時に実行されるレンダリングのイベントです。 
            // レンダリング前に実行したい処理を記述します。 
            template.onPreRender = function():void { 
                // 立方体を回転させます (角度はラジアン) 
                box.rotationY += 1 * Math.PI / 180; 
             
                // マウスがステージの高さ何%の位置にあるか算出 
                var rateY:Number = mouseY / stage.stageHeight; 
                 
                // カメラの高さの座標を調整 
                // イージングの公式 対象の値 += (目標値 - 現在の値) * 減速率 
                template.camera.y += ( - 1000 * rateY - template.camera.y) * 0.1; 
                 
                // カメラの座標を中央に向かせる 
                template.cameraContoller.lookAt(new Point3D()); 
            } 
        } 
    } 
} 


/** 
 * BasicTemplate for Alternativa3D 
 * Alternativa3Dを扱いやすくするためのテンプレートです 
 * @author Yasu 
 */ 


		

大まかな流れとして、

1.テンプレートを作成

Alternativa3Dに必要な初期設定(Scene、Camera、View等)を自動で行うテンプレートを作成。

2.マテリアルを作成

下記で作成する3Dオブジェクト(BOXプリミティブ)に使用する、マテリアル(表面素材)を作成。

3.プリミティブを作成

Sceneに配置する3Dオブジェクト(ここではBOX)を作成。

4.マテリアルを指定

プリミティブにマテリアルを貼り付け

5.レンダリング

実際にSceneを描画

ということが行われています。
(各要素の細かい説明は、今後の連載で解説していきます)

その他レンダリング前に3Dオブジェクトを回転させたり、Mouseの位置で、カメラの位置を動かしたりもしていますが、 基本はこの大まかな流れ5つの要素でAlternativa3Dによる3D表現は作成されていきますのでとりあえず、そこだけ押さえておいてください。(2と3の順は逆でもかまいません。)

なお、最初の段階では、
* BasicTemplate for Alternativa3D
* Alternativa3Dを扱いやすくするためのテンプレートです
以降に書かれている、BasicTemplate クラスの中は意識しなくても問題はありません。

Menu

入門編

初級編

7. Sprite3Dとは?

8. MovieClipMaterial

中級(インタラクティブ編)

1. インタラクティブなオブジェクト

2. 反応するモデルと反応しないモデル

3. サーフェースごとのマウスイベント

4. フェースごとのマウスイベント

中級(コントローラー編)

1. コントローラーとは?

2. コントローラーをカスタマイズ

3. 重力・衝突判定

4. LookAt

中級(カメラ&View編)

1. カメラZOOMとFOV

2. 複数のカメラとView

3. Viewのクリッピング

中級(メッシュ作成編)

1. 頂点を作成する

2. 面を作成する

3. 表面を作成する

4. UVを設定する

5. メッシュを作る

実践・応用編

1. 読み込んだ画像で絵本を作る

3. GoogleNexusOne

4. 3Dスロット

5. ルービックキューブ

実験編

1. 3dsの読み込みと操作

2. イラレで作ったpathを押し出す

3. 押し出しによるText3D

4. 自作のマテリアルクラスを作る

5. フラットシェーディングマテリアル

6. 衝突判定を利用した跳ね返り

7. Sprite3Dによるパーティクル表現

8. Sprite3Dでピクセルレンダー

9. Objectのグロー、ブラー