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 球 テクスチャ

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

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

記事を読む

blender three.js 地球

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

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

記事を読む

Blender Three.js 海 物理演算

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

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

記事を読む

Wordpress VR Test

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

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

記事を読む

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

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

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

記事を読む

Blender ボーンの追加

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

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

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

blender 地球

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

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

記事を読む

three.js 環境マッピング

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

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

記事を読む

brender Three.js WebGL

Message

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

リビジョンを削除し、テーブルを最適化してDBの容量を削減
WordPress リビジョンを削除し、テーブルを最適化してDBの容量を削減

WordPress リビジョン機能 リビジョンは過去の記事を保存して

Javascript let const アロー関数 クラス
Javascript ES5,6 の新機能(letとconst,アロー関数,クラスなど)

ESとはECMASCriptの略で、ECMA という国際的な標準化機関

Strict モード JavaScript
Javascript Strictモード “use strict”;

Strict モード(厳格モード) Strict モードとは、ECM

CodeIgniter インストール
Codeigniter インストールとバージョンアップ2→3 PHP 5→7 メモ

Codeigniter インストール Codeigniter をサイ

wordpress カスタム投稿を一覧(ループ)で表示する
wordpress カスタム投稿を一覧(ループ)で表示する

カスタム投稿を一覧で表示する方法がいろいろあります。 query_p

→もっと見る

    • 202010
      Mon Tue Wed Thu Fri Sat Sun
      1234
      567891011
      12131415161718
      19202122232425
      262728293031
    にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
    にほんブログ村 FC2 Blog Ranking
    PAGE TOP ↑