サウンドと連携させてポストエフェクトを動かす方法がわからない

Question

サウンドと連携させてポストエフェクトを動かしたいです。

下記サイトを参考にスクリプト（コードB）とシェーダー（コードC）を作成し、メインカメラに貼り付けました。

外部サイト：Unity サウンドと同期してぷるぷるするエフェクト

画像のバーを弄ることでエフェクトが付くようにはなったのですが、
サウンドに連動した動きにはなりません。

参照サイトでは下記コード（コードA）でサウンドから情報を取り出し、連動してエフェクトを動かせると書いてあります。
恐らくコードAをコードBもしくはコードCのどこかに追記するということだと理解しています。
（この前提から間違っているかもしれません）
色々試してみたのですが、既存のコードにどう入れても何かしらのエラーが出てしまいます。

どのようにすれば、サウンドと連動させてコードBないしコードCのエフェクトを動かせるのか教えてください。

コードA

// スペクトラムを取得
var spectrum = audioSource.GetSpectrumData(resolution, 0, FFTWindow.BlackmanHarris);
var deltaFreq = AudioSettings.outputSampleRate / resolution;
 
// スペクトラムから取り出した値を格納する変数
float low = 0f;
float mid = 0f;
float high = 0f;
 
// 周波数帯に応じて値を取り出す
for (var i = 0; i < resolution; ++i) {
    var freq = deltaFreq * i;
    if      (freq <= lowFreqThreshold)  low  += spectrum[i];
    else if (freq <= midFreqThreshold)  mid  += spectrum[i];
    else if (freq <= highFreqThreshold) high += spectrum[i];
}
 
// 値を調整
low  *= lowEnhance;
mid  *= midEnhance;
high *= highEnhance;
low  *= .15f;
mid  *= .15f;
high *= .15f;
 
// ポストエフェクト側の変数に値を渡す
imageEffest.powerA = high;
imageEffest.powerB = mid;
imageEffest.powerC = low;

コードB

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
 
public class ColorOfset : MonoBehaviour {
 
    private Material _material;
    protected string _shaderName = "ImageEffect/ColorOfset";
 
    [SerializeField]
    [Range(1, 1000)]
    public float speed;
    [SerializeField]
    [Range(0, 1)]
    public float powerA;
    [SerializeField]
    [Range(0, 1)]
    public float powerB;
    [SerializeField]
    [Range(0, 1)]
    public float powerC;
 
 
    protected virtual void Awake()
    {
        Shader shader = Shader.Find(_shaderName);
        _material = new Material(shader);
    }
 
    void OnRenderImage(RenderTexture source, RenderTexture destination)
    {
        UpdateMaterial();
 
        Graphics.Blit(source, destination, _material);
    }
 
    void UpdateMaterial()
    {
        _material.SetFloat("_Speed", speed);
        _material.SetFloat("_PowerA", powerA);
        _material.SetFloat("_PowerB", powerB);
        _material.SetFloat("_PowerC", powerC);
    }
}

コードc

Shader "ImageEffect/ColorOfset"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _Speed ("Speed", Range(1, 1000)) = 500
        _PowerA ("PowerA", Range(0, 1)) = 0
        _PowerB ("PowerB", Range(0, 1)) = 0
        _PowerC ("PowerC", Range(0, 1)) = 0
    }
    SubShader
    {
        // No culling or depth
        Cull Off ZWrite Off ZTest Always
 
        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
             
            #include "UnityCG.cginc"
 
 
            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };
 
            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };
 
            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
                o.uv = v.uv;
                return o;
            }
 
 
            //
            float rand(float2 co) {
                return frac(sin(dot(co.xy, float2(12.9898, 78.233))) * 43758.5453);
            }
 
            //
            sampler2D _MainTex;
            float _Speed;
            float _PowerA;
            float _PowerB;
            float _PowerC;
 
            fixed4 frag (v2f i) : SV_Target
            {
                fixed4 tex = tex2D(_MainTex, i.uv);
 
                float3 col;
                float time = _Time * _Speed;
 
                float ran = rand(float2(1, 10));
 
                col.r = tex2D(_MainTex, i.uv).r;
                col.g = tex2D(_MainTex, i.uv - float2(cos(time) * .05 * _PowerA * rand(float2(-50, 50)), sin(time) * .035) * _PowerC * rand(float2(-25, 25))).g;
                col.b = tex2D(_MainTex, i.uv - float2(sin(time) * .06 * _PowerB * rand(float2(-50, 50)), cos(time) * .025) * _PowerC * rand(float2(-25, 25))).b;
 
                return float4(col, 1);
            }
            ENDCG
        }
    }
}

