ARグラスで 魅力的な絵作り
3 likes2,705 views
XR Kaigi 2019で発表した資料です。 ARグラスであるNreal Lightで魅力的な絵作りをする方法について発表しました。
![38
パーティクルの位置更新
[numthreads(THREAD_NUM,1,1)]
void Calculate(uint id : SV_DispatchThreadID)
{
Particle p = _Particles[id];
float3 pos = (p.targetPosition - p.position) * _DeltaTime * p.speed;
p.position += pos;
p.useTexture = 1;
_Particles[id] = p;
}
パーティクルの位置を毎フレーム更新](https://image.slidesharecdn.com/xr-kaigi-191207011950/85/AR-38-320.jpg)
![39
パーティクルのターゲット変更
[numthreads(THREAD_NUM,1,1)]
void Update(uint id : SV_DispatchThreadID)
{
Particle p = _Particles[id];
float4x4 mat = _MatrixData[_InitDataList[id].targetId];
p.isActive = _InitDataList[id].isActive;
p.targetPosition = mul(mat, float4(_InitDataList[id].targetPosition,
1.0)).xyz;
p.uv = _InitDataList[id].uv;
p.targetId = _InitDataList[id].targetId;
_Particles[id] = p;
}
パーティクルのターゲット先を変更（更新）する](https://image.slidesharecdn.com/xr-kaigi-191207011950/85/AR-39-320.jpg)
![40
パーティクルのターゲット変更
[numthreads(THREAD_NUM,1,1)]
void Explosion(uint id : SV_DispatchThreadID)
{
Particle p = _Particles[id];
if (_OnCircle == 1)
{
float h = rand(p.id);
float s = sin(p.id + _Time) * 1.5;
float c = cos(p.id + _Time) * 1.5;
float3 pp = float3(s, h * 1.5, c) + noise(p.position);
float3 pos = (pp - p.position) * _DeltaTime * p.speed;
p.position += pos;
p.color = float4(1, 1, 1, 1);
p.useTexture = 0;
}
else
{
float h = rand(p.id);
float3 pos = (p.targetPosition + float3(0, cos(h + _Time) * 0.01, 0) -
p.position) * _DeltaTime * p.speed;
p.position += pos;
}
p.color = float4(1, 1, 1, 1);
p.useTexture = 0;
_Particles[id] = p;
}
別形状のためのカーネル](https://image.slidesharecdn.com/xr-kaigi-191207011950/85/AR-40-320.jpg)
![42
メッシュの情報を集める
public class ParticleTarget : MonoBehaviour
{
private Mesh _mesh = null;
public Mesh Mesh => _mesh ?? (_mesh = GetComponent<MeshFilter>().mesh);
private Renderer _renderer = null;
private Renderer Renderer => _renderer ?? (_renderer =
GetComponent<Renderer>());
public int VertexCount => Mesh.vertexCount;
public Vector3[] Vertices => Mesh.vertices;
public Vector2[] UV => Mesh.uv;
public Matrix4x4 WorldMatrix => transform.localToWorldMatrix;
public Texture2D Texture => Renderer.material.mainTexture as Texture2D;
}
シンタックスシュガー的にデータを渡すだけのコード](https://image.slidesharecdn.com/xr-kaigi-191207011950/85/AR-42-320.jpg)
![43
頂点、UV情報をひとつの配列にまとめる
private void CollectAllData()
{
int count = GetCount();
_allVertices = new Vector3[count];
_allUV = new Vector2[count];
int idx = 0;
foreach (var t in _targets)
{
System.Array.Copy(t.Vertices, 0, _allVertices, idx,
t.Vertices.Length);
System.Array.Copy(t.UV, 0, _allUV, idx, t.UV.Length);
idx += t.Vertices.Length;
}
}
グループの頂点などをメモリアクセスしやすいように配列にまとめる](https://image.slidesharecdn.com/xr-kaigi-191207011950/85/AR-43-320.jpg)
![44
ターゲットモデルのマトリクスをまとめる
private void UpdateMatrices(ParticleTargetGroup group)
{
for (int i = 0; i < group.ParticleTargets.Length; i++)
{
_matrixData[i] = group.ParticleTargets[i].WorldMatrix;
}
_matrixBuffer.SetData(_matrixData);
_computeShader.SetBuffer(_kernelSetup, _propertyDef.MatrixDataID,
_matrixBuffer);
}
各頂点の?列計算はシェーダで?うためMatrixデータをまとめてGPUに送る](https://image.slidesharecdn.com/xr-kaigi-191207011950/85/AR-44-320.jpg)
![45
テクスチャをTextureArrayにまとめる
private void CreateTextureArray()
{
int count = _targets.Length;
int width = _targets[0].Texture.width;
int height = _targets[0].Texture.height;
_textureArray = new Texture2DArray(width, height, count,
TextureFormat.RGBA32, false, true);
_textureArray.filterMode = FilterMode.Bilinear;
_textureArray.wrapMode = TextureWrapMode.Repeat;
for (int i = 0; i < _targets.Length; i++)
{
_textureArray.SetPixels(_targets[i].Texture.GetPixels(0), i, 0);
}
_textureArray.Apply();
}
Matrix同様、テクスチャもシェーダ側でアクセスするためTextureArrayにまとめる](https://image.slidesharecdn.com/xr-kaigi-191207011950/85/AR-45-320.jpg)
![47
GPUインスタンシングで描画
v2f vert (appdata v, uint id : SV_InstanceID)
{
Particle p = _Particles[id];
v2f o;
v.vertex.xyz = (v.vertex.xyz * _BaseScale) +
p.position;
o.vertex = mul(UNITY_MATRIX_VP,
float4(v.vertex.xyz, 1.0));
o.uv.xy = p.uv.xy;
o.uv.z = p.targetId;
o.color = p.color;
o.texid = p.targetId;
o.useTex = p.useTexture;
return o;
}
fixed4 frag(v2f i) : SV_Target
{
fixed4 col;
if (i.useTex == 1)
{
col = UNITY_SAMPLE_TEX2DARRAY(_Textures,
i.uv);
col = pow(col, 1.5);
}
else
{
col = i.color;
}
return col;
}
Compute Shaderの計算に基づいてパーティクルをレンダリングする
頂点シェーダ フラグメントシェーダ](https://image.slidesharecdn.com/xr-kaigi-191207011950/85/AR-47-320.jpg)
More Related Content
Similar to ARグラスで 魅力的な絵作り (11)
More from Kazuya Hiruma (20)
Recently uploaded (15)
ARグラスで 魅力的な絵作り
- 2. 2 1. ??紹介 2. 会社紹介 3. プロダクト紹介 3-1. PORTAL紹介 4. PORTALをNreal Lightに移植中の話 CONTENTS
- 6. 6 1. 制作体制 2. テキストのみ 2-1. テキストA 2-2. テキストB 3. テキストと写真 4. 図系
- 8. 8 プロダクト紹介
- 11. 11 AUGGIE AWARDSファイナリスト AUGGIE AWARDSという海外のアワードで ソフトウェアとしては?本初のファイナリストに選出されました。 AR/VRで最?のAUGGIE 础奥础搁顿厂にてファイナリストに选出
- 12. 12 PORTALをNreal Lightに移植中の話 Import the PORTAL to the Nreal Light
- 16. 16 移植にあたっての課題
- 19. 19 iPad版に?べて?味が明るすぎる PCで?た絵 ARグラス越しの絵 PCディスプレイで?た場合の?味 Nreal Lightで?た場合の?味 無加?だと?味が全然違う
- 22. 22 ?を2乗する（コントラストを上げる） fixed4 frag(v2f i) : SV_Target { fixed4 col = tex2D(_MainTex, i.uv); col.rgb = pow(col.rgb, 2.0); return col; } コード的にはシンプルだが効果は絶?
- 27. 27 ポストプロセスで上下左右の際をフェードアウトさせる fixed4 frag(v2f i) : SV_Target { fixed4 col = tex2D(_MainTex, i.uv); float2 uv = abs(i.uv * 2.0 - 1.0); float2 u = _Width / _ScreenParams.xy * 0.5; u = smoothstep(0, u, 1.0 - uv); col = col * u.x * u.y; return col; } UV値を利?して画?端に近づくにつれてフェードさせる （ARグラスは黒＝発光しない＝透明になっていく）
- 29. 29
- 30. 30
- 31. 31
- 33. 33 移植する上での課題 1. 10万弱のパーティクルを描画する 2. 複数モデルグループをパーティクル処理 3. モデル以外の形状にも変化する 4. 常に?成済パーティクルを利?する （新規?成はしない）
- 34. 34 処理フロー
- 35. 35 処理フロー 1. ターゲットのメッシュ情報を集める 2. (1)のデータをグルーピング 3. Compute Shaderで位置計算 4. GPU Instancingで描画
- 37. - その場で、ランウェイに登 場する服の素材感を知るこ とができる 37 利?するカーネルは3つ Update ExplosionCalculate 01 02 03 パーティクルのターゲットを 更新する ターゲットがない形状に 変形させる パーティクルの位置を 計算?更新する
- 38. 38 パーティクルの位置更新 [numthreads(THREAD_NUM,1,1)] void Calculate(uint id : SV_DispatchThreadID) { Particle p = _Particles[id]; float3 pos = (p.targetPosition - p.position) * _DeltaTime * p.speed; p.position += pos; p.useTexture = 1; _Particles[id] = p; } パーティクルの位置を毎フレーム更新
- 39. 39 パーティクルのターゲット変更 [numthreads(THREAD_NUM,1,1)] void Update(uint id : SV_DispatchThreadID) { Particle p = _Particles[id]; float4x4 mat = _MatrixData[_InitDataList[id].targetId]; p.isActive = _InitDataList[id].isActive; p.targetPosition = mul(mat, float4(_InitDataList[id].targetPosition, 1.0)).xyz; p.uv = _InitDataList[id].uv; p.targetId = _InitDataList[id].targetId; _Particles[id] = p; } パーティクルのターゲット先を変更（更新）する
- 40. 40 パーティクルのターゲット変更 [numthreads(THREAD_NUM,1,1)] void Explosion(uint id : SV_DispatchThreadID) { Particle p = _Particles[id]; if (_OnCircle == 1) { float h = rand(p.id); float s = sin(p.id + _Time) * 1.5; float c = cos(p.id + _Time) * 1.5; float3 pp = float3(s, h * 1.5, c) + noise(p.position); float3 pos = (pp - p.position) * _DeltaTime * p.speed; p.position += pos; p.color = float4(1, 1, 1, 1); p.useTexture = 0; } else { float h = rand(p.id); float3 pos = (p.targetPosition + float3(0, cos(h + _Time) * 0.01, 0) - p.position) * _DeltaTime * p.speed; p.position += pos; } p.color = float4(1, 1, 1, 1); p.useTexture = 0; _Particles[id] = p; } 別形状のためのカーネル
- 41. 41 C#側のセットアップ
- 42. 42 メッシュの情報を集める public class ParticleTarget : MonoBehaviour { private Mesh _mesh = null; public Mesh Mesh => _mesh ?? (_mesh = GetComponent<MeshFilter>().mesh); private Renderer _renderer = null; private Renderer Renderer => _renderer ?? (_renderer = GetComponent<Renderer>()); public int VertexCount => Mesh.vertexCount; public Vector3[] Vertices => Mesh.vertices; public Vector2[] UV => Mesh.uv; public Matrix4x4 WorldMatrix => transform.localToWorldMatrix; public Texture2D Texture => Renderer.material.mainTexture as Texture2D; } シンタックスシュガー的にデータを渡すだけのコード
- 43. 43 頂点、UV情報をひとつの配列にまとめる private void CollectAllData() { int count = GetCount(); _allVertices = new Vector3[count]; _allUV = new Vector2[count]; int idx = 0; foreach (var t in _targets) { System.Array.Copy(t.Vertices, 0, _allVertices, idx, t.Vertices.Length); System.Array.Copy(t.UV, 0, _allUV, idx, t.UV.Length); idx += t.Vertices.Length; } } グループの頂点などをメモリアクセスしやすいように配列にまとめる
- 44. 44 ターゲットモデルのマトリクスをまとめる private void UpdateMatrices(ParticleTargetGroup group) { for (int i = 0; i < group.ParticleTargets.Length; i++) { _matrixData[i] = group.ParticleTargets[i].WorldMatrix; } _matrixBuffer.SetData(_matrixData); _computeShader.SetBuffer(_kernelSetup, _propertyDef.MatrixDataID, _matrixBuffer); } 各頂点の?列計算はシェーダで?うためMatrixデータをまとめてGPUに送る
- 45. 45 テクスチャをTextureArrayにまとめる private void CreateTextureArray() { int count = _targets.Length; int width = _targets[0].Texture.width; int height = _targets[0].Texture.height; _textureArray = new Texture2DArray(width, height, count, TextureFormat.RGBA32, false, true); _textureArray.filterMode = FilterMode.Bilinear; _textureArray.wrapMode = TextureWrapMode.Repeat; for (int i = 0; i < _targets.Length; i++) { _textureArray.SetPixels(_targets[i].Texture.GetPixels(0), i, 0); } _textureArray.Apply(); } Matrix同様、テクスチャもシェーダ側でアクセスするためTextureArrayにまとめる
- 46. 46 描画
- 47. 47 GPUインスタンシングで描画 v2f vert (appdata v, uint id : SV_InstanceID) { Particle p = _Particles[id]; v2f o; v.vertex.xyz = (v.vertex.xyz * _BaseScale) + p.position; o.vertex = mul(UNITY_MATRIX_VP, float4(v.vertex.xyz, 1.0)); o.uv.xy = p.uv.xy; o.uv.z = p.targetId; o.color = p.color; o.texid = p.targetId; o.useTex = p.useTexture; return o; } fixed4 frag(v2f i) : SV_Target { fixed4 col; if (i.useTex == 1) { col = UNITY_SAMPLE_TEX2DARRAY(_Textures, i.uv); col = pow(col, 1.5); } else { col = i.color; } return col; } Compute Shaderの計算に基づいてパーティクルをレンダリングする 頂点シェーダ フラグメントシェーダ
- 48. 48 GPUインスタンシングで描画 DrawMeshInstancedIndirectメソッドで?度に描画 private void DrawParticles() { Graphics.DrawMeshInstancedIndirect( _particleMesh, 0, // submesh index _particleMat, new Bounds(Vector3.zero, Vector3.one * 32f), _argsBuffer, 0, null, UnityEngine.Rendering.ShadowCastingMode.Off, false, gameObject.layer ); }
- 49. 49