• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• バックアップ を表示
• 3DCG演習/Texture へ行く。
  • 1 (2022-07-27 (水) 12:12:10)
  • 2 (2022-07-27 (水) 12:12:10)
  • 3 (2022-07-27 (水) 12:12:10)
  • 4 (2022-07-27 (水) 12:12:10)
  • 5 (2022-07-27 (水) 12:12:10)
  • 6 (2022-07-27 (水) 12:12:10)
  • 7 (2022-07-27 (水) 12:12:10)
  • 8 (2022-07-27 (水) 12:12:10)
  • 9 (2023-07-12 (水) 12:49:22)
  • 10 (2023-07-12 (水) 12:49:22)
  • 11 (2023-07-12 (水) 12:49:22)
  • 12 (2023-07-12 (水) 12:49:22)
  • 13 (2023-07-12 (水) 12:49:22)

#author("2023-05-10T12:17:48+09:00;2022-07-27T12:12:10+09:00","default:inoue.ko","inoue.ko")
*第５回　テクスチュアマッピング
[[3DCG演習/2023]]｜''2023.07.27 -''
~

***解説動画
//#youtube(CNaOO_TTR_c)
//-録画済み動画です。再生して視聴してください。
//-以下名簿が表示されます。''既読確認（出欠確認）''をお願いします。
&fontawesome(far fa-hand-point-right);　__[[既読確認>]]__
~


***CONTENTS
#contents2_1

~
~

**はじめに
オブジェクトの表面に使用される画像やパターンのことをテクスチュアと言い、３次元データの頂点と画像の位置を調整して表面に貼り付ける操作をテクスチャマッピングと言います。Blenderではこの設定を、シェーダーエディタ、テクスチュアノードエディタ、UVエディタ等を使って行います。

３次元物体の頂点を（ x, y, z ）という変数によって表すのに対し、２次元のテクスチュア画像の位置情報は（ u, v ）という変数によって表します。

-'''''u'''''：画像の横軸方向
-'''''v'''''：画像の縦軸方向

なお、原点を左上とするか左下とするかは、ソフトウエアによって異なりますが、Blenderでは左下を原点（ 0, 0 ）とし、右上を（1.0 , 1.0） とする形で画像内の座標を表現します。

~
***Shading ワークスペースの利用
マテリアルの設定と同様、テクスチュアの設定でも Shadingワークスペースを使うのが効率的です。TopBar の ワークスペース選択から Shading を選択すると Shader Editor を含むワークスペースが表示されます。
~

***ShaderEditor の利用
新規のオブジェクトは、マテリアル、テクスチュアの情報を持っていません。オブジェクトにテクスチュアを貼るには、オブジェクトがマテリアルを持っていることを前提として、その階層下にテクスチュアデータをリンクする必要があります。まずは、以下のようにして新規のマテリアルを用意してください。
 ShaderEditor > Header > マテリアルの [New] をクリック

Principled BSDF ノードが表示されていれば準備OKです。
~

***テクスチュア画像の準備
練習用に以下の２つの画像を使います。ダウンロードして準備して下さい。
-&ref(Blender/concrete.jpg,noimg);：コンクリートのテクスチュア
-&ref(Blender/dice.png,noimg);：サイコロのUV展開画像
~
~


**単純なテクスチュアマッピング
#image(Blender/TextureMap1.jpg,right,30%)
物体の表面にレンガやコンクリートの表面の画像を単純に投影する方法を紹介します。頭部のモデルに顔画像を貼るような詳細な作業ではなく、２次元の画像を３次元の物体にざっくり投影するもので、以下のような方法があります。

-Flat：平面投影（デフォルト）
テクスチャを貼り付けた平面を3D座標系上に配置して投影します。投影する方向と面が垂直に近い場合は歪みが大きくなります。
-Box：ボックス投影
面に応じた座標を使用して仮想立方体の6つの側面に画像を投影します。
-Sphere：球体マッピング
テクスチャを貼り付けた球体を3D座標系の上に配置して投影しま。テクスチャ座標でのU軸が経度となり、V軸が緯度となります。 
-Tube：円筒マッピング
テクスチャを側面に貼り付けた円筒を3D座標系の上に配置して投影します。テクスチャ座標でのU軸が角度方向となり、V軸が高さ方向となります。
~

***テクスチュア画像の準備
#image(Blender/concrete.jpg,right,20%)
右図のようなテクスチュアを貼ってみます。事前に準備した画像を利用して下さい。このような画像は、以下のように検索するとフリー素材が多数見つかります。
[[Google:テクスチャ コンクリート フリー素材]]
~

