Миллион спрайтов при 120 с лишним fps

Если вы побродите по форуму DOTS, то можете встретить там подобные посты о том, как автор написал библиотеку, способную рендерить миллион анимированных спрайтов, и всё равно получает только 60fps. Я создал собственный рендерер спрайтов DOTS, который достаточно хорош для нашей игры, но он не способен справиться с миллионом. Мне стало любопытно.

Поэтому я форкнул репозиторий и решил проверить, можно ли использовать его в Academia. Я немного поэкспериментировал с ним, посмотрел, как он рендерит один спрайт, сотню, затем тысячи. Выяснилось, что он не совсем готов к использованию в нашей игре. В нём отсутствуют некоторые аспекты, например, сортировка спрайтов сзади вперёд. Я попытался написать хак этой функции. Когда я читал код, то осознал, что возможно стоит написать совершенно новую библиотеку, которую мы сможем использовать. Мне только нужно было разобраться, как он рендерит спрайты, а принцип я уже понял.

Самые основы

Если я хочу воссоздать эту технику рендеринга, то мне нужно сделать самое простое: отрендерить отдельный спрайт. В библиотеке используются ComputeBuffers. Они должны передавать вычисления в GPU при помощи вычислительных шейдеров. Я не знал, что можно использовать в обычном шейдере, который рендерит что-то на экране. Можно воспринимать их как массивы чисел, которые можно назначать материалам, после чего шейдер выполняет доступ к этим материалам. Поэтому можно передавать такие данные, как позицию, поворот, масштаб, uv-координаты, цвета — всё, что пожелаете. Ниже показан шейдер, изменённый на основании этой потрясающей библиотеки:

  Shader "Instanced/ComputeBufferSprite" {     Properties {         _MainTex ("Albedo (RGB)", 2D) = "white" {}     }          SubShader {         Tags{             "Queue"="Transparent"             "IgnoreProjector"="True"             "RenderType"="Transparent"         }         Cull Back         Lighting Off         ZWrite On         Blend One OneMinusSrcAlpha         Pass {             CGPROGRAM             // Upgrade NOTE: excluded shader from OpenGL ES 2.0 because it uses non-square matrices             #pragma exclude_renderers gles              #pragma vertex vert             #pragma fragment frag             #pragma target 4.5              #include "UnityCG.cginc"              sampler2D _MainTex;              // xy for position, z for rotation, and w for scale             StructuredBuffer<float4> transformBuffer;              // xy is the uv size, zw is the uv offset/coordinate             StructuredBuffer<float4> uvBuffer;   	        StructuredBuffer<float4> colorsBuffer;              struct v2f{                 float4 pos : SV_POSITION;                 float2 uv: TEXCOORD0; 		        fixed4 color : COLOR0;             };              float4x4 rotationZMatrix(float zRotRadians) {                 float c = cos(zRotRadians);                 float s = sin(zRotRadians);                 float4x4 ZMatrix  =                      float4x4(                         c,  -s, 0,  0,a                        s,  c,  0,  0,                        0,  0,  1,  0,                        0,  0,  0,  1);                 return ZMatrix;             }              v2f vert (appdata_full v, uint instanceID : SV_InstanceID) {                 float4 transform = transformBuffer[instanceID];                 float4 uv = uvBuffer[instanceID];                                  //rotate the vertex                 v.vertex = mul(v.vertex - float4(0.5, 0.5, 0,0), rotationZMatrix(transform.z));                                  //scale it                 float3 worldPosition = float3(transform.x, transform.y, -transform.y/10) + (v.vertex.xyz * transform.w);                                  v2f o;                 o.pos = UnityObjectToClipPos(float4(worldPosition, 1.0f));                                  // XY here is the dimension (width, height).                  // ZW is the offset in the texture (the actual UV coordinates)                 o.uv =  v.texcoord * uv.xy + uv.zw;                  		        o.color = colorsBuffer[instanceID];                 return o;             }              fixed4 frag (v2f i) : SV_Target{                 fixed4 col = tex2D(_MainTex, i.uv) * i.color; 				clip(col.a - 1.0 / 255.0);                 col.rgb *= col.a;  				return col;             }              ENDCG         }     } }

Переменные variables transformBuffer, uvBuffer и colorsBuffer являются «массивами», которые мы задаём в коде при помощи ComputeBuffers. Это всё, что нам нужно (пока) для рендеринга спрайта. Вот скрипт MonoBehaviour для рендеринга одного спрайта:

public class ComputeBufferBasic : MonoBehaviour {     [SerializeField]     private Material material;      private Mesh mesh;          // Transform here is a compressed transform information     // xy is the position, z is rotation, w is the scale     private ComputeBuffer transformBuffer;          // uvBuffer contains float4 values in which xy is the uv dimension and zw is the texture offset     private ComputeBuffer uvBuffer;     private ComputeBuffer colorBuffer;      private readonly uint[] args = {         6, 1, 0, 0, 0     };          private ComputeBuffer argsBuffer;      private void Awake() {         this.mesh = CreateQuad();                  this.transformBuffer = new ComputeBuffer(1, 16);         float scale = 0.2f;         this.transformBuffer.SetData(new float4[]{ new float4(0, 0, 0, scale) });         int matrixBufferId = Shader.PropertyToID("transformBuffer");         this.material.SetBuffer(matrixBufferId, this.transformBuffer);                  this.uvBuffer = new ComputeBuffer(1, 16);         this.uvBuffer.SetData(new float4[]{ new float4(0.25f, 0.25f, 0, 0) });         int uvBufferId = Shader.PropertyToID("uvBuffer");         this.material.SetBuffer(uvBufferId, this.uvBuffer);                  this.colorBuffer = new ComputeBuffer(1, 16);         this.colorBuffer.SetData(new float4[]{ new float4(1, 1, 1, 1) });         int colorsBufferId = Shader.PropertyToID("colorsBuffer");         this.material.SetBuffer(colorsBufferId, this.colorBuffer);          this.argsBuffer = new ComputeBuffer(1, this.args.Length * sizeof(uint), ComputeBufferType.IndirectArguments);         this.argsBuffer.SetData(this.args);     }      private static readonly Bounds BOUNDS = new Bounds(Vector2.zero, Vector3.one);      private void Update() {            // Draw         Graphics.DrawMeshInstancedIndirect(this.mesh, 0, this.material, BOUNDS, this.argsBuffer);     }          // This can be refactored to a utility class     // Just added it here for the article     private static Mesh CreateQuad() {         Mesh mesh = new Mesh();         Vector3[] vertices = new Vector3[4];         vertices[0] = new Vector3(0, 0, 0);         vertices[1] = new Vector3(1, 0, 0);         vertices[2] = new Vector3(0, 1, 0);         vertices[3] = new Vector3(1, 1, 0);         mesh.vertices = vertices;          int[] tri = new int[6];         tri[0] = 0;         tri[1] = 2;         tri[2] = 1;         tri[3] = 2;         tri[4] = 3;         tri[5] = 1;         mesh.triangles = tri;          Vector3[] normals = new Vector3[4];         normals[0] = -Vector3.forward;         normals[1] = -Vector3.forward;         normals[2] = -Vector3.forward;         normals[3] = -Vector3.forward;         mesh.normals = normals;          Vector2[] uv = new Vector2[4];         uv[0] = new Vector2(0, 0);         uv[1] = new Vector2(1, 0);         uv[2] = new Vector2(0, 1);         uv[3] = new Vector2(1, 1);         mesh.uv = uv;          return mesh;     } }

Давайте разберём этот код по порядку. Для материала нам нужно создать новый материал, а затем задать ему описанный выше шейдер. Назначаем ему текстуру/спрайтшит. Я использую спрайтшит из библиотеки, представляющий собой иконки эмодзи размером 4×4 спрайта.

Меш здесь — это меш, созданный CreateQuad(). Это просто четырёхугольник, составленный из двух треугольников. Далее идут три переменные ComputeBuffer, которым мы позже зададим материал. Я назвал их так же, как переменные StructuredBuffer в шейдере. Это не обязательно, но так удобнее.

Переменные args и argsBuffer будут использоваться для вызова Graphics.DrawMeshInstancedIndirect(). Документация находится здесь. Функции требуется буфер с пятью значениями uint. В нашем случае важны только первые два. Первое — это количество индексов, и для нашего четырёхугольника это 6. Второе — это количество раз, которое будет рендериться четырёхугольник, то есть просто 1. Я представляю его ещё и как максимальное значение, используемое шейдером для индексирования StructuredBuffer. Примерно так:

for(int i = 0; i < count; ++i) {     CallShaderUsingThisIndexForBuffers(i); }

Метод Awake() — это просто подготовка ComputeBuffers для присвоения материала. Мы рендерим спрайт в точке (0, 0) с масштабом 0.2f и без поворота. Для UV мы используем спрайт в левом нижнем углу (эмодзи поцелуя). Затем мы присваиваем белый цвет. Массиву args присваивается значение argsBuffer.

В Update() мы просто вызываем Graphics.DrawMeshInstancedIndirect(). (Я не совсем понимаю пока использование здесь BOUNDS и просто скопировал это из библиотеки.)

Последними шагами будет подготовка сцены с ортогональной камерой. Создадим ещё один GameObject и добавим компонент ComputeBufferBasic. Зададим ему материал, использующий только что показанный шейдер. При запуске мы получим следующее:

Та-дааа! Спрайт, отрендеренный с помощью ComputeBuffer.

Если можно сделать один, можно и много

Теперь, когда мы научились рендерить с помощью ComputeBuffers один спрайт, сможем рисовать и множество. Вот ещё один созданный мной скрипт, имеющий параметр количества и рендерящий указанное количество спрайтов со случайной позицией, масштабом, поворотом и цветом:

public class ComputeBufferMultipleSprites : MonoBehaviour {     [SerializeField]     private Material material;          [SerializeField]     private float minScale = 0.15f;          [SerializeField]     private float maxScale = 0.2f;        [SerializeField]     private int count;      private Mesh mesh;          // Matrix here is a compressed transform information     // xy is the position, z is rotation, w is the scale     private ComputeBuffer transformBuffer;          // uvBuffer contains float4 values in which xy is the uv dimension and zw is the texture offset     private ComputeBuffer uvBuffer;     private ComputeBuffer colorBuffer;      private uint[] args;          private ComputeBuffer argsBuffer;      private void Awake() {         QualitySettings.vSyncCount = 0;         Application.targetFrameRate = -1;                  this.mesh = CreateQuad();                  // Prepare values         float4[] transforms = new float4[this.count];         float4[] uvs = new float4[this.count];         float4[] colors = new float4[this.count];          const float maxRotation = Mathf.PI * 2;         for (int i = 0; i < this.count; ++i) {             // transform             float x = UnityEngine.Random.Range(-8f, 8f);             float y = UnityEngine.Random.Range(-4.0f, 4.0f);             float rotation = UnityEngine.Random.Range(0, maxRotation);             float scale = UnityEngine.Random.Range(this.minScale, this.maxScale);             transforms[i] = new float4(x, y, rotation, scale);                          // UV             float u = UnityEngine.Random.Range(0, 4) * 0.25f;             float v = UnityEngine.Random.Range(0, 4) * 0.25f;             uvs[i] = new float4(0.25f, 0.25f, u, v);                          // color             float r = UnityEngine.Random.Range(0f, 1.0f);             float g = UnityEngine.Random.Range(0f, 1.0f);             float b = UnityEngine.Random.Range(0f, 1.0f);             colors[i] = new float4(r, g, b, 1.0f);         }                  this.transformBuffer = new ComputeBuffer(this.count, 16);         this.transformBuffer.SetData(transforms);         int matrixBufferId = Shader.PropertyToID("transformBuffer");         this.material.SetBuffer(matrixBufferId, this.transformBuffer);                  this.uvBuffer = new ComputeBuffer(this.count, 16);         this.uvBuffer.SetData(uvs);         int uvBufferId = Shader.PropertyToID("uvBuffer");         this.material.SetBuffer(uvBufferId, this.uvBuffer);                  this.colorBuffer = new ComputeBuffer(this.count, 16);         this.colorBuffer.SetData(colors);         int colorsBufferId = Shader.PropertyToID("colorsBuffer");         this.material.SetBuffer(colorsBufferId, this.colorBuffer);          this.args = new uint[] {             6, (uint)this.count, 0, 0, 0         };         this.argsBuffer = new ComputeBuffer(1, this.args.Length * sizeof(uint), ComputeBufferType.IndirectArguments);         this.argsBuffer.SetData(this.args);     }      private static readonly Bounds BOUNDS = new Bounds(Vector2.zero, Vector3.one);      private void Update() {            // Draw         Graphics.DrawMeshInstancedIndirect(this.mesh, 0, this.material, BOUNDS, this.argsBuffer);     }      private static Mesh CreateQuad() {         // Just the same as previous code. I told you this can be refactored.     } }

Здесь нет практически никаких изменений по сравнению с рендерингом одного спрайта. Разница в том, что теперь мы подготавливаем массивы с X содержимого, задаваемого сериализированной переменной count. Также мы задаём второе число в массиве args, присваивая ему значение count.

При помощи этого скрипта мы можем задать count любое значение, и он сгенерирует указанное количество спрайтов, но будет рендерить их всего за один вызов отрисовки.

Вот 10 000 случайных спрайтов.

Почему minScale и maxScale являются сериализированными переменными? Когда я тестировал код с 600 000 спрайтами, то заметил, что скорость упала ниже 60fps. Если исходная библиотека способна на миллион, то почему этот код не справляется?

Это 600 000 спрайтов. Работает медленно.

Я предположил, что, возможно, это из-за перерисовки. Поэтому я сделал minScale и maxScale сериазилированными параметрами и задал небольшие числа типа 0.01 и 0.02. И только тогда я смог воссоздать миллион спрайтов при более 60fps (судя по профилировщику редактора). Возможно, код способен и на большее, но кому нужен миллион спрайтов? В нашей игре не требуется и четвёртой части этого числа.

Миллион маленьких спрайтов.

Профилировщик

Итак, я захотел посмотреть, как этот код работает в тестовой сборке. Характеристики моей машины: 3,7 ГГц (4 ядра), 16 ГБ ОЗУ, Radeon RX 460. Вот что я получил:

Как видите, всё довольно быстро. Вызов Graphics.DrawMeshInstancedIndirect() показывает 0 мс. Хотя я не так уверен, стоит ли беспокоиться о Gfx.PresentFrame.

Не так быстро

Хоть результат и впечатляет, в реальной игре код будет использоваться не так. Самым важным отсутствующим аспектом является сортировка спрайтов. И это займёт большую часть ресурсов CPU. Кроме того, при наличии подвижных спрайтов ComputeBuffers нужно будет обновлять в каждом кадре. По-прежнему остаётся много работы. Я не ожидаю, что удастся достичь одного миллиона в настоящем рабочем фреймворке, но если я добьюсь чего-то вроде 300 000 менее чем за 2 мс, то для меня этого будет вполне достаточно. DOTS определённо в этом поможет, но это уже тема для другой статьи.