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 にー兄さん
Jetpack XR SDKから紐解くAndroid XR開発と技術選定のヒント / about-androidxr-and-jetpack-xr-sdk
drumath2237
1
400
XRエンジニアの視点から XRのイマと社会実装の実現について考える / thinking-about-xr-popularization
drumath2237
0
51
軽率にプログラミング言語のシンタックスについて考えてみよう / lets-think-about-programming-lang-syntax
drumath2237
0
87
エンジニアが軽率に趣味から始める、OSS貢献を軸とした個人活動 / oss-contribution-as-a-hoby-project
drumath2237
0
60
Babylon.js 8.0のアプデ情報を 軽率にキャッチアップ / catch-up-babylonjs-8
drumath2237
0
320
フォークギター with VFXの 制作を軽率に振り返ろう! / look back fork guitar with vfx
drumath2237
0
74
軽率に始まった Babylon.js勉強会運営の 1年間をふりかえって / look back babylonjs japan activity
drumath2237
0
110
利己的利他、 あるいは軽率2.0に備えよ。 / prepare-for-keisotsu-2.0
drumath2237
0
80
軽率にAndroidXRのJetpack SceneCoreを使って3Dモデルを表示してみる / androidxr-scenecore-3dmodels
drumath2237
0
220
Other Decks in Technology
See All in Technology
SREじゃなかった僕らがenablingを通じて「SRE実践者」になるまでのリアル / SRE Kaigi 2026
aeonpeople
6
2.5k
制約が導く迷わない設計 〜 信頼性と運用性を両立するマイナンバー管理システムの実践 〜
bwkw
3
1k
こんなところでも(地味に)活躍するImage Modeさんを知ってるかい?- Image Mode for OpenShift -
tsukaman
1
170
ランサムウェア対策としてのpnpm導入のススメ
ishikawa_satoru
0
220
AIと新時代を切り拓く。これからのSREとメルカリIBISの挑戦
0gm
2
3.1k
CDKで始めるTypeScript開発のススメ
tsukuboshi
1
550
SREチームをどう作り、どう育てるか ― Findy横断SREのマネジメント
rvirus0817
0
350
私たち準委任PdEは2つのプロダクトに挑戦する ~ソフトウェア、開発支援という”二重”のプロダクトエンジニアリングの実践~ / 20260212 Naoki Takahashi
shift_evolve
PRO
2
200
Claude Code for NOT Programming
kawaguti
PRO
1
100
AzureでのIaC - Bicep? Terraform? それ早く言ってよ会議
torumakabe
1
600
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
15
93k
Exadata Fleet Update
oracle4engineer
PRO
0
1.1k
Featured
See All Featured
Building Applications with DynamoDB
mza
96
6.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
State of Search Keynote: SEO is Dead Long Live SEO
ryanjones
0
120
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
madoxten
58
50k
Statistics for Hackers
jakevdp
799
230k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
GraphQLとの向き合い方2022年版
quramy
50
14k
Lessons Learnt from Crawling 1000+ Websites
charlesmeaden
PRO
1
1.1k
Believing is Seeing
oripsolob
1
58
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
470
Automating Front-end Workflow
addyosmani
1371
200k
Sam Torres - BigQuery for SEOs
techseoconnect
PRO
0
190
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