@driftengine/ui2d 3.61.0

package/src/spriteGl.ts

@@ -0,0 +1,270 @@
+/** The WebGL2 half of the sprite pass: one program, one instance buffer, one texture slot table. */
+
+import { SPRITE_FRAG, SPRITE_VERT } from './shaders/sprite.ts';
+import { SPRITE_FLOATS } from './spriteBatch.ts';
+import type { SpriteBatch } from './spriteBatch.ts';
+import type { SpriteTextureOptions } from './spriteTexture.ts';
+
+/**
+ * The unit this pass borrows for the length of one draw.
+ *
+ * Fourteen is above every unit `lightBudget.ts` assigns — `COOKIE_ATLAS_TEXTURE_UNIT` is the
+ * highest at thirteen — and below the sixteen WebGL2 guarantees. The pass releases it before it
+ * returns, because a texture left bound to a unit a later pass attaches is a feedback loop rather
+ * than a wrong colour.
+ */
+const SPRITE_UNIT = 14;
+
+/** Bytes per instance. Fourteen floats; see `SPRITE_FLOATS`. */
+const STRIDE = SPRITE_FLOATS * 4;
+
+export interface Webgl2Sprites {
+  readonly program: WebGLProgram;
+  readonly vao: WebGLVertexArrayObject;
+  readonly instances: WebGLBuffer;
+  readonly uniforms: Readonly<Record<string, WebGLUniformLocation | null>>;
+  /** One per slot, `null` until the caller sets it. A run naming an empty slot draws nothing. */
+  readonly textures: (WebGLTexture | null)[];
+}
+
+function compile(
+  gl: WebGL2RenderingContext,
+  kind: number,
+  source: string,
+  label: string,
+): WebGLShader {
+  const shader = gl.createShader(kind);
+  if (shader === null) throw new Error(`${label}: createShader failed`);
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (gl.getShaderParameter(shader, gl.COMPILE_STATUS) !== true) {
+    const log = gl.getShaderInfoLog(shader) ?? '';
+    gl.deleteShader(shader);
+    throw new Error(`${label}: ${log}`);
+  }
+  return shader;
+}
+
+const UNIFORM_NAMES = [
+  'uToNdc0',
+  'uToNdc1',
+  'uClipCorrection',
+  'uSpriteTexture',
+  'uOutputTransform',
+  'uOutputExposure',
+] as const;
+
+export function createWebgl2Sprites(
+  gl: WebGL2RenderingContext,
+  capacity: number,
+  slots: number,
+  label: string,
+): Webgl2Sprites {
+  const program = gl.createProgram();
+  if (program === null) throw new Error(`${label}: createProgram failed`);
+  const vert = compile(gl, gl.VERTEX_SHADER, SPRITE_VERT, `${label} vertex`);
+  const frag = compile(gl, gl.FRAGMENT_SHADER, SPRITE_FRAG, `${label} fragment`);
+  gl.attachShader(program, vert);
+  gl.attachShader(program, frag);
+  gl.linkProgram(program);
+  gl.deleteShader(vert);
+  gl.deleteShader(frag);
+  if (gl.getProgramParameter(program, gl.LINK_STATUS) !== true) {
+    const log = gl.getProgramInfoLog(program) ?? '';
+    gl.deleteProgram(program);
+    throw new Error(`${label}: ${log}`);
+  }
+
+  const uniforms: Record<string, WebGLUniformLocation | null> = {};
+  for (const name of UNIFORM_NAMES) uniforms[name] = gl.getUniformLocation(program, name);
+
+  const vao = gl.createVertexArray();
+  const instances = gl.createBuffer();
+  if (vao === null || instances === null) throw new Error(`${label}: buffer allocation failed`);
+  gl.bindVertexArray(vao);
+  gl.bindBuffer(gl.ARRAY_BUFFER, instances);
+  gl.bufferData(gl.ARRAY_BUFFER, capacity * STRIDE, gl.DYNAMIC_DRAW);
+  /*
+   * Four attributes, every one of them per instance: the quad's own corners come from
+   * `gl_VertexID` and cost no buffer at all. Offsets are re-pointed per run, which is how a run
+   * starts partway into the buffer without `baseInstance` — WebGL2 has no such call.
+   */
+  bindAttributes(gl, 0);
+  gl.bindVertexArray(null);
+  gl.bindBuffer(gl.ARRAY_BUFFER, null);
+
+  return { program, vao, instances, uniforms, textures: new Array<null>(slots).fill(null) };
+}
+
+/** Point the four instance attributes at instance `first`. The buffer must be bound. */
+function bindAttributes(gl: WebGL2RenderingContext, first: number): void {
+  const base = first * STRIDE;
+  gl.enableVertexAttribArray(0);
+  gl.vertexAttribPointer(0, 4, gl.FLOAT, false, STRIDE, base);
+  gl.vertexAttribDivisor(0, 1);
+  gl.enableVertexAttribArray(1);
+  gl.vertexAttribPointer(1, 4, gl.FLOAT, false, STRIDE, base + 16);
+  gl.vertexAttribDivisor(1, 1);
+  gl.enableVertexAttribArray(2);
+  gl.vertexAttribPointer(2, 4, gl.FLOAT, false, STRIDE, base + 32);
+  gl.vertexAttribDivisor(2, 1);
+  gl.enableVertexAttribArray(3);
+  gl.vertexAttribPointer(3, 2, gl.FLOAT, false, STRIDE, base + 48);
+  gl.vertexAttribDivisor(3, 1);
+}
+
+/** Replace a texture slot. The previous texture in that slot is deleted. */
+export function setWebgl2SpriteTexture(
+  gl: WebGL2RenderingContext,
+  sprites: Webgl2Sprites,
+  slot: number,
+  source: TexImageSource,
+  options: SpriteTextureOptions,
+): void {
+  const previous = sprites.textures[slot];
+  if (previous !== null && previous !== undefined) gl.deleteTexture(previous);
+  const texture = gl.createTexture();
+  if (texture === null) throw new Error('ui2d: createTexture failed');
+  gl.activeTexture(gl.TEXTURE0 + SPRITE_UNIT);
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  const internal = options.colorSpace === 'linear' ? gl.RGBA : gl.SRGB8_ALPHA8;
+  gl.texImage2D(gl.TEXTURE_2D, 0, internal, gl.RGBA, gl.UNSIGNED_BYTE, source);
+  const filter = options.filter === 'linear' ? gl.LINEAR : gl.NEAREST;
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);
+  /*
+   * Clamped on both axes, and it is a correctness rule rather than a default. A sheet frame's
+   * edge texel is adjacent to the *next* frame's, so a repeating wrap bleeds one sprite into
+   * another at exactly the seam a caller cannot see in the atlas.
+   */
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+  gl.bindTexture(gl.TEXTURE_2D, null);
+  gl.activeTexture(gl.TEXTURE0);
+  sprites.textures[slot] = texture;
+}
+
+/**
+ * Fill a slot with one opaque white texel, from an array rather than an image.
+ *
+ * **White is the identity of the multiply this shader does**, so a quad on this slot draws exactly
+ * its tint — which is what a solid background is. Built from four bytes rather than from a canvas
+ * because the pass has no DOM to reach for and should not need one: `texImage2D`'s pixel overload
+ * takes the texel directly, and `queue.writeTexture` is its WebGPU twin.
+ */
+export function setWebgl2WhiteTexture(
+  gl: WebGL2RenderingContext,
+  sprites: Webgl2Sprites,
+  slot: number,
+): void {
+  const texture = gl.createTexture();
+  if (texture === null) throw new Error('ui2d: createTexture failed');
+  gl.activeTexture(gl.TEXTURE0 + SPRITE_UNIT);
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texImage2D(
+    gl.TEXTURE_2D,
+    0,
+    gl.RGBA,
+    1,
+    1,
+    0,
+    gl.RGBA,
+    gl.UNSIGNED_BYTE,
+    new Uint8Array([255, 255, 255, 255]),
+  );
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+  gl.bindTexture(gl.TEXTURE_2D, null);
+  gl.activeTexture(gl.TEXTURE0);
+  sprites.textures[slot] = texture;
+}
+
+export function uploadWebgl2Instances(
+  gl: WebGL2RenderingContext,
+  sprites: Webgl2Sprites,
+  batch: SpriteBatch,
+): void {
+  if (batch.count === 0) return;
+  gl.bindBuffer(gl.ARRAY_BUFFER, sprites.instances);
+  gl.bufferSubData(gl.ARRAY_BUFFER, 0, batch.instances, 0, batch.count * SPRITE_FLOATS);
+  gl.bindBuffer(gl.ARRAY_BUFFER, null);
+}
+
+export function drawWebgl2Sprites(
+  gl: WebGL2RenderingContext,
+  sprites: Webgl2Sprites,
+  batch: SpriteBatch,
+  toNdc: Float32Array,
+  clipCorrection: Float32Array,
+  outputTransform: number,
+  outputExposure: number,
+): void {
+  if (batch.count === 0) return;
+  gl.useProgram(sprites.program);
+  gl.bindVertexArray(sprites.vao);
+  gl.bindBuffer(gl.ARRAY_BUFFER, sprites.instances);
+
+  const u = sprites.uniforms;
+  gl.uniform4f(
+    u['uToNdc0'] ?? null,
+    toNdc[0] as number,
+    toNdc[1] as number,
+    toNdc[2] as number,
+    toNdc[3] as number,
+  );
+  gl.uniform4f(u['uToNdc1'] ?? null, toNdc[4] as number, toNdc[5] as number, 0, 0);
+  gl.uniformMatrix4fv(u['uClipCorrection'] ?? null, false, clipCorrection);
+  gl.uniform1i(u['uOutputTransform'] ?? null, outputTransform);
+  gl.uniform1f(u['uOutputExposure'] ?? null, outputExposure);
+  gl.uniform1i(u['uSpriteTexture'] ?? null, SPRITE_UNIT);
+
+  const blendWas = gl.getParameter(gl.BLEND) as boolean;
+  const depthTestWas = gl.getParameter(gl.DEPTH_TEST) as boolean;
+  const depthMaskWas = gl.getParameter(gl.DEPTH_WRITEMASK) as boolean;
+  const cullWas = gl.getParameter(gl.CULL_FACE) as boolean;
+  /*
+   * **Culling off, and the WebGPU pipeline says `cullMode: 'none'` for the same reason**: a sprite
+   * is mirrored by giving it a negative width, which reverses its winding, so a cull mode drops
+   * every flipped sprite — which is what a character facing left is.
+   *
+   * This line is here because the frame that was missing it drew *nothing at all* on WebGL2 while
+   * WebGPU was pixel-perfect, and nothing reported an error. A contributed pass inherits whatever
+   * cull state the last scene draw left on, and the screen-space quad's winding is not the scene's;
+   * WebGPU has no such inheritance, because a pipeline states its own. Every backend difference
+   * this seam has is of that shape: one API carries state between draws and the other does not.
+   */
+  gl.disable(gl.CULL_FACE);
+  gl.enable(gl.BLEND);
+  /* Premultiplied `over`: the fragment stage folds alpha in, so this composes onto opaque pixels. */
+  gl.blendFuncSeparate(gl.ONE, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+  gl.disable(gl.DEPTH_TEST);
+  gl.depthMask(false);
+  gl.activeTexture(gl.TEXTURE0 + SPRITE_UNIT);
+
+  for (let run = 0; run < batch.runCount; run += 1) {
+    const at = run * 3;
+    const texture = sprites.textures[batch.runs[at] as number];
+    if (texture === null || texture === undefined) continue;
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    bindAttributes(gl, batch.runs[at + 1] as number);
+    gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, batch.runs[at + 2] as number);
+  }
+
+  gl.bindTexture(gl.TEXTURE_2D, null);
+  gl.activeTexture(gl.TEXTURE0);
+  gl.depthMask(depthMaskWas);
+  if (cullWas) gl.enable(gl.CULL_FACE);
+  if (depthTestWas) gl.enable(gl.DEPTH_TEST);
+  if (!blendWas) gl.disable(gl.BLEND);
+  gl.bindBuffer(gl.ARRAY_BUFFER, null);
+  gl.bindVertexArray(null);
+}
+
+export function disposeWebgl2Sprites(gl: WebGL2RenderingContext, sprites: Webgl2Sprites): void {
+  gl.deleteProgram(sprites.program);
+  gl.deleteVertexArray(sprites.vao);
+  gl.deleteBuffer(sprites.instances);
+  for (const texture of sprites.textures) if (texture !== null) gl.deleteTexture(texture);
+}

