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

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

blender 環境テクスチャ

Blenderでガラスの靴をモデリングしてみました。
最終的にはthree.jsで表示しようと思います。
それは次回にして、このページはCyclesレンダーでガラスの質感やってみます。

Blender ガラス Cyclesレンダー

Cyclesレンダーで、リアルな感じにしたいと思います。

Cyclesレンダーとは?

Cyclesレンダーは、Blender 2.61 以上で利用可能な新しいレンダーエンジンで、フォトリアルな効果を簡易に得られる物理ベースのレンダーです。

マテリアルを新規追加して、Cyclesレンダーにします。
blender ガラス Cyclesレンダー
サーフェスのノードを使用ボタンを押します。
blender ガラス Cyclesレンダー
サーフェイスの一覧からグラスBSDFを選択します。

Blender Cyclesレンダー 暗い

表示モードをレンダーにしてみます。
blender Cyclesレンダー 暗い
暗いのでワールド設定のサーフェスのカラーを白にします。

Blender Cyclesレンダー 背景

映りこみがあるとガラスっぽいので、背景を設定しようと思います。
ワールド設定も、ノードを使用ボタンを押してCyclesレンダーを試してみようと思います。

サーフェスを一覧から背景を選択し、カラー:ノイズテクスチャにしてみます。
blender Cyclesレンダー 背景
ちょっとまだ靴が暗いです。
blender Cyclesレンダー 暗い
マテリアルのサーフェスのカラーを明るく(R:0.970 G:0.970 B:0.970)にしました。

Blender Cyclesレンダー 背景 環境テクスチャ

今度は背景をワールド設定の、環境テクスチャで試してみようと思います。
HDRIと呼ばれる環境マップに使用される画像をダウンロードしてきます。

HDRI(High Dynamic Range Image)とは?

HDRIは3Dにおいて、背景画像をよりフォトリアルな画像を生成する際にも使われる画像です。環境マップの素材としては、360度パノラマ撮影された高画質の画像が必要になります。

環境マップ画像のダウンロードサイト

など、他にもあります。

今回は、sIBL Archiveから、Frozen_Waterfallをダウンロードしました。

Cyclesレンダーで環境テクスチャを設定する

ワールド設定のサーフェスを背景にして、カラー:一覧から環境テクスチャを選択します。
blender Cyclesレンダー 背景 環境テクスチャ
開くボタンからダウンロードしてきたファイルの中から、Frozen_Waterfall_HiRes_TMap.jpg というファイルを選択します。
blender Cyclesレンダー 環境マッピング
レンダーのサンプリングを最終結果にして、レンダリングしてみます。
ノイズがある場合はレンダーのサンプリング間接値を制限:1にするらしいです。
blender 環境テクスチャ
透明だし、背景も映り込んでいて、綺麗にガラスの質感になりました。

素材

今回ガラスの靴のモデリングをしたので、フリー素材にアップしました。
フリー素材

関連記事

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

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

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

記事を読む

blender three.js 地球

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

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

記事を読む

blender 地球

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

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

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

Blender ボーンの追加

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

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

記事を読む

three.js 環境マッピング

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

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

記事を読む

Wordpress VR Test

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

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

記事を読む

Blender Three.js 海 物理演算

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

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

記事を読む

blender 球 テクスチャ

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

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

記事を読む

brender Three.js WebGL

Message

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

フルスクリーンを CSS だけで、vw, vh, vmin, vmax を試してみる(スクロールバーも消したい)
フルスクリーンを CSS だけで、vw, vh, vmin, vmax を試してみる(スクロールバーも消したい)

ビューポートの単位 vw, vh, vmin, vmax CSS で

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

→もっと見る

    • 201812
      Mon Tue Wed Thu Fri Sat Sun
      12
      3456789
      10111213141516
      17181920212223
      24252627282930
      31
    にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
    にほんブログ村 FC2 Blog Ranking
    PAGE TOP ↑