diff --git a/src/client/graphics/layers/SettingsModal.ts b/src/client/graphics/layers/SettingsModal.ts index c61cab390..a58d21462 100644 --- a/src/client/graphics/layers/SettingsModal.ts +++ b/src/client/graphics/layers/SettingsModal.ts @@ -156,7 +156,6 @@ export class SettingsModal extends LitElement implements Layer { throw new Error(`Invalid border mode: ${value}`); this.userSettings.setInt("settings.territoryBorderMode", mode); - this.eventBus.emit(new RefreshGraphicsEvent()); this.requestUpdate(); } diff --git a/src/client/graphics/layers/TerritoryLayer.ts b/src/client/graphics/layers/TerritoryLayer.ts index 3a35080cb..2c3159c70 100644 --- a/src/client/graphics/layers/TerritoryLayer.ts +++ b/src/client/graphics/layers/TerritoryLayer.ts @@ -129,6 +129,9 @@ export class TerritoryLayer implements Layer { this.redraw(); } + // Apply user settings even while the game is paused (settings modal). + this.refreshBorderModeIfNeeded(); + this.ensureTerritoryCanvasAttached(context.canvas); this.updateHoverHighlight(); diff --git a/src/client/graphics/webgpu/TerritoryRenderer.ts b/src/client/graphics/webgpu/TerritoryRenderer.ts index 85b1eb3b6..798682e7a 100644 --- a/src/client/graphics/webgpu/TerritoryRenderer.ts +++ b/src/client/graphics/webgpu/TerritoryRenderer.ts @@ -28,6 +28,7 @@ export class TerritoryRenderer { private resources: GroundTruthData | null = null; private ready = false; private initPromise: Promise | null = null; + private borderMode = 1; // Compute passes private computePasses: ComputePass[] = []; @@ -99,6 +100,8 @@ export class TerritoryRenderer { state, ); + this.resources.setBorderMode(this.borderMode); + // Upload terrain data and params (terrain colors will be computed on GPU) this.resources.uploadTerrainData(); this.resources.uploadTerrainParams(); @@ -228,6 +231,7 @@ export class TerritoryRenderer { } setBorderMode(mode: number): void { + this.borderMode = mode; if (!this.resources) { return; } diff --git a/src/client/graphics/webgpu/shaders/render/territory.wgsl b/src/client/graphics/webgpu/shaders/render/territory.wgsl index 5064c0481..9f89903c7 100644 --- a/src/client/graphics/webgpu/shaders/render/territory.wgsl +++ b/src/client/graphics/webgpu/shaders/render/territory.wgsl @@ -113,20 +113,26 @@ fn fsMain(@builtin(position) pos: vec4f) -> @location(0) vec4f { if (dist < 1e8) { let pxPerTile = max(viewScale, 0.001); let aaTiles = 1.0 / pxPerTile; - let thicknessPx = select(1.0, 2.5, borderMode > 1.5); + + // Mode 1: thin black border. + // Mode 2: thicker black border + obvious tinted glow. + let isGlow = borderMode > 1.5; + let thicknessPx = select(1.0, 3.0, isGlow); let thicknessTiles = thicknessPx / pxPerTile; let line = 1.0 - smoothstep(thicknessTiles, thicknessTiles + aaTiles, dist); outColor = vec4f( - mix(outColor.rgb, vec3f(0.0, 0.0, 0.0), clamp(line * 0.9, 0.0, 0.9)), + mix(outColor.rgb, vec3f(0.0, 0.0, 0.0), clamp(line * 0.95, 0.0, 0.95)), outColor.a, ); - if (borderMode > 1.5) { - let glowTiles = (thicknessPx * 3.0) / pxPerTile; - let glow = 1.0 - smoothstep(glowTiles, glowTiles + aaTiles * 2.0, dist); + if (isGlow) { + let glowTiles = (thicknessPx * 5.0) / pxPerTile; + let glow = 1.0 - smoothstep(glowTiles, glowTiles + aaTiles * 3.0, dist); + let ownerRgb = textureLoad(paletteTex, vec2i(i32(owner) + 10, 0), 0).rgb; + let glowColor = mix(vec3f(1.0, 1.0, 1.0), ownerRgb, 0.85); outColor = vec4f( - mix(outColor.rgb, vec3f(1.0, 1.0, 1.0), clamp(glow * 0.12, 0.0, 0.12)), + mix(outColor.rgb, glowColor, clamp(glow * 0.35, 0.0, 0.35)), outColor.a, ); }