月: 2025年11月

続き：
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