Web3D Project by Eyes, JAPAN

こちらは普通にUVマップで画像を貼り付けたものを重ねてBlending Modeを変えてあるものです。左がScreenで、右がMultiplyです。この他にもOverlay、Blerch、Ghost、Saturateがあります。加算合成などが簡単に設定できるのは本当にありがたいですね。この部分がAnarkの命を言っても良いのではないでしょうか？

今回はこんな感じのムービーの作り方を簡単に説明したいと思います。背景に青い光が写っていますが、これは全て3Dモデルで作ってあります。このように説明すると少し難しそうに聞こえるかもしれませんが、すごく簡単です。ちなみにAnarkのほとんどのサンプルにこのような方法が使われています。

まず、球体を作り、奥行きを出すためにZスケールを少し大きめに設定します。奥に長細い球体ですね。

マテリアルの設定を上のように設定するとなにも写っていなかった画面にこのようなものが現れてきます。

今回は左図のモデルを使います。今回使うモデルにはあえてテクスチャを使用しました。テクスチャは書き出し後のファイルサイズを大きく左右しますからね。

まず、適当なモデルを使ってみます。このモデルが1244ポリゴンでまぁWeb3Dで使うにはちょうど良い数だと思います。テクスチャを張ると純粋なサイズがわからなくなるので今回はテクスチャを使用しません。今の状態で書き出すと21kbとかなり小さいです。

これが4976ポリゴンです。これぐらいになると微妙な細かさになってきますが書き出してみると73KBとかなり小さいです。この辺からだんだんエスカレートしていこうと思います。

48000ポリゴンにしてみました。653KB位です。もっと試してみたかったのですがこれ以上はMax側で書き出せないのでやめておきます。

レイヤーはよく使用する機能なので必ず覚えていただきたい機能です。シーンにレイヤーを追加したい場合は、LibraryのLayerをTime
LineのSceneにドラッグするだけです。この場合レイヤーの名前は必ずLayerに設定されてしまうのでなるべくわかりやすい名称に変更してください。名称を変更しないとLayerという名のレイヤーが何個もできてしまうので後でどれがどれだかわからなくなってしまうかもしれません。

とりあえずレイヤーを3個作ってみました。この場合、並びが一番上のものが手前に表示されます。ですからレイヤー「Layer」が一番手前に表示されます。

レイヤーの考え方を図で表すとこうなります。手前のレイヤー「Layer」の中のモデルのZ座標がレイヤー「Layer2」のモデルより奥の方にあってもLayerが手前に表示されます。（例:LayerのモデルのZ座標が-300、Layer2のモデルのZ座標が-100でもLayerが手前に表示されます。）

上の図のように各レイヤー毎にカメラがあるのでレイヤー毎のカメラ操作もできます。手前のレイヤーだけカメラを広角にするなど使い道はいろいろあると思います。

Anarkのサンプルで表示するとこんな感じになります。左のサンプルのモデルとまったく同じものを右のサンプルにレイヤー別に2個置いてモデルの位置を変化させました。手前のレイヤーが常に手前に表示されているのがわかると思います。文字などを常に手前に表示させたい時や、レイヤー毎に別のアニメーションを割り振りたい場合に有効です。

とりあえず適当なモデルを読み込みます。どんなものでも良いのですが、とりあえず好みでメタルっぽいリングを読み込みました。

3秒のアニメーションにしたいのでレイヤーの右側の青い棒のようなものを調節します。。Time Lineから読み込んだモデルを開きます。ひし形のついているPositionの左側にチェックをつける部分があるのでチェックをつけます。すると、その右側にもチェックマークが表示されます。

Time Lineを1秒に合わせてInspectorのPositionのX座標を100に設定します。

するとTime LineのPositionのところに新たなポイントが増えます。とりあえずこの状態でプレビューするとモデルがX座標0からX座標100へ向かって移動しています。

次にまったく同じ方法でRotationを設定します。Rotationはモデルの回転を制御する部分です。初めにチェックをつけて3秒のところにX軸360を入力します。また書き出してみましょう。こんな感じになります。

