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

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

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/com.unity.visualeffectgraph@10.7/manual/PropertyBinders.h
    tml#%E3%83%93%E3%83%AB%E3%83%88%E3%82%A4%E3%83%B3-property-binder
    

    View Slide