タグ: ShaderGraph

続き：
Reality Composer Pro の Share Graph で使えるノードを眺めてみる（2D/3D Procedural/Texture 編）
Reality Composer Pro の Share Graph で使えるノードを眺めてみる（Adjustment 編）
Reality Composer Pro の Share Graph で使えるノードを眺めてみる（Application 編）
Reality Composer Pro の Share Graph で使えるノードを眺めてみる（Compositing 編）
Reality Composer Pro の Share Graph で使えるノードを眺めてみる（Data 編）
Reality Composer Pro の Share Graph で使えるノードを眺めてみる（Geometric 編）

Math は演算用のノードで、名前を見たら分かるものが多い。その中でも個人的にぱっと見わからないものや興味をそそられたものだけピックアップしてみる。線形代数は概念は知っていても英単語になると分からないことがわかった。

• Atan2
  • Atanと何が違うんだと思ったら、次の記事がとても参考になった。裸眼立体視できる挿絵のアイデアがめちゃくちゃ良い
  • atan2について感謝と疑問と注意点 #数学 – Qiita
• Clamp
  • In が Low-Hight の範囲を超える場合、最小値 or 最大値それぞれの側に値を丸めて、範囲を超えないようにする
  • 概念は Adjustment 編 にも登場した
• Magnitude
  • ベクトル長さ
• Dot Product / Cross Product
  • 2ベクトルの内積／外積
• Transform XXX
  • スペース間の値の射影
• Transpose
  • 転置行列
• Determinant
  • 行列式
• Place 2D
  • UVテクスチャ座標系の変換、テクスチャにアフィン変換掛けたい場合に使うっぽい？（例示あり）
• Safe Power
  • 普通の Power は X の累乗で結果の符号は乗数が偶数か奇数かによって左右されるが、Safe Power は X の符号が必ず反映される
  • Safepow(X,Y) = sign(x) * pow(abs(x), y)
• Hyperbolic XXX
  • 双曲線関数
  • Hyperbolic Tan (tanh) は、0を中心としたsigmoid関数のようなかたちで、イージングなどに利用
  • Inverse Hyperbolic Tan は 逆双曲線関数

ここまででグループごとに ShaderNode について調べてきたが、どんな役割のノードが存在し、どんな知識が足りていないのか、おおまかにイメージが掴めたので、このシリーズはいったん終わりにする。

続き：
Reality Composer Pro の Share Graph で使えるノードを眺めてみる（2D/3D Procedural/Texture 編）
Reality Composer Pro の Share Graph で使えるノードを眺めてみる（Adjustment 編）
Reality Composer Pro の Share Graph で使えるノードを眺めてみる（Application 編）
Reality Composer Pro の Share Graph で使えるノードを眺めてみる（Compositing 編）
Reality Composer Pro の Share Graph で使えるノードを眺めてみる（Data 編）

Geometric Shader Graph group は、説明文をそのままに理解すると、GPU がグラフを適用する際に現在処理しているデータ値を取得するノード。座標や法線ベクトル、接線などが取得可能。Reflect や Refract ノードは、現在の値を元にベクトルを修正することもできる、とのこと。

つまり、モデル表面の各点ごとに取得した幾何属性から、何を描画するのか（色など）を決定できそう。

• Normal：法線ベクトル
• Tangent：接線ベクトル
• Bitangent：Normal × Tangent (Normal, Tangent それぞれに直行するベクトル)

Bitangent のイメージが掴めずに調べてみると、法線はモデル表面に対して一意に決まることが分かりやすいが、Tangent は UV の U 方向、Bitangent は UV の V 方向らしい。（バイタンジェント、かと思ったら ビタンジェント と読むっぽい）

Normal、Tangent、Bitangent から得られるTBN行列を用いて、ノーマルマップをワールド空間に変換する、らしい。

UV座標系 | CG・映像の専門情報サイト | CGWORLD.jp
📐TBN行列の作り方｜タンジェント空間と法線マップをGLSLで理解する｜批評テレビ/文学フリマ東京42出展