package/src/spriteGpu.ts

@@ -0,0 +1,271 @@
+/** The WebGPU half of the sprite pass: one pipeline, one instance buffer, a bind group per slot. */
+
+import {
+  SPRITE_BINDINGS,
+  SPRITE_FRAG_WGSL,
+  SPRITE_VERT_WGSL,
+} from './shaders/generated/sprite.wgsl.ts';
+import { SPRITE_FLOATS } from './spriteBatch.ts';
+import type { SpriteBatch } from './spriteBatch.ts';
+import type { SpriteImage, SpriteTextureOptions } from './spriteTexture.ts';
+
+const VERT = SPRITE_BINDINGS.SPRITE_VERT;
+const FRAG = SPRITE_BINDINGS.SPRITE_FRAG;
+
+const STRIDE = SPRITE_FLOATS * 4;
+const STAGE_VERTEX = 1; // GPUShaderStage.VERTEX
+const STAGE_FRAGMENT = 2; // GPUShaderStage.FRAGMENT
+const UNIFORM_COPY_DST = 64 | 8; // GPUBufferUsage.UNIFORM | COPY_DST
+const VERTEX_COPY_DST = 32 | 8; // GPUBufferUsage.VERTEX | COPY_DST
+const TEXTURE_USAGE = 4 | 2 | 16; // TEXTURE_BINDING | COPY_DST | RENDER_ATTACHMENT
+
+export interface GpuSpriteSlot {
+  readonly texture: GPUTexture;
+  readonly bindGroup: GPUBindGroup;
+}
+
+export interface GpuSprites {
+  readonly pipeline: GPURenderPipeline;
+  readonly layout: GPUBindGroupLayout;
+  readonly vertexUniforms: GPUBuffer;
+  readonly fragmentUniforms: GPUBuffer;
+  readonly instances: GPUBuffer;
+  readonly samplers: { readonly nearest: GPUSampler; readonly linear: GPUSampler };
+  readonly slots: (GpuSpriteSlot | null)[];
+  readonly vertexScratch: ArrayBuffer;
+  readonly vertexFloats: Float32Array;
+  readonly fragmentScratch: ArrayBuffer;
+  readonly fragmentFloats: Float32Array;
+  readonly fragmentInts: Int32Array;
+}
+
+export function createGpuSprites(
+  device: GPUDevice,
+  format: GPUTextureFormat,
+  depthFormat: GPUTextureFormat,
+  samples: number,
+  capacity: number,
+  slots: number,
+  label: string,
+): GpuSprites {
+  const layout = device.createBindGroupLayout({
+    label: `${label}.layout`,
+    entries: [
+      { binding: VERT.uniforms, visibility: STAGE_VERTEX, buffer: { type: 'uniform' } },
+      { binding: FRAG.uniforms, visibility: STAGE_FRAGMENT, buffer: { type: 'uniform' } },
+      {
+        binding: FRAG.textures.uSpriteTexture.texture,
+        visibility: STAGE_FRAGMENT,
+        texture: { sampleType: 'float' },
+      },
+      {
+        binding: FRAG.textures.uSpriteTexture.sampler,
+        visibility: STAGE_FRAGMENT,
+        sampler: { type: 'filtering' },
+      },
+    ],
+  });
+
+  const pipeline = device.createRenderPipeline({
+    label,
+    layout: device.createPipelineLayout({ bindGroupLayouts: [layout] }),
+    vertex: {
+      module: device.createShaderModule({ label: `${label}.vert`, code: SPRITE_VERT_WGSL }),
+      entryPoint: 'main',
+      buffers: [
+        {
+          arrayStride: STRIDE,
+          stepMode: 'instance',
+          attributes: [
+            { shaderLocation: 0, offset: 0, format: 'float32x4' },
+            { shaderLocation: 1, offset: 16, format: 'float32x4' },
+            { shaderLocation: 2, offset: 32, format: 'float32x4' },
+            { shaderLocation: 3, offset: 48, format: 'float32x2' },
+          ],
+        },
+      ],
+    },
+    fragment: {
+      module: device.createShaderModule({ label: `${label}.frag`, code: SPRITE_FRAG_WGSL }),
+      entryPoint: 'main',
+      targets: [
+        {
+          format,
+          /* Premultiplied `over`, matching the WebGL2 half exactly. */
+          blend: {
+            color: { srcFactor: 'one', dstFactor: 'one-minus-src-alpha', operation: 'add' },
+            alpha: { srcFactor: 'one', dstFactor: 'one-minus-src-alpha', operation: 'add' },
+          },
+        },
+      ],
+    },
+    /*
+     * Nothing is culled: a sprite is mirrored by giving it a negative width, which reverses its
+     * winding, and a character facing left is exactly that.
+     */
+    primitive: { topology: 'triangle-list', cullMode: 'none' },
+    multisample: { count: samples },
+    /*
+     * Neither tested nor written. The 2D layer's order *is* its layering — there is no z to sort
+     * by — and a pass that depth-tested would let whatever 3D geometry is in the frame punch holes
+     * in an overlay drawn over it. Declared all the same, because a pipeline in a render pass that
+     * has a depth attachment must name its format.
+     */
+    depthStencil: { format: depthFormat, depthWriteEnabled: false, depthCompare: 'always' },
+  });
+
+  const vertexUniforms = device.createBuffer({
+    label: `${label}.vertexUniforms`,
+    size: VERT.uniformSize,
+    usage: UNIFORM_COPY_DST,
+  });
+  const fragmentUniforms = device.createBuffer({
+    label: `${label}.fragmentUniforms`,
+    size: FRAG.uniformSize,
+    usage: UNIFORM_COPY_DST,
+  });
+  const instances = device.createBuffer({
+    label: `${label}.instances`,
+    size: capacity * STRIDE,
+    usage: VERTEX_COPY_DST,
+  });
+
+  const vertexScratch = new ArrayBuffer(VERT.uniformSize);
+  const fragmentScratch = new ArrayBuffer(FRAG.uniformSize);
+
+  return {
+    pipeline,
+    layout,
+    vertexUniforms,
+    fragmentUniforms,
+    instances,
+    samplers: {
+      nearest: device.createSampler({ label: `${label}.nearest` }),
+      linear: device.createSampler({
+        label: `${label}.linear`,
+        magFilter: 'linear',
+        minFilter: 'linear',
+      }),
+    },
+    slots: new Array<null>(slots).fill(null),
+    vertexScratch,
+    vertexFloats: new Float32Array(vertexScratch),
+    fragmentScratch,
+    fragmentFloats: new Float32Array(fragmentScratch),
+    fragmentInts: new Int32Array(fragmentScratch),
+  };
+}
+
+export function setGpuSpriteTexture(
+  device: GPUDevice,
+  sprites: GpuSprites,
+  slot: number,
+  source: SpriteImage,
+  options: SpriteTextureOptions,
+): void {
+  const previous = sprites.slots[slot];
+  if (previous !== null && previous !== undefined) previous.texture.destroy();
+  const texture = device.createTexture({
+    label: `ui2d.sprite.${slot}`,
+    size: [source.width, source.height],
+    format: options.colorSpace === 'linear' ? 'rgba8unorm' : 'rgba8unorm-srgb',
+    usage: TEXTURE_USAGE,
+  });
+  /*
+   * **No flip, matching WebGL2** — `surfaceTexture.ts` carries the whole argument and the bug it
+   * came from: `UNPACK_FLIP_Y_WEBGL` is ignored for an `ImageBitmap` and honoured for a canvas, so
+   * a `flipY: true` here would be self-consistent and disagree with the other backend on exactly
+   * the source type most callers use.
+   */
+  device.queue.copyExternalImageToTexture(
+    { source: source as GPUCopyExternalImageSource, flipY: false },
+    { texture },
+    [source.width, source.height],
+  );
+  const sampler = options.filter === 'linear' ? sprites.samplers.linear : sprites.samplers.nearest;
+  const bindGroup = device.createBindGroup({
+    label: `ui2d.sprite.${slot}.bindGroup`,
+    layout: sprites.layout,
+    entries: [
+      { binding: VERT.uniforms, resource: { buffer: sprites.vertexUniforms } },
+      { binding: FRAG.uniforms, resource: { buffer: sprites.fragmentUniforms } },
+      { binding: FRAG.textures.uSpriteTexture.texture, resource: texture.createView() },
+      { binding: FRAG.textures.uSpriteTexture.sampler, resource: sampler },
+    ],
+  });
+  sprites.slots[slot] = { texture, bindGroup };
+}
+
+/** The same one white texel, written straight into a texture. See the WebGL2 half for why. */
+export function setGpuWhiteTexture(device: GPUDevice, sprites: GpuSprites, slot: number): void {
+  const texture = device.createTexture({
+    label: 'ui2d.sprite.white',
+    size: [1, 1],
+    /* Not `-srgb`: 255 is 255 either way, and a linear format says so without a decode. */
+    format: 'rgba8unorm',
+    usage: TEXTURE_USAGE,
+  });
+  device.queue.writeTexture(
+    { texture },
+    new Uint8Array([255, 255, 255, 255]),
+    { bytesPerRow: 4 },
+    [1, 1],
+  );
+  const bindGroup = device.createBindGroup({
+    label: 'ui2d.sprite.white.bindGroup',
+    layout: sprites.layout,
+    entries: [
+      { binding: VERT.uniforms, resource: { buffer: sprites.vertexUniforms } },
+      { binding: FRAG.uniforms, resource: { buffer: sprites.fragmentUniforms } },
+      { binding: FRAG.textures.uSpriteTexture.texture, resource: texture.createView() },
+      { binding: FRAG.textures.uSpriteTexture.sampler, resource: sprites.samplers.nearest },
+    ],
+  });
+  sprites.slots[slot] = { texture, bindGroup };
+}
+
+export function uploadGpuInstances(
+  device: GPUDevice,
+  sprites: GpuSprites,
+  batch: SpriteBatch,
+): void {
+  if (batch.count === 0) return;
+  device.queue.writeBuffer(
+    sprites.instances,
+    0,
+    batch.instances.buffer,
+    batch.instances.byteOffset,
+    batch.count * STRIDE,
+  );
+}
+
+export function drawGpuSprites(
+  pass: GPURenderPassEncoder,
+  sprites: GpuSprites,
+  batch: SpriteBatch,
+): void {
+  if (batch.count === 0) return;
+  pass.setPipeline(sprites.pipeline);
+  for (let run = 0; run < batch.runCount; run += 1) {
+    const at = run * 3;
+    const slot = sprites.slots[batch.runs[at] as number];
+    if (slot === null || slot === undefined) continue;
+    const first = batch.runs[at + 1] as number;
+    const count = batch.runs[at + 2] as number;
+    pass.setBindGroup(0, slot.bindGroup);
+    /*
+     * The run's offset goes into the vertex buffer binding rather than into `firstInstance`,
+     * which is the one place the two backends can be made to do the same arithmetic: WebGL2 has
+     * no base-instance call at all and re-points its attributes the same way.
+     */
+    pass.setVertexBuffer(0, sprites.instances, first * STRIDE, count * STRIDE);
+    pass.draw(6, count);
+  }
+}
+
+export function disposeGpuSprites(sprites: GpuSprites): void {
+  sprites.vertexUniforms.destroy();
+  sprites.fragmentUniforms.destroy();
+  sprites.instances.destroy();
+  for (const slot of sprites.slots) if (slot !== null) slot.texture.destroy();
+}