#author("2023-07-01T13:24:33+09:00;2022-07-27T12:12:10+09:00","default:inoue.ko","inoue.ko") *第5回 テクスチュアマッピング [[3DCG演習>3DCG演習/2023]]|情報デザイン専攻2年 選択(集中) ~ ***解説動画 #youtube(ABC) (準備中) //録画済み動画です。再生して視聴してください。 -以下名簿が表示されます。''既読確認(出欠確認)''をお願いします。 &fontawesome(far fa-hand-point-right); __[[既読確認>https://docs.google.com/spreadsheets/d/1bHOlJOdW0smlLna-qBEhkQ2U6DlnGgp3mGaBuaLP2ZA/edit?usp=sharing]]__ ~ ~ **はじめに オブジェクトの表面に使用される画像やパターンのことをテクスチュアと言い、3次元データの頂点と画像の位置を調整して表面に貼り付ける操作をテクスチャマッピングと言います。Blenderではこの設定を、シェーダーエディタ、テクスチュアノードエディタ、UVエディタ等を使って行います。 ~ ***テクスチュア画像の準備 練習用に以下の2つの画像を使います。ダウンロードして準備して下さい。 -&ref(Blender/concrete.jpg,noimg);:コンクリートのテクスチュア -&ref(Blender/dice.png,noimg);:サイコロのUV展開画像 ~ ~ **確認課題 04 #image(Basic04.jpg,right,35%) 前回同様に、本日の内容を視聴(一読)後、右のようなシーンを作成して、学科サイトの 基礎演習 Texture Mapping の部分に出力画像を掲載して下さい。今回の課題は、・・・・・・・・練習です。制作する事物の形状は何でも構いません。 ~ ***制作要件 -平面あるいは立方体を拡縮して床と壁を作って下さい。 -床の上に形状編集を行った任意の事物を配置して下さい。 -曲面にはスムーズシェーディングを適用して下さい。 -床や壁の端が見えないように調整して下さい。 -全体がカメラの視野に収まるように調整して下さい。 -色やテクスチュアの設定は不要です。 -基礎技術の確認が目的なので、出力サイズは 960x540(16:9)で十分です。 ~ ~ **単純なテクスチュアマッピング #YouTube(ABC) ~ #image(Blender/TextureMap1.jpg,right,30%) 物体の表面にレンガやコンクリートの表面の画像を単純に投影する方法を紹介します。頭部のモデルに顔画像を貼るような詳細な作業ではなく、2次元の画像を3次元の物体にざっくり投影するもので、以下のような方法があります。 -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 パネルで画像ファイルを選択 投影法は Flat(デフォルト) -TextureCoordinateNode からソケットを接続します。 TextureCoordinateNode の Generated → ImageTextureNode の Vector メッシュの頂点位置から自動生成されたテクスチャ座標が渡されます。 -ImageTextureNode からソケットを接続します。 ImageTextureNode の color → PrincipledBSDF Node の BaseColor ~ 以上で、3D View に表示されているオブジェクトの色がテクスチュア画像によって変わることが確認できると思います(3D Viewの表示モードが、Material Preview あるいは Render Preview モードになっていることが必要です)。 ~ ~ **UVマッピング #YouTube(ABC) ~ #image(Blender/UV_Map.jpg,right,30%) 実際的なテクスチュアマッピングでは、構造物の特定部分に当該素材の画像を貼る、顔面形状に顔の画像を貼るなど、画像と頂点との対応を正確に決めなくてはなりません。そのような場合は オブジェクトの展開図をUV画像に重ねて、UV座標上で、各頂点の位置を対応付けします。 3次元物体の頂点を( x, y, z )という変数によって表すのに対し、2次元のテクスチュア画像の位置情報は( u, v )という変数によって表します。 -'''''u''''':画像の横軸方向 -'''''v''''':画像の縦軸方向 なお、原点を左上とするか左下とするかは、ソフトウエアによって異なりますが、Blenderでは左下を原点( 0, 0 )とし、右上を(1.0 , 1.0) とする形で画像内の座標を表現します。 ~ ***UVマップ画像の準備 #image(Blender/dice.jpg,right,30%) 立方体の6つの面にサイコロの1から6の面を対応させることを前提に、右のような画像を用意します。状態が見やすくなるよう右図には境界線が入っていますが、実際には邪魔になるので、練習の際は事前に準備した 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 の中で、画像と頂点の対応付けを行います。モデリングの操作が2Dになるだけで、頂点の移動・回転・拡縮は、[ 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の設定 #YouTube(ABC) ~ Worldは、単一の色から物理的な空のモデル、任意のテクスチャまで、様々な環境光の放射をシミュレーションすることができます。特に環境テクスチュアを使った Image Based Lighting (イメージベースドライティング)を使用すると、光源オブジェクトを使用せずにシーン全体を照らすことができ、シーン内のオブジェクトへの環境の映り込みを含めて、自然なライティングが実現します。 ~ ~ **APPENDIX 今回の説明内容の詳細は、以下のページに記載しています。動画を見るより読む方が早い・・という方は、以下をご覧下さい。 > __[[Blender/Textures]]__ > __[[Blender/Rendering_World]]__ ~ ~