そして、そのままだと平すぎるポリゴンに、詳細なでこぼこ（凹凸や傷など）を与えるのがノーマルマップ、ノーマルマップはあくまで接線空間のローカル座標なので、これをワールド座標に変換するために使うと。なんとなくイメージできた。

で、Texture Coordinates は、テクスチャのUV座標をそのまま返す。モデル表面の各点が、テクスチャ画像のどの座標に対応するかを知るためのノード。

Geometry Color は、モデルのジオメトリに埋め込まれた頂点カラーを取得するもの（マテリアル色ではない）。

Geometry Property は、ジオメトリに定義されたカスタム属性を読み取るもの。
Data グループにあった Primvar Reader に似ている気がした。

ChatGPT によると、

結論から言うと、この 2 つは 「同じものを見ているが、立ち位置と責務が違う」 です。

Primvar Reader は「primvar を読むための専用ノード」
Geometric Property は「ジオメトリ属性を“汎用的に”引くためのノード」

両方とも「ジオメトリにぶら下がったデータ」を読む点は同じですが、用途・安全性・設計思想が違います。

Primvar Reader は、読む対象が明確に USD の primvar に限定されるのに対して、Geometry Property はこれに Geomprop や Custom property を含むカスタム属性全般を読み取れる、という違いがあるらしい。

Reflect, Refract (RealityKit) は、処理中の天の法線ベクトルに対して、物理的法則に基づいた変換を加えるもの。

• Reflect：反射方向を算出。鏡や金属、水面の表現に使用
• Refract：屈折方向を算出。Eta が屈折率 (屈折率の比)。ガラスや水面など透明な物質の表現に使用
  • 参考：スネルの法則 – Wikipedia

屈折と聞いて、ばんじゅん🍓さんのこのプレゼンを思い出した。Refract はここでは使っていなさそう？ちゃんと見てみる。

続き：
Reality Composer Pro の Share Graph で使えるノードを眺めてみる（2D/3D Procedural/Texture 編）
Reality Composer Pro の Share Graph で使えるノードを眺めてみる（Adjustment 編）
Reality Composer Pro の Share Graph で使えるノードを眺めてみる（Application 編）
Reality Composer Pro の Share Graph で使えるノードを眺めてみる（Compositing 編）

Data は、あるデータを異なる形式に変換したり、データ構造内の個々の値を操作するもの。

• Data
  • Convert
  • Swizzle
  • Combine 2 / 3 / 4
  • Extract
  • Separate 2 / 3 / 4
  • Primver Reader

Convert

入力ストリームに流れる値を異なるデータ形式に変換するノード。変換のパターンは、単一の値(数値、Bool) からベクトル(vector, color) に変換したり、その逆も然りだが、各パターンで過不足するデータの埋め方／引き方は、ドキュメントに網羅的に記されている。

Swizzle

入力ストリームの値を指定したチャネルの順序に並び替えて出力するノード。チャネルは “r”, “g”, “b”, “a” や、”x”, “y”, “z”, “w” を使って、”xxx”, “abgr” のような文字列で指定する。具体例がドキュメントにあり一目瞭然。

Extract

マルチチャネルの入力ストリームから、指定インデックスに対応するひとつのチャネルを抽出し、出力する。

Combine / Separate

文字通り、複数の値をひとつのベクトル(vector, color) にまとめたり、逆にひとつのベクトル(vector, color) をそれぞれのチャネルに分離する。Separate 4 に関しては、(r, g, b, a) -> (r, g, b), a のように分離できるっぽい。

Primvar Reader

ChatGPT によると、

お、Primvar Reader 来た！ここは USD／MaterialX っぽさが一番強く出るところですね 🧱

ざっくり言うと：

「ジオメトリ側に埋め込まれたカスタム属性（primvar）を、シェーダー側から読むためのノード」

です。

ということだが、意味不明だし今は必要なさそうなので、その時が来たら学習する。

一応、どんなときに使うのかも ChatGPT に教えてもらった。

• 例1: 頂点マスクで「塗り分け」したい
• 例2: 頂点カラーをそのまま Albedo に使う
• 例3: UV セットの切り替え
• 例4: string primvar でテクスチャやバリアントを変える

