Fatal error when use many Text graphic in Tilemap.

Steps to Reproduce

DL my repo ↓.

https://github.com/tenpaMk2/excalibur-examples/tree/for_excalibur_issue_ticket_1/examples/dungeon-generator

npm install
npm run start

Tap/click about 40 times in the game screen.

my code

import { Color, Engine, Scene, Text, TileMap, Vector } from "excalibur";
import { PointerEvent } from "excalibur/build/dist/Input/PointerEvent";

export class GameScene extends Scene {
  private tilemap!: TileMap;

  onInitialize(engine: Engine): void {
    this.tilemap = new TileMap({
      pos: Vector.Zero,
      rows: 24,
      columns: 16,
      tileWidth: 32,
      tileHeight: 32,
    });
    engine.add(this.tilemap);

    this.tilemap.tiles.forEach((tile) => {
      tile.data.set("id", 0);
    });

    engine.input.pointers.primary.on("down", (event: PointerEvent): void => {
      this.tilemap.tiles.forEach((tile) => {
        const id = tile.data.get("id")!;
        tile.data.set("id", id + 1);
      });

      this.updateTilemap();
    });
  }

  updateTilemap(): void {
    this.tilemap.tiles.forEach((tile) => {
      const id = tile.data.get("id")!;

      const text = new Text({
        text: `${id}`,
        color: Color.White,
      });
      tile.clearGraphics();
      tile.addGraphic(text);
    });
  }
}

Expected Result

A fatal error doesn’t occur.

Actual Result

A fatal error occurs.

The logs are as follows.

Powered by Excalibur.js (v0.27.0)
127.0.0.1꞉1234/index.b71e74eb.js:23242

      /| ________________
O|===|* >________________>
      \|
127.0.0.1꞉1234/index.b71e74eb.js:23244
Visit http://excaliburjs.com for more information
127.0.0.1꞉1234/index.b71e74eb.js:23246
[Warn] :  Excalibur was unable to unlock the audio context, audio probably will not play in this browser.
node_modules/excalibur/build/esm/webpack:/Collision/Side.ts:3
[67465:259:0718/164454.220576:ERROR:io_surface.cc(301)] Failed to allocate IOSurface of size 75x63.
[67465:259:0718/164454.220605:ERROR:gpu_memory_buffer_factory_io_surface.cc(173)] Failed to allocate IOSurface.
[67465:259:0718/164454.220625:ERROR:io_surface.cc(301)] Failed to allocate IOSurface of size 75x63.
[67465:259:0718/164454.220635:ERROR:gpu_memory_buffer_factory_io_surface.cc(173)] Failed to allocate IOSurface.
[67465:259:0718/164454.220642:ERROR:shared_image_backing_factory_gl_image.cc(355)] CreateSharedImage: Failed to create bindable image
[67465:259:0718/164454.220649:ERROR:shared_image_factory.cc(770)] CreateSharedImage: could not create backing.
[67465:259:0718/164454.220654:ERROR:shared_image_stub.cc(246)] SharedImageStub: Unable to create shared image
[67465:259:0718/164457.177493:ERROR:shared_image_manager.cc(277)] SharedImageManager::ProduceOverlay: Trying to Produce a Overlay representation from a non-existent mailbox.
[67465:259:0718/164457.177515:ERROR:skia_output_device_buffer_queue.cc(354)] Invalid mailbox.
[67465:259:0718/164457.177761:ERROR:shared_image_manager.cc(277)] SharedImageManager::ProduceOverlay: Trying to Produce a Overlay representation from a non-existent mailbox.
[67465:259:0718/164457.177782:ERROR:skia_output_device_buffer_queue.cc(354)] Invalid mailbox.
[67465:259:0718/164457.177965:ERROR:shared_image_manager.cc(277)] SharedImageManager::ProduceOverlay: Trying to Produce a Overlay representation from a non-existent mailbox.
[67465:259:0718/164457.177989:ERROR:skia_output_device_buffer_queue.cc(354)] Invalid mailbox.

