Если вы побродите по форуму 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 определённо в этом поможет, но это уже тема для другой статьи.
