mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-06-21 10:53:31 +00:00
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:
@@ -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) =>
|
||||
|
||||
Reference in New Issue
Block a user