Movatterモバイル変換


[0]ホーム

URL:


ClockMaker Blog ClockMaker BlogはHTMLやFlashの技術を中心にWebのインタラクティブデザインの最新情報やテクニックを紹介するブログです。

  • HOME
  • LABS
  • BLOG
  • FEED
  • ABOUT
  • 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バッファがおかしかったり、テクスチャ端の滲みがあるのでまだ完璧とは言いがたいですが…、気にしなければ気にならないように思います。

当ブログ内の関連記事

投稿者 :池田 泰延

BookMark

ブックマークはこちらからどうぞ。

Comment/Trackback 4件

  • オキ より:
    2011年10月22日(土) 17:03

    ものすごくサクサク動きますね。

    結構複雑な処理のはずなの速いです。
    ここ最近、Flash 軽い!速い!の認識が急速に広まってますが、これを見れば納得ですね。

    ソースコード付きというのが凄く良い!
    Flash 11という旬な機能のコードはあればあるほど嬉しいです!

  • Yasu より:
    2011年10月24日(月) 16:44

    >オキさん
    コメントありがとうございます!
    自分も思った以上にStage3Dのカバーフローがヌルヌル動いていて驚きました。

    Flash Player 11を試す人が多くなると楽しいので、出来る限りソースコードもオープンにしてブログ記事を書いていこうと思ってますー。

  • Away3D4 stage3D Coverflow - RichMedia+ より:
    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/ […]

Author

@clockmakerをフォロー

当ブログのオススメ記事

  • HTML5特集
  • Flashだとここまでできる! HTML5とFlashの機能比較はてなブックマーク
  • 無料でFlashの制作環境を構築 FlashDevelop入門はてなブックマーク
  • 60個のソースがダウンロードできる3Dのサンプル集はてなブックマーク
  • Flashでやってしまいがちな16個の間違った使い方はてなブックマーク

運営しているサイト

Beautifl.net
icon-generator.net
ClockMaker Labs
カス削除くん

執筆した主な書籍

  • HTML5 インタラクティブ表現ガイド ~HTML5、CSS3、Canvas、CreateJS、JavaScript~
  • Stage3Dプログラミング〜GPUを使ったFlash 3Dコンテンツ制作〜
  • ActionScript Beautifl Code
  • FlashDevelop解説書

あわせて見たいサイト

Copyright © 2008-2016ClockMaker

powered byWordPress


Hosted byheteml | Managed by池田 泰延


[8]ページ先頭

©2009-2025 Movatter.jp