[Fatal] :  Error: Uniform uniformMatrix4fv:u_matrix doesn't exist or is not used in the shader source code, unused uniforms are optimized away by most browsers
    at Shader.setUniform (/Users/tenpamk2/repo/excalibur-examples/examples/dungeon-generator/node_modules/excalibur/build/esm/webpack:/Graphics/Context/circle-renderer/circle-renderer.ts:57:9)
    at Shader.setUniformMatrix (/Users/tenpamk2/repo/excalibur-examples/examples/dungeon-generator/node_modules/excalibur/build/esm/webpack:/Graphics/Context/circle-renderer/circle-renderer.ts:52:26)
    at ImageRenderer.flush (/Users/tenpamk2/repo/excalibur-examples/examples/dungeon-generator/node_modules/excalibur/build/esm/webpack:/Graphics/Context/ExcaliburGraphicsContext2DCanvas.ts:282:4)
    at ExcaliburGraphicsContextWebGL.flush (:8211:76)
    at Engine._draw (:23738:34)
    at Engine._mainloop (:23846:18)
    at StandardClock.update (:22956:26)
    at mainloop (http://127.0.0.1:1234/index.b71e74eb.js:22986:26) {stack: 'Error: Uniform uniformMatrix4fv:u_matrix does…://127.0.0.1:1234/index.b71e74eb.js:22986:26)', message: 'Uniform uniformMatrix4fv:u_matrix doesn't ex…uniforms are optimized away by most browsers'}

Environment

• browsers and versions: Chrome 103.0.5060.114（Official Build） （x86_64）
• operating system: Mac OS Monterey 12.4
• Excalibur versions: 0.27.0
• Memory: 16GB
• GPU: Intel UHD Graphics 630 1536MB

Current Workaround

nothing.

my guess

I always clear the graphics before using new graphic in my code as follows.

      tile.clearGraphics();
      tile.addGraphic(text);

However, on my machine, there seems to be some sort of cache left over that is consuming memory or something.

[tenpaMk2]

@eonarheim , Thanks for fixing.

I tried to execute same code (not use workaround) on 0.28.0-alpha.529, but a fatal error still occured 😓 Is it your expected result?

[1858:259:0720/232958.761121:ERROR:io_surface.cc(301)] Failed to allocate IOSurface of size 88x63.
[1858:259:0720/232958.761147:ERROR:gpu_memory_buffer_factory_io_surface.cc(173)] Failed to allocate IOSurface.
[1858:259:0720/232958.761167:ERROR:io_surface.cc(301)] Failed to allocate IOSurface of size 88x63.
[1858:259:0720/232958.761174:ERROR:gpu_memory_buffer_factory_io_surface.cc(173)] Failed to allocate IOSurface.
[1858:259:0720/232958.761179:ERROR:shared_image_backing_factory_gl_image.cc(355)] CreateSharedImage: Failed to create bindable image
[1858:259:0720/232958.761184:ERROR:shared_image_factory.cc(770)] CreateSharedImage: could not create backing.
[1858:259:0720/232958.761190:ERROR:shared_image_stub.cc(246)] SharedImageStub: Unable to create shared image
[1858:259:0720/233000.715412:ERROR:shared_image_manager.cc(277)] SharedImageManager::ProduceOverlay: Trying to Produce a Overlay representation from a non-existent mailbox.
[1858:259:0720/233000.715434:ERROR:skia_output_device_buffer_queue.cc(354)] Invalid mailbox.
[1864:259:0720/233000.715492:ERROR:command_buffer_proxy_impl.cc(331)] GPU state invalid after WaitForGetOffsetInRange.
[1858:259:0720/233000.715723:ERROR:shared_image_manager.cc(277)] SharedImageManager::ProduceOverlay: Trying to Produce a Overlay representation from a non-existent mailbox.
[1858:259:0720/233000.715746:ERROR:skia_output_device_buffer_queue.cc(354)] Invalid mailbox.
[Fatal] :  Error: Uniform uniformMatrix4fv:u_matrix doesn't exist or is not used in the shader source code, unused uniforms are optimized away by most browsers
    at Shader.setUniform (/Users/tenpamk2/repo/excalibur-examples/examples/dungeon-generator/node_modules/excalibur/build/esm/webpack:/Graphics/Context/shader.ts:284:13)
    at Shader.setUniformMatrix (/Users/tenpamk2/repo/excalibur-examples/examples/dungeon-generator/node_modules/excalibur/build/esm/webpack:/Graphics/Context/shader.ts:262:10)
    at ImageRenderer.flush (/Users/tenpamk2/repo/excalibur-examples/examples/dungeon-generator/node_modules/excalibur/build/esm/webpack:/Graphics/Context/image-renderer/image-renderer.ts:271:18)
    at ExcaliburGraphicsContextWebGL.flush (/Users/tenpamk2/repo/excalibur-examples/examples/dungeon-generator/node_modules/excalibur/build/esm/webpack:/Graphics/Context/ExcaliburGraphicsContextWebGL.ts:504:27)
    at Engine._draw (/Users/tenpamk2/repo/excalibur-examples/examples/dungeon-generator/node_modules/excalibur/build/esm/webpack:/Engine.ts:1246:26)
    at Engine._mainloop (/Users/tenpamk2/repo/excalibur-examples/examples/dungeon-generator/node_modules/excalibur/build/esm/webpack:/Engine.ts:1405:10)
    at StandardClock.update (/Users/tenpamk2/repo/excalibur-examples/examples/dungeon-generator/node_modules/excalibur/build/esm/webpack:/Util/Clock.ts:141:14)
    at mainloop (http://127.0.0.1:1234/index.b71e74eb.js:23013:26) {stack: 'Error: Uniform uniformMatrix4fv:u_matrix does…://127.0.0.1:1234/index.b71e74eb.js:23013:26)', message: 'Uniform uniformMatrix4fv:u_matrix doesn't ex…uniforms are optimized away by most browsers'}

Which one is correct?

1. You expected that 0.28.0-alpha.529 works OK but has performance issue.
2. You expected that 0.28.0-alpha.529 works NG because of performance issue but workaround works OK.

---

Your workaround works OK. Thank you very much❗

[tenpaMk2]

@eonarheim I’m glad (sad?) you can reproduce it. Thanks. Sorry, I don’t know how difficult it is, but option 1 seems like a good choice.