***ShaderEditor の利用
#image(Blender/TextureMap2.jpg,right,30%)
作業は、ShaderEditor（NodeEditor）上に必要なノードを追加するとともに、これらを正しくソケット接続することが必要です（右図）。以下、その手順です。
#clear

-TextureCoordinateNode を追加します。
 ShaderEditor > Header > Add > Input > TextureCoordinateNode 
-ImageTextureNode を追加して画像を開きます。
 ShaderEditor > Header > Add > Texture > ImageTexture 
 ImageTexture パネルで画像ファイルを選択
 投影法は Box
-TextureCoordinateNode からソケットを接続します。
 TextureCoordinateNode  の Generated　→　ImageTextureNode の Vector
メッシュの頂点位置から自動生成されたテクスチャ座標が渡されます。
-ImageTextureNode からソケットを接続します。
 ImageTextureNode の color　→　PrincipledBSDF Node の BaseColor
~

以上で、3D View に表示されているオブジェクトの色がテクスチュア画像によって変わることが確認できると思います（3D Viewの表示モードが、Material Preview あるいは Render Preview モードになっていることが必要です）。
~
~

**UVマッピング
#image(Blender/UV_Map.jpg,right,30%)
実際的なテクスチュアマッピングでは、構造物の特定部分に当該素材の画像を貼る、顔面形状に顔の画像を貼るなど、画像と頂点との対応を正確に決めなくてはなりません。そのような場合は オブジェクトの展開図をUV画像に重ねて、UV座標上で、各頂点の位置を対応付けします。
~

***UVマップ画像の準備
#image(Blender/dice.jpg,right,30%)
立方体の６つの面にサイコロの１から６の面を対応させることを前提に、右のような画像を用意します。状態が見やすくなるよう右図には境界線が入っていますが、実際には邪魔になるので、練習の際は事前に準備した PNG画像を利用して下さい。
//&ref(Blender/dice.png,noimg);
~

***オブジェクトの展開図
Blender のメッシュオブジェクトは、デフォルトで展開図情報を持っています。
以下のようにして確認してみて下さい。
-シーンに追加されたメッシュを選択
-UV Editing ワークスペースに移動

右側の3D Viewport Editor が Edit モードになると同時に、左側の UV Editor に展開図が表示されるはずです。
~

//***展開方法を自身で定義する場合
//展開図が扱いにくい場合は、以下のようにして自分で定義することができます。
//
//#image(Blender/MarkSeam.jpg,right,30%)
//手動で展開図を作成するためには、オブジェクトに Seam（縫い目）を定義する必要があります。UV画像に対応した展開になるよう、EditModeで Seam となる部分をすべて Edge 選択していきます。
//#clear
//
//Seam となる Edge をすべて選択したら、これを以下のようにして記録します。
// Header > UV > Mark Seam
//
//次に、この Seam で展開することを指示します。
// EditModeで、全ての Edge を選択（Seam 部分のみ太く強調表示されます）
// Header > UV > Unwrap
//展開図は、UV Editor に表示される前提で、この時点で3D Viewport 上に展開図が表示されるわけではありません。とりあえず、準備完了です。
//
//~

***UV Editor で編集
UV Editing ワークスペースの左側、UV Editor で画像と展開図を重ねて表示して位置調整します。UV Editing ワークスペースに展開図が表示されていない場合は、オブジェクトを再度選択して、EditMode に入り直して下さい。EditModeで頂点がすべて選択されていれば、展開図が表示されるはずです。

以下のようにすると、画像がUV Editor 上に表示されます。
 Header > 画像選択（または Open） > 対象となる UV画像を選択します。
~

***頂点と画像の対応付け
#image(Blender/UV_Editor1.jpg,right,30%)
UV Editor の中で、画像と頂点の対応付けを行います。モデリングの操作が２Dになるだけで、頂点の移動・回転・拡縮は、[ G ] , [ R ], [ S ] で行うことができます。
#clear

#image(Blender/UV_Editor2.jpg,right,30%)
対応付けを行なった結果は右図のようになります。
#clear
~

***ShaderEditor で UVのリンク設定
#image(Blender/UV_Setting.jpg,right,30%)
作業は、ShaderEditor（NodeEditor）上で行います。これを適正に行うには、NodeEditor 上に いくつかのノードを追加するとともに、これらを正しい順序でソケット接続することが必要です（右図）。以下、その手順です。
#clear

