ARグラスで 魅力的な絵作り
•
3 likes•2,589 views
XR Kaigi 2019で発表した資料です。 ARグラスであるNreal Lightで魅力的な絵作りをする方法について発表しました。
Recommended
More Related Content
Similar to ARグラスで 魅力的な絵作り
Similar to ARグラスで 魅力的な絵作り (10)
More from Kazuya Hiruma
More from Kazuya Hiruma (20)
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 AWARDSにてファイナリストに選出
- 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