CSS Nite in OSAKAで三島さんが自己紹介に使っていたアレ

CSS Nite in OSAKA, Vol.17でInVogueの三島さんが自己紹介に使っていた、Webカメラを使って、Flash Playerがバーコードのようなものを読み取り、絵を出していた例のアレ。

やってみなきゃ損だと思って、何から始めよう・・・と思いきや、さくーしゃさんの『FLARToolKit』から勉強しようと思い、チャレンジ。

cabe.jpg

おおっ!さすがだ!!すばらしい!!
Papervision3Dを触っていて良かった!

でもコレじゃオリジナリティが・・・そうだ!Colladaで3DCGファイルを作るぞ!
幸いLightWave3Dのバージョンが9.5くらいから、Callada出力できるので、早速モデリング開始、わずか3分でモデリング終了!なぜならスライムだから!!今クリアする手前なんだけど・・・(ドラクエ9)

スライムをLightWave3Dでモデリング

テクスチャも貼っていよいよCollada書き出し!
DAEファイルを一度開いて、<init_from>の中身を相対パスに書き換え、テクスチャとなるJPEGファイルのパスを書き換えて保存。
サンプルファイルのSimpleCube.asにちょっと加えてみます。
DAEクラスを使ってprivate var _slime:DAE;と。

this._slime=new DAE();
this._slime.load(“slime.dae”);
_slime.scale=20;

くらいにした。相変わらず、モデリングでの寸法は適当です、悪いクセです、CG屋さんに怒られそう。

このスライムのオブジェクトを

_slime.rotationY=180;
_slime.rotationZ=-90;

で、向きを変えてあげる。

slime
わずか10分。
さすが、こんな凄いものを作るさくーしゃさん、恐るべし。もう、感服です。

CSS Nite in OSAKA, Vol.17で司会しました!

CSS Nite in OSAKA, Vol.17
写真:鷹野雅弘(株式会社 スイッチ

今年3月から良く分からない勢いのもとで結成された実行委員会で繰り広げてきましたWeb系セミナーイベント、「CSS Nite in OSAKA」。
不慣れななか、なんとか5ヶ月連続のマンスリーイベントを無事(!?)終える事が出来ました。

有料版の今回は満員御礼、僕は今回も司会進行を務めさせてもらいました。
今まで参加してくれたみなさん、ありがとうございます!

はじめての有料版、特に僕はこういったセミナーイベントや司会の経験が全くなかったんですが、周りの実行委員スタッフの力で持ちかえすことも出来ましたので、色んな意味で色んな人に感謝すべきことがあるんだな〜!ということも改めて実感した1日だったわけです。

さて次回はまだ決まっておりませんが、これで完結というわけではないので、今後もひとつよろしくおねがいします。

ActionScript3.0 VectorクラスとdrawTrianglesメソッドを使ってみた

こちらでも

Flash Player 10に搭載された新機能、Vectorクラス、そして、Graphicsクラスの新メソッド、drawTriangles()で、Photoshopでいう、「指先ツール」のようなものを作ってみた。

そういえば今年の春先、Adobeのセミナーで、Flash Player10の新機能、というかFlashの新機能を紹介してはったなあ・・・なんか、じゅうたんにメッシュをかけて、あれをブラブラ揺らめかせられるんだよ!って、、、そんなこと言われてもユーザはどう使ったらいいか分からないじゃん。。と思いながらも、なんだか妙に印象的で記憶の片隅に残っていた。
ひょっとしてこのことなのかな?
Adobeのデベロッパーセンターサイトで「三角形分割によるテクスチャマッピング − Graphics.drawTriangles()メソッド Part 1 」というタイトルで野中 文雄さんがとっても分かりやすく説明しておられるので、ついつい手を出してしまった。

3DCGで最近仕事をしていたので、ポリゴンメッシュは三角形が良い!というのは何となく分かる気がするが、座標、uvマッピングなど、CGの開発者の大変さがコレをやることによって身にしみて分かる気がする。

さて、そのサイトの説明だが、三角形を「Z」型を描くように、左上・右上・左下・右下、とそれぞれX,Y座標を打ってやる必要がある。
さらにそれを複数三角形を作る場合は、0,1,2 1,2,3 | 4,5,6 | 5,6,7・・・と隣り合わせの三角ポリゴンをつなぎ合わせてあげなければならない。
そしてuv座標を指定する。

ただ、はじめての僕には連続する三角形がどのようにひも付けするのか・・・
ちょっと困惑しましたので、色々試した結果、
複雑で難しいと思われる方へ、、
Mesherクラスというものを作ってみました。
コンストラクタの第一引数に、JPGなどの画像ファイルのURLを。
第二引数に分割数を(サンプルでは32、なので、横、縦それぞれ32分割メッシュ)それぞれ入れて
flaファイル側でインスタンス化してください。

よく考えたら、クラスファイルにするんだから、スライドバーとラジオボタンもスクリプトで作るべきだった。
良かったらflaファイルごとダウンロードして使ってください。
Mesher.lzh (884kb)
ソース、さらしてみます。