アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

アシアル社員のイラスト公開 番外編 ~Saity先生3D化への道4~

こんばんは。阿部です。

Saity先生の3Dモデリングが一通り終わりました☆
やー、時間かかりすぎなのですが、しかもまだ見せられない角度が結構あるのですが・・・それは後で直そー。



3頭身にしようと思って、今までブログに載せてきたパーツは結構修正しました。計画性って大事ですよね。。

ちなみに、3頭身のキャラクターを作るときは、手足を太く胴体を小さくするとバランスがとれます。
肩や足の付け根は細身で、だんだん太くすると良いです。
アトムをイメージするとわかりやすいのではないかと思います。

デザインによっては、腕や足、首は細くして、靴と手のひら、頭は大きくするのもアリです。こっちはミッキーとかソニックとか参考になります。この場合、ちょっとお腹をつきだす感じにするとポーズが決まります。

これからボーンの設定をして、いよいよ動かしていきます☆
現状のポリゴンの構造だと、あんまり動かせないのですが・・・なんとかなるでしょう!とにかく先にモーションをやってしまおうと思います。
穴あいちゃったらしょうがないから後でモデル差し替え><

アシアル社員のイラスト公開 番外編 ~Saity先生3D化への道3~

こんばんは。阿部です。
今回は、久しぶりにSaity先生の3D化を進めました。

だんだんローポリ化されていくsaity先生。胴体部分もだいたい完成して、上半身ができつつあります。



胴体については、もうさっさとテクスチャもつけてしまいました。テクスチャといっても、元々立体感のないイラストなので、襟の部分を描いたくらいですが。



現状は、顔を作成中(修正中)ですが、PHPプロ!のイラストは頭が大きいので、3頭身に落ち着きそうです。イラストでは下半身がないので、どうしようかと思っていましたが、3頭身なら何とかなりそうです。ふぅ。。

頭ができたらこんな感じでしょうか。
顔だけ2Dなのでちょっとキモイですね・・・。



少しずつしか進められず、なかなか完成まで遠いですが、なんだかできてきたーという感じがします。
完成したらSaity先生を使っておバカなムービーでも作ってみたいなと思っています。でもモーションは苦手なので悩みどころです。。予定は未定!ですよね☆

--------------------------------
saity先生とは、アシアルが運営する、PHPのコミュニティ&ポータルサイトPHPプロ!」にてPHP初心者向けの講座「PHP基礎講座」の先生をしているキャラクターです。

アシアル社員のイラスト公開 番外編 ~Saity先生3D化への道2~

こんばんは、阿部です。

年末も年始もバタバタバタバタバタバタとしています。3DのSaity先生が完成するのは、まだまだ先になりそうです。。

そんなこんなで、今回は手を作りました。

現在のポリゴン数は、△336です。まだ減らせる部分はたくさんあるので、もっと少なく出来るはず。
いろいろと使いまわせるような気がするので、今はローポリで進めています。
ウエイトつけるときも楽そうですしね。





今回は、親指・人差し指・その他指の3パーツで分けました。ポリゴン節約のために!
もともとリアルな絵ではないので、Saity先生ならこれで十分だと思います。

このような作り方をする場合、まとめた中指・薬指・小指はテクスチャで描きこんでごまかします。
指の間の影があれば、指がわかれてるっぽく見えるので、とりあえず影をつけておくと良いと思います。
少し色が薄めなのでわかりづらいかもしれませんが、上記の画像も手のまわりや指の間に濃い色をいれただけで、それなりに指があるように見える・・・はずです。
爪なども入れると更に良いと思います。Saity先生には必要ないですが。

今は手だけを見ているので、あーぁ…という感じにならなくもないですが、体を作っていけば気にならなくなるはずです。手のアップとかレンダリングしなければ。。。

それにしても、マウスでテクスチャを描くのは難しいですね。そして面倒くさいです。お正月にペンタブを実家から持ってくるべきでした。。

