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

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

関連記事

Wordpress VR Test

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

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

記事を読む

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

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

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

記事を読む

three.js 環境マッピング

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

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

記事を読む

blender three.js 地球

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

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

記事を読む

blender 環境テクスチャ

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

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

記事を読む

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

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

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

記事を読む

Blender ボーンの追加

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

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

記事を読む

Blender Three.js 海 物理演算

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

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

記事を読む

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

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

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

記事を読む

blender 球 テクスチャ

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

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

記事を読む

brender Three.js WebGL

Message

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

WordPress エラー:Failed to load plugin: table from url https://cdn.tinymce.com/4/plugins/table/plugin.min.js
WordPress エラー:Failed to load plugin: table from url https://cdn.tinymce.com/4/plugins/table/plugin.min.js

WordPress エラーの状態 WordPress 管理画面のテキ

wordpress タイトルの変更
WordPress タイトルの変更

テンプレートタグ the_title(); get_the_title

All-in-One WP Migration で サーバ移動
「All-in-One WP Migration」プラグインで 簡単に WordPress のサーバー移行する手順メモ

1.移行元サイトでのデータエクスポート 「All-in-One WP

DNSサーバーとは
ドメインとは?DNSサーバーとは?

ドメインとは? ドメインとは? ドメインとは、インターネット上のネ

javascriptで複数同じ名前のformの値を取得する
javascriptで複数同じ名前のformの値を取得するとエラー Cannot read property ‘value’ of undefined

Javascript で value の値を取得する このようなHT

→もっと見る

    • 202403
      Mon Tue Wed Thu Fri Sat Sun
      123
      45678910
      11121314151617
      18192021222324
      25262728293031
    にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
    にほんブログ村 FC2 Blog Ranking
    PAGE TOP ↑