続き：
Reality Composer Pro の Share Graph で使えるノードを眺めてみる（2D/3D Procedural/Texture 編）
Reality Composer Pro の Share Graph で使えるノードを眺めてみる（Adjustment 編）
Reality Composer Pro の Share Graph で使えるノードを眺めてみる（Application 編）

Compositing は、複数の値をもとにひとつの値を生成するノードカテゴリ。

• Compositing
  • Premultiply
  • Unpremultiply
  • Additive Mix
  • Subtractive Mix
  • Difference
  • Burn
  • Dodge
  • Screen
  • Overlay
  • Disjoint Over
  • In
  • Mask
  • Matte
  • Out
  • Over
  • Inside
  • Outside
  • Mix

膨大にあるが、Input / Output は共通しているものが多いので分類して見てみる。
Premultiply, Unpremultiply を除くすべてのドキュメントにサンプル画像あるので理解しやすい。2枚のテクスチャの合成に使うっぽいが、具体的にどういったケースで使いたくなるかはイメージできていない。

In: Color4 → Out: Color4

Premultiply, Unpremultiply

Premultiply は、ストレート（RGB画像+透明度を示すアルファチャンネルの画像）に対して透明度を乗算し、アルファが高いほど暗くしたもの。
Unmultiply はその逆で、プリマルチ処理を逆算し、ストレートを復元するもの、と理解した。

以下記事が画像付きで解説しており参考になった。

コンポジターに必要なアルファチャンネルの知識（後編） – コンポジゴク

(Foreground: Float, Background: Float, Mix: Float) → Out: Float

Mix, Additive Mix, Subtractive Mix, Burn, Dodge, Screen, Overlay

Background, Foreground の2色を、それぞれのノードごとに定義された数式（各ドキュメントに記載あり）で計算し、アウトプットの色を生成するもの。

Mix 値は基本的にブレンドのウェイトであると説明されているが、Mix ノードに限っては数式内の係数として明示されている。

Over, Disjoint Over, Matte

Foreground, Background それぞれのアルファチャンネルを用いた合成処理。Over が単純な合成で、Foreground のアルファに応じて合成される。

一方 Disjoint Over は、説明読むところ、Foreground のアルファと Background のアルファの合算値によって処理が変わるようで、1を超えない場合は単純な合成、ただし1を超えると Background 側の重みが下がるっぽい（ドキュメントの数式が F+b(1-f)/b となっていたが、F+B(1-f)/b の間違いでは？）。これにより、Output のアルファは 1 よりも常に小さくなる。

Matte は、RGB チャンネルが Ff+B(1-f)、アルファチャンネルが f+b(1-f) によって計算され、つまり Foreground 側のアルファチャンネルの反転で Background をマスクしている？

In, Out, Mask

In は Background アルファと重なる Foreground を残し、
Out は Background アルファと重ならない Foreground を残す。
（Background はアルファチャンネルのみを利用するため、Background テクスチャ画像は描画されない）

Matte は In の逆で、Foreground アルファをもとに Background を残す。
（Foreground はアルファチャンネルのみを利用するため、Foreground テクスチャ画像は描画されない）

(In: Float, Mask: Float) → Out: Float

Inside, Outside

いわゆるマスク画像をバイパスしてマスキングする、っぽい。（ドキュメントのサンプルを見れば一目瞭然）

続き：
Reality Composer Pro の Share Graph で使えるノードを眺めてみる（2D/3D Procedural/Texture 編）
Reality Composer Pro の Share Graph で使えるノードを眺めてみる（Adjustment 編）

Application はシステムの値を取得するノードカテゴリで、Time は現在時刻（秒）、Up Direction は上方向（デフォルトではワールド空間）をそれぞれ取得可能。

• Application
  • Time (float)
  • Up Direction

システム時間は他のノードと接続することで継続的に変化し、時間に応じたダイナミックなマテリアルが実現できる。（ドキュメントにサンプル動画あり）

