日: 2025年11月25日

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

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