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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
にー兄さん
May 13, 2022
Technology
0
1.4k
VFX Graphを使って 軽率にAudio Visualizerを作る
yokohama.unity #10でLT登壇した資料です
にー兄さん
May 13, 2022
Tweet
Share
More Decks by にー兄さん
See All by にー兄さん
個人的3D Gaussian Splattingニュースをご紹介 / sharing 3d gaussian splatting news
drumath2237
0
360
Jetpack XR SDKから紐解くAndroid XR開発と技術選定のヒント / about-androidxr-and-jetpack-xr-sdk
drumath2237
1
460
XRエンジニアの視点から XRのイマと社会実装の実現について考える / thinking-about-xr-popularization
drumath2237
0
63
軽率にプログラミング言語のシンタックスについて考えてみよう / lets-think-about-programming-lang-syntax
drumath2237
0
93
エンジニアが軽率に趣味から始める、OSS貢献を軸とした個人活動 / oss-contribution-as-a-hoby-project
drumath2237
0
67
Babylon.js 8.0のアプデ情報を 軽率にキャッチアップ / catch-up-babylonjs-8
drumath2237
0
350
フォークギター with VFXの 制作を軽率に振り返ろう! / look back fork guitar with vfx
drumath2237
0
85
軽率に始まった Babylon.js勉強会運営の 1年間をふりかえって / look back babylonjs japan activity
drumath2237
0
120
利己的利他、 あるいは軽率2.0に備えよ。 / prepare-for-keisotsu-2.0
drumath2237
0
86
Other Decks in Technology
See All in Technology
Claude Codeが爆速進化してプラグイン追従がつらいので半自動化した話 ver.2
rfdnxbro
0
500
組織全体で実現する標準監視設計
yuobayashi
3
480
楽しく学ぼう!ネットワーク入門
shotashiratori
3
2.9k
Scrumは歪む — 組織設計の原理原則
dashi
0
120
事例に見るスマートファクトリーへの道筋〜工場データをAI Readyにする実践ステップ〜
hamadakoji
1
290
Kubernetesにおける推論基盤
ry
1
310
マルチロールEMが実践する「組織のレジリエンス」を高めるための組織構造と人材配置戦略
coconala_engineer
3
710
AI時代のSaaSとETL
shoe116
1
110
生成AIの利用とセキュリティ /gen-ai-and-security
mizutani
1
1.6k
非情報系研究者へ送る Transformer入門
rishiyama
11
7.1k
EMからVPoEを経てCTOへ:マネジメントキャリアパスにおける葛藤と成長
kakehashi
PRO
9
1.7k
OCHaCafe S11 #2 コンテナ時代の次の一手:Wasm 最前線
oracle4engineer
PRO
1
110
Featured
See All Featured
Statistics for Hackers
jakevdp
799
230k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
inesmontani
PRO
3
3.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
122
21k
Claude Code のすすめ
schroneko
67
220k
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
3
480
GitHub's CSS Performance
jonrohan
1032
470k
The #1 spot is gone: here's how to win anyway
tamaranovitovic
2
980
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
Mind Mapping
helmedeiros
PRO
1
120
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
47
8k
Game over? The fight for quality and originality in the time of robots
wayneb77
1
130
RailsConf 2023
tenderlove
30
1.4k
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