--------------------------------
saity先生とは、アシアルが運営する、PHPのコミュニティ&ポータルサイトPHPプロ!」にてPHP初心者向けの講座「PHP基礎講座」の先生をしているキャラクターです。

アシアル社員のイラスト公開 番外編 ~Saity先生3D化への道~

こんにちは、阿部です。

最近、3Dソフトを使う機会があり、せっかくなのでSaity先生を3D化してみようかと考えました。
(Saity先生は、アシアルが運営するPHP情報ポータル&コミュニティサイト「PHPプロ!」で活躍中です!PHP初心者向けの講座「PHP基礎講座」の先生なのです☆ちなみにPHP講座では、本日yossy先生のSmarty講座も連載を開始いたしました!)

今回からアシアル社員イラスト公開の番外編という事で、3D版Saity先生を紹介していきます!
なかなか時間がとれず、完成は来年になりそうですが。年末の事務員は忙しいのです。。

現状は、少し顔の形ができてきたくらいです。(まだ後頭部や左側はハゲの状態です。Saity先生ゴメンネ。)
何かに使う予定もなかったので、ポリゴン使い放題で進めたら多すぎるのも面倒なものでした。やっぱり無駄遣いはよくないんですね。。



作っていて楽なところは、実はPHP講座の先生達は鼻がないんです!これは楽。
ちゃんと完成したら、アニメーションつけてみるのもいいですね。モーションは苦手なので更に時間がかかりそうです(^^;
いつか生徒のゆきちゃんも作れたらいいなと考えてます。いろいろと夢がふくらみます(アシアルの社員イラストも3D化するかも?)

私はちょこっとかじったくらいですが、3Dは趣味で制作している人もスゴイ作品が多いですよね。プロ級。
Saity先生、何とかちゃんと完成させたいものです。

WOWEngine+Away3Dを使ってFlex上で3D物理エンジンを試してみる

こんにちは。松田です。
今回はFlash用の3D物理エンジンWOWEngineを簡単に試してみたいと思います。

WOWEngineはFlash用の3D物理エンジンですが、3Dオブジェクトの描画はしてくれません。あくまでオブジェクトの位置関係を計算するだけです。
なので、3Dオブジェクトの描画自体はPapervision3DAway3Dなどの3D描画ライブラリを使用する必要があります。

今回はてっとりばやく実装するために、以前のエントリで使ったことのあるAway3Dを使って描画します。
そして今回も前回同様、Flex上で作成しています。


作成の流れとしては、
Away3Dで何か描画してみる」→「動きの処理部分にWOWEngineを組み込む」
という感じになるわけですが、Away3Dの描画方法については以前書いたこちらのエントリへどうぞ。
上記エントリのonEnterFrame()あたりでやっているオブジェクトの移動処理をWOWEngineの処理に置き換えます。


まずはWOWEngineをダウンロード。
http://seraf.mediabox.fr/datas/as/wow-engine.zip

次にWOWEngineが必要とするライブラリAS3DSをダウンロードします。
http://lab.polygonal.de/ds/

そして前回書いたAway3Dソースコードをちょっと変えつつWOWEngineを埋め込んでいきます。埋め込んだ箇所はそれほど多くないのでソースコードを見て確認してください。
これだけで一応完成。

ソースコードFlash画面内を右クリック→「ソースの表示」で表示できます。

画面をクリックするとボールが次々増えていきます。やりすぎ注意。
ボール同士に衝突判定が付いているなんとなくわかると思います。
まだまだいじり始めたばかりなので今回はここまでしかやってませんが、けっこう簡単に実装できそうですね。

Away3Dを使ってFlex上で3Dを表示させてみる

前回に引き続きFlexの勉強中の松田です。

Flashで3Dを表示しなければならない機会があったので、Flash用の3D描画ライブラリを探して試してみました。
有名どころにPaperVision3Dというライブラリがあるのですが、今回はこれから派生したAway3Dを使ってみました。
ここのデモページでどんなことが出来るのか見ることができます。すごいです。



3Dを扱うこと自体が初めてなので、とりあえずは付属のサンプルを表示させるところからやってみたいと思います。

ダウンロードページから最新版のソースコードをダウンロードします。
解凍すると「lessons」というディレクトリがあってその中にサンプルがいくつか入っているので、その中から「Lesson_Basic_02_Primitives.swf」を表示させてみたいと思います。

同梱のflaファイルはAdobe Flash CS3等のアプリケーションが無いと開けませんが、サンプルのソースコードだけはこのページで見ることができるのでこっちから取得しましょう。

まずは通常のFlexプロジェクトの作成と同様に<mx:Application>タグまで生成します。
その後、<mx:Script>タグを追加してこのソースコードを貼り付けることになるのですが、このソースコードFlex用に作られたものではないので、これだけでは動作しません。
サンプルコード上では、CubeやSphereを乗せたView3DオブジェクトをaddChild()しているだけですが、Flex上で動作させるには、View3DをUIComponentにaddChild()した後、そのUIComponentをaddChild()することになります。
UIComponentを経由してaddChildさせる感じです。

あとはそのスクリプトを<mx:Application>のcreationCompleteで呼び出します。
これで実行。


やった。無事表示できました。
ソースコードは表示画面を右クリックして「ソースの表示」を選択してください。
物体上で右クリックするとAway3Dのメニューが開いちゃうので、背景で右クリックしてください。



これでFlex上で動作できるようになったので、あとはサンプルを見ながらいじりまくってみます。
Away3Dソースコードを覗いてみるとわかりますが、このライブラリはほっとんどコメントがありません。
Googleとカンと根性を頼りに試しまくるとなんとなく効果がわかってくるのでがんばりましょう。


そして今回触ってみてわかった成果が下の通りです。
覚えたことを思いつくまま羅列していきます。

物体の表示、移動
表示させる物体は全てObject3Dクラスを継承している
Object3Dクラスを移動させるにはmoveFoward(), moveBackward(), moveUp(), moveDown(), moveRight(), moveLeft(), moveTo()あたりを使う
物体を回転させるには、rotationX, rotationY, rotationZの値を増減させる

カメラ
カメラもObject3Dを継承したCamera3Dオブジェクトなので、Object3Dと同じメソッドで移動させることができる
カメラは移動しただけじゃ向いてる方向は変わらないので、どこかを向かせたいときはlookAt()メソッドを使う
moveTo()やlookAt()で指定する引数はNumber3Dオブジェクト(x,y,zの値だけを持つオブジェクト)
Object3Dの座標もこのNumber3D型のpositionという変数で持っている
なので、カメラを特定の方向に向けたければ view.camera.lookAt(new Number3D(100, 200, 300)); 
cubeの方を向かせたければ view.camera.lookAt(cube.position);

物体の色
new Cube({material:"grey#black",・・・ ここで指定するmaterialで物体の色や特性を決める
単純に色だけ指定する場合は、"面の色#線の色"
光源を反映する物体にする場合は、new ShadingColorMaterial(何かの色)

光源
光源はLight3Dオブジェクトを配置
光源によって色が変わるオブジェクトは、 material に new ShadingColorMaterial(0xFF0000) とか指定

ちょっとはまった細かいところ
カメラをY軸上から(0,0,0)を向かせるとうまく表示されない (0,0,1)あたりにして回避
灰色は"gray"じゃなく"grey"で定義されてる

分からないこと
ある物体を見ながら回りこむ動きって出来るの?
moveRight(target.position);の直後にlookAt(target.position);するとそれっぽくなるけど違うような・・・
地道に座標計算するしかないのか


役に立つかどうかは分かりませんが、このあたりを勉強したときに出来たサンプルを置いておきます。
何かの役に立てば幸いです。
ソースコードは上と同じで、右クリックして「ソースを表示」してください。