Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
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.3k
VFX Graphを使って 軽率にAudio Visualizerを作る
yokohama.unity #10でLT登壇した資料です
にー兄さん
May 13, 2022
Tweet
Share
More Decks by にー兄さん
See All by にー兄さん
Jetpack XR SDKから紐解くAndroid XR開発と技術選定のヒント / about-androidxr-and-jetpack-xr-sdk
drumath2237
1
68
XRエンジニアの視点から XRのイマと社会実装の実現について考える / thinking-about-xr-popularization
drumath2237
0
32
軽率にプログラミング言語のシンタックスについて考えてみよう / lets-think-about-programming-lang-syntax
drumath2237
0
76
エンジニアが軽率に趣味から始める、OSS貢献を軸とした個人活動 / oss-contribution-as-a-hoby-project
drumath2237
0
44
Babylon.js 8.0のアプデ情報を 軽率にキャッチアップ / catch-up-babylonjs-8
drumath2237
0
270
フォークギター with VFXの 制作を軽率に振り返ろう! / look back fork guitar with vfx
drumath2237
0
57
軽率に始まった Babylon.js勉強会運営の 1年間をふりかえって / look back babylonjs japan activity
drumath2237
0
95
利己的利他、 あるいは軽率2.0に備えよ。 / prepare-for-keisotsu-2.0
drumath2237
0
68
軽率にAndroidXRのJetpack SceneCoreを使って3Dモデルを表示してみる / androidxr-scenecore-3dmodels
drumath2237
0
170
Other Decks in Technology
See All in Technology
ML PM Talk #1 - ML PMの分類に関する考察
lycorptech_jp
PRO
1
740
[デモです] NotebookLM で作ったスライドの例
kongmingstrap
0
110
計算機科学をRubyと歩む 〜DFA型正規表現エンジンをつくる~
ydah
3
210
法人支出管理領域におけるソフトウェアアーキテクチャに基づいたテスト戦略の実践
ogugu9
1
210
[JAWS-UG 横浜支部 #91]DevOps Agent vs CloudWatch Investigations -比較と実践-
sh_fk2
1
240
最近のLinux普段づかいWaylandデスクトップ元年
penguin2716
1
670
日本Rubyの会の構造と実行とあと何か / hokurikurk01
takahashim
4
960
Debugging Edge AI on Zephyr and Lessons Learned
iotengineer22
0
120
re:Invent2025 コンテナ系アップデート振り返り(+CloudWatchログのアップデート紹介)
masukawa
0
320
AWSを使う上で最低限知っておきたいセキュリティ研修を社内で実施した話 ~みんなでやるセキュリティ~
maimyyym
2
200
Noを伝える技術2025: 爆速合意形成のためのNICOフレームワーク速習 #pmconf2025
aki_iinuma
2
2.1k
学習データって増やせばいいんですか?
ftakahashi
1
270
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
331
21k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
47
7.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
What's in a price? How to price your products and services
michaelherold
246
12k
Making Projects Easy
brettharned
120
6.5k
Visualization
eitanlees
150
16k
Reflections from 52 weeks, 52 projects
jeffersonlam
355
21k
Typedesign – Prime Four
hannesfritz
42
2.9k
Producing Creativity
orderedlist
PRO
348
40k
Why You Should Never Use an ORM
jnunemaker
PRO
61
9.6k
Building a Scalable Design System with Sketch
lauravandoore
463
34k
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