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 ボーンの追加

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

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

記事を読む

three.js 環境マッピング

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

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

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

Blender Three.js 海 物理演算

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

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

記事を読む

blender three.js 地球

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

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

記事を読む

blender 環境テクスチャ

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

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

記事を読む

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

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

Blender インストール 3Dを作るのに、Blender(ブレンダー)という、ソフトを使ってみ

記事を読む

Wordpress VR Test

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

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

記事を読む

blender 球 テクスチャ

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

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

記事を読む

brender Three.js WebGL

Message

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

WordPress Twenty Seventeen function.php
WordPress twentyseventeen の function.php を見る – その2

前回の続きです。 次のスターターコンテンツは、今回のシンプルテン

WordPress Twenty Seventeen function.php
WordPress twentyseventeen の function.php を見る – その1

WordPress の最低限の機能だけのシンプルなテンプレートが欲しか

WordPress Warning エラー
WordPress フォルダー・ファイル系の関数 is_dir や opendir や exif_imagetype で Warning エラー

Wordpress の管理画面でフォルダーの中身を読み込む関数 ope

Wordpress 自作フォーム (チェックボックスなど)
WordPress 自作フォーム その3(チェックボックスなど)

以前、WordPress 自作フォーム その1の記事で Wordpre

Javascript ノード の取得や挿入
Javascript ノードの取得や挿入

ノードの取得 ノードの取得(ダイレクトアクセス) document

→もっと見る

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