「Audio Link」で音に合わせた演出を組み込んでみよう

Cluster Creator Kit v2.33.0.1から、Audio Linkというパッケージをワールド制作に利用できるようになりました。
Audio Linkに対応したシェーダーを利用することで、ワールド内の音源やサブ音声の音に合わせて変化する演出を組み込むことができます。

さらにCluster Scriptを利用してAudio Linkのパラメータを変更することもできるので、例えばライブ演出などの場合はパラメータをその場で微調整することも可能です。

音に合わせた一体感のある演出をつくることができるので、音楽イベント会場などにぜひ導入してみてください！

Audio Linkを導入する

Cluster Creator Kitを最新版にする

Audio Linkを使用する際はCluster Creator Kitを最新版にしてください。
アップデート方法は下記の記事をご覧ください。https://docs.cluster.mu/creatorkit/installation/update-creatorkit/

Audio Linkをダウンロードして導入する

Audio Linkのパッケージはこちらからダウンロードできます。
https://github.com/ClusterVR/audiolink/releases/tag/2.1.0-cluster.1

上のページから audiolink-2.1.0-cluster.1.unitypackage をダウンロードします。
ダウンロードしたUnityPackageを、ワールドのUnityプロジェクトにインポートしてください。

以上で導入は完了です。続いて設定方法を紹介していきます。

Audio Linkを設定する

コンポーネントを設定する

まず、Audio Linkと連動させたいAudio Sourceを用意します。
ワールドに組み込まれたBGMなどはもちろん、サブ音声のスピーカーに設定したAudio Sourceでも大丈夫です。

続いてシーン上に空のGameObjectを作成し、Inspectorで「Audio Link」コンポーネントを追加します。
Audio Linkコンポーネントの「Audio Source」の項目に、連動させたいAudio SourceのGameObjectを指定します。ここで指定したAudio Sourceから聞こえる音に反応するようになります。

Audio Linkコンポーネントに以下のような警告が表示されますが、無視して大丈夫です。
The current scene might be missing a main camera, this could cause issues with the AudioLink camera.

Audio Linkコンポーネントが見つからない場合、正しくAudio Linkパッケージを導入できているか確認してください。2.1.0以外のバージョンを導入していた場合、エラーが発生しコンポーネントが読み込まれないことがあります。

マテリアルを作成する

実際に音と連動した変化が反映されるマテリアルを作成し、シーン上のモデルに適用します。

Audio Linkによって変化させるには、対応したシェーダーをマテリアルに適用する必要があります。
さまざまな演出ができるシェーダがBOOTHなどで配布・販売されているので、好みのものを探してみましょう。
※シェーダーによってはモバイル端末などで見え方が異なる場合があるので注意してください。

今回はAudio Linkのパッケージに含まれるサンプルシェーダーを使ってみます。

新しいマテリアルを作成し、シェーダーとして「AudioLink > Examples」の下にあるシェーダーを選択します。
このマテリアルをシーン上のモデルに適用してください。

プレビュー、またはアップロードして確認してみましょう。
指定したAudio Sourceから流れる音に合わせてマテリアルが変化します。いろんな音源を流したり止めたりしながら比較してみてください。

パラメータを操作する

Audio Linkはパラメータの設定によって「反応しやすさ（Gain）」「反応しやすい音域（Bass, Treble, Threshold）」「影響の残りやすさ（Fade）」などを変更することができます。

コンポーネントのInspectorで設定するだけでなく、Cluster Scriptで各パラメータを変更することもできます。
パラメータを書き換えるスクリプトの例を紹介します。

スクリプトを使って、ワールド内でパラメータを変更できるようにする

この例では、パラメータを変更するスイッチをワールド内に用意しておくことでワールド内でAudio Linkのパラメータを変更できるようにします。
2つのアイテムを用意して、それぞれに「パラメータ変更用スクリプト」「パラメータを送信するスクリプト」を設定します。

パラメータ変更用スクリプト

Audio Linkコンポーネントと同じGameObjectにScriptable Itemコンポーネントを追加し、次のスクリプトを設定します。

※アイテム以外のGameObjectやSubNodeに設定されたAudio Linkコンポーネントは参照できません。必ずScriptable ItemコンポーネントとAudio Linkコンポーネントが同じGameObjectに設定された状態にしてください。