前回の試みの続き：
Reality Composer Pro の Share Graph で使えるノードを眺めてみる（2D/3D Procedural/Texture 編）

• Adjustment
  • Remap
  • Smooth Step
  • Luminance
  • RGB to HSV
  • HSV to RGB
  • Contrast
  • Range
  • HSV Adjust
  • Saturate
  • Step (RealityKit)

名の通り値や範囲を変換するノードカテゴリ。分からなかったものだけ以下にまとめてみた。

Remap

In を In Low~In Hight の区間に正規化 (clampはしない) した上で、Out Low~Out Hight の区間に線形補間する。以下が参考になった。
ShaderGraphのRemapについて

たとえば

• InMin = 0
• InMax = 1
• OutMin = 0
• OutMax = 100

の場合、In 0.3 は Out 30 に変換される。

ChatGPT によると以下のような使い所があるらしい。

• ノイズの出力を別レンジにマッピング
  • 0〜1 → -0.2〜0.8 とか
• 距離（Position から算出した長さ）を 0〜1 に正規化
• depth / mask などの 特定範囲だけを抽出して強調
• テクスチャから取った値を別の物理量レンジに変換
  • 例：0〜1 のテクスチャ → 金属度 0.1〜0.8 に変換

参考：
Remap ノード | Shader Graph | 10.0.0-preview.27

Range

Remap に対し、さらにガンマ補正と clamp を可能にしたもの。といってもイメージがわかないのだが、ChatGPT によると使い所は以下らしい。

• ノイズのコントラスト調整
  • ガンマで “柔らかい山” や “トゲのある山” を作れる
  • OutLow/High でオフセット付きノイズにできる
• テクスチャのレベル補正（Photoshop の「レベル」みたいなこと）
  • InLow/High = 0.2〜0.8
  • Gamma = 0.8
  • → 暗部／明部の強調ができる
• マスクの精密調整
  • Smoothstep より鋭い／柔らかいコントロールが可能
• エッジ表現
  • Gamma > 1 で “暗い部分を広く、明るい部分を締める” ことができる

Step (RealityKit)

In が Edge よりも大きいか小さいかに従って、0 / 1 に二値化する。

Smooth Step

In が Low~High の区間で clamp し、区間内ではなめらかにS字状で補完 (エルミート補完) する。「これは補間が開始点から徐々に加速し、終了点に向かって減速することを意味します。この補間は、自然なアニメーション、フェード、その他の遷移を作成するのに有用」らしい。
Smoothstep Node | Shader Graph | 14.0.12

Step と Smooth Step の違いは以下がわかりやすかった。
ShaderGraphの頻出ノード！機能別で覚えよう #ポケテク｜ポケラボ

Luminance

RGB を人の視覚的特性にあわせたグレースケースに変換する。輝度係数 (Luma coefficients) とカラーベクトルの内積を計算することで画像のグレースケール値を算出する。（ドキュメントにサンプル画像あり）

ChatGPT による用途は以下。

• テクスチャ／カラー → グレースケール変換
  • 色の情報を無視して「明るさだけ」で処理したいとき。
• マスク／マットの生成
  • たとえば “明るさが一定以上なら反応” とか、“暗い部分だけにエフェクトをかける” といった用途。
• フェード、ディゾルブ、ディゾルブマスク
  • カラー画像の輝度差を利用して、部分的に透明／不透明を切り替えるような表現。
• ポストプロセス／エフェクトの輝度依存処理
  • 明るさに応じてぼかし／エッジ／グローを変えるなど。
• ライティングや雰囲気の制御
  • 色ではなく「明るさ」を元に音、パーティクル、光量の変化を制御する場合など。

Reality Composer Pro を使って、Shader Graph Material をノードベースでカスタム定義することができる、ということを WWDC23 のセッションで学んだ。表現したいイメージを持てていることはもちろん重要だろうが、それ以前に各ノードごとの役割や、それらを組み合わせてどんな表現が可能なのかを知ることが重要だと思った。

ノードベースでさぞ直感的に意のままに操れるのかと思いきや、手始めにノードピッカーをスクロールしてみると、その数の多さに面食らってしまった。

