～ 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景観にマッピングした可視化サイト

• パフォーマンス最適化の取り組み

logopolishttp://blogopolis.jp/