Go to Qiita Advent Calendar 2024 Top
LoginSignup
10
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@towel_funnel(タオル 飛駒)

Amplify Shader EditorですぐはじめるTriplanar

Last updated at Posted at 2022-02-27

少し前に、ワールド製作者交流会というイベントがありました

僕も参加させてもらって、色々なワールド製作者と色々なお話ができたのですが、
Amplify Shader Editorがワールドモデリングに良いと聞いたけど、何に使ったら良いかわからない・・・という話題を聞きました
技術を学ぶ気になっても、何を目指したらいいかわからないこと、ありますよね
とりあえずぱっと使って効果が高いテクニック、Triplanarについてはじめ方をまとめました

UVを使わず継ぎ目のないタイリングができる

Triplanarはワールド座標てテクスチャを割り当てる技術です
高級感のある角丸のついた建材に無茶苦茶相性がよく、タイリングしたままではUVの展開が難しい角丸をなめらかにつないでくれます
image.png
シームが発生しないため円柱型の建材にも相性が良いです
このとおりぐるぐる回してもどこにも継ぎ目がありません

ダウンロード (1).gif

一般的にはサブスタンスペインターなどで継ぎ目を消すことはできますが、ShaderによるTriplanarは内部的には１枚だけのタイルパターンを使うので容量を小さく、解像度を高くできます

Shaderを作ってエディタを開く

とりあえずAmplify Shader Editor購入済み、インポート済みという前提です
Projectタブから右クリックでCreate > Amplify Shader > Surfaceを選びます
Image.png
Shaderに名前をつけるとAmplifyShaderのエディタが開きますが、とりあえず閉じます
先にマテリアルを作ったほうがテクスチャまで含めて設定でき、最初は間違いが少ないからです
作成したShaderを右クリックしてマテリアルを作成し、
Image.png

ダブルクリックするとAmplifyShaderのエディタ画面がマテリアルを対象として開きます（タブのところにマテリアルのアイコンがつきます）
基本的にこの画面から始めると良いです
各画面の説明はこんな感じ
空白の図 (16).png

ノードを置いていこう

適当に空いているところで右クリックするとノードの検索欄が出てくるので、Triplanar Sampleを探して配置します
Image.png
配置したノードを選択すると左側にプロパティが出てきます
Image.png
適当にタイリングするテクスチャを割り当てて、TextureカテゴリのNameの項目にAlbedoと入れておきます（後でマテリアルの設定のときの名前になるのでわかりやすければok）
Image.png
RGBAをAlbedoにつないで、ビルドボタンを押すと（オートビルドなら勝手に）Shaderが生成されます
Image.png

角丸つきのキューブに割り当てるとこんな感じ
Image.png
反対側もこんな感じで、ぱっと見た感じ継ぎ目がないですね、いいかんじ
Image.png

ノーマルとメタリックとスムースネスを追加する

同じ感じでノーマルとメタリック（＋スムースネス）を追加していきます
ノーマル用のノードを追加して、プロパティからNormalMapのチェックをつけて、XYZをNormalに接続
Image.png
MetallicとSmoothnessは同じ画像のR要素と、A要素に入っているので、こんな感じに接続します
Image.png
それぞれテクスチャに名前をつけておくとマテリアルの設定で使いまわしやすくなります

なおマテリアルのインスペクタで設定するときの並び順は、なにもないところをクリックしたときのプロパティの一番下の項目で設定できます
Image.png
適切なテクスチャを割り当てるとこんな感じです
高級な机とかタンスとかに良さそう
Image.png

テクスチャはワールド座標で割り当てられている

このキューブを動かすとちょっと変わった動作をします
Videotogif.gif
これはワールド座標でテクスチャが割り当たるTriplanarの特徴です
タイリングが基本の建築素材にはある意味とても便利なのですけども回転する際には斜め方向の模様が２つのテクスチャを混ぜ合わせたチェック柄になってしまうこともあるので気をつけてください
Image.png
悪目立ちしないような部分ならありな気もするけどもね

作ったマテリアルはテクスチャを割り当てるだけで再利用可能です
Substance 3D Assets （旧SubstanceSource）のテクスチャがとっても相性が良いです
Image.png
さすがにレンガのようなはっきりした模様があると無理がある接続かも・・・コンクリートとか岩とかはいい感じになりやすいです
Image.png

回転できるようにする

傾いた面はともかくとして、上から見てワールド座標に必ず垂直だと、斜めに置いた家具などで困ることがあるので回転機能を追加しておきましょう
オブジェクト座標を使う方法もあるのですが、Blenderで配置する人だと上手く行かないので手動指定にします

WorldPositionと、Rotate About Axisを追加して図のように接続します
Rotate About Axisのプロパティのうち、Normalized Rotation Axisのyの値を1に、Rotation Angleを45にします
Image.png
これでy方向に45度回転したテクスチャになります
Image.png

サイズを変えられるようにする

大きさもワールド基準なので変えられるようにしたいですね
Floatノードをこのように接続して、
Image.png
TypeをPropertyにして、tilingという名前をつけます

あ、ついでに回転角度もマテリアルから設定できるようにしておきましょう
同じくFloatノードを接続して、TypeをPropertyにして、rotationという名前にします
Image.png
マテリアルのインスペクタに設定項目が増えます
image.png
これで自由に設定できるよ～！やったね！
Videotogif (1).gif

さっと作れて効果がわかりやすいTriplanarでした
次回は高解像度のタイリングを維持したままワールドのpasscallを減らせるTextureArrayについて解説しますね

タオルくんでした

10
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
10
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?