blogopolisの裏側 flex edition
Post on 14-Jul-2015
1.140 Views
Preview:
TRANSCRIPT
~ Flex Edition ~
浜本 階生
logopolisの裏側
自己紹介
• 浜本 階生(はまもと かいせい)
• http://d.hatena.ne.jp/kaiseh/
• 共訳『実用 Subversion 第2版』(オライリー・ジャパン)
今日のテーマ
• Blogopolisの紹介
• BlogopolisとPapervision3D
• パフォーマンスチューニング
Blogopolisの紹介
http://blogopolis.jp/
受賞歴
• 第参回天下一カウボーイ大会
✴ 総合優勝
• Yahoo! JAPAN インターネット クリエイティブアワード 2009
✴ 一般の部グランプリ
Blogopolisの構造
幾何データ
サーバ側 クライアント側
全文インデックス
タイル画像
3Dオブジェクト
テクスチャ
検索結果
ラベルブログデータ
使用ライブラリ (Flex)
• Papervision3D
• S2Flex2
• TweenMax
• AdvancedAutoComplete
ボロノイ図
3D表示の流れ
1. ボロノイ図等で領域を分割
2. 多角形の頂点座標をDBに保存
3. 視界内の多角形座標データを取得
4. 多角形を底面として角柱を生成クライアント側
サーバ側(バッチ)
Papervision3Dについて
Papervision3D
• Flash用のオープンソース3Dライブラリ
• 現バージョン(2.1)はソフトウェアレンダリングで実装されている
http://www.papervision3d.org/
PV3Dの使用
• 3Dオブジェクト(面、直方体、球、etc)
• マテリアル(単色、テクスチャ、etc)
• カメラ
• 各要素は拡張/自作可能
Blogopolis向けに自作したクラス
• 角柱オブジェクト
• トゥーンレンダリング風マテリアル
• 3角柱‣ 7ポリゴン• 4角柱‣ 10ポリゴン• N角柱‣ (3N - 2)ポリゴン
角柱 (prism)
※底面が屋根のみ(底抜け)の場合
トゥーンレンダリング
• 色調の単純化
• 輪郭線
• 柔らかな雰囲気
(Wikipediaより)
パフォーマンス最適化
• ポリゴン数の削減
• レンダリングエンジンの動的切り替え
• マウスヒット処理の独自実装
• 領域を格子状に分割• 地表画像、幾何データを格子単位で管理• 地表やビル(角柱)の描画を視線中央寄りの格子に限定• キャッシュ効率も良い
グリッドシステム
地表 + 幾何
地表
地表 + 幾何 + 3D
(0, 0)
グリッドシステム (contd.)
グリッドシステム (contd.)
• ユーザの意識は画面中央に集中する• 画面端の描画を省略してもあまり違和感なし
レンダリングエンジンの動的切り替え
• BasicRenderEngine • Zソート法• 低品質・高速• QuadrantRenderEngine • ポリゴンを内部分割して前後関係を正しく描画• 高品質・低速
レンダリングエンジンの動的切り替え (contd.)
• 視点移動中はBasicRenderEngineを使用
• 動きがあるので多少のポリゴンの乱れは気にならない
• 視点が確定したらQuadrantRenderEngineに切り替え
• 正確な描画
レンダリングエンジンの動的切り替え (contd.)
BasicRenderEngine QuadrantRenderEngine
マウスヒット処理の独自実装
• 3Dオブジェクトと独立して幾何データを管理
• InteractiveScene3DEvent等、PV3Dを使わずにマウス座標の包含を判定
• マウスオーバー領域のハイライトは通常のflash.display.Graphicsで描画
• PV3D側の再レンダリングを避ける
まとめ
• Papervision3Dを利用し、ブログを3D景観にマッピングした可視化サイト
• パフォーマンス最適化の取り組み
top related