Away3D作例: Space Shangri-La

http://orange-suzuki.com/labs/spaces/
Away3Dライブラリを使った作例です。
しばらく眺めていただくと、こんな感じでイメージが変わります。


技術解説

背景は銀河をイメージして、Photoshopでこのような画像を作成しました。下記リンクにあるPhotoshopのカスタムブラシがお勧めです。

球体の縁をふわっとさせるのにこのような処理をしています。

material.addMethod(new RimLightMethod(0xdddddd, 0.1, 1))

背景を輝かせている処理。輝きフィルターの閾値(threshold)の値は1を超えると輝き方が急激に変化します。今回は1.5に設定。

// 輝きフィルター
bf = new BloomFilter3D( 16, 16, 1.5, 1, 1 )
// 色相フィルター
hsf = new HueSaturationFilter3D(1,1,1,1);
hsf.saturation = 1.2;
// フィルターを追加
_view.filters3d = [hsf, bf];
 

色相フィルターを使って、温かみ、冷たさを表現しています。ループ関数内で、0.1~1.4まで変化させることで、色相を変化させます。背景の元画像よりもエモーショナルな雰囲気を作成できます。

// ループ関数内
sita += 0.01;
bf.exposure = 1.5*(1-Math.cos(sita))
sita2 += 0.001;
hsf.saturation = 0.1 + 1.3 * Math.cos(sita2)

Special Thanks

BGM : propanmode
Photoshop Brush: Starry GrungeShad0ws Brush Set 11Nebular Brushes v.2
3D engine: Away3D

追記: スマートフォン用の壁紙も作成しました。こちらもぜひご覧くださいませ。


Comments are Disabled