こんにちは、電通総研金融ソリューション事業部の飯田です。
前編では、音に応じて位置、回転、スケールを変化させる方法をご紹介しました。
この記事では、音に応じてマテリアルを変化させる方法をご紹介します。
前編の続きになっていますので、まだご覧になっていない方は前編もご一読ください。
実行手順
- マテリアルを作成、ブループリントに適用する
- ブループリントで、動的なマテリアルを作成、初期設定する
- ブループリントで、マテリアルを動的に変化する
1. マテリアルを作成、ブループリントに適用する
コンテンツブラウザ上で右クリックを行い、「マテリアル」を選択します。
マテリアルが作成されました。
マテリアルをダブルクリックすると、専用のウィンドウが開かれます。
このウィンドウで、マテリアルの見た目を設定します。
まず、ベースの色を作ります。
ベースの色は、マテリアルの「ベースカラー」で設定できます。
グラフ上を右クリックし、「Constant3Vector」ノードを作ります。
RGBの三次元情報を扱うため、マテリアル関連の実装では基本的にベクトルを使います。
左下の詳細パネルからConstantをダブルクリックし、ベースにしたい色を設定してOKを押します。
ここでは黄色に設定しました。
先ほど作った「Constant3Vector」ノードと、「ベースカラー」をつなぎます。
左上のサンプルビューで分かるように、ベースの色が黄色に変わりました。
次に、マテリアルから放射される光の色を作ります。
放射は、マテリアルの「エミッシブカラー」で設定できます。
今回は、ベースの色と同じにしたいため、上記で作ったConstant3Vectorノードからつなげました。
内側から光っているような表現に変わったことが分かります。
さらに、放射の強さを設定するためのパラメータを用意しておきます。
「ScalarParameter」ノードを作ります。
一律に強さを設定したいため、スカラー（1次元）のパラメータを使っています。
パラメータを適切な名前に変更します。ここでは「Emissive Strength」にしました。
詳細パネルのDefault Valueは1.0にしておきます。
乗算（Multiply）ノードを作ります。
下記のように、放射の色と、強さのパラメータを乗算ノードの入力につなぎ、出力を「エミッシブカラー」につなぎます。
これにより、放射の色と放射の強さが乗算されるようになりました。
放射の強さの値を上げることで、光ったような表現にできるため、今回は、この放射の強さのパラメータ「Emissive Strength」を音に応じて変化させていきます。
次に、作成したマテリアルを、前編で作ったブループリントに紐づけます。
前編で作ったブループリントをダブルクリックしてウィンドウを開きます。
ビューポートタブで、コンポーネントパネルでStatic Meshを選択します。
詳細パネルのマテリアルで、先ほど作ったマテリアルを選択します。
ここまでで、マテリアルの作成と適用は終了です。
2. ブループリントで、動的なマテリアルを作成、初期設定する
イベントグラフタブに切り替えます。
ここから前編までで作成したブループリントに実装します。
「On Audio Playback Percent」ノードの後に、ノードを加えていきます。
「Create Dynamic Material Instance」ノードを作ります。
ダイナミックマテリアルインスタンスを作るノードです。
ダイナミックマテリアルインスタンスは、外部からマテリアルのパラメータを変化させることができます。
また、「Parent」で、先ほど作成したマテリアルを選択します。
作られたダイナミックマテリアルインスタンス用に、変数を作成します。
左のマイブループリントタブから、「変数」の右にあるプラスアイコンをクリックして変数を作ります。
名前を「Dynamic Material Instance」としました。
名前の右の領域をクリックして、型を「Material Instance Dynamic」の「オブジェクト参照」を選択します。
作成した変数を、グラフ上にドラッグ&ドロップして、Set Dynamic Material Instanceを選択します。
画像のように、「Create Dynamic Material Instance」ノードの「Return Value」をつなぎます。
これで「Dynamic Material Instance」変数に、Create Dynamic Material Instanceノードで作ったものがセットされました。
「Set Material」ノードを作ります。
「ターゲット」に設定されているオブジェクトに、「Material」で設定されているマテリアルをセットするノードです。
Dynamic Material Instance変数を、ドラッグ&ドロップして、Get Dynamic Material Instanceを選択して、「Material」に「Dynamic Material Instance」変数をつなげます。
ここまで作ったノードを、下記画像のようにつなげます。
ここまでで、
次は、どのように動的に変化させるかを実装していきます。
3. ブループリントで、マテリアルを動的に変化する
ブループリントのイベントグラフタブに切り替えます。
前編までで作成した「Set Relative Transform」ノードの後に、ノードを加えていきます。
「Set Scalar Parameter Value」ノードを作ります。
上述と同様にDynamic Material Instance変数を、「ターゲット」につなぎます。
「Parameter Name」に、1. で作成した音に応じて変化させたいパラメータの名前を入力します。
ここでは「Emissive Strength」を入力します。
また、「Value」に、振幅のデータとして「Get Cooked Amplitude Envelope Data」の「Out Envelope Data」をつなぎます。
さらに、放射の具合を強調できるよう、乗算（Multiply）ノードを作成してみました。
値は6としています。
ここまでを保存して、シーンビューで確認してみます。再生ボタンを押します。
gifファイルのため、音との同期は伝えられず少しわかりづらいですが、スケールが小さくなっているときには放射が抑えられていることが分かります。
以上が、音に応じてオブジェクトのマテリアルを変化させる方法でした。
おわりに
後編では、音に応じてマテリアルを変化させる方法をご紹介しました。
ここでは放射の強さをパラメータとして設定しましたが、マテリアルには粗さや金属っぽさ、透明度など他にも質感を表現する要素が多くあるので、表現の可能性が広いと思いました。
最後までご覧いただき、ありがとうございました。
現在、電通総研はweb3領域のグループ横断組織を立ち上げ、Web3およびメタバース領域のR&Dを行っております（カテゴリー「3DCG」の記事はこちら）。 もし本領域にご興味のある方や、一緒にチャレンジしていきたい方は、ぜひお気軽にご連絡ください！
私たちと同じチームで働いてくれる仲間を、是非お待ちしております！
電通総研採用ページ
執筆：@iida.maya、レビュー：Ishizawa Kento (@kent)
（Shodoで執筆されました）
