2008年04月08日

第122回ナレッジシェア:Action Script3.0とPaper Vision3Dの可能性(新しい表現技術とその事例、考えるべき事 etc)

社内でプロジェクトや様々な知見をやりとりするナレッジシェアという会がありまして(わたくしが主催担当しております。なにかおもしろい知見やサービスの話をしてくださる方いらっしゃいましたらご連絡いただけると話を進められるかもしれません)、先週は Action Script 3.0 と Paper Vision 3D についてのシェアをT山さんにしていただいたのでメモ。

---

■Action Script 2.0 から 3.0

・記述形式の大幅な変更

 1.0 から 2.0 よりも、今回の方がスクリプトの変更が大幅。
 1.0 で書いたものは 2.0 形式で書き出してもほぼそのまま動作した。
 処理速度も向上。

 2.0 から 3.0 だと、動かない。。。

・3.0 の恩恵

 圧倒的に速度が速くなった。次元が違う。
 根本的にパワーが違う
 パーティクル表現とか 3D 表現とか使えるようになってきた。
 表現方法が飛躍的に広がってくる。

・気をつける点

 Player のマイナーバージョンアップによる不具合が発生する場合もある。
 同じ Player 9 でもリビジョンが古いと動かないこともある。
 プラグイン振り分けを、8 とか 9 とかの大きなリビジョンではなく、もっと細かいリビジョンで行う必要が出てくる

・3.0 へ移行できない Flasher

 3.0 への移行をあきらめる Flasher が増えてる。
 結構変わったので。いつもの外注さんでできない、ということもあるかも。
 なにかのコンテンツでヒントを得て、いざお願いしてもできない。
 3.0 でやってよ、といっても、すぐできるものではない。
 2.0 で作ってもらって、後で 3.0 にする、というのも、結局全面書きかえになる。
 2.0 で無理矢理作ってみても、パフォーマンスが悪くて速度が出ないこともあり、使えなかったりもするだろう。
 表現を決めたときに、それがどのようなつくりで、どのくらいのスキルが必要なのかを把握して外注パートナーを決めないと取り返しが付かないかも(外注する場合)。
 AS3 の場合は今のところ、スクリプトを書くのに時間がかかるので、作業時間を取っておいたほうがよい。


■AS3.0 の注目すべき機能

 Adobe でも紹介されているので、それは Adobe でみてください。

