$30 off During Our Annual Pro Sale. View Details »

VFX Graphを使って 軽率にAudio Visualizerを作る

VFX Graphを使って 軽率にAudio Visualizerを作る

yokohama.unity #10でLT登壇した資料です

にー兄さん

May 13, 2022
Tweet

More Decks by にー兄さん

Other Decks in Technology

Transcript

  1. VFX Graphを使って
    軽率にAudio Visualizerを作る
    にー兄さん(@ninisan_drumath)
    yokohama.unity#10

    View Slide

  2. にー兄さん(@ninisan_drumath)
    - 筑波大学 情報科学類(coins18)
    - HoloLab inc.アルバイト
    - Microsoft Learn Student Ambassadors
    - Iwaken Lab.
    趣味はUnity、ギター、コーヒー、VTuberオタ活
    愛猫→

    View Slide

  3. agenda VFX Graphについて
    Audio Visualizerを作る
    おわりに

    View Slide

  4. VFX Graphについて

    View Slide

  5. VFX Graphとは
    GPUパーティクルシステム
    URP・HDRP上で動作する
    ノードベースでシステムを定義する

    View Slide

  6. Property Binder
    外部データをVFXGraphのプロパティに値をバインドする
    例)
    Property
    Binder
    VFX
    Graph
    radius:float
    center:Vec3
    position:Vec3

    View Slide

  7. Audio Visualizerを作る

    View Slide

  8. Audio Spectrum to AttributeMap
    ビルトインなProperty Binderの一種
    音声データのスペクトラムを
    テクスチャ(AttributeMap)に変換する
    サンプル数とテクスチャをバインド

    View Slide

  9. Audio Spectrum to AttributeMap
    サンプル数x1のテクスチャを生成
    各ピクセルに周波数の値が書き込まれている
    TextureFormatはR32Floatらしい

    View Slide

  10. AttributeMapのサンプリング
    Sample Attribute Mapノードを用いてサンプリング
    サンプル数とAudio Spectrumが書き込まれているテクスチャを渡す
    テクスチャのフォーマットに合わせてfloatで出力する

    View Slide

  11. DEMO!

    View Slide

  12. おわりに

    View Slide

  13. まとめ
    - VFX Graphを使えばノーコードでAudio Visualizerが作れる
    - Audio Spectrumは音声をスペクトラムをAttributeMapに変換して
    バインドする

    View Slide

  14. クレジット・参考文献
    使用楽曲
    Space Town (Brand New Mix) / Khaim
    https://dova-s.jp/bgm/play4000.html
    VFX GraphビルトインのPropertyBinder
    https://docs.unity3d.com/ja/Packages/[email protected]/manual/PropertyBinders.h
    tml#%E3%83%93%E3%83%AB%E3%83%88%E3%82%A4%E3%83%B3-property-binder

    View Slide