-TextureCoordinateNode を追加します。
 ShaderEditor > Header > Add > Input > TextureCoordinateNode 
-ImageTextureNode を追加して画像を開きます。
 ShaderEditor > Header > Add > Texture > ImageTexture 
 ImageTexture パネルの Open をクリックして UV画像ファイルを選択
-TextureCoordinateNode からソケットを接続します。
 TextureCoordinateNode  の UV　→　ImageTextureNode の Vector
アクティブなレンダーUVマップからのUVテクスチャ座標が渡されます。アクティブなマップ以外のUVマップ情報を利用する場合は UV Map node を使用する必要があります。
-ImageTextureNodeからソケットを接続します。
 ImageTextureNode の color　→　PrincipledBSDF Node の BaseColor

~

#image(Blender/UV_Result.jpg,right,30%)
以上で、UVマッピングの結果が確認できると思います。。
#clear
~
~

**Worldの設定
Worldは、単一の色から物理的な空のモデル、任意のテクスチャまで、様々な環境光の放射をシミュレーションすることができます。特に環境テクスチュアを使った Image Based Lighting （イメージベースドライティング）を使用すると、光源オブジェクトを使用せずにシーン全体を照らすことができ、シーン内のオブジェクトへの環境の映り込みを含めて、自然なライティングが実現します。

#image(Blender/World_EnvironmentTexture.jpg, right, 30%)
環境テクスチュアを使ってワールドの設定を行うには、マテリアル、テクスチュアの設定同様、PropertyEditor から設定する方法と、ShaderEditor で設定する方法がありますが、ここでは ShaderEditor を使う方法で説明します。
#clear
~

***環境光（色）の設定
デフォルトのグレーの背景色を単純に変更する方法です。
-ShaderEditor を使って背景色を設定します。
 ShaderEditor > Header > World を選択
 　> Background パネルの Color の部分で色を選択

-環境光の強さは、Background パネルの Strength の値で変更できます。

-レイアウトワークスペースでワールドの色が変わったことを確認します。
シーンのプレビューモードを「レンダープレビュー」モードにして下さい。
その他のモードでは、ワールドの設定は確認できません。
~

***環境テクスチュアの設定
World に環境テクスチュアを設定すると、Image Based Lighting（IBL）が実現します。これを実現するには、環境の Background に Environment Texture をリンクします。Environment Textureノードは、Equirectangular（正距円筒図法）およびミラーボール状の画像をマッピングする Mirror Ball（ミラーボール） を環境マップとしてサポートしています。

-はじめに HDRI（High Dynamic Range Image）を準備して下さい。
以下のサイトに多数の素材があります。事前にダウンロードして下さい。
https://polyhaven.com/hdris

-ShaderEditor を使って背景画像を設定します。
 ShaderEditor > Header > World を選択
 　Add > Texture > EnvironmentTexture > 画像を読み込み 
 EnvironmentTexture の出力 Color を Background の入力 Color に接続

-環境光の強さは、Background パネルの Strength の値で変更できます。

-環境画像を回転して、光の方向をコントロールするには、以下のようにパネルを追加して制御します。
 ShaderEditor > Header > World を選択
 　Add > input > TextureCoordinate
 　Add > vector > Mapping
 
 TextureCoordinate の出力 Generated を Mapping の入力 Vector に接続
 Mapping の出力 Vector を EnvironmentTexture の入力 Vector に接続
 
 Mapping の Rotation：Z の値を変更 

-背景部分の HDRI を透明に抜くには・・
背景部分は、レンダリングした後に別のソフトで合成することもあります。レンダリングのプロパティーで、以下のように設定すると透明に抜けます。
 PropertyEditor ＞Render Property タブ
 Film パネルの Transparent（透過） にチェック
レンダリング結果を PNG 形式で保存すれば、背景部分を透明にした画像として、他のソフトで簡単に背景を合成できます。

-環境テクスチュアを光源（IBL）としてのみ使用するには・・
通常、環境テクスチュアは、シーンの背景として表示されます。これを避けて環境テクスチュアを光源（IBL）としてのみ機能させたい場合は、レンダリングに Cycle エンジンを使用するとともに、以下の設定を行なって下さい。
 PropertyEditor ＞World Property タブ
 Ray Visibility パネルで、Camera のチェックを外す
これで、環境画像そのもには背景には表示されなくなります。

~
~
~