| 遂に届きました「Anark Studio」。 | |||
![]() |
![]() |
||
| パッケージは微妙な曲面で、見た目はカッコイイです。でも棚に並べて置くのはつらそうですね。しかも局面なのでどの角度から写真を撮っても微妙に反射してしまうので正面から撮りました。 | 箱から中身を出してみました。シンプルです。マニュアルはもちろん英語版、、、、読めません。そのうち日本語版に無償アップデートできるそうなのでそれまでいじりまくってみます。 | ||
![]() |
|||
| 起動後の画面です。Anarkのサンプル版で見た画面なので新鮮さは感じられませんね。使い手としてはあまり変わりはないとしても、これから仕事で使えると思うと結構ワクワクします。はやくAnarkを使える仕事がしたいですね。 | |||
![]() |
|||
|
|||
|
|||
Contentのブログ記事
|
|||
| 今回は3Dオブジェクト表示の種類をいくつか紹介したいと思います。他のWeb3Dソフトにも同じような機能がありますが、中にはAnarkならではのありがたい機能もあります。 | |||
|
|||
| テクスチャマッピング方法は4種類あり、左上がCamera Projectionマッピングで、右上がObject Projection、右下がEnvironmental Mpping、左下がUV Mappingです。設定方法も簡単です。 | |||
|
|||
|
こちらは普通にUVマップで画像を貼り付けたものを重ねてBlending Modeを変えてあるものです。左がScreenで、右がMultiplyです。この他にもOverlay、Blerch、Ghost、Saturateがあります。加算合成などが簡単に設定できるのは本当にありがたいですね。この部分がAnarkの命を言っても良いのではないでしょうか? |
|||
|
|||
| これもモデルの表示設定ですね。左上はEmissive Pwoerをマックスにしてフラットっぽく表示したものです。右上がポイント表示、右下がワイヤーフレーム表示になります。左下はスペキュラーを少し上げて光沢をつけたものです。 | |||
|
|||
|
||||
| 今回はAnarkについているチュートリアルを自分なりに改良して説明してみたいと思います。なぜ自分なりにかといいますと、まったく同じだとここに書いている意味がないからです。というのは言い訳で私は英語が少し苦手なのでチュートリアルがあまり読めないのです。このような理由で自分なりの説明になってしまいました。 | ||||
|
||||
![]() |
||||
|
今回はこんな感じのムービーの作り方を簡単に説明したいと思います。背景に青い光が写っていますが、これは全て3Dモデルで作ってあります。このように説明すると少し難しそうに聞こえるかもしれませんが、すごく簡単です。ちなみにAnarkのほとんどのサンプルにこのような方法が使われています。 |
||||
|
||||
![]() |
||||
|
まず、球体を作り、奥行きを出すためにZスケールを少し大きめに設定します。奥に長細い球体ですね。 |
||||
|
||||
|
|
||||
| ロゴ用のモデルを読み込み球体の中に配置します。カメラも球体の中に配置します。この状態ですと球体の内部が表示されないのでまだ効果としては使えません。 | ||||
|
||||
|
||||
|
マテリアルの設定を上のように設定するとなにも写っていなかった画面にこのようなものが現れてきます。 |
||||
|
||||
![]() |
||||
| あとは「テクスチャのアニメーション編」で説明した通りにテクスチャアニメーションを使ったり、球体モデル自体をアニメーションさせることでさまざまな効果が得られます。U Position や V Positionを調整すると良いと思います。 | ||||
|
||||
|
|
||||
| 一応出来上がりです。これは球体のモデルをコピーで2個に増やし、違うアニメーションを設定して手前の球体を半透明にしたものです。ロゴ用のモデルは右側の画像をそのまま配置しています。黒の部分を写りこまないように設定すればこのようになります。 | ||||
|
||||
|
||||||||||||||||||||||
| 前回はファイルサイズがポリゴン数でどれ位になるかを実験してみましたが、今回はソフト別に比較をしてみたいと思います。同じモデルに自動でY軸回転させるもので比較をしてみたいと思います。これはクオリティ比較にもなると思います。比較するソフトはShockwaveとAnarkとViewpointです。 | ||||||||||||||||||||||
|
||||||||||||||||||||||
|
||||||||||||||||||||||
|
今回は左図のモデルを使います。今回使うモデルにはあえてテクスチャを使用しました。テクスチャは書き出し後のファイルサイズを大きく左右しますからね。 |
||||||||||||||||||||||
|
||||||||||||||||||||||
|
|
||||||||||||||||||||||
| 左がAnarkでファイルサイズは41.7KBでした。右がShockwaveでファイルサイズは36.0KBでした。おぉ、Shockwaveの方が軽いですね。ちなみにViewpointはオーサリングツールはフリーですけどライセンス上サンプルを掲載できないのでファイルサイズだけ伝えます。28.17KBでした。アニメーションのつけ方がわからなかったのでアニメーションは無しで書き出しました。軽いし画質はダントツでした。 | ||||||||||||||||||||||
|
||||||||||||||||||||||
|
||||||||||||||||||||||
|
|||
| 今回はAnarkがどれだけのポリゴン数まで対応できるかを試してみたいと思います。これは個人的に気になった部分なので実験的に書き出した後のファイルサイズを見ていこうと思います。 | |||
|
|||
![]() |
|||
|
まず、適当なモデルを使ってみます。このモデルが1244ポリゴンでまぁWeb3Dで使うにはちょうど良い数だと思います。テクスチャを張ると純粋なサイズがわからなくなるので今回はテクスチャを使用しません。今の状態で書き出すと21kbとかなり小さいです。 |
|||
|
|||
![]() |
|||
|
これが4976ポリゴンです。これぐらいになると微妙な細かさになってきますが書き出してみると73KBとかなり小さいです。この辺からだんだんエスカレートしていこうと思います。 |
|||
|
|||
|
|
|||
| 19904ポリゴンに挑戦、約4倍位のポリゴン数ですがファイルサイズも4倍ってことは無いだろうと思ったのですが、大体4倍位で285KBでした。かなり小さいですね。 | |||
|
|||
![]() |
|||
|
|
|||
|
|||
| ちなみにこれが48000ポリゴンのサンプルです。さすがにここまで細かいと光沢なども綺麗に表示されます。 | |||
|
|||
|
||||
今回はAnarkのレイヤーについて説明したいと思います。 |
||||
|
||||
![]() |
||||
|
|
||||
|
||||
![]() |
||||
|
|
||||
|
||||
|
|
||||
|
|
||||
|
||||
![]() |
||||
|
|
||||
|
||||
|
|
||||
|
|
||||
|
||||
|
|||
今回はモデルのアニメーションを手動で設定してみたいと思います。 |
|||
|
|||
![]() |
|||
|
|
|||
|
|||
![]() |
|||
|
|
|||
|
|||
![]() |
Time Lineを1秒に合わせてInspectorのPositionのX座標を100に設定します。 |
||
|
|||
![]() |
|||
|
|
|||
|
|||
![]() |
|||
先ほどと同じように2秒後にX軸-100、3秒後にX軸0を入力します。ここで書き出してみたいと思います。下のように同じ動きの繰り返しになります。 |
|||
|
|||
![]() |
|||
|
|
|||
|
|||
![]() |
|||
次も同じ設定方法でScaleを変更したいと思います。Scaleはモデルの大きさを制御します。1秒毎に適当な数値を入力してみました。最後は元の大きさに戻したいので初めと最後のポイントはScaleをX軸1、Y軸1、Z軸1に設定しました。プレビューすると大きさが変わっていくアニメーションが再生されます。 |
|||
|
|||
![]() |
|||
|
Pivotの数値を変えることによって回転軸を調整できます。設定の仕方は上の方法と全く同じです。Pivotを調節することで下のような回転が可能になります。 |
|||
|
|||
|
|||
今回はモデルを動かすアクションとアニメーションのビヘイビアを簡単に紹介します。標準でついているビヘイビアだけでもモデルの動きを制御できます。 |
|||
|
|||
![]() |
|||
|
|
|||
|
|||
![]() |
|||
|
|
|||
|
|||
![]() |
|||
|
|
|||
|
書き出すとこんな感じになります。ビヘイビアによるアニメーションはAnark Studioでは再生されませんのでアニメーションを確認するときはプレビューで見るようにしてください。 |
|||
|
|||
![]() |
|||
|
|
|||
|
|||
![]() |
|||
ここでも先ほどと同じようにSineAdvanced.bvsを選択するとInspectorに設定画面が表示されますので適当に設定します。 |
|||
| できあがりはこんな感じになります。 | |||
|
|||
![]() |
|||
|
|
|||
|
|||
![]() |
|||
|
Scaleを選択すると設定画面が表示されます。モデルにマウスカーソルが重なったときに実行したいのでOn EventをonMouseOverに設定します。次にどれだけ拡大するかをScaleに入力します。入力部分はX・Y・Zの3ヶ所になります。最後に拡大スピードを設定します。ここでは0.3秒で拡大が完了するように設定しました。 |
|||
| 完成するとこんな感じになります。マウスカーソルがかさなるとモデルが大きくなるはずです。 | |||
|
|||
|
|
|||
![]() |
||||
|
|
まず、3D Studio Maxで「モデリング」「知恵の輪」でこの様なモデルを作成します。このモデルは適当な名前をつけ3dsで書き出します。 |
|||
|
|
|||
![]() |
![]() |
|||
|
|
次にテクスチャを作成します。大体こんな感じのものを100*100ピクセル位でJpegで保存します。 |
|||
|
|
|||
![]() |
![]() |
|||
|
|
|
|||
|
|
|||
![]() |
![]() |
|||
|
|
Matelialを選択してモデルの色などを調整します。ここでは色はオレンジ気味に設定し、Blending Modeをscreenに設定します。Screenに設定することで重なった部分が光って見えたり黒の部分が透けて見えたりします。Specular Enableにチェックがついている場合はチェックを外します。Specularはモデルの光沢を設定するところなので今回は必要ないです。 |
|||
|
||||
![]() |
![]() |
|||
ここまできたら設定はほぼ完了です。あとは自分が気に入るまでチクチクいじってください。Materialの画像を選択してU Repeatというパラメータを35に上げると右のようになります。U RepeatとV Repeatのパラメータはひとつのモデルでマップを何回反復するか設定する部分です。ですから35に設定すれば上のように35個の輪が出来上がります。 |
||||
|
||||
![]() |
||||
あとはアニメーションの設定をするだけです。画像マークの右側にピンクの棒のようなものがあるので変化させたい場所に右クリックでInsert Master Keyframeでポイントを作成してポイント毎にU Repeatの数値を変化させます。あと再生しながらチェックをして完成です。 |
||||
|
||||
U Repeatじゃない部分を変化させるとこんなのも作ることが出来ます。 |
||||
|
||||
|
|
|||
![]() |
![]() |
|||
|
|
Anarkは3D Studio Maxの3ds形式に対応しているので、3D Studio Maxで作成したモデルを3Ds形式で保存します。そのデータをAnark Studioに読み込みます。テクスチャなどはAnarkで設定しようと思うのでMaxではテクスチャを貼りませんでした。 |
|||
|
|
|||
![]() |
![]() |
|||
|
|
さて、次は地面にテクスチャを貼ることにしようと200*200ピクセルと微妙な大きさの画像を読み込みました。色々いじってみるがうまく貼れなく、上のように変な色合いになってしまいました。読み込んだモデルにうまくテクスチャを貼る方法は今のところ不明です。とりあえず触ってみるということなので、テクスチャについてはわかり次第報告します。 |
|||
|
|
|||
![]() |
![]() |
|||
|
|
|
|||
|
|
|||
![]() |
![]() |
|||
大体アニメーションの設定も終わり、こんな感じになりました。 |
|
|||
|
||||





















































