Download to read offline
Uploaded bypoko ponmaru
サブスタンスデザイナーの 基礎と活用術 - KCROP版 -
2021年ウェビナー開催で登壇したスライドになります。 対象者はsubstanceを初めての方や興味ある方向けのウェビナーとなります。
サブスタンスデザイナーの 基礎と活用術 - KCROP版 -
- 1. サブスタンスデザイナーの 基礎と活用術 - KCROP版 - RACOONCREATIVE 馬原伸夫
- 2.
- 3.
- 4.
- 5.
- 6. ■ 自己紹介 ■ 雅名：ぽこぽん丸。 ３DCG背景・エフェクトをお仕事にしている フリーランスのアーティスト Substanceを使ってテクスチャー制作しています。 2021年 現在リモートでお仕事を中心に活動中 また非常勤講師活動も再開します 2020年 書籍のリリース(Ktk.kumamoto様と共著) 詳細はこちらへ( https://racooncrt.com )
- 7.
- 8.
- 9. ■ サブスタンスとは？ ■ ・サブスタンスペインター →3DCGモデルに直接ペイントができる3Dペイント →リアルタイムで書いたものを テクスチャとして出力ができる SPについてはこのあとのネωムさんのセッションで 詳しく解説して頂けます！
- 10.
- 11. ■ ツールの関係性 ■ サブスタンス ・Maya ・3dsMAX ・Houdini ・Blender ・CINEMA 4D ・MODO etc... 3Dモデリング マテリアル テクスチャー ・V-Ray ・ARNOLD ・REDSHIFT ・Iray etc... ・Unity ・Unreal Engine ・CRY ENGINE etc... レンダリング ゲームエンジン ※商品名は一部抜粋・順不同
- 12.
- 13.
- 14.
- 15.
- 16. ■ 基本的な機能とノードベース ■ ブレンドレベル(補正) ブラー グラディエントマップ (グラデーション) 今回は 自分がよく使うノード4種類の紹介です。
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23. ■ 背景・エフェクト ■ リファレンス ネットでも充分、でも 実際に撮って目で見て、触って どんな形状なのかを知ると 意外とクオリティ高くなる！？ ➡➡ Tile Sampler 初めからタイルが並べられらノード サイズ・スケール・オフセットずらし、 最後に色のランダムをつける 完成形 畳縁(たたみへり)は別ノードで作成し、 畳表(たたみおもて)とマージ 始めのtileから畳表の 縫い目ができるまでが 早い！！
- 24.
- 25.
- 26. ■ 背景・エフェクト ■ プロ用機材必要なし スマートフォン or デジカメ OK！ 普段意識せずに撮ると天候や影の入り方等あまり配慮できません。 曇りの日に撮ると良い感じに影が抑えられるのでベスト！ 今回はそのPBRマテリアルを作ってみましょう！ 手順をSubstanceDesignerに取り込んで PBRテクスチャーとして作ってみようと思います。 ←完成図です。 ↓ 元のお寺で撮影した写真です。
- 27. ■ 背景・エフェクト ■ プロ用機材必要なし スマートフォン or デジカメ OK！ 普段意識せずに撮ると天候や影の入り方等あまり配慮できません。 曇りの日に撮ると良い感じに影が抑えられるのでベスト！ 今回はそのPBRマテリアルを作ってみましょう！ 手順をSubstanceDesignerに取り込んで PBRテクスチャーとして作ってみようと思います。 ←完成図です。 ↓ 元のお寺で撮影した写真です。 Before After
- 28. ■ 背景・エフェクト ■ 写真加工ソフトさえあれば アルベドマップを作ることもできます。 参考元：第29回：マッピング用テクスチャーを考える https://area.autodesk.jp/column/tutorial/3ds_max_kitchen_stadi um/texture_data/ ❶画像をSubstanceDesignerにドラッグアンドドロップ ※予めBlendノードに繋いでおく ❷HSLノードをつかって彩度を落とす(色味を除去） ❸Invert Colorノードで反転（輝度を反転） ❹Blendノード Blending Mode ソフトライトにする
- 29. ■ 背景・エフェクト ■ ❺Transformation2Dで角度と使いたい箇所に調整 ❻Quad Transformで歪みを補正するように調整（大まかに） ❼Grayscale Conversionでグレースケールにする ❽Histogram Rangeで平均的な陰影にするために調整 この調整についてはラストのヤッコさんの セッションでアルケミストを使った話でも聞けます。
- 30. ■ 背景・エフェクト ■ あとはそれぞれ項目別にセットしていきます ❶アルベドカラー グラディエントマップで調整したアルベドマップからピック 以下それぞれの項目別に3D VIEWへ反映させてみます ❷ ノーマルマップ 凹凸を作ります ❸ ラフネスマップ 粗さを作ります ❹ アンビエントオクルージョン 深み・角や奥行きにできる黒ずみを作ります あとは3DVIEWをみながら調整してみましょう！
- 31. ■ 背景・エフェクト ■ 実際にUnityに入れてみました。 使ったマテリアルは Autodesk Interactive シェーダになります。
- 32.
- 33.
- 34. ■ 背景・エフェクト ■ 取材先 宝泉院(拝観料800円)※お抹茶お菓子付 実光院 (拝観料500円) アクセス：京都バス 「大原」で下車 ※拝観時間も新型ウィルス対策の為、 短縮中なので早朝がオススメ 仏さまを 撮るべからず
- 35. ■ 背景・エフェクト ■ ➡ GrungeMap 006と Grunge Map 003 ブレンド Quad Transform(フォトショでいう自由変形みたいな） で変形 最後に Shape Mapper(円形に沿って曲げる機能)で形状は完成
- 36. ■ 背景・エフェクト ■ ParticleSystem ❶ Render Mode Quad(四角）Mesh ❷ カメラ方向に向かないように Local座標 ❸ テクスチャーを適用したマテリアルをアサイン
- 37. ■ 背景・エフェクト ■ ParticleSystem ❶ Render Mode Quad(四角）Mesh ❷ カメラ方向に向かないように Local座標 ❸ テクスチャーを適用したマテリアルをアサイン ❹ 程よく良い感じに見えるように回転の値を入力 Rotation over Lifetime 1800
- 38. ■ 背景・エフェクト ■ ParticleSystem ❶ Render Mode Quad(四角）Mesh ❷ カメラ方向に向かないように Local座標 ❸ テクスチャーを適用したマテリアルをアサイン ❹ 程よく良い感じに見えるように回転の値を入力 Rotation over Lifetime 1800
- 39. ■ 背景・エフェクト ■ ParticleSystem ❶ Render Mode Quad(四角）Mesh ❷ カメラ方向に向かないように Local座標 ❸ テクスチャーを適用したマテリアルをアサイン ❹ 程よく良い感じに見えるように回転の値を入力 Rotation over Lifetime 1800 ❺ Force over Lifetime(重力)とSize over Lifetime
- 40. ■ 背景・エフェクト ■ ParticleSystem ❶ Render Mode Quad(四角）Mesh ❷ カメラ方向に向かないように Local座標 ❸ テクスチャーを適用したマテリアルをアサイン ❹ 程よく良い感じに見えるように回転の値を入力 Rotation over Lifetime 1800 ❺ Force over Lifetime(重力)とSize over Lifetime ❻ Color over Lifetime(フェードアウト調整)
- 41. ■ 背景・エフェクト ■ ParticleSystem ❶ Render Mode Quad(四角）Mesh ❷ カメラ方向に向かないように Local座標 ❸ テクスチャーを適用したマテリアルをアサイン ❹ 程よく良い感じに見えるように回転の値を入力 Rotation over Lifetime 1800 ❺ Force over Lifetime(重力)とSize over Lifetime ❻ Color over Lifetime(フェードアウト調整) ❼ 味付けとして細かい粒子を沢山出して盛ります。 Emission Burstsでどのタイミングで数を出す Collisionで周りのオブジェクトを見て跳ね返えります
- 42. ■ 背景・エフェクト ■ ParticleSystem ❶ Render Mode Quad(四角）Mesh ❷ カメラ方向に向かないように Local座標 ❸ テクスチャーを適用したマテリアルをアサイン ❹ 程よく良い感じに見えるように回転の値を入力 Rotation over Lifetime 1800 ❺ Force over Lifetime(重力)とSize over Lifetime ❻ Color over Lifetime(フェードアウト調整) ❼ 味付けとして細かい粒子を沢山出して盛ります。 Emission Burstsでどのタイミングで数を出す Collisionで周りのオブジェクトを見て跳ね返えります スマートフォンゲーム向きではないですが 静止画レンダリングや映像には使えそう！
- 43. ■ 背景・エフェクト ■ どうやって発光している？ ・マテリアルの アルベドのインテンシティをHDRカラー有効 ※微々たるにエミッションを有効 ・パーティクル自体にライトを仕込んでいる
- 44. ■ 背景・エフェクト ■ どうやって発光している？ ・マテリアルの アルベドのインテンシティをHDRカラー有効 ※微々たるにエミッションを有効 ・パーティクル自体にライトを仕込んでいる 上がライト無 下がライト有
- 45. ■ まとめ ■ まずは触ってみよう！ 仕事で効率よく使う、費用対効果がでているか？ 案件によっても同じではない。 ここぞという使い時は必ず出てくるので 場面に応じて活用し最短で作れたらいいのではないでしょうか？ 全部が全部プロシージャルで作るべきかと言われたらそうではなく、 サブスタンスでも向き不向きもありますので 自分に合った使い方で使うのが一番です。
- 46.
- 47.
- 48.
- 49. ■ Ｑ＆Ａ ■ 使用スペック詳細： デスクトップ OS：Windows10 CPU：Core i7-7700 GPU：RTX2070 (GTX1060※購入時) メモリ：64GB(32GB※購入時) ノート OS：Windows 10 CPU：Core i7-9750 GPU：RTX2060 メモリ：16GB
Editor's Notes
- #2 補足： どうぞよろしくお願い致します。
- #3 補足： 今日のセミナーで少しでもほんの一部でも触ってみようと思ってくれたら幸いです。
- #7 補足： substanceツールのなかではSDをテクスチャ－制作としてよく利用しています。
- #8 補足：サブスタンスとは？ 元はアルゴリズミック社から提供されていたものです2年前ぐらいからアドビ社へ買収されています。 ３Dマテリアル作成に特価したツール・サービスです。 ３Dマテリアルとは？ これまで２D空間からUVを調整したりテクスチャ－側で繋がっているように調整してたとおもいますが ３D空間上にマテリアルを作れることで連続性のあるようにUVをなるべく気にすることなくサブスタンス側で いい感じに調整してくれる機能を兼ね備えたものとして思って下さい。
- #10 補足： サブスタンスペインターは 3DCGで制作したモデルに直接ペイントができる３Dペイントができます。 ２Dテクスチャ－を書き出しては３DCGソフトに反映される手間が省くためリアルタイムでその色・材質等作ることができます。 そのままテクスチャ－として出力もできます。
- #11 補足： サブスタンスデザイナーは SPがペイントツールに例えるなら SDはその使うための３Dマテリアルやテクスチャ－・マスクを作るツールとして例えます。 勿論３DCGで制作したモデルをインポートしてUVに合わせてテクスチャ－リングすることもできます。 ベイクがとにかく早いです。オクルージョン、ノーマル、カーバチャー（曲率）、マップの生成がすぐです。
- #12 補足： サブスタンスがどのポジションでどんな役割を果たすか図にしてみました。 モデリングからテクスチャ－・マテリアルを作るときに大いに使われるポジションになるかと思います。
- #13 補足： ゲーム業界でも サブスタンスツールを使ったリソース制作がスタンダードになってきたと思います。 SPに関してはキャラクターの衣装や武器、背景だと建物や小物までの１アセット単位で作られていると思います。 アーティストさんたちで管理されている印象があります。 SDに関しては背景で使われる３Dマテリアルをはじめゲームエフェクト(バトルなど）が該当されます。 こちらはエンジニアさんのほうで管理されている印象が多いです。
- #15 補足： 左から基本となるノイズのノードを使います。シングルでも使いますし、他のノイズノードと ブレンドして使うことが多くなります。最終に近づけば色を付けるグラディエントマップノードを使います。
- #16 補足： 一番右の最終結果であるアウトプットノードに繋いで完成です。 アウトプットノードに繋ぐ理由としてはテクスチャ－としてエクスポートする、 あとはそれぞれのカラーなのかノーマルなのかそれともラフネスなのかを決めるために必要となります。 簡単に述べましたが左から右へと流れていきます。
- #17 補足： よく使うノードとしてご紹介いたします。 使い方というよりもなんだこれ？何かに似てるぞとおもったので例えています。
- #18 補足：ブレンドノード なにかと何かをブレンドするものです、パラメータも結構シンプルです。 オパシティがPSの不透明度を指しているものに近いです。 更にブレンディングモードは描画モード
- #19 補足：レベルノード レベル補正で画面を締めたり使ったりします。
- #20 補足：ブラーノードです。 ぼかすために使います。
- #21 補足：グラディエントマップ 暗いところ～明るいところまでのグラデーションで色を指定します。
- #24 補足： まず畳から説明します。 はじめにリファレンスを用意します。 ネットの画像収集でもいいです。 ただ凹凸や材質、手で触ってみないとどういう形状になっているのかを理解する事も大事で サラサラなのかザラザラなのか畳でいうと編み込みで作られているのと 畳へり縁の部分なんかは色や模様で身分で決まっていたそうです。もちろんこの縁がない畳もあります。 SDでは Tile Sampler を使って作っていきます。 初めから四角のタイルが敷き詰められているのでここから作るのが良さそうです。 形状を細かくしてオフセットで一段ずつずらして、重なり合う部分もスケールで整えて編み込みを表現します。 縁はまた別ノードで作成し、ここまで作った畳表とマージし色をつけ完成です。
- #26 補足： 今日ははじめての方でも簡単に楽しめる方法をご紹介いたします。
- #27 補足： 先日Twitterにもあげたものになりますがこちらです。 https://twitter.com/x_pokoponmaru_x/status/1362993615937564672?s=20 ただの木の板じゃないか？ておもうのですが
- #28 補足： 右下の画像から左のマテリアルを作成しました。 機材も特にプロ用の者は使っていません。 iPhoneのみです。 特に考えずに取った何気ないとあるお寺の床です。 この画像から左のものがいかにしてつくられたのかを説明していきます。 SDでやる必要のない工程ですがSDを使うキッカケでもいいんじゃないか？っとお寺で浮かんだので 是非これから触る方はやってみてください。
- #29 補足： まずはどうやってアルベドテクスチャーをつくるか？ オートデスク エリアジャパンさんの公開している「マッピング用テクスチャーを考える」を見てみると 一番丁寧に記述されていますのでご参考ください。その記事に基づいてSDで作成してみました。
- #31 補足： それぞれの項目に割り当てていきます。 アウトプットノードをドラッグアンドドロップで３Dビューへ 自分がアルベドから設定している理由はあって 昔ディフューズマップという陰影や汚し、多少の質感を既に書き込んだテクスチャー を作っていた慣れからノーマルや質感マップを使わない1枚のみで作っていた時代もあります。 でも現代のゲームにおけるレンダリング方式はガラリとかわり・・・物理ベースＰＢＲ形式が採用されいますので ディフューズカラ分解するように、ノーマル、ラフネス、アンビエントオクルージョン等を割り当てて確認します。 ゲームだけじゃなく映像は勿論、工業系建築、ＶＲにもよく使われています。自分も建築コンテンツではＳＤでマテリアルを作っていました。
- #32 補足： これは先ほど作ったマテリアルからそれぞれのテクスチャーをUnityで開いたものです。 マテリアルは確認したいものがなかったのでオートデスクインタラクティブシェーダがあるのでそれをマテリアルに適用して 確認してみました。
- #33 補足： 畳の話に戻るのですが タイルサンプラーから網目をつくって色をつけて行く工程でしがこれについては ノーマルから作ってみました。実際に触ってからおもったのがまずはどういう質感や材質立体感を作ってから着色していく いわゆるグレースケールからの作成で試しに作っていく出の充分かなとおもいます。
- #34 補足： 一通り完成したら終わりですが、ダメージ表現・経年劣化 をつくってみるのもいいかもしれません 全てが真新しい畳とは限らない場合や 所々劣化した部分が欲しい場合も改めて作っておいて すぐに用意ができたりします。
- #35 補足： 取材した場所の紹介 いずれも入館する際に撮影OKな箇所とNGな箇所があります。館内の方に確認してみましょう。
- #36 補足： グランジマップとグラディエントノードをブレンドし徐々に消えていくような見た目をつくります。 グランジマップ自体がギザギザしているので自然な軌跡が作れるかなと思い使っております。 さらに別のグランジマップとさらにブレンドし クアッドトランスフォームでコーン型にします。 最後にシェイプマッパーで円形に沿って曲げる機能をもつノードで形状は完成です。
- #37 補足： パーティクルシステムを使います。 エミッターの数も１つライフタイムも１というとてもシンプルなパラメータを使っています。 レンダラーの設定から レンダーモードをクアッドメッシュにします。 カメラ方向(ビルボード）にならないようにローカル座標にし テクスチャーをパーティクルシェーダに割り当てたマテリアルをこのパーティクルにアサインします。
- #38 補足： 程よく回します。 ローテーションオーバーライフタイムで 1800ぐらいにしてみました。
- #39 補足： その場回転から 例えばキャラクタの回転切りなどに使えそうだなと想定 そうすると重力やキャラクターの移動を考えた動きをつけてみました。
- #40 補足： Force Over Lifetime の数値をカーブにし 左から右へが”時間軸”でカーブ自体はフォースの”力”を表しています。
- #41 補足： Color over Lifetimeで出現後の消失するフェードアウトのように調整してみました。 色の使い方は熱が冷めるようにほんのり赤身のかかった茶色にしております。
- #42 補足： 次にインパクト時（ヒット時）に華やかさが欲しかったので粒子を飛ばしています。 見た目でカッコよかったので追加しております。
- #43 補足： スマートフォンゲームでは使えないので、静止画やレンダリング・映像には使えそうです。
- #44 補足： これはアルベドのインテンシティをＨＤＲカラーとして有効にしている点、フォワードレンダリング使用時に使います。 普段は1.0をMaxとするならそれ以上に持ち上げたことにより より本物を見ているような働きになります。
- #45 補足： 最後にこのエフェクトにはポイントライトを仕込んでいます。
- #46 補足： まずはなんでもいいから触ってみようということです。 このツールはこういう風に使われるとか、こういった使い方をしないでくださいというものではない（絶対にこうしろとかするものではない） 自分なりに触ってみての使い方やってみると良いかもしれません。 あとは業務で使ってるといってますが案件によっては使い方もそれぞれです。 オクルージョンだけに使ったり、臨機応変にここぞというときに発揮できるから便利なツールだと思ってます。 全部が全部SDか？とはなりませんし、向き不向きがあるのでなじむなら進んで使ってみるのが一番良いかなと思います。
- #50 補足： BTOパソコンを使ってます。 価格も当時でもデスクトップはカスタマイズして10万と消費税 下のノートＰＣは2年前にRTXマシンの性能が試したくて購入14万前後です。 超高級とかハイスペックなPCをつかっているわけでもないです。