2D Procedural
    Cellular Noise 2D
    Noise 2D
    Ramp 4 Corners
    Ramp Horizontal
    Ramp Vertical
    Split Horizontal
    Split Vertical
    Worley Noise 2D

2D Texture
    Image
    Tiled Image
    Transform 2D
    UV Texture

3D Procedural
    Cellular Noise 2D
    Fractal Noise 2D
    Noise 3D
    Worley Noise 3D

3D Texture
    Triplanar Projection

Adjustment
    Contrast
    HSV Adjust
    HSV to RGB
    Luminance
    Range
    Remap
    RGB to HSV
    Saturate
    Smooth Step
    Step (RK)

Application
    Time (float)
    Up Direction

Compositing
    Additive Mix
    Burn
    Difference
    Disjoint Over
    Dodge
    In
    Inside
    Mask
    Matte
    Mix
    Out
    Outside
    Over
    Overlay
    Premultiply
    Screen
    Subtractive Mix
    Unpremultiply

Data
    Combine 2
    Combine 3
    Combine 4
    Convert
    Extract
    Primvar Reader
    Separate 2
    Separate 3
    Separate 4
    Swizzle

Geometric
    Bitangent
    Geometric Property
    Geometric Color
    Normal
    Position
    Reflect (RK)
    Refract (RK)
    Tangent
    Texture Coordinates

Logic
    And (RK)
    If Equal
    If Greater
    If Greater Or Equal
    Not (RK)
    Or (RK)
    Select (RK)
    Switch
    XOR (RK)

Material
    Node Graph

Math
    Abs
    Acos
    Add
    Asin
    Atan
    Atan2
    Ceiling
    Clamp
    Copy Sign (RK)
    Cos
    Cos Pi (RK)
    Cross Product
    Determinant
    Distance (RK)
    Distance Square (RK)
    Divide
    Dot Product
    Exp
    Exponential 10 (RK)
    Exponential 2 (RK)
    Floor
    Fractional (RK)
    Fused Multiply-Add (RK)
    Hyperbolic Cos
    Hyperbolic Sin
    Hyperbolic Tan
    Inverse Hyperbolic Cos
    Inverse Hyperbolic Sin
    Inverse Hyperbolic Tan
    Invert Matrix
    Log 10
    Log 2
    Magnitude
    Magnitude Square (RK)
    Max
    Max3 (RK)
    Median3 (RK)
    Min
    Min3 (RK)
    Modulo
    Modulo (RK)
    Multiply
    Natural Log
    Normal Map
    Normal Map Decode
    Normalize
    One Minus (RK)
    Place 2D
    Power
    Reciprocal Square Root (RK)
    Rotate 2D
    Rotate 3D
    Round
    Safe Power
    Sign
    Sin
    Sin Pi (RK)
    Square Root
    Subtract
    Tan
    Tan Pi (RK)
    Transform Matrix
    Transform Normal
    Transform Point
    Transform Vector
    Transpose
    Truncate (RK)

Organization
    Dot

PBR
    Preview Surface

Procedural
    Boolean
    Color3 (Float)
    Color4 (Float)
    Float
    Half
    Image File
    Integer
    Integer2
    Integer3
    Integer4
    Matrix2x2 (Float)
    Matrix3x3 (Float)
    Matrix4x4 (Float)
    String
    Vector2 (Float)
    Vector2 (Half)
    Vector3 (Float)
    Vector3 (Half)
    Vector4 (Float)
    Vector4 (Half)