このスクリプトを設定したアイテムに、messageTypeが「SetAudioLinkParam」のメッセージを送信することで、Audio Linkの各パラメータの値を変更することができます。

const audioLinkHandle = $.audioLink();

$.onReceive((messageType, args, sender) => {
    if (messageType === "SetAudioLinkParams") {
        if (args.gain != null) {
            audioLinkHandle.setGain(args.gain);
        }
        if (args.bass != null) {
            audioLinkHandle.setBass(args.bass);
        }
        if (args.treble != null) {
            audioLinkHandle.setTreble(args.treble);
        }
        if (args.x0 != null) {
            audioLinkHandle.setCrossover0(args.x0);
        }
        if (args.x1 != null) {
            audioLinkHandle.setCrossover1(args.x1);
        }
        if (args.x2 != null) {
            audioLinkHandle.setCrossover2(args.x2);
        }
        if (args.x3 != null) {
            audioLinkHandle.setCrossover3(args.x3);
        }
        if (args.threshold0 != null) {
            audioLinkHandle.setThreshold0(args.threshold0);
        }
        if (args.threshold1 != null) {
            audioLinkHandle.setThreshold0(args.threshold1);
        }
        if (args.threshold2 != null) {
            audioLinkHandle.setThreshold0(args.threshold2);
        }
        if (args.threshold3 != null) {
            audioLinkHandle.setThreshold0(args.threshold3);
        }
        if (args.fadeLength != null) {
            audioLinkHandle.setFadeLength(args.fadeLength);
        }
        if (args.fadeExpFalloff != null) {
            audioLinkHandle.setFadeExpFalloff(args.fadeExpFalloff);
        }
        if (args.autogainDerate != null) {
            audioLinkHandle.setEnableAutogain(true);
            audioLinkHandle.setAutogainDerate(args.autogainDerate);
        }
        // すべてのパラメータ更新後に設定を反映する
        audioLinkHandle.applySettings();
    }
}, { player: true, item: true });

スクリプトの解説

const audioLinkHandle = $.audioLink();

$.audioLink()で、このスクリプトと同じアイテムに設定されたAudio Linkコンポーネントを操作するハンドルを取得します。

audioLinkHandle.setGain(args.gain);

ハンドルの「setXXXX()」メソッドに値を渡すと、対応するAudio Linkのパラメータにその値を設定することができます。
この時点ではまだコンポーネントには反映されません。

audioLinkHandle.applySettings();

パラメータ設定後に「applySettings()」メソッドを呼び出すことで、ワールド内のAudio Linkに設定が反映されます。

パラメータを送信するスクリプト

Audio Linkコンポーネントと上記のスクリプトを設定したアイテムとは別のアイテムを用意してください。
Scriptable ItemコンポーネントとWorld Item Reference Listコンポーネントを追加してください。インタラクトするためのコライダも設定してください。

以下のスクリプトを設定してパラメータ部分を書き換え、World Item Reference ListにIDを「audioLink」としてAudio Linkコンポーネントと上記のスクリプトを設定したアイテムを指定してください。

const audioLinkItem = $.worldItemReference("audioLink");
const setAudioLinkParamsMessageType = "SetAudioLinkParams";

$.onInteract((player) => {
    // 各パラメータの値を書き換える
    // 変更しないパラメータは消す
    const audioLinkParams = {
        gain: 1,
        bass: 1,
        treble: 1,
        x0: 0,
        x1: 0.25,
        x2: 0.5,
        x3: 0.75,
        threshold0: 0.45,
        threshold1: 0.45,
        threshold2: 0.45,
        threshold3: 0.45,
        fadeLength: 0.25,
        fadeExpFalloff: 0.75,
        autogainDerate: 0.1,
    };

    audioLinkItem.send(setAudioLinkParamsMessageType, audioLinkParams);
});

これでパラメータを送信するスクリプトが設定されたアイテムをインタラクトすることで、パラメータを変更できます。

パラメータをいろいろ変えてみて、反応の仕方が変わることを確認してみましょう。
例えば

const audioLinkParams = {
    bass: 2,
    treble: 0.1,
};

のようにしてみると、低音域に強く反応するようになります。
※各パラメータの詳細はスクリプトリファレンスを参照してください。