Blender Three.js 地球 その2(ノード)

公開日: : brender, Three.js, WebGL

blender 地球

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

Blender 地球 作り方

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

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

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

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

マテリアルノード
blender 地球 ノード

コンポジットノード
blender 地球 ノード

Blender ノードの種類

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

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

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

Blender グラデーション(マテリアルノード)

マテリアルノードでオブジェクトにグラデーションをかけてみようと思います。

3Dビュー・エディターの右上部分の三角を左にスライドさせて、ウィンドウを分割します。
エディタータイプをノードエディターにします。
blender ノード グラデーション
新規でマテリアルを作ります。

マテリアル名の横のノードのボタンを押すと、エディター部分に入力出力のノードが表示されます。

出てきたノードは、左から右の順番のツリー型になっています。
左のノードが入力、右のノードが出力になります。
blender ノード グラデーション
左のノードのマテリアルアイコンボタンで、新規で先程作ったマテリアルを選択します。

下の追加ボタン(Shift + A)から コンバータ → カラーランプを選択すると、カラーランプのノードが出てきます。

それを入力と出力の間に置くと勝手にワイヤーみたいのが、つながります。
blender ノード グラデーション
カラーランプの値と色を適当に変更します。

ノードは左クリックで選択したり、Xキーなどで削除したり、操作はそんなに難しくありません。

Blender 全体をぼかす(コンポジットノード)

次に、全体のレンダーにかかるコンポジットノードを使って、全体にぼかすフィルターをかけてみます。

マテリルノードからコンポジットノードのボタンに切り替えます。
blender ノード ぼかし
ノードを使用にチェックすると、入力出力のノードが出てきます。

コンポジットノードの場合は、上部にあるスクリーンレイアウトをコンポジッティングにした方が見やすいです。
blender ノード ぼかし
下の追加ボタン(Shift + A)から フィルター → ぼかしを選択すると、ぼかしのノードが出てきます。

英語の動画解説にも出てきた、高速ガウシアンを選択します。
相対値の方が分かりやすいので相対値にチェックを入れます。
値を2%にしてみます。

左下のところでF12を押して一度レンダーすると、それ以降はレンダーをしなくても変更のたびにレンダーされるので見やすいです。

Blender Three.js 地球 ノードのエクスポート

多分ノードはエクスポート出来ないだろうと思いながら、ちょっとやってみます。

参考サイトの英語の動画解説では、テクスチャの貼り方は前回記事の貼り方1でやっていますが、貼り方2の方で貼って、ノードを付けてエクスポートしてみようと思います。

レンダーだとこのように夜の部分の街の光が表現出来ています。
blender 地球 ノード
これをThree.jsで書き出して表示してみます。

エクスポートすると、雲が透過しすぎて見えないので、透過:0→0.5
大気圏の青が濃すぎるので、透過:0.7→0.1 と値を調整しました。
blender three.js 地球
DEMO を見る
画像そのまま読み込むので表示は遅く、雲が表示したりしなかったりします。
(雲が表示されない場合は更新ボタンを押してください。)

エクスポートしたものは、夜の部分の街の光は完全無視されています。
予想通り、ノードはエクスポートされてないように思います。

コンポジットノードも、エクスポートにカメラ設定というチェックがあるので、そこをチェックして書き出してみましたが、特になにも書き出てないようだったので、どうしても全体にぼかしたい場合などは js の方でやるしかないかなと思います。

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

関連記事

Blender と Three.js で3Dのテキストのアニメーションやってみる その2

Blender Three.js エキスポート その2(3DのテキストのアニメーションやってみるⅡ)

今回は、Three.js を使って、前回Blenderから書き出した JSONファイル を表示したり

記事を読む

three.js 環境マッピング

Blender Three.js ガラス その2(環境マップ)

前回Cyclesレンダーを試してみました。 Cyclesレンダーはノードを使用しているので、ガ

記事を読む

blender three.js 地球

Blender Three.js 地球 その3(ベイクと星)

今回はベイクを試してみようと思います。 あと、参考サイトの英語の動画解説では、blenderの

記事を読む

Three.jsで360°パノラマ画像を VR させる

Three.jsで360°パノラマ画像を VR させる

Three.jsで360°パノラマ画像を VR させる VRを作るのに前回のプラグイン「WP-VR

記事を読む

Blender Three.js 海 物理演算

Blender Three.js エクスポート その5(目のボーンとウェイトペイントとか)

前回亀の歩くアニメーションが、手足のボーンしか動かしてないのに、目や甲羅の部分まで連動してしまったの

記事を読む

Wordpress VR Test

WordPress で VR させて、360°のパノラマ画像を表示する

WordPress.com内ショートコードで VR させる WordPress.com内で、VR(

記事を読む

blender 環境テクスチャ

Blender Three.js ガラス その1(Cyclesレンダー)

Blenderでガラスの靴をモデリングしてみました。 最終的にはthree.jsで表示しようと思い

記事を読む

Blender と Three.js UVのマテリアル複数 エクスポート

Blender Three.js エクスポート その3( テクスチャなどがエクスポート出来ない場合)

Blender ではちゃんと表示しているのに、Three.js でエクスポートしたら、オブジェクトや

記事を読む

Blender ボーンの追加

Blender Three.js エクスポート その4( モーフアニメーション)

前回作った亀に歩くモーフアニメーションを付けて、それを Three.js で表示するまでをやってみよ

記事を読む

blender 球 テクスチャ

Blender Three.js 地球 その1(テクスチャ)

Blender 地球 テクスチャ Blenderで地球を作ってみようと思います。 最終的にはエク

記事を読む

brender Three.js WebGL

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

マウスドラッグ
マウスドラッグ で ボール投げたい

アイキャッチ画像がマウスドラッグを描いたつもりが、子供の好きなあのボー

Three.jsで360°パノラマ画像を VR させる
Three.jsで360°パノラマ画像を VR させる

Three.jsで360°パノラマ画像を VR させる VRを作るの

Wordpress VR Test
WordPress で VR させて、360°のパノラマ画像を表示する

WordPress.com内ショートコードで VR させる Word

画像加工 cropbox.js
写真をアップロードして切り抜きが出来るcropboxにタッチイベントを付けてみる

Git Hub の cropbox 写真をアップロードしてカット出来

画像の拡大・縮小 タッチイベント
画像の拡大縮小を javascript の touch イベントでやってみる

画像の幅と高さを取得 まずは、neko.jpg という画像を用意して

→もっと見る

にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
にほんブログ村 FC2 Blog Ranking
PAGE TOP ↑