Comments

[bboydaisuke]

> 何かしらのエラー

何というエラーがどの行で出ますか？
エラーは Console のログをコピペして正確に教えてください。
どの行、というのは貼り付けてあるコードの内、どの行に対してのエラーが出ているのかを正確に示してください。

[OZ-]

誤解を招く表現になっていたので本文を修正しました。
そして、「具体的にどのようなエラーが出たから解決したい」ではなく、
「コードAをどのようにコードBないし、コードCに組み込めば「サウンドに連動した動き」になるのかを伺いたい」という質問になります。

>>参照サイトでは下記コード（コードA）でサウンドから情報を取り出し、連動してエフェクトを動かせると書いてあります。
>>恐らくコードAをコードBもしくはコードCのどこかに追記するということだと理解しています。
>>（この前提から間違っているかもしれません）
>>色々試してみたのですが、既存のコードにどう入れても何かしらのエラーが出てしまいます。

Answer 1

恐らくコードAをコードBもしくはコードCのどこかに追記するということだと理解しています。
（この前提から間違っているかもしれません）

そうですね。そこが間違っています。
コード C は HLSL で書かれた（C# ではありません）シェーダーです。まずこれでシェーダーを作ります。

コード B は C# で書かれていて、適当な GameObject にアタッチして使います。現在使っている GameObject にアタッチせず、ゲーム管理用にずっといる GameObject か、もしくは新規に作った Empty Object にアタッチするでしょう。このスクリプトコンポーネントはコード C で作った Shader のパラメーターを動かします。結果としてコード C のシェーダーを使って描画したオブジェクトの見た目が変わります。

コード A は、コード B の機能を呼び出すためにブログの作者が書いたコードですが、これは不完全なものでコピペしても動きません。例えば imageEffest という変数は ColorOfset コンポーネントのインスタンスと推測できますが、変数の宣言や値をどうやって取得したのかなどの情報が欠落した「動かないコード」です。なのでこれを使いたければ、そのブログの欠落した情報をひとつひとつ調べて補完する必要があります。

Comments

[OZ-]

ありがとうございます！
～オブジェクトの見た目が変わります。は理解しており、そのため添付画像のような画面が出力されています。
「動かないコード」であることも理解しており、自分のいまの技量では欠落した情報を補完しきるのは難しいようです。
なので、どのようにすれば動かせるのか？という質問でした。

[bboydaisuke]

すみませんが、動かないコードがどうすれば動くかを一つ一つ調べて動くようになおすのは私や他の人にとっても大変時間や手間がかかることなので、まずはご自分でチャレンジして、わからないところを質問してください。

Answer 2

コードAをコードBに下記のように組み込むと動く。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

[RequireComponent(typeof(AudioSource))]
public class ColorOfset : MonoBehaviour
{

    private Material _material;
    protected string _shaderName = "ImageEffect/ColorOfset";

    private AudioSource audioSource;
    public int resolution = 1024;
    public Transform lowMeter, midMeter, highMeter;
    public float lowFreqThreshold = 14700, midFreqThreshold = 29400, highFreqThreshold = 44100;
    public float lowEnhance = 1f, midEnhance = 10f, highEnhance = 100f;


    [SerializeField]
    [Range(1, 1000)]
    public float speed;
    [SerializeField]
    [Range(0, 1)]
    public float powerA;
    [SerializeField]
    [Range(0, 1)]
    public float powerB;
    [SerializeField]
    [Range(0, 1)]
    public float powerC;

