- 2011年10月19日 (水)
- Tweet
GPUを利用したCoverFlowのサンプル (ソースコード付き)
iTunesのようなCoverFlowのサンプルを最新版Flash Player 11のGPU機能を使って作ってみました。ソースコードも無料で公開していますので、よければ試してみてくださいませ。
技術解説
Cover Flowはこことかここをはじめ今までいろんなところで無料サンプルが紹介されてますが、ポリゴンの重なり問題や、床の反射表現、奥行きのライティング具合（画面端のスライドほど暗く見える）など、こだわるポイントが結構あって地味に処理負荷が重い表現手法の一つでした。Flash Player 9時代のPapervision3Dでポリゴンの重なり問題が結構シビアだったりして、CoverFlowに限らず苦労された方も多かったのではないでしょうか。今回はAlternativa3Dというフレームワークを使用していますが、ポリゴンの重なり順問題はZバッファによって解消されています。
それもFlash Player 11がGPUの利用によって数千倍のグラフィックのレンダリングが可能になっているので、ライティングやオブジェクトの数に関してはパフォーマンスに余裕がでてきています。今回のデモでは30枚しかスライドを表示していませんが、実験したところ300枚ぐらいまでなら60FPSを保てました。Stage3Dのパフォーマンスには毎度デモを作るたびに驚かされます。
とはいえAlternativa3D 8.17.0の不具合で透過テクスチャのZバッファがおかしかったり、テクスチャ端の滲みがあるのでまだ完璧とは言いがたいですが…、気にしなければ気にならないように思います。
2011年10月22日(土) 17:03
ものすごくサクサク動きますね。
結構複雑な処理のはずなの速いです。
ここ最近、Flash 軽い！速い！の認識が急速に広まってますが、これを見れば納得ですね。
ソースコード付きというのが凄く良い！
Flash 11という旬な機能のコードはあればあるほど嬉しいです！
2011年10月24日(月) 16:44
＞オキさん
コメントありがとうございます！
自分も思った以上にStage3Dのカバーフローがヌルヌル動いていて驚きました。
Flash Player 11を試す人が多くなると楽しいので、出来る限りソースコードもオープンにしてブログ記事を書いていこうと思ってますー。
2011年11月02日(水) 15:57
[…] Away3D4 stage3D Coverflow 2十一2011 Filed under: ActionScript3, Flash Author: milkmidi 将文章转换为简体 大家好，我是奶綠茶 今天來分享一下如何使用 Away3D4 製作經典的 Coverflow 效果 之前都是習慣用 PV3D 製作，但 PV3D 沒有推出 Stage3D 的版本，只好轉戰 Away3D 還好之前有玩過，寫起來長的差不多。 原理和之前分享過的幾篇 Coverflow 教學一樣 同時也練習了一下 Robotlegs , Demo如下。 SourceCodeDownload 其中 ScrollBar 類別是使用 clockmaker 這篇的教學 http://clockmaker.jp/blog/2011/10/stage3d-cover-flow/ […]
2012年09月25日(火) 20:36
[…] 也有一个日本同行提供的素材：http://clockmaker.jp/blog/2011/10/stage3d-cover-flow/ […]