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と Compute Shaderを 組み合わせるテクニック/integ...
Search
にー兄さん
April 20, 2024
Programming
1
350
軽率にVFX Graphと Compute Shaderを 組み合わせるテクニック/integrate-vfxgraph-and-compute-shader
VFX Graph LT会にてLT登壇した資料です
にー兄さん
April 20, 2024
Tweet
Share
More Decks by にー兄さん
See All by にー兄さん
UnJSを使って軽率にCLIを作ってみたらめちゃくちゃ便利だった / create CLI with UnJS
drumath2237
4
1.4k
create-babylon-appを軽率にアプデしたい / update create babylon app
drumath2237
1
1.5k
Babylon.js 7注目機能を 軽率にまとめてみる/whats-new-in-babylonjs-v7
drumath2237
1
280
軽率にVue 3で リアルタイム3Dアプリを作れる ライブラリを作ってみた/vue-with-3d-app
drumath2237
3
1.9k
軽率にBabylon.jsを C#で使う技術 / using-babylonjs-with-csharp
drumath2237
1
800
今こそ軽率に理解したい WebXR Device APIとBabylon.jsの話 / understand-webxr-device-api-and-babylonjs
drumath2237
0
190
Vue・Babylon連携ライブラリ BabyuewJSについて / about-babyuewjs
drumath2237
0
180
軽率にBabylon.jsの WebGPUエンジンを使って ComputeShaderに入門した / learn-about-babylonjs-webgpu-computeshader
drumath2237
0
740
Snapdragon Spacesを通して Unity XRプラグインフレームワーク について軽率に学ぶ / about snapdragon spaces sdk and unity xr framework
drumath2237
0
890
Other Decks in Programming
See All in Programming
Alba: Why, How and What's So Interesting
okuramasafumi
0
210
ecspresso, ecschedule, lambroll を PipeCDプラグインとして動かしてみた (プロトタイプ) / Running ecspresso, ecschedule, and lambroll as PipeCD Plugins (prototype)
tkikuc
2
1.8k
為你自己學 Python
eddie
0
520
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
180
asdf-ecspresso作って 友達が増えた話 / Fujiwara Tech Conference 2025
koluku
0
1.4k
watsonx.ai Dojo #6 継続的なAIアプリ開発と展開
oniak3ibm
PRO
0
170
Androidアプリのモジュール分割における:x:commonを考える
okuzawats
1
280
ASP.NET Core の OpenAPIサポート
h455h1
0
120
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
0
150
Внедряем бюджетирование, или Как сделать хорошо?
lamodatech
0
940
20241217 競争力強化とビジネス価値創出への挑戦:モノタロウのシステムモダナイズ、開発組織の進化と今後の展望
monotaro
PRO
0
280
非ブラウザランタイムとWeb標準 / Non-Browser Runtimes and Web Standards
petamoriken
0
430
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
KATA
mclloyd
29
14k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Visualization
eitanlees
146
15k
Into the Great Unknown - MozCon
thekraken
34
1.6k
Mobile First: as difficult as doing things right
swwweet
222
9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Facilitating Awesome Meetings
lara
51
6.2k
Statistics for Hackers
jakevdp
797
220k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Transcript
軽率にVFX Graphと Compute Shaderを 組み合わせるテクニック にー兄さん(@ninisan_drumath) VFX Graph LT会
にー兄さん(@ninisan_drumath) 株式会社ホロラボ ソフトウェアエンジニア Iwaken Lab. / Babylon.js勉強会運営 お仕事ではUnityを使ったxR開発がメイン 趣味ではBabylon.jsをよく触る うちの猫たち→
本日の話 VFX GraphとComputeShaderを組み合わせることについて 何が嬉しいのか、どうやって実現するのかを紹介
最近こんなものを作りました ここで使用した、ComputeShaderとVFXGraphの連携についてご紹介
アジェンダ 1. CompuetShaderとVFXGraphを組み合わせるモチベーション 2. ComputeShaderとVFXGraphの連携方法 3. おわりに
CompuetShaderとVFXGraphを 組み合わせるモチベーション
VFX Graphで出来ることは多い VFXGraphには豊富なノードが用意されている SDFのサンプリングや Perlinノイズの生成、 Switchなどの制御もできる 最近はProbability Samplingノード 面白いなって思った
しかし限界がある ノードベースならではの悩み? VFX Graphでできないこと、苦手なこと - ループ処理 - 変数定義と格納 - バッファへの書き込み
Cutsom HLSLノードによって解決するものもあるが メンテナンス容易性などの考慮は必要 BoidsはForループによるバッファのサンプリングと書き込みが必要
一部のロジックを外部化して表現力を補う VFX Graphが苦手なロジックは他で補える
一部のロジックを外部化して表現力を補う Unityで属性計算するための選択肢はいくつかある - MonoBehaviour - Entity Component System - Compute
Shader 構成例) - C#で全てのパーティクル属性を毎フレーム計算 - VFXGraphはそれの可視化にのみ使用する
例)Boidsの場合 Boidsは他のBoidの情報を参照するものの計算順序に制約はない そのため個々のBoidの状態更新処理は並列化できる
Compute Shaderとは 汎用的な計算をGPUで行う GPGPUのための仕組み UnityではHLSL言語で記述 Kernelという単位で処理される KernelはThreadという単位でまとめて実行され、 スレッドはThread Groupという単位でまとめて実行される
ComputeShaderの使い道
ComputeShaderとVFXGraphの 連携方法
3つのシステムとデータフロー ComputeShaderとVFXGraph、 そしてそれをつなぐC# 計算結果を特定のデータ型として 橋渡しする必要がある
AttributeMap vs GraphicsBuffer VFX Graphへ連続的なデータを渡す方法は主に2種類 - AttributeMap - GraphicsBuffer AttributeMapの実態はテクスチャ Sample
AttributeMapノードがある pCacheはAttributeMap使うよね GraphicsBufferは配列ライクに扱えて手軽 2次元的なデータであればAttributeMapがいいかも
ComputeShaderの実行 Kernelの定義 #pragma kernel CSMain float num; RWStructuredBuffer<float3> buf; [numthreads(4,1,1)] void
CSMain(const uint3 id:SV_DispatchThreadID) { buf[id.x].x = num; buf[id.x].y = num; buf[id.x].z = num; } ほぼ普通の関数だが numthreadsでスレッド数を指定 #pragma kernelで関数名を指定
ComputeShaderの実行 Kernelの実行 1. Kernelを取得 2. パラメータを指定 3. スレッドグループの数を指定してDispath _csMainKernel = computeShader.FindKernel("CSMain");
computeShader.SetFloat("num", 1.0f); computeShader.SetBuffer(_csMainKernel, "buf", _graphicsBuffer); computeShader.GetKernelThreadGroupSizes(_csMainKernel, out var x, out _, out _); computeShader.Dispatch(_csMainKernel, count / (int)x, 1, 1);
VFX Graphへバッファを渡す パーティクルの属性データはGraphicsBufferとして保持 VFX GraphはGraphicsBufferの読み込みができる
tips: StructuredBufferをVFXGraphでサンプルする [VFXType(VFXTypeAttribute.Usage.GraphicsBuffer, "BoidsData")] public struct BoidsData { public Vector3
Position; public Vector3 Velocity; }
グラフはとても単純 外部にロジックを委託しているので グラフはすごいシンプル 色や形状を決定する部分は もっと作りこめるかも ここまでやると ComputeShaderの計算結果を VXFGraphに反映できた
おわりに
まとめ VFX Graphの表現力を拡張するために 属性計算ロジックを外部に委託するという選択肢がある GraphicsBufferを使ってComputeShaderの計算結果を VFXGraphへ渡すことができる
参考文献 今回のサンプルプロジェクト https://github.com/drumath2237/Boids-Unity-ComputeShader-Sandbox コンピュートシェーダー - Unityマニュアル https://docs.unity3d.com/ja/2023.2/Manual/class-ComputeShader.html ComputeShaderを触ってみる その1 ~スレッド編~
https://edom18.hateblo.jp/entry/2017/05/10/083421 GPUの力を解き放て!Unity Compute Shader入門! https://www.youtube.com/watch?v=yiPVxGO-Yg0 Class VFXTypeAttribute https://docs.unity3d.com/Packages/
[email protected]
/api/Unity Engine.VFX.VFXTypeAttribute.html