    protected virtual void Awake()
    {
        Shader shader = Shader.Find(_shaderName);
        _material = new Material(shader);

        audioSource = GetComponent<AudioSource>();
    }

    void OnRenderImage(RenderTexture source, RenderTexture destination)
    {
        UpdateMaterial();

        Graphics.Blit(source, destination, _material);
    }

    void UpdateMaterial()
    {
        // スペクトラムを取得
        var spectrum = audioSource.GetSpectrumData(resolution, 0, FFTWindow.BlackmanHarris);
        var deltaFreq = AudioSettings.outputSampleRate / resolution;

        // スペクトラムから取り出した値を格納する変数
        float low = 0f;
        float mid = 0f;
        float high = 0f;

        // 周波数帯に応じて値を取り出す
        for (var i = 0; i < resolution; ++i)
        {
            var freq = deltaFreq * i;
            if (freq <= lowFreqThreshold) low += spectrum[i];
            else if (freq <= midFreqThreshold) mid += spectrum[i];
            else if (freq <= highFreqThreshold) high += spectrum[i];
        }

        // 値を調整
        low *= lowEnhance;
        mid *= midEnhance;
        high *= highEnhance;
        low *= .15f;
        mid *= .15f;
        high *= .15f;

        // ポストエフェクト側の変数に値を渡す
        powerA = high;
        powerB = mid;
        powerC = low;


        _material.SetFloat("_Speed", speed);
        _material.SetFloat("_PowerA", powerA);
        _material.SetFloat("_PowerB", powerB);
        _material.SetFloat("_PowerC", powerC);

    }



}

Answer 3

コードAをコードBに下記のように組み込むことによって解決

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

[RequireComponent(typeof(AudioSource))]
public class ColorOfset : MonoBehaviour
{

    private Material _material;
    protected string _shaderName = "ImageEffect/ColorOfset";

    private AudioSource audioSource;
    public int resolution = 1024;
    public Transform lowMeter, midMeter, highMeter;
    public float lowFreqThreshold = 14700, midFreqThreshold = 29400, highFreqThreshold = 44100;
    public float lowEnhance = 1f, midEnhance = 10f, highEnhance = 100f;


    [SerializeField]
    [Range(1, 1000)]
    public float speed;
    [SerializeField]
    [Range(0, 1)]
    public float powerA;
    [SerializeField]
    [Range(0, 1)]
    public float powerB;
    [SerializeField]
    [Range(0, 1)]
    public float powerC;

    protected virtual void Awake()
    {
        Shader shader = Shader.Find(_shaderName);
        _material = new Material(shader);

        audioSource = GetComponent<AudioSource>();
    }

    void OnRenderImage(RenderTexture source, RenderTexture destination)
    {
        UpdateMaterial();

        Graphics.Blit(source, destination, _material);
    }

    void UpdateMaterial()
    {
        // スペクトラムを取得
        var spectrum = audioSource.GetSpectrumData(resolution, 0, FFTWindow.BlackmanHarris);
        var deltaFreq = AudioSettings.outputSampleRate / resolution;

        // スペクトラムから取り出した値を格納する変数
        float low = 0f;
        float mid = 0f;
        float high = 0f;

        // 周波数帯に応じて値を取り出す
        for (var i = 0; i < resolution; ++i)
        {
            var freq = deltaFreq * i;
            if (freq <= lowFreqThreshold) low += spectrum[i];
            else if (freq <= midFreqThreshold) mid += spectrum[i];
            else if (freq <= highFreqThreshold) high += spectrum[i];
        }

        // 値を調整
        low *= lowEnhance;
        mid *= midEnhance;
        high *= highEnhance;
        low *= .15f;
        mid *= .15f;
        high *= .15f;

        // ポストエフェクト側の変数に値を渡す
        powerA = high;
        powerB = mid;
        powerC = low;


        _material.SetFloat("_Speed", speed);
        _material.SetFloat("_PowerA", powerA);
        _material.SetFloat("_PowerB", powerB);
        _material.SetFloat("_PowerC", powerC);

    }



}