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.
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.
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つの画像からサンプルデータを抽出し、それぞれを対応する座標軸に沿って投影し、幾何学的法線によってそれらを合成する。)
Document サイト上にサンプルが提示してあるが、自分で手を動かしてみないと正確には理解できなさそう。概念的なことは、この記事が参考になりそうだった。
2DテクスチャをUVを使わずに投影するTri-Planar Texture Mapping #WebGL – Qiita












