Blender Three.js 地球 その２（ノード）

前回はNASAの地球のテクスチャを１つだけ使って、球へのテクスチャの貼り方を２パターンやってみました。

Blender 地球　作り方

NASAのテクスチャには、雲や、街の光のテクスチャなども別で用意されています。

そのテクスチャを使って以下のサイトを参考に、blenderで地球を作ってみました。
BLENDER GURU（英語の動画解説）

こんな感じになりました。

てっぺんがちょっと光すぎな気もします。
動画と同じように作ったつもりですが、ノードの値などが少し怪しいのかもしれません。

最終的なノードはこのような感じになりました。

マテリアルノード

コンポジットノード

Blender ノードの種類

ノードエディタの記事はなかったので、ノードの基本を少し書いておこうと思います。

ノードには３つの種類があります。

• マテリアルノード：マテリアルにかけるエフェクト
• コンポジットノード：レンダリング結果にかけるエフェクト
• テクスチャノード：テクスチャにかけるエフェクト

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 の方でやるしかないかなと思います。

この街の光を出すのに、次回は地球本体をベイクして試してみようと思います。