diff --git a/src/client/graphics/layers/TerritoryLayer.ts b/src/client/graphics/layers/TerritoryLayer.ts
index ca84253f0..f2a2c93b5 100644
--- a/src/client/graphics/layers/TerritoryLayer.ts
+++ b/src/client/graphics/layers/TerritoryLayer.ts
@@ -11,6 +11,14 @@ import {
} from "../../InputHandler";
import { FrameProfiler } from "../FrameProfiler";
import { TransformHandler } from "../TransformHandler";
+import {
+ buildTerritoryPostSmoothingParams,
+ readTerritoryPostSmoothingId,
+} from "../webgpu/render/TerritoryPostSmoothingRegistry";
+import {
+ buildTerritoryPreSmoothingParams,
+ readTerritoryPreSmoothingId,
+} from "../webgpu/render/TerritoryPreSmoothingRegistry";
import {
buildTerritoryShaderParams,
readTerritoryShaderId,
@@ -36,6 +44,8 @@ export class TerritoryLayer implements Layer {
private lastPaletteSignature: string | null = null;
private lastDefensePostsSignature: string | null = null;
private lastTerritoryShaderSignature: string | null = null;
+ private lastPreSmoothingSignature: string | null = null;
+ private lastPostSmoothingSignature: string | null = null;
private lastMousePosition: { x: number; y: number } | null = null;
private hoveredOwnerSmallId: number | null = null;
@@ -78,6 +88,7 @@ export class TerritoryLayer implements Layer {
this.refreshPaletteIfNeeded();
this.refreshDefensePostsIfNeeded();
this.applyTerritoryShaderSettings();
+ this.applyTerritorySmoothingSettings();
const updatedTiles = this.game.recentlyUpdatedTiles();
for (let i = 0; i < updatedTiles.length; i++) {
@@ -114,6 +125,7 @@ export class TerritoryLayer implements Layer {
this.territoryRenderer.setAlternativeView(this.alternativeView);
this.territoryRenderer.setHighlightedOwnerId(this.hoveredOwnerSmallId);
this.applyTerritoryShaderSettings(true);
+ this.applyTerritorySmoothingSettings(true);
this.territoryRenderer.markAllDirty();
this.territoryRenderer.refreshPalette();
this.lastPaletteSignature = this.computePaletteSignature();
@@ -143,6 +155,7 @@ export class TerritoryLayer implements Layer {
// Apply user settings even while the game is paused (settings modal).
this.applyTerritoryShaderSettings();
+ this.applyTerritorySmoothingSettings();
this.ensureTerritoryCanvasAttached(context.canvas);
this.updateHoverHighlight();
@@ -322,6 +335,42 @@ export class TerritoryLayer implements Layer {
this.territoryRenderer.setTerritoryShaderParams(params0, params1);
}
+ private applyTerritorySmoothingSettings(force: boolean = false) {
+ if (!this.territoryRenderer) {
+ return;
+ }
+
+ const preId = readTerritoryPreSmoothingId(this.userSettings);
+ const preParams = buildTerritoryPreSmoothingParams(
+ this.userSettings,
+ preId,
+ );
+ const preSignature = `${preId}:${Array.from(preParams.params0).join(",")}`;
+ if (force || preSignature !== this.lastPreSmoothingSignature) {
+ this.lastPreSmoothingSignature = preSignature;
+ this.territoryRenderer.setPreSmoothing(
+ preParams.enabled,
+ preParams.shaderPath,
+ preParams.params0,
+ );
+ }
+
+ const postId = readTerritoryPostSmoothingId(this.userSettings);
+ const postParams = buildTerritoryPostSmoothingParams(
+ this.userSettings,
+ postId,
+ );
+ const postSignature = `${postId}:${Array.from(postParams.params0).join(",")}`;
+ if (force || postSignature !== this.lastPostSmoothingSignature) {
+ this.lastPostSmoothingSignature = postSignature;
+ this.territoryRenderer.setPostSmoothing(
+ postParams.enabled,
+ postParams.shaderPath,
+ postParams.params0,
+ );
+ }
+ }
+
private computeDefensePostsSignature(): string {
// Active + completed posts only.
const parts: string[] = [];
diff --git a/src/client/graphics/layers/WebGPUDebugOverlay.ts b/src/client/graphics/layers/WebGPUDebugOverlay.ts
index 8d9619ab1..cf60eee5a 100644
--- a/src/client/graphics/layers/WebGPUDebugOverlay.ts
+++ b/src/client/graphics/layers/WebGPUDebugOverlay.ts
@@ -4,6 +4,18 @@ import { live } from "lit/directives/live.js";
import { EventBus } from "../../../core/EventBus";
import { UserSettings } from "../../../core/game/UserSettings";
import { WebGPUComputeMetricsEvent } from "../../InputHandler";
+import {
+ TERRITORY_POST_SMOOTHING,
+ TERRITORY_POST_SMOOTHING_KEY,
+ territoryPostSmoothingIdFromInt,
+ territoryPostSmoothingIntFromId,
+} from "../webgpu/render/TerritoryPostSmoothingRegistry";
+import {
+ TERRITORY_PRE_SMOOTHING,
+ TERRITORY_PRE_SMOOTHING_KEY,
+ territoryPreSmoothingIdFromInt,
+ territoryPreSmoothingIntFromId,
+} from "../webgpu/render/TerritoryPreSmoothingRegistry";
import {
TERRITORY_SHADER_KEY,
TERRITORY_SHADERS,
@@ -89,6 +101,15 @@ export class WebGPUDebugOverlay extends LitElement implements Layer {
user-select: none;
}
+ .sectionTitle {
+ margin-top: 10px;
+ font-weight: 700;
+ letter-spacing: 0.02em;
+ color: rgba(255, 255, 255, 0.85);
+ text-transform: uppercase;
+ font-size: 11px;
+ }
+
select,
input[type="range"] {
width: 170px;
@@ -165,6 +186,32 @@ export class WebGPUDebugOverlay extends LitElement implements Layer {
this.requestUpdate();
}
+ private selectedPreSmoothingId() {
+ const selected = this.userSettings.getInt(TERRITORY_PRE_SMOOTHING_KEY, 0);
+ return territoryPreSmoothingIdFromInt(selected);
+ }
+
+ private setSelectedPreSmoothingId(id: "off" | "dissolve" | "budget") {
+ this.userSettings.setInt(
+ TERRITORY_PRE_SMOOTHING_KEY,
+ territoryPreSmoothingIntFromId(id),
+ );
+ this.requestUpdate();
+ }
+
+ private selectedPostSmoothingId() {
+ const selected = this.userSettings.getInt(TERRITORY_POST_SMOOTHING_KEY, 0);
+ return territoryPostSmoothingIdFromInt(selected);
+ }
+
+ private setSelectedPostSmoothingId(id: "off" | "fade" | "dissolve") {
+ this.userSettings.setInt(
+ TERRITORY_POST_SMOOTHING_KEY,
+ territoryPostSmoothingIntFromId(id),
+ );
+ this.requestUpdate();
+ }
+
private renderOptionControl(
option: (typeof TERRITORY_SHADERS)[number]["options"][number],
) {
@@ -242,6 +289,14 @@ export class WebGPUDebugOverlay extends LitElement implements Layer {
const shaderId = this.selectedShaderId();
const shader =
TERRITORY_SHADERS.find((s) => s.id === shaderId) ?? TERRITORY_SHADERS[0];
+ const preId = this.selectedPreSmoothingId();
+ const pre =
+ TERRITORY_PRE_SMOOTHING.find((s) => s.id === preId) ??
+ TERRITORY_PRE_SMOOTHING[0];
+ const postId = this.selectedPostSmoothingId();
+ const post =
+ TERRITORY_POST_SMOOTHING.find((s) => s.id === postId) ??
+ TERRITORY_POST_SMOOTHING[0];
return html`
@@ -280,6 +335,58 @@ export class WebGPUDebugOverlay extends LitElement implements Layer {
${shader.options.map((opt) => this.renderOptionControl(opt))}
+
+ Temporal
+
+
+
Post Compute
+
+
+
Post Render
+
+