RealityKit
    Absolute Derivatives Sum
    Blurred Background
    Camera Index Switch
    Camera Position
    Cube Image
    Cube Image Gradient
    Cube Image LOD
    Environment Radiance
    Fortran Difference and Minimum
    Geometry Modifier
    Geometry Modifier Model to View
    Geometry Modifier Model to World
    Geometry Modifier Normal to World
    Geometry Modifier Projection to View
    Geometry Modifier Vertex ID
    Geometry Modifier View To Projection
    Geometry Modifier World To Model
    Hover State
    Image 2D
    Image 2D Array
    Image 2D Array Gradient
    Image 2D Array Gradient Pixel
    Image 2D Array LOD
    Image 2D Array LOD Pixel
    Image 2D Array Pixel
    Image 2D Gradient
    Image 2D Gradient Pixel
    Image 2D LOD
    Image 2D LOD Pixel
    Image 2D Pixel
    Image 2D Read
    Image 3D
    Image 3D Gradient
    Image 3D Gradient Pixel
    Image 3D LOD
    Image 3D LOD Pixel
    Image 3D Pixel
    Image 3D Read
    Is Finite
    Is Infinite
    Is Normal
    Is Not a Number
    Is Ordered
    Is Unordered
    Multiply 24
    Multiply Add 24
    Occlusion Surface
    PBR Surface
    Power Positive
    Reflection Diffuse
    Reflection Specular
    Round Integral
    Screen-Space X Partial Derivative
    Screen-Space Y Partial Derivative
    Shadow Receiving Occlusion Surface
    Sign Bit
    Surface Model to View
    Surface Model to World
    Surface Projection to View
    Surface Screen Position
    Surface View Direction
    Surface View to Projection
    Surface World to View
    Unlit Surface
    View Direction

Surface
    Preview Surface

一度にすべて見るのは不可能なので、小分けに見てみたい。（リンクは Apple Developer Documentation）

• 2D Procedural
  • Ramp 4 Corners
  • Ramp Horizontal
  • Ramp Vertical
  • Split Horizontal
  • Split Vertical
  • Noise 2D
  • Cellular Noise 2D
  • Worley Noise 2D
• 2D Texture
  • Image
  • Tiled Image
  • Transform 2D
  • UV Texture
• 3D Procedural
  • Noise 3D
  • Fractal Noise 2D
  • Cellular Noise 2D
  • Worley Noise 3D
• 3D Texture
  • Triplanar Projection

そもそも 2D/3D Procedural の「Procedural」は聞き慣れない単語だが調べると、手続き型（プロシージャル）、一定のアルゴリズムに従ってアセットを自動生成する、ということらしい。

プロシージャル（Procedural）｜用語集｜ゲームメーカーズ

ここでは、グラデーション(Ramp)やノイズ(Noise)を生成するっぽい。それぞれの生成結果は Apple Developer Documentation 上でサンプルが提示されているので、イメージをつかむ上でありがたい。

Split は？というと、以下のように解説されていたが、なんのこっちゃ。

A left-to-right split matte, split at a specified U value.

Split Horizontal | Apple Developer Documentation

ChatGPT に解説させたら「U 座標（横方向）の指定位置で、左側と右側を分けるマスク(Matte)を作るノード。」とのこと。以下の用途があるらしい。

• 画面の左側だけエフェクトをかける
• U = 0.3 でカットオフし、左 30% にだけ別の色やテクスチャを適用する
• スクロールする wipe（ワイプ） エフェクトの基礎として使う
• トランジションのマスクを作る

Texture については、Image や Tiled Image はイメージできる。

Transform 2D は2次元インプットに対してアフィン変換（平行移動、拡大縮小、回転）を掛けるもの。

UV Texture の description についても説明がシンプルすぎて分からなかったが、

A MaterialX version of USD UV Texture reader.

UV Texture | Apple Developer Documentation

ChatGPT によると「USD（Universal Scene Description）で定義されている「UV テクスチャを読むノード」を、MaterialX 形式として利用できるようにしたもの。」とのこと。

最後、Triplanar Projection は、

Samples data from three images and projects each along its respective coordinate axis and blends them by geometric normal.
（3つの画像からサンプルデータを抽出し、それぞれを対応する座標軸に沿って投影し、幾何学的法線によってそれらを合成する。）

Triplanar Projection | Apple Developer Documentation

Document サイト上にサンプルが提示してあるが、自分で手を動かしてみないと正確には理解できなさそう。概念的なことは、この記事が参考になりそうだった。

2DテクスチャをUVを使わずに投影するTri-Planar Texture Mapping #WebGL – Qiita