Reality Composer Proにおけるマテリアルの詳細

♪ ♪ ♪ Reality Composer Pro Teamの マテリアルエンジニアのNielです 「Reality Composer Proにおける マテリアルの詳細」へようこそ このセッションでは Reality Composer Proを使って xrOS用のマテリアルを作成する方法を 確認していきます まずxrOSのマテリアルの概要と マテリアルがどのように 3Dオブジェクトの見た目を カスタマイズするかを 説明していきます MaterialXオープンスタンダードに 基づき xrOSで利用できる新しい マテリアルタイプを紹介します そのあとReality Composer Proの内蔵エディタ 「Shader Graph」を使って マテリアルをデザインする方法を紹介します ノードグラフを使って 再利用可能なマテリアルの パーツを作るプロセスを紹介しましょう そして最後にジオメトリモディファイアを 作成して 見栄えのする 3Dコンテンツを作成します まずマテリアルとは何かの 説明から始めましょう マテリアルは 3Dシーンでの オブジェクトの見た目を 定義するものです マテリアルはシンプルな単色でもいいし 画像を使ってもいい 椅子のモデルに木のテクスチャを 適用したり 壁にレンガのイメージを マッピングしたりすることもできます 加えてマテリアルはかなり洗練されてます 水の波紋のように見える アニメーションを使ったり 見る角度によって見え方を 変えたりすることもできます マザーオブパールの虹色の輝きを 思い浮かべてみてください マテリアルは適用したオブジェクトの ジオメトリを変更することもできます xrOSのマテリアルは 物理ベースレンダリング 略してPBRを使用しています 例として　物体がどれだけ金属的に 見えるか　どれだけ粗く見えるかなど 物理的特性を使って アーティストが現実の物体に似た 物体の見た目を デザインできることを意味します 物理的なマテリアルが 実際に使われている例を いくつか見てみましょう 球体 シンプルなPBRマテリアルを 使用しています このマテリアルは反射率を40％に設定した コンスタントな青色を使用しています あるいは説得力のあるコンクリートを 得るために色や表面の 粗さを設定するために 画像を適用することもできます あるいは金属っぽさを増した 鉄のようなものを 手に入れます 車のペンキのようなものも 手に入ります マテリアルは 複数の陰影から構成されます これらはマテリアルの見た目を計算する 実際の作業を行うプログラムです iOSとiPadOS用のRealityKit 2で CustomMaterialを導入しました CustomMaterialのシェーダーは Metalでハンドコーディングされて xrOSではShaderGraphMaterialという 新しいタイプのマテリアルを 導入しています これはxrOS専用の カスタムマテリアルの作成方法です ShaderGraphMaterialは 機能ブロックのネットワークを 使用します ShaderGraphMaterialは MaterialXと呼ばれる オープンスタンダードに基づいて マテリアルを定義する アーティスト向けの方法です MaterialXは2012年に Industrial Light & Magicによって 開発されました ShaderGraphMaterialは 「物理ベース」と「カスタム」 と呼ばれる2つの主なタイプの シェーダーをサポートしています 物理ベース は基本的なPBRシェーダです シンプルな使い方をする場合は これを選択します このシェーダは各プロパティに 色や画像のような 一定で変化しない値を指定することで 設定します 一方カスタムシェーダーは 3Dオブジェクトの見た目を 正確にカスタムコントロールできます カスタムシェーダーはアニメーションを 組み込んだり オブジェクトのジオメトリを調整したり キラキラしたペイントの特殊効果を オブジェクトの表面に 作り出すことができます Reality Composer Proの Shader Graphエディタを使って ShaderGraphMaterialを作成できます ビューポートの地形の見た目を 瞬時に定義する シェーダーグラフのノードを ご覧ください 基本を理解したところで カスタムマテリアルを作ってみましょう xrOSのマテリアルは 3Dコンテンツの合成　編集 プレビューができる新しい プロ開発者ツールである Reality Composer Proを 使って作成できます マテリアルを作りはじめる前に アプリの紹介をご希望の方は 「Reality Composer Proについて」 のセッションを見て エディタのUIや 機能に馴染んでいってください そのセッションで示された ヨセミテ渓谷のモデルを使い 地形図の見た目を適用します マテリアルの背後に存在する数学について 説明しマテリアルを作ってみます Reality Composer Proの シェーダーエディタに入って マテリアルを作ります 取り上げたいことはたくさんあるので さっそく始めようましょう これがEricがセッションで作った ヨセミテ渓谷のジオラマです 時間を節約するために Deactivateコマンドを使って このセッションに必要のない全部の オブジェクトを非表示にしました つまり真ん中に台座があって 一番上に風景があります なかなかクールでしょう！ 等高線の機能を追加してみましょう 地形の傾斜に沿って等高線を 表示することで モデルの地形を示すマテリアルを追加します ハイキングの計画を立てるときに 目にする 地形図に似ているでしょう 地形に等高線を描くシェーダーを含む カスタムマテリアルを作成しましょう この図のように同じ標高を持つ すべてのエリアを通る線を地形上に 引きたいです 例えばこの青い線は標高 1000メートルの 地形上のすべての地点を示しています 上から見ると 右図のようになります モデル上にこのような線を描く 一連の関数を使って マテリアルを作り上げます まず階層パネルのプロジェクトの 一番下にあるプラスボタンをクリックします マテリアルの下に2つのシェーダー タイプがあるのに注意してください 物理ベースとカスタムです カスタムを選択します これでエディタのシェーダーグラフが 表示されます 新しいカスタムシェーダーは 紫色のサーフェスノードと 青色のアウトプットノードの 2つのノードから始まります マテリアルのアクティブサーフェスは 出力ノードのカスタムサーフェス入力に 接続されているサーフェスです サーフェス上の入力は シェーダーの物理ベース（PBR） パラメータを設定する方法です 例えばベースカラー マテリアルにわかりやすい名前を つけましょう TopographyMaterialが良さそうですね 大事なステップは新しいマテリアルを ヨセミテ渓谷のモデルに 割り当てることです プロジェクト階層で選択します インスペクタの 「Material Bindings」で 「Binding」メニューから 「TopographyMaterial」を選択します モデルの色が カラーからシンプルな グレーに変化したことに注目してください 我々のマテリアルは機能しているが 面白いことはこれからです 修正しましょう 階層からTopographyMaterialを選択して Shader Graphエディタに戻ります いくつかのノードをサーフェス入力に接続し モデルの適切な場所に ストライプを描きます マテリアルがどのように機能するか この例で説明しましょう モデル上の位置に基づいて マテリアルが等高線を描く場所を 決定する必要があります まずマテリアルに 位置ノードを追加します このノードは位置を返します ポジションの高さにしか興味がないので ポジションのY座標だけを抽出するために separateというノードも追加します Separateは地形の高さに応じて 増加するY座標位置を返します これら最初の2つのノードを RealityComposer Proに 追加しましょう ノードを追加するために エディタの背景をダブルクリックすると 新規ノードピッカーが表示されます 利用可能なすべての ノードのリストをブラウズしたり 名前やキーワードでノードを 検索できます 「position」と入力しリストから Positionノードを選択して シェーダーに挿入してみましょう Positionはマテリアルが レンダリングされる 3D空間上の位置を出力します マテリアルは高さによって変化するので 位置のY成分を抽出するために 別のノードを追加しましょう 背景をダブルクリックして 新規ノードピッカーを再度表示し Separate 3ノードを追加します エディタで接続を行うには ノード出力をクリックして クリック＆ドラッグするだけです これら2つのノードを 組み合わせて地形の高さが得られ 次にseparateノードの 出力をmoduloノードに渡します Moduloは 2つの値を割った余りを与えます moduloを使って高さを希望の 等高線の間隔で割ります 結果はこの通り 見ての通り高さが帯状に分割されてます 各範囲内の高さの値は0から始まり その範囲の高さまで増加 これは次のステップで重要になります Reality Composer Proのマテリアルに moduloノードを追加してみましょう ダブルクリックしてノードを追加し それを接続する代わりに 新しい接続を空のスペースに ドラッグして すでに接続されているノードを 作成することができます 新規ノードピッカーで modulo と入力して Moduloを挿入します Moduloには2つの入力があります 1つ目は配当で2番目は除数です ノードを接続する代わりに インスペクタを呼び出せます インスペクタで2番目の引数を 0.1に変更します これは除数で 高さの範囲の幅を設定します アウトプットを見るまであと一歩です ifgreaterノードを使用して 繰り返し値が地形上の 狭い高さの帯のどこに位置するかを 決定します ifgreaterノードは比較の結果に応じて 画面に表示される2つの帯色の いずれかを表す値を返します 高さがシェーダーの等高線幅より 大きい場合は 背景色を選択します そして高さが希望の線幅に 収まるところで 等高線の色を選びます ifgreaterノードをマテリアルに追加し その結果を見てみましょう moduloノードの結果を 地形の線幅に選んだ値と比較したいです そこでifgreaterノードを追加してみます Ifgreaterは2つの入力を比較し 1つ目の入力が2つ目の入力より 大きい場合は1つの値を返し 1つ目の入力が 2つ目の入力より大きい場合は 異なる値を返します このifgreaterノードは 浮動小数点値を出力するように 設定されていますが 地形用と等高線用の 2つの色を選びたいものです インスペクタの「Type」で このノードをRGB出力に変更し 次に2色を選んでみましょう インスペクタで「True Result」の 隣にあるカラーピッカーをクリックし 地形の色を設定します 白を使ってみましょう 等高線の色である False Resultは 黒に設定しておきましょう これで白い地形との コントラストが大きくなります いろいろな値を試した結果 線幅の良い値として 0.002にたどり着いたので インスペクタに表示しました 比較値を0.002に設定します 私は ifgreaterノードの出力を サーフェスのDiffuse Color入力に接続します これで地形上のすべての ポイントに色が設定され 等高線のマテリアルができました 次にノードグラフ機能の使い方を 見てみましょう ノードグラフは複雑なマテリアルを 簡素化し独自のノードを作成して グラフの一部を再利用するのに役立ちます ノードグラフを使ってマテリアルに 本物の地形図のような見た目にします 現在の行の間に2つ目の行を 追加してみましょう マテリアルは今のところこんな感じです そしてこれが小区画を 追加したときの様子です まずマテリアルの4つのノード 等高線を描くことから始めます 次にノードグラフを構成します これで4つのノードを 1つのノードにまとめます 最後に ノードグラフのインスタンスを作成して その機能を再利用します あるノードグラフが元の線のセットを描き そのインスタンスが 2番目の線のセットを描きます Reality Composer Proに戻って 構築してみましょう ここで再びシェーダーです ドラッグして線の色と線を引く場所の 4つのノードを選択します 選択後 右クリックして ノードグラフを構成するを選択します これでノードは1つのノードとして表示され 他のグラフの内部で 使用できるようになりました 新しいノードにわかりやすい 名前をつけましょう 「Lines」と呼びましょう このノードグラフのコピーを作り 2本目の線を描きましょう インスタンスの作成コマンドを使用して インスタンスを作成します