Pivotの数値を変えることによって回転軸を調整できます。設定の仕方は上の方法と全く同じです。Pivotを調節することで下のような回転が可能になります。

適当なモデルを読み込み、モデルに名前を割り振ります。今回は「3Dmodel」という名前をつけました。Strage、Add TabでAnarkをインストールしたフォルダの中にあるbehaviorsを読み込みます。するとbehaviorsが表示され、準備が整いました。

まずモデルを自動で回転させようと思います。StrageのActionを開きRotatorをモデル（3Dmodel）にドラッグアンドドロップします。

ドラッグアンドドロップすると3Dmodelの下にBehaviorsが表示されその下にRotatorが表示されます。表示されたRotatorを選択するとその内容がInspectorに表示されるのでそこで数値変更や設定を行います。X・Y・Zのどの軸を基準にどれぐらいのスピードで回転させるかをRotation
Speedで設定します。1と入力すると1秒間で360度回転します。ここではとりあえずY軸に2を入力しました。

書き出すとこんな感じになります。ビヘイビアによるアニメーションはAnark Studioでは再生されませんのでアニメーションを確認するときはプレビューで見るようにしてください。

次はSineAdvanced.bvsを追加したいと思います。SineAdvanced.bvsは設定した角度分回転したら戻るという振り子のような動きをします。先ほどと同じようにSineAdvanced.bvsを3Dmodelにドラッグアンドドロップします。

次はモデルの上にマウスカーソルが重なったときモデルを拡大するアニメーションを作りたいと思います。こういう場合はAnimationのScale.bvsを使います。ここでも先ほどと同じようにScale.bvsを3Dmodelにドラッグアンドドロップします。

Scaleを選択すると設定画面が表示されます。モデルにマウスカーソルが重なったときに実行したいのでOn EventをonMouseOverに設定します。次にどれだけ拡大するかをScaleに入力します。入力部分はX・Y・Zの3ヶ所になります。最後に拡大スピードを設定します。ここでは0.3秒で拡大が完了するように設定しました。

今回はテクスチャアニメーションの説明をしたいと思います。3Dオブジェクトにテクスチャを貼り、そのテクスチャにアニメーションを加えることで幻想的（?）な効果を表現できます。今回使う機能は簡単なものばかりです。上のサンプル作成方法ではなく、上のようなテクスチャアニメーションの作り方を説明したいと思います。

「Fileメニュー」「Import Resource」で書き出した3dsファイルを読み込みます。この時「Library」の空白部分を右クリックしても読み込むことができます。

「Fileメニュー」「Import Resource」で保存した画像を読み込みます。画像を読み込むと赤い三角マークがLibraryに追加されます。このマークが画像を表しています。

読み込んだ画像をMaterialにドラッグすると読み込んだモデルにテクスチャが貼り付けられます。

このように画像をドラッグするとMaterialの下に画像マークが表示されます。

Anark Studioについて簡単な説明や感想をなどをこれからどんどん追加していきたいと思います。今回は恐竜の骨（化石）の作成過程を説明しながら進んでいきたいと思います。初めて触れるソフトなので失敗などもあると思いますが自分なりの解釈で進んでいこうと思います。

なにから初めていいのか解らず、とりあえずカメラの位置を変えてみました。カメラの座標変更を数値入力で変更していたのですが、入力部分をドラッグするだけで数値を変更できることを設定が終った頃に気が付きました。数字の脇にボタンがある訳ではないので初めは気がつきませんでしたが、気が付いてみると結構便利でした。

しかたなく地面のモデルを削除して画像を3Dオブジェクトにして地面をつくりました。ここでライトなどを配置して微調整をします。

あとはモデル毎にアニメーションを設定していきます。モデル毎にポジション、回転、スケール、透明度などを設定することが出来ます。全てのパラメータをアニメーションで変化させることが出来ます。設定してみた感想は、少しFlashに似ているかな？と思いました。慣れるとサクサクと設定できます。レイヤーなども解りやすく、なかなか使えるソフトだと思います。

ちなみにこれがアニメーションを設定したり、レイヤーの管理、座標設定などを行うTimeLine　です。