Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
VFX Graphを使って 軽率にAudio Visualizerを作る
Search
にー兄さん
May 13, 2022
Technology
0
1.1k
VFX Graphを使って 軽率にAudio Visualizerを作る
yokohama.unity #10でLT登壇した資料です
にー兄さん
May 13, 2022
Tweet
Share
More Decks by にー兄さん
See All by にー兄さん
軽率にAndroidXRのJetpack SceneCoreを使って3Dモデルを表示してみる / androidxr-scenecore-3dmodels
drumath2237
0
35
UnJSを使って軽率にCLIを作ってみたらめちゃくちゃ便利だった / create CLI with UnJS
drumath2237
4
1.5k
create-babylon-appを軽率にアプデしたい / update create babylon app
drumath2237
1
1.6k
Babylon.js 7注目機能を 軽率にまとめてみる/whats-new-in-babylonjs-v7
drumath2237
1
320
軽率にVFX Graphと Compute Shaderを 組み合わせるテクニック/integrate-vfxgraph-and-compute-shader
drumath2237
1
400
軽率にVue 3で リアルタイム3Dアプリを作れる ライブラリを作ってみた/vue-with-3d-app
drumath2237
3
1.9k
軽率にBabylon.jsを C#で使う技術 / using-babylonjs-with-csharp
drumath2237
1
870
今こそ軽率に理解したい WebXR Device APIとBabylon.jsの話 / understand-webxr-device-api-and-babylonjs
drumath2237
0
220
Vue・Babylon連携ライブラリ BabyuewJSについて / about-babyuewjs
drumath2237
0
190
Other Decks in Technology
See All in Technology
Share my, our lessons from the road to re:Invent
naospon
0
140
EDRの検知の仕組みと検知回避について
chayakonanaika
11
4.8k
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
190
2/18 Making Security Scale: メルカリが考えるセキュリティ戦略 - Coincheck x LayerX x Mercari
jsonf
0
180
30→150人のエンジニア組織拡大に伴うアジャイル文化を醸成する役割と取り組みの変化
nagata03
0
140
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
260
OPENLOGI Company Profile
hr01
0
60k
Exadata Database Service on Cloud@Customer セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
2
1.5k
実は強い 非ViTな画像認識モデル
tattaka
2
1.2k
What's new in Go 1.24?
ciarana
1
110
PHPで印刷所に入稿できる名札データを作る / Generating Print-Ready Name Tag Data with PHP
tomzoh
0
180
依存パッケージの更新はコツコツが勝つコツ! / phpcon_nagoya2025
blue_goheimochi
3
210
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
4 Signs Your Business is Dying
shpigford
182
22k
Building Your Own Lightsaber
phodgson
104
6.2k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Code Review Best Practice
trishagee
67
18k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
990
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
Six Lessons from altMBA
skipperchong
27
3.6k
Transcript
VFX Graphを使って 軽率にAudio Visualizerを作る にー兄さん(@ninisan_drumath) yokohama.unity#10
にー兄さん(@ninisan_drumath) - 筑波大学 情報科学類(coins18) - HoloLab inc.アルバイト - Microsoft Learn
Student Ambassadors - Iwaken Lab. 趣味はUnity、ギター、コーヒー、VTuberオタ活 愛猫→
agenda VFX Graphについて Audio Visualizerを作る おわりに
VFX Graphについて
VFX Graphとは GPUパーティクルシステム URP・HDRP上で動作する ノードベースでシステムを定義する
Property Binder 外部データをVFXGraphのプロパティに値をバインドする 例) Property Binder VFX Graph radius:float center:Vec3
position:Vec3
Audio Visualizerを作る
Audio Spectrum to AttributeMap ビルトインなProperty Binderの一種 音声データのスペクトラムを テクスチャ(AttributeMap)に変換する サンプル数とテクスチャをバインド
Audio Spectrum to AttributeMap サンプル数x1のテクスチャを生成 各ピクセルに周波数の値が書き込まれている TextureFormatはR32Floatらしい
AttributeMapのサンプリング Sample Attribute Mapノードを用いてサンプリング サンプル数とAudio Spectrumが書き込まれているテクスチャを渡す テクスチャのフォーマットに合わせてfloatで出力する
DEMO!
おわりに
まとめ - VFX Graphを使えばノーコードでAudio Visualizerが作れる - Audio Spectrumは音声をスペクトラムをAttributeMapに変換して バインドする
クレジット・参考文献 使用楽曲 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