インスタンスは 元のノードグラフに加えられた 変更を採用するライブコピーです 選択してマテリアルに戻ります 新しいインスタンスを呼びましょう ノードグラフとそのインスタンスに 異なる間隔と色で 線を描かせたいので これらのプロパティを制御するために 元のノードグラフにSpacingとColorの 2つの入力を追加します 元のノードグラフをダブルクリックして 編集しましょう インスペクタでノードグラフに 入力と出力を追加します まずSpacingという入力を追加し その型をFloatに設定しましょう 等高線の色をコントロールするために Colorという入力を追加します 入力のタイプを Color3に設定します

グラフの適切な位置につなぎます

プロジェクト階層で マテリアルに戻りましょう ノードグラフが作成した 2つの入力を持つようになり インスタンスがこれら2つの 新しい入力を継承していることに 注目してください 元のラインノードグラフで 間隔を前に選んだ値に設定します そして インスタンスノードグラフの間隔を狭くして 色を薄くしてみましょう

最後のステップは元の インスタンスノードグラフの出力を 結合することです 私は都合よく 両方のノードグラフの色を グレースケールにして 乗算ノードを使って両者の色を 組み合わせることができます なかなかいいですね 納得のいく等高線マテリアルが 2セットあります 次に ジオメトリモディファイアについて これらはリアルタイムで モデルを修正するために 使用できるカスタムマテリアルの機能です 静的な地形モデルを置き換え ジオメトリモディファイアと 高さのデータを使って再作成します 次にジオメトリモディファイアを拡張して 2つの異なる地形の間を アニメーション化させます カリフォルニア州の ヨセミテ渓谷とカタリナ島 完成したら2つの異なる場所の間で アニメートできるダイナミックな 地形マテリアルができあがります これがどのように行われるか 見てみましょう 今まで見てきたシェーダーは すべてサーフェスシェーダーです これらはレンダリング時にモデルの 各ピクセルに物理ベース（PBR） アトリビュートを設定するシェーダーです ジオメトリモディファイアは サーフェスシェーダに似ていますが オブジェクトのジオメトリを操作します 実際同じReality Composer Proの エディタで作ることができます ヨセミテ渓谷の高さのマップデータを 使ってヨセミテ渓谷の地形を 作成するジオメトリモディファイアの 概要を説明します 平らな円盤モデルから 始めましょう これがベースとなる面です 次に地形の高さデータ （モデルの各位置の高さに関する 2Dデータ）を使用し ジオメトリモディファイアを使って 地形を適切な量だけ高くします 思ってた通りの地形になります 基本的なバージョンをお見せした後は 2つの地形高さのセットを使って ヨセミテ渓谷とカタリナ島という 2つの目的地間を アニメーションするバージョンを お見せしましょう 別の見方をしてみましょう 平らなモデルから始め ジオメトリモディファイアは このように2Dハイトマップのデータを 使って頂点を垂直に移動します まず最初にすることは Deactivateコマンドを使って ビルド済みのヨセミテ渓谷モデルを 非表示にします 同じヨセミテ渓谷モデルを生成しますが 今回はジオメトリモディファイアを 使用します プロジェクトブラウザの フラットディスクモデルから始めます プロジェクト階層の Rootエンティティにドラッグすることで 取り込むことができます DynamicTerrainMaterial という名前の新しいマテリアルを作成し ディスクに割り当てました さっそく ジオメトリモディファイアに 取りかかりましょう Shader Graphエディタでは ジオメトリモディファイアサーフェスが 必要です これをPBRサーフェスと一緒に マテリアルに加えます 出力ノードの カスタムジオメトリモディファイア入力から 接続をドラッグし 新規ノードUIから ジオメトリモディファイアを選択します ヨセミテ渓谷の画像を サーフェスに適用してみましょう 画像データを読み込むには イメージノードを使います インスペクタでヨセミテ渓谷の画像を イメージノードに割り当てましょう 地形が平らなのでちょっと おかしくみえるけど これから修正します 谷の高さのデータが必要です 色データの代わりに高さ値を含む 画像ファイルにあります このデータはイメージの中にあるので 別のイメージノードを追加して読み込みます ここで高さデータを含む ヨセミテ渓谷のEXR画像を この新しいイメージノードの Filename入力に割り当てます ジオメトリモディファイアは モデルの頂点をあらゆる方向に 移動させることができますが 興味があるのは垂直方向に 移動させることのみなので Combine 3ノードを挿入して Y成分だけが設定された 3Dベクトルを作成します これを ジオメトリモディファイアサーフェスの Model Position Offset入力に接続すると 平らなモデルが ヨセミテ渓谷に変身しました もう少し工夫する必要があります 頂点を移動するときには モデルのサーフェス法線ベクトルも 新しい地形形状に合わせて 設定する必要があります これらを計算する方法がありますが 今回は計算済みの 法線を含む画像を使います 法線を読み取るために 新たにノードを作りましょう