・Popforge(http://www.andre-michelle.com/
 SWF でリアルタイムに音を生成&エフェクト。
 Flash は音がわりと弱くて、同期が取りにくいとかの問題があった。
 テンポを弄ると音が遅くなる、というのとか、地味だけどいままでできなかった。
 そういう事ができるようになった。
 音を生成するために、サーバーになにかをつっこまないと行けなかったが、そういうことをしなくてもよくなった。

・Box2DFlashAS3(http://box2dflash.sourceforge.net/
 Flash 用の物理エンジンライブラリ。
 夢がふくらむ。

・PaperVision3D(http://blog.papervision3d.org/
 AS3.0 の処理速度を活かした 3D 用のライブラリ。
 映像系の 3D の描画と比べると見劣りするが、インタラクティブ制を加えると演出効果が大きい。


■これまでの Web 3D

 今までも来るよ、といわれてたが、結局全然来なかった。
 プラグインの普及率とか、容量とか、動作スピードとか、回線とかがネックだった。
 高価な 3D ソフトウェアも必要だった。

 Flash でもなんども試みられてきた。
 Plazma や swift などのベクターシーケンスとか。いろいろ限界があり、自由度はあまりなかった。


■Paper Vision 3D とは?
 AS3.0 を用いた 3D 表現をより簡単に使えるライブラリ集。
 Ajax でいうところの Prototype.js とかのように、様々な機能が関数として用意されているようなもの。

 試用するためにはライブラリをダウンロードして、Flash と関連づけることが必要。
 ライブラリのスクリプトをコピペするだけでは動かない。


■Hくん(社内の Flasher な人)によるデモ

 いろいろな図形をワイヤーシェーディングや普通のシェーディングで表現してくるくる回すデモ。

 たばこの箱が浮いて回っているデモ。

 キューブが回って面を表示するデモ。

 球の中にカメラが入って動けるようなデモ。

 キューブに動画を貼っているデモ。
 動画を貼ってもスムーズに動いている。

 わりと、ぱぱっと PaperVision のライブラリを使ってできた。

 いろんな人がいろんなテクスチャとかマッピングとかも試している状況がある。


■Paper Vision 3D の例

・3Dデータの読み込み
 Xウィングのデモ
 ここまで複雑なものはスクリプトではできない。
 3D ソフトで作っているデータを、XML 的なデータ(collada形式)で書き出して、Flash で読み込んで表示している。そういうことができるようになってきた。
 バグとかもあるらしいが。。。
 この X ウィングのデータを使ったゲームとかがいろいろアップされている。

・テクスチャマッピング
 氷のでこぼこがあるキューブに動画を流してもスムーズに動く。
 3Dのオブジェクトに、Flash で様々なエフェクトを掛けて動かすとかも。でもスムーズ。

・ライン3D
 昔 3D ソフトでやっていたことがスクリプトでできるようになった。
 こんなにさくさく動かなかったし、インタラクションもできなかったが、今はカメラワークも制御できる形で、スムーズに動かせる。空間を自由に使うような表現ができる。

・パーティクル系
 風とかの動きにオブジェクトを合わせて動かしたり、被写界深度を出したり。。。

 
 とにかく、いろいろスゴイ。
 スムーズに処理できることですごくなった。


■PaperVision 3D の使いどころ

 びっくり系だけじゃなく、最近は OS のインターフェースでも 3D を演出として用いていたりする。
 よりリッチなインターフェースを考えられる。

 テクスチャをいっぱい使うと、そこは画像なので、容量が重くなる。
 スクリプトも複雑になると、そう。

 ちょっと使ってあげるだけでもよかったりする。


■Paper Vision 3D 注意点

 ・Flash Player のバージョンアップによって動作しなくなる場合がある。
  (ちょっとしたマイナーアップデートでもそうなる)

 ・ライブラリ自体がまだ枯れていなくて、開発がりがりされているから仕様が変更されたりする。

 ・AS を用いた無理矢理 3D なので、処理スピードを考慮していかないとまったく動かなくなる
  なにがどこまでできるか、誰も把握できていない。経験値でトライアンドエラーしていくしかない。
  提案するにもリスキー。最近日本の企業でもバンバンつかっているので、壁を破りたい。

 ・画像は斜めでジャギーがでる。クライアントがそれを許容できる案件で使おう。
  先に行っておいた方がいい。やだ、というクライアントもいる。

 ・テクスチャは容量を食う。

 リスクはあるが、日本の企業のおもしろサイトでもいろいろ使われている。
 文化庁の日本の食卓のサイトとかでも使われていたり。
 リスクを把握した上でやろう。


■Paper Vision 3D の先へ

 次期 Flash Player 10 ( Astro ) で、ある程度の 3D 表現の機能を Player 側で持つらしい。
 しかし、パース的な機能であって、3D ができるわけではないので、Paper Vision 3D をはじめとした 3D 系ライブラリがこの機能を利用することで、処理速度の向上などが行われるようになるだろう。


■設計と演出

・単純に、こういう設計と演出とデザインがうまく繋がっているインターフェースはどうやってつくるのがよい?

 デザイナー、IA 、Flasher がどのような関係で関わるべきなのだろうか?
 みんなができる必要はないが。
 単純に設計→デザイン→Flash という流れだと難しいのでは?
 ワークフローやスケジュールを変える必要があるかも。

 IA の人たちに、入ってやって、という風になるとどうしたらいいんだろう?

 Nくん:試行錯誤がすごい大事。
     演劇とかだと、ディレクターが圧倒的な権限を持っていて、まとめている。

---

てなわけで。

とにかく、Flash でここまで動かせるようになったというのはホントにすごいなぁと思います。
設計については、あまり IA やデザイナーや Flasher という枠組みを作らず(タスク的には割り振りはあるけれど)、Jazz のようにアイディアを出し合ってモックアップをつくって試してみて、試行錯誤を繰り返し、絞られてきた案をユーザーテストして試して、ということが重要かと。

人間中心設計なプロセスをふまえつつも、設計・演出・デザイン・作り込みの融合部分は、表現のコンセプトをしっかりと立て、垣根を越えて考えあい、試し合うべきと思います。
こんな風にうまくやってるよ、という話があれば、ぜひ教えて欲しいですし、ディスカッションしたいですね(どなたか)。


('w') - 今日は本の自分の担当分のあらすじを書かねば。。。
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。