Cap StructureLayer Maximum Texture Size (#3574)

Resolves #3569

## Description:

While browsers like Firefox will report their maximum texture size of
16384, going over 8192 causes extreme VRAM usage and massive FPS drops,
even when no structures are actually being rendered (I experienced ~60ms
rendering time on this layer with no structures present).

This PR sets the StructureLayer texture size to cap at 8192, while
keeping near-exact scales. The result is increased performance, reduced
VRAM Usage, (especially in larger maps), and the resolution of the
unplayable performance issues when StructureLayer is present, with zero
noticeable degradation.

VRAM Usage also no longer rises when zoomed in (Sitting at around a
constant 40MB no matter zoom level, previously it would rise to over
160MB when StructureLayer was present).

All tested on Giant World, where the issues were first spotted, but
applies to all maps.

Discord: @enderboy9217
This commit is contained in:
David
2026-04-04 15:46:30 -04:00
committed by GitHub
parent 4ad172a8a0
commit 494b409f55
+18 -3
View File
@@ -130,12 +130,27 @@ export class StructureLayer implements Layer {
if (context === null) throw new Error("2d context not supported");
this.context = context;
// Firefox's GPU limit is 8192, only known browser issue
const maxTextureSize = 8192;
const scaleX = maxTextureSize / this.game.width();
const scaleY = maxTextureSize / this.game.height();
const targetScale = Math.min(2, scaleX, scaleY);
this.canvas.width = Math.max(
1,
Math.floor(this.game.width() * targetScale),
);
this.canvas.height = Math.max(
1,
Math.floor(this.game.height() * targetScale),
);
// Enable smooth scaling
this.context.imageSmoothingEnabled = true;
this.context.imageSmoothingQuality = "high";
this.canvas.width = this.game.width() * 2;
this.canvas.height = this.game.height() * 2;
this.context.scale(
this.canvas.width / (this.game.width() * 2),
this.canvas.height / (this.game.height() * 2),
);
Promise.all(
Array.from(this.unitIcons.values()).map((img) =>