これらは事前に計算されたものなので 精度を上げるために サーフェスシェーダーの 法線入力に直接接続します サーフェスは法線が -1から1の間の値を持つことを 期待しているけど 画像の法線は0から1の間です リマップノードを使って 画像から値を再マップしました

高さデータを使って平らなジオメトリから 地形を作成しました 次にジオラマをダイナミックにして ある地形から別の地形に モーフィングする機能を追加しましょう この場合アニメーションの トランジションを追加し ヨセミテ渓谷をカタリナ島に変更します これを実現するためにまず 既存のジオメトリシェーダに 別のイメージノードを追加します ノードにはカタリナ島の地形の 高さ 色 法線が含まれています 次にミックスノードを追加して これら2つの高さ 法線 色の セットをブレンドします 最後に2つのデータセット間の ブレンドを抑制するためにミックスノードに 値を接続します ではReality Composer Proで これを作ってみましょう ではここまでのマテリアルはこれです 高さ 色 法線と同じデータの ヨセミテ渓谷ではなくカタリナ島の 別のイメージノードを 追加してみましょう 次に2つの色 高さ 法線の ミックスノードを追加します 最後に0から1の定数を ミックスノードに接続して どの地形を表示するかを コントロールしましょう ミキシング定数を1に設定すると 地形がカタリナ島を表示しているのが わかりますよね ミキシング定数を0にすると ヨセミテ渓谷が見えます 2つの異なる地形間を遷移できる マテリアルができたので この遷移の進行値を Swiftのコードから 変更できるようにしてみましょう プロモートコマンドを使用して 進捗値をマテリアルの入力に変換します マテリアルに関する入力は Swiftコードからアクセスできる マテリアルのプロパティになります これでマテリアルはDioramas Swiftアプリで使う準備ができました これが完成版で 線とダイナミックな地形を 組み合わせたものです このバージョンではアンチエイリアス 処理された地形ラインやなど アンビエントオクルージョンマップなど シェーダーグラフを使用して 追加された いくつかの改良が加えられています このセッションのサンプルをご確認ください これで終わりです Reality Composer Proの Shader Graphエディタを使って ダイナミックマテリアルをデザインし ノードグラフを使ってグラフを整理し 再利用可能なノードを作る方法を 確認しました ジオメトリモディファイアを組み込んで オブジェクトを動的に 再形成できるようになりました Reality Composer Proは マテリアルをデザインする上で 非常に大きな可能性を秘めています Reality Composer Proと xrOS上でのイマーシブ体験の 作成方法にはさらに 多くのメリットがあります Amandaのセッション 「Reality Composer Proコンテンツの Xcodeでの使用」では Reality Composer Proのコンテンツを Dioramas Swiftアプリに 組み込む方法を確認いただけます またまだご覧になっていない方は Ericの「Reality ComposerProについて」 も確認いただ具ことで どのようにスタートするかを つかんでもらえるかと思います xrOS向けコンテンツの探求とデザインを 楽しんでくださいね ご視聴ありがとうございました ♪