Blender Three.js 地球 その2(ノード)
前回はNASAの地球のテクスチャを1つだけ使って、球へのテクスチャの貼り方を2パターンやってみました。
Blender 地球 作り方
NASAのテクスチャには、雲や、街の光のテクスチャなども別で用意されています。
そのテクスチャを使って以下のサイトを参考に、blenderで地球を作ってみました。
BLENDER GURU(英語の動画解説)
こんな感じになりました。
てっぺんがちょっと光すぎな気もします。
動画と同じように作ったつもりですが、ノードの値などが少し怪しいのかもしれません。
最終的なノードはこのような感じになりました。
Blender ノードの種類
ノードエディタの記事はなかったので、ノードの基本を少し書いておこうと思います。
ノードには3つの種類があります。
- マテリアルノード:マテリアルにかけるエフェクト
- コンポジットノード:レンダリング結果にかけるエフェクト
- テクスチャノード:テクスチャにかけるエフェクト
Blender グラデーション(マテリアルノード)
マテリアルノードでオブジェクトにグラデーションをかけてみようと思います。
3Dビュー・エディターの右上部分の三角を左にスライドさせて、ウィンドウを分割します。
エディタータイプをノードエディターにします。
新規でマテリアルを作ります。
マテリアル名の横のノードのボタンを押すと、エディター部分に入力出力のノードが表示されます。
出てきたノードは、左から右の順番のツリー型になっています。
左のノードが入力、右のノードが出力になります。
左のノードのマテリアルアイコンボタンで、新規で先程作ったマテリアルを選択します。
下の追加ボタン(Shift + A)から コンバータ → カラーランプを選択すると、カラーランプのノードが出てきます。
それを入力と出力の間に置くと勝手にワイヤーみたいのが、つながります。
カラーランプの値と色を適当に変更します。
ノードは左クリックで選択したり、Xキーなどで削除したり、操作はそんなに難しくありません。
Blender 全体をぼかす(コンポジットノード)
次に、全体のレンダーにかかるコンポジットノードを使って、全体にぼかすフィルターをかけてみます。
マテリルノードからコンポジットノードのボタンに切り替えます。
ノードを使用にチェックすると、入力出力のノードが出てきます。
コンポジットノードの場合は、上部にあるスクリーンレイアウトをコンポジッティングにした方が見やすいです。
下の追加ボタン(Shift + A)から フィルター → ぼかしを選択すると、ぼかしのノードが出てきます。
英語の動画解説にも出てきた、高速ガウシアンを選択します。
相対値の方が分かりやすいので相対値にチェックを入れます。
値を2%にしてみます。
左下のところでF12を押して一度レンダーすると、それ以降はレンダーをしなくても変更のたびにレンダーされるので見やすいです。
Blender Three.js 地球 ノードのエクスポート
多分ノードはエクスポート出来ないだろうと思いながら、ちょっとやってみます。
参考サイトの英語の動画解説では、テクスチャの貼り方は前回記事の貼り方1でやっていますが、貼り方2の方で貼って、ノードを付けてエクスポートしてみようと思います。
レンダーだとこのように夜の部分の街の光が表現出来ています。
これをThree.jsで書き出して表示してみます。
エクスポートすると、雲が透過しすぎて見えないので、透過:0→0.5
大気圏の青が濃すぎるので、透過:0.7→0.1 と値を調整しました。
DEMO を見る
画像そのまま読み込むので表示は遅く、雲が表示したりしなかったりします。
(雲が表示されない場合は更新ボタンを押してください。)
エクスポートしたものは、夜の部分の街の光は完全無視されています。
予想通り、ノードはエクスポートされてないように思います。
コンポジットノードも、エクスポートにカメラ設定というチェックがあるので、そこをチェックして書き出してみましたが、特になにも書き出てないようだったので、どうしても全体にぼかしたい場合などは js の方でやるしかないかなと思います。
この街の光を出すのに、次回は地球本体をベイクして試してみようと思います。
関連記事
-
-
Blender Three.js エキスポート その2(3DのテキストのアニメーションやってみるⅡ)
今回は、Three.js を使って、前回Blenderから書き出した JSONファイル を表示したり
-
-
Blender Three.js エクスポート その3( テクスチャなどがエクスポート出来ない場合)
Blender ではちゃんと表示しているのに、Three.js でエクスポートしたら、オブジェクトや
-
-
Blender Three.js エクスポート その5(目のボーンとウェイトペイントとか)
前回亀の歩くアニメーションが、手足のボーンしか動かしてないのに、目や甲羅の部分まで連動してしまったの
-
-
Blender Three.js エクスポート その4( モーフアニメーション)
前回作った亀に歩くモーフアニメーションを付けて、それを Three.js で表示するまでをやってみよ
-
-
WordPress で VR させて、360°のパノラマ画像を表示する
WordPress.com内ショートコードで VR させる WordPress.com内で、VR(
-
-
Blender Three.js ガラス その2(環境マップ)
前回Cyclesレンダーを試してみました。 Cyclesレンダーはノードを使用しているので、ガ
-
-
Blender Three.js 地球 その1(テクスチャ)
Blender 地球 テクスチャ Blenderで地球を作ってみようと思います。 最終的にはエク
-
-
Blender Three.js 地球 その3(ベイクと星)
今回はベイクを試してみようと思います。 あと、参考サイトの英語の動画解説では、blenderの
-
-
Three.jsで360°パノラマ画像を VR させる
Three.jsで360°パノラマ画像を VR させる VRを作るのに前回のプラグイン「WP-VR
-
-
Blender Three.js ガラス その1(Cyclesレンダー)
Blenderでガラスの靴をモデリングしてみました。 最終的にはthree.jsで表示しようと思い