@plasius/gpu-shared 0.1.11 → 0.1.14

package/src/showcase-runtime.js

@@ -1,43 +1,17 @@
-import {
-  clothGarmentKinds,
-  clothProfileNames,
-  createClothRepresentationPlan,
-  selectClothRepresentationBand,
-} from "@plasius/gpu-cloth";
-import {
-  fluidBodyKinds,
-  fluidProfileNames,
-  createFluidContinuityEnvelope,
-  createFluidRepresentationPlan,
-  selectFluidRepresentationBand,
-} from "@plasius/gpu-fluid";
-import {
-  createLightingBandPlan,
-  defaultLightingProfile,
-  getLightingProfile,
-  lightingDistanceBands,
-} from "@plasius/gpu-lighting";
-import {
-  createDeviceProfile,
-  createGpuPerformanceGovernor,
-  createQualityLadderAdapter,
-} from "@plasius/gpu-performance";
-import { createGpuDebugSession } from "@plasius/gpu-debug";
-import {
-  createPhysicsSimulationPlan,
-  createPhysicsWorldSnapshot,
-  defaultPhysicsWorkerProfile,
-  getPhysicsWorkerManifest,
-} from "@plasius/gpu-physics/browser";
-
 import { resolveShowcaseAssetUrl } from "./asset-url.js";
 import { loadGltfModel } from "./gltf-loader.js";
+import { GPU_SHOWCASE_REALISTIC_MODELS_FEATURE } from "./feature-flags.js";
+import {
+  createGpuSharedTranslator,
+  gpuSharedTranslationKeys,
+} from "./i18n.js";
 
 const STYLE_ID = "plasius-shared-3d-showcase-style";
 const ROOT_CLASS = "plasius-showcase-root";
-const DEFAULT_TITLE = "Flag by the Sea";
-const DEFAULT_SUBTITLE =
-  "Shared 3D validation scene using GLTF ships, cloth, fluid continuity, adaptive performance, and telemetry.";
+const CAPTURE_CLASS = "plasius-showcase-root--capture";
+const DEFAULT_CANVAS_WIDTH = 1280;
+const DEFAULT_CANVAS_HEIGHT = 720;
+const CAPTURE_CANVAS_PIXEL_BUDGET = 1920 * 1080;
 const SHIP_SCALE = 1.1;
 const HARBOR_BOUNDS = Object.freeze({
   minX: -11.2,
@@ -54,42 +28,848 @@ const CAMERA_PRESETS = Object.freeze({
   performance: Object.freeze({ yaw: -0.65, pitch: 0.36, distance: 24, target: [0, 2.2, 0] }),
   debug: Object.freeze({ yaw: -0.7, pitch: 0.32, distance: 24, target: [0, 2.2, 0] }),
 });
-export const showcaseFocusModes = Object.freeze(Object.keys(CAMERA_PRESETS));
 
-const SCENE_NOTES = Object.freeze([
-  "Ships are loaded from a GLTF asset and carry mass, damping, restitution, and hull extents from node extras.",
-  "Moonlight sets the cold ambient read while deck lanterns and harbor torches provide warm local contrast.",
-  "Cloth and fluid continuity stay coherent across near, mid, far, and horizon bands even in the darker night palette.",
-  "Performance pressure reduces visual detail before mass-weighted authoritative collision motion is touched.",
+const FALLBACK_LIGHTING_DISTANCE_BANDS = Object.freeze([
+  Object.freeze({
+    band: "near",
+    primaryShadowSource: "ray-traced-primary",
+    rtParticipation: Object.freeze({
+      reflections: "full",
+      globalIllumination: "high",
+      directShadows: "premium",
+    }),
+    updateCadenceDivisor: 1,
+  }),
+  Object.freeze({
+    band: "mid",
+    primaryShadowSource: "ray-traced-secondary",
+    rtParticipation: Object.freeze({
+      reflections: "medium",
+      globalIllumination: "medium",
+      directShadows: "selective",
+    }),
+    updateCadenceDivisor: 2,
+  }),
+  Object.freeze({
+    band: "far",
+    primaryShadowSource: "baked",
+    rtParticipation: Object.freeze({
+      reflections: "low",
+      globalIllumination: "low",
+      directShadows: "none",
+    }),
+    updateCadenceDivisor: 4,
+  }),
+  Object.freeze({
+    band: "horizon",
+    primaryShadowSource: "impression",
+    rtParticipation: Object.freeze({
+      reflections: "off",
+      globalIllumination: "off",
+      directShadows: "none",
+    }),
+    updateCadenceDivisor: 8,
+  }),
 ]);
-
-const UNIT_BOX_MESH = Object.freeze({
-  positions: Object.freeze([
-    -0.5, -0.5, -0.5,
-     0.5, -0.5, -0.5,
-     0.5, 0.5, -0.5,
-    -0.5, 0.5, -0.5,
-    -0.5, -0.5, 0.5,
-     0.5, -0.5, 0.5,
-     0.5, 0.5, 0.5,
-    -0.5, 0.5, 0.5,
+const FALLBACK_LIGHTING_PROFILE = "cinematic";
+const FALLBACK_PHYSICS_PROFILE = "cinematic";
+const FALLBACK_PERFORMANCE_LEVELS = Object.freeze({
+  fluid: Object.freeze([
+    Object.freeze({
+      id: "low",
+      config: Object.freeze({ nearResolution: 10, midResolution: 6, splashCount: 10 }),
+      estimatedCostMs: 0.8,
+    }),
+    Object.freeze({
+      id: "medium",
+      config: Object.freeze({ nearResolution: 16, midResolution: 8, splashCount: 18 }),
+      estimatedCostMs: 1.4,
+    }),
+    Object.freeze({
+      id: "high",
+      config: Object.freeze({ nearResolution: 24, midResolution: 12, splashCount: 28 }),
+      estimatedCostMs: 2.4,
+    }),
   ]),
-  indices: Object.freeze([
-    0, 1, 2, 0, 2, 3,
-    5, 4, 7, 5, 7, 6,
-    4, 0, 3, 4, 3, 7,
-    1, 5, 6, 1, 6, 2,
-    3, 2, 6, 3, 6, 7,
-    4, 5, 1, 4, 1, 0,
+  cloth: Object.freeze([
+    Object.freeze({
+      id: "low",
+      config: Object.freeze({ cols: 10, rows: 7 }),
+      estimatedCostMs: 0.7,
+    }),
+    Object.freeze({
+      id: "medium",
+      config: Object.freeze({ cols: 16, rows: 11 }),
+      estimatedCostMs: 1.3,
+    }),
+    Object.freeze({
+      id: "high",
+      config: Object.freeze({ cols: 24, rows: 16 }),
+      estimatedCostMs: 2.1,
+    }),
+  ]),
+  lighting: Object.freeze([
+    Object.freeze({
+      id: "low",
+      config: Object.freeze({ shadowStrength: 0.18, reflectionStrength: 0.08 }),
+      estimatedCostMs: 0.5,
+    }),
+    Object.freeze({
+      id: "medium",
+      config: Object.freeze({ shadowStrength: 0.34, reflectionStrength: 0.16 }),
+      estimatedCostMs: 1.0,
+    }),
+    Object.freeze({
+      id: "high",
+      config: Object.freeze({ shadowStrength: 0.5, reflectionStrength: 0.24 }),
+      estimatedCostMs: 1.8,
+    }),
   ]),
 });
 
+function createFallbackClothFeatureModule() {
+  const fallback = createFallbackClothFeatureAdapters();
+  return {
+    clothGarmentKinds: fallback.garmentKinds,
+    clothProfileNames: fallback.profileNames,
+    createClothRepresentationPlan: fallback.createPlan,
+    selectClothRepresentationBand: fallback.selectBand,
+  };
+}
+
+function createFallbackFluidFeatureModule() {
+  const fallback = createFallbackFluidFeatureAdapters();
+  return {
+    fluidBodyKinds: fallback.bodyKinds,
+    fluidProfileNames: fallback.profileNames,
+    createFluidContinuityEnvelope: fallback.createContinuityEnvelope,
+    createFluidRepresentationPlan: fallback.createPlan,
+    selectFluidRepresentationBand: fallback.selectBand,
+  };
+}
+
+function createFallbackLightingFeatureModule() {
+  return {
+    createLightingBandPlan({ profile = FALLBACK_LIGHTING_PROFILE, importance = "high" } = {}) {
+      const defaultPlan = {
+        profile,
+        importance,
+        bands: FALLBACK_LIGHTING_DISTANCE_BANDS,
+      };
+      return defaultPlan;
+    },
+    defaultLightingProfile: FALLBACK_LIGHTING_PROFILE,
+    getLightingProfile(profile = FALLBACK_LIGHTING_PROFILE) {
+      return {
+        name: profile,
+        bands: FALLBACK_LIGHTING_DISTANCE_BANDS,
+      };
+    },
+    lightingDistanceBands: FALLBACK_LIGHTING_DISTANCE_BANDS,
+  };
+}
+
+function createFallbackPerformanceQualityState(levels = [], initialLevel = "high", profile = "") {
+  const fallbackLevels = levels.length ? levels : FALLBACK_PERFORMANCE_LEVELS[profile] ?? [];
+  const resolvedLevels = fallbackLevels.map((entry) => ({
+    id: String(entry?.id ?? "high"),
+    config: entry?.config ?? {},
+    estimatedCostMs: Number.isFinite(Number(entry?.estimatedCostMs))
+      ? Number(entry.estimatedCostMs)
+      : 1.0,
+  }));
+  if (resolvedLevels.length === 0) {
+    return {
+      module: {
+        id: "high",
+        config: Object.freeze({}),
+        estimatedCostMs: 1.0,
+      },
+      getSnapshot() {
+        return {
+          currentLevel: {
+            id: "high",
+            config: Object.freeze({}),
+            estimatedCostMs: 1.0,
+          },
+        };
+      },
+      id: "high",
+    };
+  }
+  const initial = resolvedLevels.find((entry) => entry.id === initialLevel) ?? resolvedLevels[0];
+  return {
+    id: initial.id,
+    getSnapshot() {
+      return {
+        currentLevel: {
+          id: initial.id,
+          config: initial.config,
+          estimatedCostMs: initial.estimatedCostMs,
+        },
+      };
+    },
+  };
+}
+
+function createFallbackPerformanceFeatureModule() {
+  const moduleIds = new Set(["fluid-detail", "cloth-detail", "lighting-detail"]);
+
+  return {
+    createDeviceProfile(profile = {}) {
+      return {
+        deviceClass: "desktop",
+        mode: "flat",
+        refreshRateHz: Number.isFinite(profile?.refreshRateHz)
+          ? Number(profile.refreshRateHz)
+          : 60,
+        supportedFrameRates: Array.isArray(profile?.supportedFrameRates)
+          ? profile.supportedFrameRates
+          : [60, 90],
+        supportsWebGpu: true,
+      };
+    },
+    createQualityLadderAdapter({ id, domain, levels, initialLevel }) {
+      return {
+        id: String(id ?? ""),
+        domain,
+        ...createFallbackPerformanceQualityState(
+          domain === "fluid" ? FALLBACK_PERFORMANCE_LEVELS.fluid : domain === "cloth" ? FALLBACK_PERFORMANCE_LEVELS.cloth : FALLBACK_PERFORMANCE_LEVELS.lighting,
+          initialLevel,
+          domain
+        ),
+      };
+    },
+    createGpuPerformanceGovernor({ device, modules = [], adaptation = {} } = {}) {
+      let pressureLevel = "stable";
+      let frameSamples = 0;
+      let averageMs = 16.67;
+
+      const clamp = (next = 16.67) => (Number.isFinite(next) ? Math.max(1, next) : 16.67);
+      const target = Object.freeze({
+        targetFrameTimeMs: 16.67,
+        downgradeFrameTimeMs: clamp(adaptation?.degradeThresholdMs ?? 20),
+        upgradeFrameTimeMs: clamp(adaptation?.upgradeThresholdMs ?? 14),
+      });
+
+      return {
+        recordFrame({ frameTimeMs = averageMs } = {}) {
+          const sample = Number.isFinite(Number(frameTimeMs)) ? Number(frameTimeMs) : averageMs;
+          frameSamples += 1;
+          averageMs = clamp((averageMs * (frameSamples - 1) + sample) / frameSamples);
+          const fps = 1000 / averageMs;
+
+          pressureLevel =
+            sample > target.downgradeFrameTimeMs
+              ? "degrade"
+              : pressureLevel === "degrade" && sample <= target.upgradeFrameTimeMs
+                ? "stable"
+                : pressureLevel;
+
+          return {
+            pressureLevel,
+            metrics: {
+              fps,
+              averageFrameTimeMs: averageMs,
+            },
+            adjustments: pressureLevel === "degrade" ? [{ type: "capability-step-down" }] : [],
+          };
+        },
+        getTarget() {
+          return target;
+        },
+        getState() {
+          return {
+            modules: modules
+              .filter((entry) => entry != null && typeof entry.id === "string" && moduleIds.has(entry.id))
+              .map((entry) => ({
+                isAtMaximum: pressureLevel === "stable",
+              })),
+          };
+        },
+      };
+    },
+  };
+}
+
+function createFallbackDebugFeatureModule() {
+  let queueSamples = 0;
+  let queuePeakDepth = 0;
+  let readyLaneSamples = 0;
+  let readyLanePeakDepth = 0;
+  let dispatchSamples = 0;
+  let dispatchDurationTotal = 0;
+  let dependencyUnlockSamples = 0;
+  let dependencyUnlockCount = 0;
+  let pipelineSamples = 0;
+  let pipelineAgeTotal = 0;
+  let frameSamples = 0;
+  let frameTimeTotal = 0;
+  let gpuBusyTotal = 0;
+  let frameDroppedSamples = 0;
+  let memoryTotalBytes = 0;
+
+  function ensureNumber(value, fallback = 0) {
+    const asNumber = Number(value);
+    return Number.isFinite(asNumber) ? asNumber : fallback;
+  }
+
+  function createDebugSession({ adapter } = {}) {
+    const memoryHint = Number.isFinite(Number(adapter?.memoryCapacityHintBytes))
+      ? Number(adapter.memoryCapacityHintBytes)
+      : 0;
+
+    memoryTotalBytes = Math.max(0, memoryHint);
+
+    return {
+      trackAllocation({ sizeBytes = 0 } = {}) {
+        memoryTotalBytes += ensureNumber(sizeBytes);
+      },
+      recordQueue({ depth = 0 } = {}) {
+        queueSamples += 1;
+        queuePeakDepth = Math.max(queuePeakDepth, ensureNumber(depth, 0));
+      },
+      recordReadyLane({ depth = 0 } = {}) {
+        readyLaneSamples += 1;
+        readyLanePeakDepth = Math.max(readyLanePeakDepth, ensureNumber(depth, 0));
+      },
+      recordDispatch({ durationMs = 0 } = {}) {
+        dispatchSamples += 1;
+        dispatchDurationTotal += ensureNumber(durationMs);
+      },
+      recordDependencyUnlock({ unlockCount = 0 } = {}) {
+        dependencyUnlockSamples += 1;
+        dependencyUnlockCount += ensureNumber(unlockCount);
+      },
+      recordPipelinePhase({ snapshotAgeMs = 0 } = {}) {
+        pipelineSamples += 1;
+        pipelineAgeTotal += ensureNumber(snapshotAgeMs);
+      },
+      recordFrame({
+        frameTimeMs = 16.67,
+        targetFrameTimeMs = 16.67,
+        gpuBusyMs = 0,
+        dropped = false,
+      } = {}) {
+        frameSamples += 1;
+        frameTimeTotal += ensureNumber(frameTimeMs);
+        gpuBusyTotal += ensureNumber(gpuBusyMs);
+        frameDroppedSamples += dropped === true ? 1 : 0;
+        targetFrameTimeMs;
+      },
+      getSnapshot() {
+        const queueAverageDepth = queueSamples > 0 ? queuePeakDepth / queueSamples : 0;
+        return {
+          frames: {
+            sampleCount: frameSamples,
+            averageFrameTimeMs: frameSamples > 0 ? frameTimeTotal / frameSamples : 0,
+            averageGpuBusyMs: frameSamples > 0 ? gpuBusyTotal / frameSamples : 0,
+            droppedCount: frameDroppedSamples,
+          },
+          queues: {
+            sampleCount: queueSamples,
+            peakDepth: queuePeakDepth,
+            averageDepth: queueAverageDepth,
+          },
+          dispatch: {
+            sampleCount: dispatchSamples,
+            averageDurationMs: dispatchSamples > 0 ? dispatchDurationTotal / dispatchSamples : 0,
+          },
+          dag: {
+            peakReadyLaneDepth: readyLanePeakDepth,
+            totalUnlockCount: dependencyUnlockCount,
+            unlockSamples: dependencyUnlockSamples,
+          },
+          pipeline: {
+            sampleCount: pipelineSamples,
+            averageSnapshotAgeMs: pipelineSamples > 0 ? pipelineAgeTotal / pipelineSamples : 0,
+          },
+          memory: {
+            totalTrackedBytes: memoryTotalBytes,
+          },
+        };
+      },
+    };
+  }
+
+  return {
+    createGpuDebugSession({ adapter } = {}) {
+      return createDebugSession({ adapter });
+    },
+    createSession({ adapter } = {}) {
+      return createDebugSession({ adapter });
+    },
+  };
+}
+
+function createFallbackPhysicsFeatureModule() {
+  const fallbackPlan = Object.freeze({
+    snapshotStageId: "baseline",
+    stageOrder: Object.freeze(["authoritative"]),
+    secondarySimulationStageIds: Object.freeze(["visual"]),
+  });
+  return {
+    createPhysicsSimulationPlan() {
+      return {
+        snapshotStageId: "baseline",
+        stageOrder: fallbackPlan.stageOrder,
+        secondarySimulationStageIds: fallbackPlan.secondarySimulationStageIds,
+      };
+    },
+    createPhysicsWorldSnapshot(input = {}) {
+      return {
+        stage: "baseline",
+        stability: "stable",
+        stageId: fallbackPlan.snapshotStageId,
+        metadata: input.metadata ?? {},
+        bodyCount: input.bodyCount ?? 0,
+        dynamicBodyCount: input.dynamicBodyCount ?? 0,
+        contactCount: input.contactCount ?? 0,
+        snapshotStageId: fallbackPlan.snapshotStageId,
+      };
+    },
+    defaultPhysicsWorkerProfile: FALLBACK_PHYSICS_PROFILE,
+    getPhysicsWorkerManifest() {
+      return {
+        jobs: [
+          Object.freeze({
+            worker: Object.freeze({ authority: "authoritative", jobType: "simulate" }),
+          }),
+        ],
+        suggestedAllocationIds: Object.freeze(["physics-workspace"]),
+      };
+    },
+  };
+}
+
+const SHOWCASE_FEATURE_LOADERS = Object.freeze({
+  cloth: () => Promise.resolve(createFallbackClothFeatureModule()),
+  fluid: () => Promise.resolve(createFallbackFluidFeatureModule()),
+  lighting: () => Promise.resolve(createFallbackLightingFeatureModule()),
+  performance: () => Promise.resolve(createFallbackPerformanceFeatureModule()),
+  debug: () => Promise.resolve(createFallbackDebugFeatureModule()),
+  physics: () => Promise.resolve(createFallbackPhysicsFeatureModule()),
+});
+
+const DEFAULT_FLUID_BAND_THRESHOLDS = Object.freeze({
+  near: Object.freeze({ minDistance: 0, maxDistance: 22 }),
+  mid: Object.freeze({ minDistance: 22, maxDistance: 90 }),
+  far: Object.freeze({ minDistance: 90, maxDistance: 260 }),
+  horizon: Object.freeze({ minDistance: 260, maxDistance: Number.POSITIVE_INFINITY }),
+});
+
+const DEFAULT_CLOTH_BAND_THRESHOLDS = Object.freeze({
+  near: Object.freeze({ minDistance: 0, maxDistance: 24 }),
+  mid: Object.freeze({ minDistance: 24, maxDistance: 86 }),
+  far: Object.freeze({ minDistance: 86, maxDistance: 190 }),
+  horizon: Object.freeze({ minDistance: 190, maxDistance: Number.POSITIVE_INFINITY }),
+});
+
+function resolveFluidBandSelection(distance, thresholds = DEFAULT_FLUID_BAND_THRESHOLDS) {
+  if (!Number.isFinite(distance)) {
+    return "horizon";
+  }
+  if (distance <= (thresholds.near?.maxDistance ?? DEFAULT_FLUID_BAND_THRESHOLDS.near.maxDistance)) {
+    return "near";
+  }
+  if (distance <= (thresholds.mid?.maxDistance ?? DEFAULT_FLUID_BAND_THRESHOLDS.mid.maxDistance)) {
+    return "mid";
+  }
+  if (distance <= (thresholds.far?.maxDistance ?? DEFAULT_FLUID_BAND_THRESHOLDS.far.maxDistance)) {
+    return "far";
+  }
+  return "horizon";
+}
+
+function createFallbackFluidFeatureAdapters() {
+  const defaultContinuityBand = Object.freeze({
+    amplitudeFloor: 0.22,
+    frequencyFloor: 0.05,
+    blendWindowMeters: 14,
+    retainFoamHistory: true,
+    retainDirectionality: true,
+  });
+  return {
+    bodyKinds: Object.freeze(["ocean"]),
+    profileNames: Object.freeze(["cinematic"]),
+    createContinuityEnvelope() {
+      return Object.freeze({
+        bands: Object.freeze({
+          near: defaultContinuityBand,
+          mid: Object.freeze({
+            ...defaultContinuityBand,
+            blendWindowMeters: 22,
+            amplitudeFloor: 0.17,
+          }),
+          far: Object.freeze({
+            ...defaultContinuityBand,
+            blendWindowMeters: 34,
+            amplitudeFloor: 0.12,
+          }),
+          horizon: Object.freeze({
+            ...defaultContinuityBand,
+            blendWindowMeters: 42,
+            amplitudeFloor: 0.09,
+          }),
+        }),
+      });
+    },
+    createPlan({ fluidBodyId = "harbor", kind = "ocean", profile = "cinematic" }) {
+      return Object.freeze({
+        fluidBodyId,
+        kind,
+        profile,
+        thresholds: DEFAULT_FLUID_BAND_THRESHOLDS,
+        representations: Object.freeze([
+          Object.freeze({
+            band: "near",
+            output: "raster",
+            rtParticipation: "full",
+            shading: Object.freeze({ refraction: 0.14, reflectionMode: "full", caustics: true }),
+          }),
+          Object.freeze({
+            band: "mid",
+            output: "raster",
+            rtParticipation: "reduced",
+            shading: Object.freeze({ reflectionMode: "partial" }),
+          }),
+          Object.freeze({
+            band: "far",
+            output: "raster",
+            rtParticipation: "low",
+            shading: Object.freeze({ reflectionMode: "partial" }),
+          }),
+          Object.freeze({
+            band: "horizon",
+            output: "coarse",
+            rtParticipation: "off",
+            shading: Object.freeze({ reflectionMode: "reduced" }),
+          }),
+        ]),
+      });
+    },
+    selectBand(distance, thresholds = DEFAULT_FLUID_BAND_THRESHOLDS) {
+      return resolveFluidBandSelection(distance, thresholds);
+    },
+  };
+}
+
+function createFallbackClothFeatureAdapters() {
+  const defaultContinuity = Object.freeze({
+    amplitudeFloor: 0.22,
+    wrinkleFloor: 0.32,
+    damping: 0.58,
+    creaseBias: 0.14,
+  });
+  return {
+    garmentKinds: Object.freeze(["flag"]),
+    profileNames: Object.freeze(["cinematic"]),
+    createPlan() {
+      return Object.freeze({
+        thresholds: DEFAULT_CLOTH_BAND_THRESHOLDS,
+        representations: Object.freeze([
+          Object.freeze({
+            band: "near",
+            continuity: defaultContinuity,
+          }),
+          Object.freeze({
+            band: "mid",
+            continuity: defaultContinuity,
+          }),
+          Object.freeze({
+            band: "far",
+            continuity: defaultContinuity,
+          }),
+          Object.freeze({
+            band: "horizon",
+            continuity: defaultContinuity,
+          }),
+        ]),
+      });
+    },
+    selectBand(distance, thresholds = DEFAULT_CLOTH_BAND_THRESHOLDS) {
+      if (!Number.isFinite(distance)) {
+        return "horizon";
+      }
+      if (distance <= (thresholds.near?.maxDistance ?? DEFAULT_CLOTH_BAND_THRESHOLDS.near.maxDistance)) {
+        return "near";
+      }
+      if (distance <= (thresholds.mid?.maxDistance ?? DEFAULT_CLOTH_BAND_THRESHOLDS.mid.maxDistance)) {
+        return "mid";
+      }
+      if (distance <= (thresholds.far?.maxDistance ?? DEFAULT_CLOTH_BAND_THRESHOLDS.far.maxDistance)) {
+        return "far";
+      }
+      return "horizon";
+    },
+  };
+}
+
+function normalizeClothFeatureAdapters(clothFeatures) {
+  const fallback = createFallbackClothFeatureAdapters();
+  if (clothFeatures == null || typeof clothFeatures !== "object") {
+    return fallback;
+  }
+
+  return {
+    garmentKinds:
+      Array.isArray(clothFeatures.garmentKinds) && clothFeatures.garmentKinds.length > 0
+        ? clothFeatures.garmentKinds
+        : fallback.garmentKinds,
+    profileNames:
+      Array.isArray(clothFeatures.profileNames) && clothFeatures.profileNames.length > 0
+        ? clothFeatures.profileNames
+        : fallback.profileNames,
+    createPlan: assertRequiredFunction(clothFeatures, "cloth", "createPlan"),
+    selectBand: assertRequiredFunction(clothFeatures, "cloth", "selectBand"),
+  };
+}
+
+function normalizeFluidFeatureAdapters(fluidFeatures) {
+  const fallback = createFallbackFluidFeatureAdapters();
+  if (fluidFeatures == null || typeof fluidFeatures !== "object") {
+    return fallback;
+  }
+
+  return {
+    bodyKinds:
+      Array.isArray(fluidFeatures.bodyKinds) && fluidFeatures.bodyKinds.length > 0
+        ? fluidFeatures.bodyKinds
+        : fallback.bodyKinds,
+    profileNames:
+      Array.isArray(fluidFeatures.profileNames) && fluidFeatures.profileNames.length > 0
+        ? fluidFeatures.profileNames
+        : fallback.profileNames,
+    createContinuityEnvelope: assertRequiredFunction(
+      fluidFeatures,
+      "fluid",
+      "createContinuityEnvelope"
+    ),
+    createPlan: assertRequiredFunction(fluidFeatures, "fluid", "createPlan"),
+    selectBand: assertRequiredFunction(fluidFeatures, "fluid", "selectBand"),
+  };
+}
+
+function assertRequiredFunction(module, featureLabel, exportName) {
+  const value = module?.[exportName];
+  if (typeof value !== "function") {
+    throw new Error(
+      `Showcase ${featureLabel} feature package must export "${exportName}" as a function.`
+    );
+  }
+  return value;
+}
+
+function assertRequiredArray(module, featureLabel, exportName) {
+  const value = module?.[exportName];
+  if (!Array.isArray(value)) {
+    throw new Error(
+      `Showcase ${featureLabel} feature package must export "${exportName}" as an array.`
+    );
+  }
+  return value;
+}
+
+async function loadShowcaseFeatureModule(featureLabel, loader) {
+  try {
+    const module = await loader();
+    if (module == null || typeof module !== "object") {
+      throw new Error("module is missing or not an object.");
+    }
+    return module;
+  } catch (error) {
+    const message = error?.message ?? String(error);
+    throw new Error(`Unable to load showcase ${featureLabel} feature package: ${message}`, {
+      cause: error,
+    });
+  }
+}
+
+function resolveShowcaseFeatureLoaders(options = {}) {
+  const overrides = options.__showcaseFeatureLoaders;
+  return {
+    cloth:
+      typeof overrides?.cloth === "function"
+        ? overrides.cloth
+        : SHOWCASE_FEATURE_LOADERS.cloth,
+    fluid:
+      typeof overrides?.fluid === "function"
+        ? overrides.fluid
+        : SHOWCASE_FEATURE_LOADERS.fluid,
+    lighting:
+      typeof overrides?.lighting === "function"
+        ? overrides.lighting
+        : SHOWCASE_FEATURE_LOADERS.lighting,
+    performance:
+      typeof overrides?.performance === "function"
+        ? overrides.performance
+        : SHOWCASE_FEATURE_LOADERS.performance,
+    debug:
+      typeof overrides?.debug === "function"
+        ? overrides.debug
+        : SHOWCASE_FEATURE_LOADERS.debug,
+    physics:
+      typeof overrides?.physics === "function"
+        ? overrides.physics
+        : SHOWCASE_FEATURE_LOADERS.physics,
+  };
+}
+
+async function resolveShowcaseFeatureAdapters(options = {}) {
+  const loaders = resolveShowcaseFeatureLoaders(options);
+  const [
+    clothModule,
+    fluidModule,
+    lightingModule,
+    performanceModule,
+    debugModule,
+    physicsModule,
+  ] = await Promise.all([
+    loadShowcaseFeatureModule("cloth", loaders.cloth),
+    loadShowcaseFeatureModule("fluid", loaders.fluid),
+    loadShowcaseFeatureModule("lighting", loaders.lighting),
+    loadShowcaseFeatureModule("performance", loaders.performance),
+    loadShowcaseFeatureModule("debug", loaders.debug),
+    loadShowcaseFeatureModule("physics", loaders.physics),
+  ]);
+
+  return {
+    cloth: {
+      garmentKinds: assertRequiredArray(clothModule, "cloth", "clothGarmentKinds"),
+      profileNames: assertRequiredArray(clothModule, "cloth", "clothProfileNames"),
+      createPlan: assertRequiredFunction(clothModule, "cloth", "createClothRepresentationPlan"),
+      selectBand: assertRequiredFunction(clothModule, "cloth", "selectClothRepresentationBand"),
+    },
+    fluid: {
+      bodyKinds: assertRequiredArray(fluidModule, "fluid", "fluidBodyKinds"),
+      profileNames: assertRequiredArray(fluidModule, "fluid", "fluidProfileNames"),
+      createContinuityEnvelope: assertRequiredFunction(
+        fluidModule,
+        "fluid",
+        "createFluidContinuityEnvelope"
+      ),
+      createPlan: assertRequiredFunction(fluidModule, "fluid", "createFluidRepresentationPlan"),
+      selectBand: assertRequiredFunction(fluidModule, "fluid", "selectFluidRepresentationBand"),
+    },
+    lighting: {
+      createBandPlan: assertRequiredFunction(lightingModule, "lighting", "createLightingBandPlan"),
+      defaultProfile: lightingModule.defaultLightingProfile,
+      getProfile: assertRequiredFunction(lightingModule, "lighting", "getLightingProfile"),
+      distanceBands: assertRequiredArray(lightingModule, "lighting", "lightingDistanceBands"),
+    },
+    performance: {
+      createDeviceProfile: assertRequiredFunction(
+        performanceModule,
+        "performance",
+        "createDeviceProfile"
+      ),
+      createGovernor: assertRequiredFunction(
+        performanceModule,
+        "performance",
+        "createGpuPerformanceGovernor"
+      ),
+      createQualityAdapter: assertRequiredFunction(
+        performanceModule,
+        "performance",
+        "createQualityLadderAdapter"
+      ),
+    },
+    debug: {
+      createSession: assertRequiredFunction(debugModule, "debug", "createGpuDebugSession"),
+    },
+    physics: {
+      createSimulationPlan: assertRequiredFunction(
+        physicsModule,
+        "physics",
+        "createPhysicsSimulationPlan"
+      ),
+      createWorldSnapshot: assertRequiredFunction(
+        physicsModule,
+        "physics",
+        "createPhysicsWorldSnapshot"
+      ),
+      defaultProfile: physicsModule.defaultPhysicsWorkerProfile,
+      getManifest: assertRequiredFunction(physicsModule, "physics", "getPhysicsWorkerManifest"),
+    },
+  };
+}
+
+export const showcaseFocusModes = Object.freeze(Object.keys(CAMERA_PRESETS));
+
+const FOCUS_MODE_TRANSLATION_KEYS = Object.freeze({
+  integrated: gpuSharedTranslationKeys.focusIntegrated,
+  lighting: gpuSharedTranslationKeys.focusLighting,
+  cloth: gpuSharedTranslationKeys.focusCloth,
+  fluid: gpuSharedTranslationKeys.focusFluid,
+  physics: gpuSharedTranslationKeys.focusPhysics,
+  performance: gpuSharedTranslationKeys.focusPerformance,
+  debug: gpuSharedTranslationKeys.focusDebug,
+});
+
+const SCENE_NOTE_KEYS = Object.freeze([
+  gpuSharedTranslationKeys.noteAssetLoading,
+  gpuSharedTranslationKeys.noteMoonlight,
+  gpuSharedTranslationKeys.noteContinuity,
+  gpuSharedTranslationKeys.notePerformance,
+]);
+
+const PHYSICS_SCENE_NOTE_KEYS = Object.freeze([
+  gpuSharedTranslationKeys.notePhysicsSnapshots,
+  gpuSharedTranslationKeys.notePhysicsCollisions,
+  gpuSharedTranslationKeys.notePhysicsLighting,
+]);
+
+const LEGACY_HARBOR_LAYOUT = Object.freeze([
+  Object.freeze({
+    position: Object.freeze({ x: -8.2, y: 1.1, z: -0.9 }),
+    rotationY: -0.16,
+    scale: 5.4,
+    color: { r: 0.32, g: 0.27, b: 0.23, a: 1 },
+    accent: 0.06,
+  }),
+  Object.freeze({
+    position: Object.freeze({ x: -5.7, y: 0.45, z: 1.4 }),
+    rotationY: -0.08,
+    scale: { x: 6.8, y: 0.3, z: 2.1 },
+    color: { r: 0.31, g: 0.31, b: 0.34, a: 1 },
+    accent: 0.04,
+  }),
+  Object.freeze({
+    position: Object.freeze({ x: -10.4, y: 0.28, z: 0.8 }),
+    rotationY: 0.22,
+    scale: { x: 1.2, y: 0.9, z: 1.2 },
+    color: { r: 0.31, g: 0.35, b: 0.39, a: 1 },
+    accent: 0.02,
+  }),
+]);
+
+const SHOWCASE_ENVIRONMENT_LAYOUT = Object.freeze([
+  Object.freeze({
+    assetKey: "harbor-dock",
+    position: Object.freeze({ x: -4.6, y: 0.16, z: 0.7 }),
+    rotationY: -0.08,
+    scale: 0.84,
+    accent: 0.04,
+  }),
+  Object.freeze({
+    assetKey: "lighthouse",
+    position: Object.freeze({ x: -9.8, y: 0, z: -0.58 }),
+    rotationY: 0.12,
+    scale: 0.56,
+    accent: 0.08,
+  }),
+]);
+
 const SHIP_LANTERNS = Object.freeze([
   Object.freeze({ x: 0.94, y: 1.54, z: 2.52, glow: 1 }),
   Object.freeze({ x: -0.9, y: 1.58, z: 2.44, glow: 0.92 }),
   Object.freeze({ x: 0.62, y: 1.42, z: -2.18, glow: 0.88 }),
   Object.freeze({ x: -0.58, y: 1.46, z: -2.04, glow: 0.84 }),
 ]);
+const CUTTER_LANTERNS = Object.freeze([
+  Object.freeze({ x: 0.42, y: 1.04, z: 1.18, glow: 0.94 }),
+  Object.freeze({ x: -0.42, y: 1.04, z: 1.12, glow: 0.88 }),
+]);
 
 const HARBOR_TORCHES = Object.freeze([
   Object.freeze({ x: -5.2, y: 1.25, z: 1.36, glow: 1.1 }),
@@ -128,6 +908,11 @@ function injectStyles() {
         radial-gradient(circle at 82% 18%, rgba(240, 188, 103, 0.08), transparent 18%),
         linear-gradient(180deg, #04101d 0%, #0b1930 42%, #081321 100%);
     }
+    .${ROOT_CLASS}.${CAPTURE_CLASS} {
+      min-height: 100vh;
+      overflow: hidden;
+      background: #030710;
+    }
     .${ROOT_CLASS},
     .${ROOT_CLASS} * {
       box-sizing: border-box;
@@ -207,6 +992,40 @@ function injectStyles() {
       border: 1px solid rgba(159, 185, 223, 0.12);
       background: linear-gradient(180deg, #071220 0%, #132440 42%, #10344b 42%, #05111d 100%);
     }
+    .${CAPTURE_CLASS} .plasius-demo {
+      width: 100vw;
+      height: 100vh;
+      padding: 0;
+      display: block;
+    }
+    .${CAPTURE_CLASS} .plasius-demo__hero,
+    .${CAPTURE_CLASS} .plasius-demo__toolbar,
+    .${CAPTURE_CLASS} .plasius-demo__legend,
+    .${CAPTURE_CLASS} .plasius-demo__sidebar,
+    .${CAPTURE_CLASS} .plasius-demo__footer {
+      display: none;
+    }
+    .${CAPTURE_CLASS} .plasius-demo__layout {
+      display: block;
+      height: 100%;
+    }
+    .${CAPTURE_CLASS} .plasius-demo__canvas-panel {
+      height: 100%;
+      padding: 0;
+      border: 0;
+      border-radius: 0;
+      background: transparent;
+      box-shadow: none;
+      backdrop-filter: none;
+    }
+    .${CAPTURE_CLASS} .plasius-demo__canvas {
+      width: 100%;
+      height: 100%;
+      aspect-ratio: auto;
+      border: 0;
+      border-radius: 0;
+      background: #030710;
+    }
     .plasius-demo__toolbar {
       position: absolute;
       top: 26px;
@@ -381,6 +1200,15 @@ function transformPoint(point, transform) {
   return addVec3(rotated, transform.position);
 }
 
+function transformDirection(direction, transform) {
+  const scale =
+    typeof transform.scale === "number"
+      ? { x: transform.scale, y: transform.scale, z: transform.scale }
+      : transform.scale;
+  const scaled = vec3(direction.x * scale.x, direction.y * scale.y, direction.z * scale.z);
+  return normalizeVec3(rotateY(scaled, transform.rotationY));
+}
+
 function projectPoint(point, camera, viewport) {
   const relative = subVec3(point, camera.eye);
   const viewX = dotVec3(relative, camera.right);
@@ -406,6 +1234,92 @@ function colorToRgba(color, alpha = 1) {
   return `rgba(${r}, ${g}, ${b}, ${clamp(alpha, 0, 1)})`;
 }
 
+function mixColor(a, b, t) {
+  return {
+    r: mix(a.r, b.r, t),
+    g: mix(a.g, b.g, t),
+    b: mix(a.b, b.b, t),
+    a: mix(a.a ?? 1, b.a ?? 1, t),
+  };
+}
+
+function multiplyColor(a, b) {
+  return {
+    r: a.r * b.r,
+    g: a.g * b.g,
+    b: a.b * b.b,
+    a: (a.a ?? 1) * (b.a ?? 1),
+  };
+}
+
+function createLegacyMeshPrimitive(mesh) {
+  return Object.freeze({
+    name: mesh.name ?? "legacy-mesh",
+    positions: mesh.positions,
+    indices: mesh.indices,
+    normals: null,
+    colors: null,
+    material: Object.freeze({
+      name: "legacy-material",
+      color: mesh.color ?? { r: 0.56, g: 0.33, b: 0.22, a: 1 },
+      roughness: 0.88,
+      metallic: 0.08,
+      emissive: Object.freeze({ r: 0, g: 0, b: 0 }),
+    }),
+  });
+}
+
+function isFeatureEnabled(featureFlags, featureName, fallback = true) {
+  const directValue =
+    typeof featureFlags?.[featureName] === "boolean"
+      ? featureFlags[featureName]
+      : featureFlags?.flags?.[featureName];
+  if (typeof directValue === "boolean") {
+    return directValue;
+  }
+
+  const enabledValue =
+    typeof featureFlags?.enabled?.[featureName] === "boolean"
+      ? featureFlags.enabled[featureName]
+      : undefined;
+  if (typeof enabledValue === "boolean") {
+    return enabledValue;
+  }
+
+  return fallback;
+}
+
+function getMeshPrimitives(mesh) {
+  return Array.isArray(mesh?.primitives) && mesh.primitives.length > 0
+    ? mesh.primitives
+    : [createLegacyMeshPrimitive(mesh)];
+}
+
+function tintPrimitiveColor(material, colorOverride) {
+  if (!colorOverride) {
+    return material.color;
+  }
+
+  const name = String(material.name ?? "").toLowerCase();
+  if (name.includes("sail") || name.includes("glass") || name.includes("roof")) {
+    return material.color;
+  }
+
+  const tintAmount = name.includes("hull")
+    ? 0.54
+    : name.includes("trim")
+      ? 0.22
+      : name.includes("deck")
+        ? 0.12
+        : 0;
+
+  if (tintAmount <= 0) {
+    return material.color;
+  }
+
+  return mixColor(material.color, multiplyColor(material.color, colorOverride), tintAmount);
+}
+
 function projectShadowPoint(point, lightDir, planeY) {
   const shadowDir = scaleVec3(lightDir, -1);
   if (Math.abs(shadowDir.y) < 0.0001) {
@@ -430,6 +1344,64 @@ function shadeColor(base, normal, lightDir, heightBias = 0, accent = 0) {
   };
 }
 
+function getMaterialSeed(materialName) {
+  let seed = 0;
+  for (let index = 0; index < materialName.length; index += 1) {
+    seed += materialName.charCodeAt(index) * (index + 1);
+  }
+  return seed;
+}
+
+function getMaterialDetailStrength(material, surfaceType) {
+  const name = String(material?.name ?? "").toLowerCase();
+  if (surfaceType === "water" || name.includes("glass")) {
+    return 0.018;
+  }
+  if (name.includes("wood") || name.includes("timber") || name.includes("plank")) {
+    return 0.13;
+  }
+  if (name.includes("stone") || name.includes("concrete") || name.includes("plaster")) {
+    return 0.1;
+  }
+  if (name.includes("roof") || name.includes("crate")) {
+    return 0.09;
+  }
+  if (name.includes("paint")) {
+    return 0.045;
+  }
+  if (name.includes("metal")) {
+    return 0.035;
+  }
+  return 0.04;
+}
+
+function applyMaterialDetail(color, material, worldCenter, normal, surfaceType) {
+  const materialName = String(material?.name ?? surfaceType ?? "material");
+  const detailStrength = getMaterialDetailStrength(material, surfaceType);
+  const sample =
+    worldCenter.x * 3.17 +
+    worldCenter.y * 5.29 +
+    worldCenter.z * 7.83 +
+    getMaterialSeed(materialName) * 0.013;
+  const grain = (pseudoRandom(sample) - 0.5) * detailStrength;
+  const lowerSurface = smoothstep(7.5, -0.8, worldCenter.y);
+  const verticalSurface = 1 - clamp(Math.abs(normal.y), 0, 1);
+  const materialLowerWear =
+    /stone|concrete|plaster|paint|wood|timber|plank|crate/.test(materialName.toLowerCase())
+      ? lowerSurface * verticalSurface * 0.055
+      : 0;
+  const wetlineWear =
+    surfaceType === "ship" && worldCenter.y < 0.72
+      ? smoothstep(0.72, -0.1, worldCenter.y) * 0.05
+      : 0;
+
+  return {
+    r: clamp(color.r * (1 + grain) - materialLowerWear - wetlineWear, 0, 1),
+    g: clamp(color.g * (1 + grain * 0.82) - materialLowerWear * 0.9 - wetlineWear, 0, 1),
+    b: clamp(color.b * (1 + grain * 0.62) - materialLowerWear * 0.68 - wetlineWear * 0.75, 0, 1),
+  };
+}
+
 function buildCamera(state, canvas) {
   const preset = CAMERA_PRESETS[state.focus] ?? CAMERA_PRESETS.integrated;
   const yaw = state.camera.yaw ?? preset.yaw;
@@ -455,50 +1427,170 @@ function buildCamera(state, canvas) {
   };
 }
 
-function buildTrianglesFromMesh(mesh, transform, baseColor, camera, viewport, triangles, accent = 0) {
-  for (let index = 0; index < mesh.indices.length; index += 3) {
-    const aIndex = mesh.indices[index] * 3;
-    const bIndex = mesh.indices[index + 1] * 3;
-    const cIndex = mesh.indices[index + 2] * 3;
+function buildTrianglesFromMesh(
+  mesh,
+  transform,
+  colorOverride,
+  camera,
+  viewport,
+  triangles,
+  options = {}
+) {
+  const primitives = getMeshPrimitives(mesh);
+  for (const primitive of primitives) {
+    const resolvedColor = tintPrimitiveColor(primitive.material, colorOverride);
+    for (let index = 0; index < primitive.indices.length; index += 3) {
+      const aIndex = primitive.indices[index] * 3;
+      const bIndex = primitive.indices[index + 1] * 3;
+      const cIndex = primitive.indices[index + 2] * 3;
+
+      const a = transformPoint(
+        vec3(
+          primitive.positions[aIndex],
+          primitive.positions[aIndex + 1],
+          primitive.positions[aIndex + 2]
+        ),
+        transform
+      );
+      const b = transformPoint(
+        vec3(
+          primitive.positions[bIndex],
+          primitive.positions[bIndex + 1],
+          primitive.positions[bIndex + 2]
+        ),
+        transform
+      );
+      const c = transformPoint(
+        vec3(
+          primitive.positions[cIndex],
+          primitive.positions[cIndex + 1],
+          primitive.positions[cIndex + 2]
+        ),
+        transform
+      );
 
-    const a = transformPoint(
-      vec3(mesh.positions[aIndex], mesh.positions[aIndex + 1], mesh.positions[aIndex + 2]),
-      transform
-    );
-    const b = transformPoint(
-      vec3(mesh.positions[bIndex], mesh.positions[bIndex + 1], mesh.positions[bIndex + 2]),
-      transform
-    );
-    const c = transformPoint(
-      vec3(mesh.positions[cIndex], mesh.positions[cIndex + 1], mesh.positions[cIndex + 2]),
-      transform
-    );
+      const ab = subVec3(b, a);
+      const ac = subVec3(c, a);
+      const faceNormal = normalizeVec3(crossVec3(ab, ac));
+      let normal = faceNormal;
+      if (Array.isArray(primitive.normals)) {
+        const aNormal = transformDirection(
+          vec3(
+            primitive.normals[aIndex],
+            primitive.normals[aIndex + 1],
+            primitive.normals[aIndex + 2]
+          ),
+          transform
+        );
+        const bNormal = transformDirection(
+          vec3(
+            primitive.normals[bIndex],
+            primitive.normals[bIndex + 1],
+            primitive.normals[bIndex + 2]
+          ),
+          transform
+        );
+        const cNormal = transformDirection(
+          vec3(
+            primitive.normals[cIndex],
+            primitive.normals[cIndex + 1],
+            primitive.normals[cIndex + 2]
+          ),
+          transform
+        );
+        normal = normalizeVec3(
+          scaleVec3(addVec3(addVec3(aNormal, bNormal), cNormal), 1 / 3)
+        );
+      }
 
-    const ab = subVec3(b, a);
-    const ac = subVec3(c, a);
-    const normal = normalizeVec3(crossVec3(ab, ac));
-    const viewDir = normalizeVec3(subVec3(camera.eye, a));
-    if (dotVec3(normal, viewDir) <= 0) {
-      continue;
-    }
+      const viewDir = normalizeVec3(subVec3(camera.eye, a));
+      if (dotVec3(faceNormal, viewDir) <= 0) {
+        continue;
+      }
 
-    const projected = [projectPoint(a, camera, viewport), projectPoint(b, camera, viewport), projectPoint(c, camera, viewport)];
-    if (projected.some((value) => value === null)) {
-      continue;
-    }
+      const projected = [
+        projectPoint(a, camera, viewport),
+        projectPoint(b, camera, viewport),
+        projectPoint(c, camera, viewport),
+      ];
+      if (projected.some((value) => value === null)) {
+        continue;
+      }
 
-    triangles.push({
-      points: projected,
-      depth: (projected[0].depth + projected[1].depth + projected[2].depth) / 3,
-      worldCenter: scaleVec3(addVec3(addVec3(a, b), c), 1 / 3),
-      normal,
-      baseColor,
-      accent,
-    });
+      triangles.push({
+        points: projected,
+        depth: (projected[0].depth + projected[1].depth + projected[2].depth) / 3,
+        worldCenter: scaleVec3(addVec3(addVec3(a, b), c), 1 / 3),
+        normal,
+        baseColor: resolvedColor,
+        accent: options.accent ?? 0,
+        material: primitive.material,
+        reflection: options.reflection ?? 0,
+        surfaceType: options.surfaceType ?? "solid",
+      });
+    }
   }
 }
 
-function createPerformanceGovernor() {
+async function loadShowcaseAssetCatalog() {
+  const [brigantine, cutter, lighthouse, harborDock] = await Promise.all([
+    loadGltfModel(resolveShowcaseAssetUrl("brigantine")),
+    loadGltfModel(resolveShowcaseAssetUrl("cutter")),
+    loadGltfModel(resolveShowcaseAssetUrl("lighthouse")),
+    loadGltfModel(resolveShowcaseAssetUrl("harbor-dock")),
+  ]);
+
+  return Object.freeze({
+    primaryShipKey: "brigantine",
+    ships: Object.freeze({
+      brigantine,
+      cutter,
+    }),
+    environment: Object.freeze({
+      lighthouse,
+      "harbor-dock": harborDock,
+    }),
+  });
+}
+
+function createLegacyShowcaseAssetCatalog() {
+  const brigantine = loadGltfModel(resolveShowcaseAssetUrl("brigantine"));
+  return Promise.resolve(brigantine).then((primary) =>
+    Object.freeze({
+      primaryShipKey: "brigantine",
+      ships: Object.freeze({
+        brigantine: primary,
+      }),
+      environment: Object.freeze({}),
+    })
+  );
+}
+
+function resolveShipModel(state, ship, fallbackModel = null) {
+  return (
+    state.assetCatalog?.ships?.[ship.modelKey ?? state.assetCatalog?.primaryShipKey ?? "brigantine"] ??
+    fallbackModel ??
+    state.shipModel
+  );
+}
+
+function createPerformanceGovernor(performanceFeatures) {
+  const createQualityLadderAdapter = assertRequiredFunction(
+    performanceFeatures,
+    "performance",
+    "createQualityAdapter"
+  );
+  const createDeviceProfile = assertRequiredFunction(
+    performanceFeatures,
+    "performance",
+    "createDeviceProfile"
+  );
+  const createGpuPerformanceGovernor = assertRequiredFunction(
+    performanceFeatures,
+    "performance",
+    "createGovernor"
+  );
+
   const fluidDetail = createQualityLadderAdapter({
     id: "fluid-detail",
     domain: "geometry",
@@ -554,6 +1646,7 @@ function createPerformanceGovernor() {
 }
 
 function buildDemoDom(root, options) {
+  const t = options.translate;
   root.innerHTML = `
     <main class="plasius-demo">
       <section class="plasius-demo__hero">
@@ -563,56 +1656,55 @@ function buildDemoDom(root, options) {
           <p class="plasius-demo__lead">${options.subtitle}</p>
         </section>
         <section class="plasius-panel plasius-demo__status">
-          <p id="demoStatus" class="plasius-demo__status-badge">Booting 3D scene…</p>
+          <p id="demoStatus" class="plasius-demo__status-badge">${t(gpuSharedTranslationKeys.statusBooting)}</p>
           <p id="demoDetails" class="plasius-demo__status-text">
-            Preparing a moonlit harbor scene, GLTF hull data, cloth and fluid continuity plans, and adaptive quality metadata.
+            ${t(gpuSharedTranslationKeys.detailsBooting)}
           </p>
         </section>
       </section>
       <section class="plasius-demo__layout">
         <section class="plasius-panel plasius-demo__canvas-panel">
-          <canvas id="demoCanvas" class="plasius-demo__canvas" width="1280" height="720"></canvas>
+          <canvas id="demoCanvas" class="plasius-demo__canvas" width="${DEFAULT_CANVAS_WIDTH}" height="${DEFAULT_CANVAS_HEIGHT}"></canvas>
           <div class="plasius-demo__toolbar">
-            <button id="pauseButton" type="button">Pause</button>
+            <button id="pauseButton" type="button">${t(gpuSharedTranslationKeys.pause)}</button>
             <label class="plasius-toggle">
               <input id="stressToggle" type="checkbox" />
-              Stress mode
+              ${t(gpuSharedTranslationKeys.stressMode)}
             </label>
             <label class="plasius-toggle">
-              Focus
+              ${t(gpuSharedTranslationKeys.focus)}
               <select id="focusMode">
-                <option value="integrated">integrated</option>
-                <option value="lighting">lighting</option>
-                <option value="cloth">cloth</option>
-                <option value="fluid">fluid</option>
-                <option value="physics">physics</option>
-                <option value="performance">performance</option>
-                <option value="debug">debug</option>
+                ${showcaseFocusModes
+                  .map(
+                    (mode) =>
+                      `<option value="${mode}">${t(FOCUS_MODE_TRANSLATION_KEYS[mode])}</option>`
+                  )
+                  .join("")}
               </select>
             </label>
           </div>
           <div class="plasius-demo__legend">
-            <strong>Scene</strong>
-            GLTF ships carry hull mass and damping metadata.<br />
-            Lanterns and torches warm the moonlit harbor.<br />
-            Mass-aware collisions stay authoritative near the camera.
+            <strong>${t(gpuSharedTranslationKeys.legendTitle)}</strong>
+            ${t(gpuSharedTranslationKeys.legendShipMetadata)}<br />
+            ${t(gpuSharedTranslationKeys.legendLighting)}<br />
+            ${t(gpuSharedTranslationKeys.legendCollisions)}
           </div>
         </section>
         <aside class="plasius-demo__sidebar">
           <section class="plasius-panel plasius-demo__card">
-            <h2>Scene State</h2>
+            <h2>${t(gpuSharedTranslationKeys.sceneState)}</h2>
             <ul id="sceneMetrics" class="plasius-demo__metrics"></ul>
           </section>
           <section class="plasius-panel plasius-demo__card">
-            <h2>Quality + Budgets</h2>
+            <h2>${t(gpuSharedTranslationKeys.qualityBudgets)}</h2>
             <ul id="qualityMetrics" class="plasius-demo__metrics"></ul>
           </section>
           <section class="plasius-panel plasius-demo__card">
-            <h2>Debug Telemetry</h2>
+            <h2>${t(gpuSharedTranslationKeys.debugTelemetry)}</h2>
             <ul id="debugMetrics" class="plasius-demo__metrics"></ul>
           </section>
           <section class="plasius-panel plasius-demo__card">
-            <h2>Notes</h2>
+            <h2>${t(gpuSharedTranslationKeys.notes)}</h2>
             <ul id="sceneNotes" class="plasius-demo__metrics"></ul>
           </section>
         </aside>
@@ -638,6 +1730,12 @@ function buildDemoDom(root, options) {
 }
 
 function buildSceneSnapshot(state, shipModel) {
+  const shipPhysics = Object.freeze(
+    Object.fromEntries(
+      state.ships.map((ship) => [ship.id, resolveShipModel(state, ship, shipModel)?.physics ?? null])
+    )
+  );
+
   return Object.freeze({
     focus: state.focus,
     frame: state.frame,
@@ -659,6 +1757,7 @@ function buildSceneSnapshot(state, shipModel) {
       state.ships.map((ship) =>
         Object.freeze({
           id: ship.id,
+          modelKey: ship.modelKey ?? "brigantine",
           position: Object.freeze({ ...ship.position }),
           velocity: Object.freeze({ ...ship.velocity }),
           rotationY: ship.rotationY,
@@ -679,12 +1778,13 @@ function buildSceneSnapshot(state, shipModel) {
       )
     ),
     shipPhysics: shipModel?.physics ?? null,
+    shipModels: shipPhysics,
     physics: Object.freeze({
       profile: state.physics.profile,
       plan: state.physics.plan,
       manifest: state.physics.manifest,
       snapshot: state.physics.snapshot,
-      shipPhysics: shipModel?.physics ?? null,
+      shipPhysics,
     }),
   });
 }
@@ -727,11 +1827,88 @@ function readVisualNumber(value, fallback) {
   return typeof value === "number" && Number.isFinite(value) ? value : fallback;
 }
 
-function resolveClothPresentation(state, meshDetail) {
-  const clothPlan = createClothRepresentationPlan({
+function readPositiveNumber(value, fallback) {
+  return typeof value === "number" && Number.isFinite(value) && value > 0
+    ? value
+    : fallback;
+}
+
+function isTruthyCaptureValue(value) {
+  return value === "1" || value === "true" || value === "scene" || value === "video";
+}
+
+function resolveCaptureSettings(options) {
+  const explicitCaptureMode =
+    typeof options.captureMode === "boolean" ? options.captureMode : undefined;
+  let captureMode = explicitCaptureMode ?? false;
+  let renderScale = readPositiveNumber(options.renderScale, undefined);
+
+  try {
+    const params = new URLSearchParams(window.location.search);
+    if (explicitCaptureMode === undefined) {
+      captureMode =
+        isTruthyCaptureValue(params.get("capture")) ||
+        params.get("presentation") === "capture";
+    }
+    renderScale = readPositiveNumber(Number(params.get("renderScale")), renderScale);
+  } catch {
+    // Query-string capture controls are optional and only available in browsers.
+  }
+
+  return {
+    captureMode,
+    renderScale,
+  };
+}
+
+function getCanvasDisplaySize(canvas) {
+  const rect =
+    typeof canvas.getBoundingClientRect === "function"
+      ? canvas.getBoundingClientRect()
+      : null;
+  const width = Math.round(
+    readPositiveNumber(rect?.width, readPositiveNumber(canvas.clientWidth, canvas.width))
+  );
+  const height = Math.round(
+    readPositiveNumber(rect?.height, readPositiveNumber(canvas.clientHeight, canvas.height))
+  );
+
+  return {
+    width: Math.max(1, width || DEFAULT_CANVAS_WIDTH),
+    height: Math.max(1, height || DEFAULT_CANVAS_HEIGHT),
+  };
+}
+
+function resizeCanvasToDisplaySize(canvas, state) {
+  const { width, height } = getCanvasDisplaySize(canvas);
+  const deviceScale = readPositiveNumber(globalThis.devicePixelRatio, 1);
+  const requestedScale = readPositiveNumber(state.renderScale, deviceScale);
+  const maxScale = state.captureMode ? 2 : 1.5;
+  let scale = clamp(requestedScale, 1, maxScale);
+  const pixelBudget = state.captureMode
+    ? CAPTURE_CANVAS_PIXEL_BUDGET
+    : DEFAULT_CANVAS_WIDTH * DEFAULT_CANVAS_HEIGHT * 1.5;
+  const projectedPixels = width * height * scale * scale;
+
+  if (projectedPixels > pixelBudget) {
+    scale = Math.sqrt(pixelBudget / Math.max(1, width * height));
+  }
+
+  const targetWidth = Math.max(1, Math.round(width * scale));
+  const targetHeight = Math.max(1, Math.round(height * scale));
+  if (canvas.width !== targetWidth || canvas.height !== targetHeight) {
+    canvas.width = targetWidth;
+    canvas.height = targetHeight;
+  }
+
+  state.renderScale = scale;
+}
+
+function resolveClothPresentation(state, meshDetail, clothFeatures) {
+  const clothPlan = clothFeatures.createPlan({
     garmentId: "shore-flag",
-    kind: state.focus === "cloth" ? "flag" : clothGarmentKinds[0],
-    profile: state.focus === "cloth" ? "cinematic" : clothProfileNames[0],
+    kind: state.focus === "cloth" ? "flag" : clothFeatures.garmentKinds[0],
+    profile: state.focus === "cloth" ? "cinematic" : clothFeatures.profileNames[0],
     supportsRayTracing: true,
     nearFieldMaxMeters: 18,
     midFieldMaxMeters: 55,
@@ -749,7 +1926,7 @@ function resolveClothPresentation(state, meshDetail) {
         )
       );
   const cameraDistance = lengthVec3(subVec3(state.camera.target, fallbackEye));
-  const band = selectClothRepresentationBand(cameraDistance, clothPlan.thresholds);
+  const band = clothFeatures.selectBand(cameraDistance, clothPlan.thresholds);
   const representation =
     clothPlan.representations.find((entry) => entry.band === band) ?? clothPlan.representations[0];
   return {
@@ -1111,8 +2288,9 @@ function resolveVisualConfig(nearLighting, lightingSnapshot, customVisuals = {})
   };
 }
 
-function buildClothSurface(model, state, meshDetail, visuals) {
-  const clothPresentation = resolveClothPresentation(state, meshDetail);
+function buildClothSurface(model, state, meshDetail, visuals, clothFeatures) {
+  const resolvedClothFeatures = normalizeClothFeatureAdapters(clothFeatures);
+  const clothPresentation = resolveClothPresentation(state, meshDetail, resolvedClothFeatures);
   const clothState = ensureShowcaseClothState(state, meshDetail, clothPresentation);
 
   return {
@@ -1281,11 +2459,12 @@ function buildWaterMotionEffects(state) {
   });
 }
 
-function buildWaterBands(state, fluidDetail, visuals) {
-  const fluidPlan = createFluidRepresentationPlan({
+function buildWaterBands(state, fluidDetail, visuals, fluidFeatures) {
+  const resolvedFluidFeatures = normalizeFluidFeatureAdapters(fluidFeatures);
+  const fluidPlan = resolvedFluidFeatures.createPlan({
     fluidBodyId: "harbor",
-    kind: state.focus === "fluid" ? "ocean" : fluidBodyKinds[0],
-    profile: state.focus === "fluid" ? "cinematic" : fluidProfileNames[0],
+    kind: state.focus === "fluid" ? "ocean" : resolvedFluidFeatures.bodyKinds[0],
+    profile: state.focus === "fluid" ? "cinematic" : resolvedFluidFeatures.profileNames[0],
     supportsRayTracing: true,
     nearFieldMaxMeters: 40,
     midFieldMaxMeters: 150,
@@ -1304,7 +2483,7 @@ function buildWaterBands(state, fluidDetail, visuals) {
     const representation =
       fluidPlan.representations.find((entry) => entry.band === bandSpec.band) ??
       fluidPlan.representations[0];
-    const continuity = createFluidContinuityEnvelope({ fluidBodyId: "harbor" });
+    const continuity = resolvedFluidFeatures.createContinuityEnvelope({ fluidBodyId: "harbor" });
     const bandContinuity = resolveFluidBandContinuity(continuity, bandSpec.band);
     const bandResolution =
       bandSpec.band === "near"
@@ -1374,15 +2553,34 @@ function buildWaterBands(state, fluidDetail, visuals) {
   return { fluidPlan, bandMeshes };
 }
 
-function createSceneState(options) {
-  const { governor, fluidDetail, clothDetail, lightingDetail } = createPerformanceGovernor();
-  const physicsProfile = defaultPhysicsWorkerProfile;
+function createSceneState(options, featureAdapters) {
+  const translate = options.translate;
+  const { governor, fluidDetail, clothDetail, lightingDetail } = createPerformanceGovernor(
+    featureAdapters.performance
+  );
+  const physicsProfile = featureAdapters.physics.defaultProfile;
+  const createPhysicsSimulationPlan = assertRequiredFunction(
+    featureAdapters.physics,
+    "physics",
+    "createSimulationPlan"
+  );
+  const getPhysicsWorkerManifest = assertRequiredFunction(
+    featureAdapters.physics,
+    "physics",
+    "getManifest"
+  );
+  const createGpuDebugSession = assertRequiredFunction(
+    featureAdapters.debug,
+    "debug",
+    "createSession"
+  );
+
   const physicsPlan = createPhysicsSimulationPlan(physicsProfile);
   const physicsManifest = getPhysicsWorkerManifest(physicsProfile);
   const debugSession = createGpuDebugSession({
     enabled: true,
     adapter: {
-      label: "3D showcase",
+      label: translate(gpuSharedTranslationKeys.debugAdapterShowcase),
       memoryCapacityHintBytes: 6 * 1024 * 1024 * 1024,
       coreCountHint: 12,
     },
@@ -1392,23 +2590,27 @@ function createSceneState(options) {
     owner: "renderer",
     category: "texture",
     sizeBytes: 1280 * 720 * 4,
-    label: "Main color buffer",
+    label: translate(gpuSharedTranslationKeys.debugMainColorBuffer),
   });
   debugSession.trackAllocation({
     id: "showcase.shadow-impression",
     owner: "lighting",
     category: "texture",
     sizeBytes: 12 * 1024 * 1024,
-    label: "Shadow impression atlas",
+    label: translate(gpuSharedTranslationKeys.debugShadowImpressionAtlas),
   });
 
   return {
+    translate,
     focus: options.focus,
     governor,
     fluidDetail,
     clothDetail,
     lightingDetail,
     debugSession,
+    showcaseRealisticModelsEnabled: options.realisticModelsEnabled !== false,
+    captureMode: options.captureMode === true,
+    renderScale: readPositiveNumber(options.renderScale, undefined),
     packageState: undefined,
     demoDescription: null,
     demoVisuals: null,
@@ -1423,6 +2625,7 @@ function createSceneState(options) {
     ships: [
       {
         id: "northwind",
+        modelKey: "brigantine",
         position: vec3(-5.2, 0, 7.2),
         velocity: vec3(2.35, 0, -1.08),
         rotationY: 0.58,
@@ -1433,17 +2636,18 @@ function createSceneState(options) {
         throttleResponse: 0.46,
         rudderResponse: 0.54,
         wanderPhase: 0.35,
-        lanterns: SHIP_LANTERNS,
+        lanterns: CUTTER_LANTERNS,
         lanternStrength: 1.06,
         collisionRadiusScale: 1.04,
       },
       {
         id: "tidecaller",
+        modelKey: "cutter",
         position: vec3(4.8, 0, 4.4),
         velocity: vec3(-2.15, 0, 1.74),
         rotationY: -2.48,
         angularVelocity: -0.2,
-        tint: { r: 0.48, g: 0.28, b: 0.19 },
+        tint: { r: 0.58, g: 0.24, b: 0.16 },
         massScale: 0.84,
         cruiseSpeed: 2.68,
         throttleResponse: 0.7,
@@ -1467,6 +2671,7 @@ function createSceneState(options) {
       manifest: physicsManifest,
       snapshot: null,
     },
+    assetCatalog: null,
     shipModel: null,
   };
 }
@@ -1553,10 +2758,51 @@ function drawSkyAndShore(ctx, canvas, state, nearLighting, reflectionStrength, s
   }
 }
 
-function drawTriangles(ctx, triangles, lightDir, reflectionStrength, camera, shadowStrength) {
+function resolveLocalLightContribution(triangle, lightSources) {
+  const contribution = { r: 0, g: 0, b: 0 };
+  if (!Array.isArray(lightSources) || triangle.surfaceType === "water") {
+    return contribution;
+  }
+
+  const normal = normalizeVec3(triangle.normal);
+  for (const source of lightSources.slice(0, 8)) {
+    const delta = subVec3(source.point, triangle.worldCenter);
+    const distance = lengthVec3(delta);
+    const attenuation =
+      (source.glowScale ?? 1) / Math.max(1, 0.68 + distance * distance * 0.2);
+    if (attenuation < 0.012) {
+      continue;
+    }
+
+    const lightDir = normalizeVec3(delta);
+    const facing = clamp(dotVec3(normal, lightDir), 0, 1);
+    const response = attenuation * (0.18 + facing * 0.82);
+    const glowColor = source.glowColor ?? source.coreColor ?? { r: 1, g: 0.72, b: 0.4 };
+    contribution.r += glowColor.r * response * 0.32;
+    contribution.g += glowColor.g * response * 0.26;
+    contribution.b += glowColor.b * response * 0.18;
+  }
+
+  return contribution;
+}
+
+function drawTriangles(
+  ctx,
+  triangles,
+  lightDir,
+  reflectionStrength,
+  camera,
+  shadowStrength,
+  localLights = []
+) {
   triangles.sort((left, right) => right.depth - left.depth);
   for (const triangle of triangles) {
     const surfaceNormal = normalizeVec3(triangle.normal);
+    const material = triangle.material ?? {
+      roughness: 0.88,
+      metallic: 0.08,
+      emissive: { r: 0, g: 0, b: 0 },
+    };
     const shaded = shadeColor(
       triangle.baseColor,
       surfaceNormal,
@@ -1564,19 +2810,42 @@ function drawTriangles(ctx, triangles, lightDir, reflectionStrength, camera, sha
       clamp((triangle.worldCenter.y + 3) / 10, 0, 1),
       triangle.accent
     );
-    const reflection = triangle.worldCenter.y < 0.8 ? reflectionStrength : 0;
+    const reflection = reflectionStrength * (triangle.reflection ?? 0);
     const viewDir = normalizeVec3(subVec3(camera.eye, triangle.worldCenter));
     const reflectedLight = reflectVec3(scaleVec3(lightDir, -1), surfaceNormal);
-    const gloss = triangle.worldCenter.y < 0.9 ? 1 : triangle.accent > 0.05 ? 0.55 : 0.3;
-    const specular = Math.pow(clamp(dotVec3(reflectedLight, viewDir), 0, 1), triangle.worldCenter.y < 0.9 ? 18 : 12) * gloss;
-    const occlusion = triangle.worldCenter.y < 0.9 ? shadowStrength * 0.035 : 0;
-    const fill = colorToRgba(
+    const gloss = mix(0.78, 0.14, clamp(material.roughness ?? 0.88, 0, 1)) + (material.metallic ?? 0) * 0.18;
+    const specularPower = mix(26, 7, clamp(material.roughness ?? 0.88, 0, 1));
+    const specular =
+      Math.pow(clamp(dotVec3(reflectedLight, viewDir), 0, 1), specularPower) * gloss;
+    const emissive = material.emissive ?? { r: 0, g: 0, b: 0 };
+    const localLight = resolveLocalLightContribution(triangle, localLights);
+    const occlusion = triangle.surfaceType === "water" ? shadowStrength * 0.018 : shadowStrength * 0.04;
+    const detailed = applyMaterialDetail(
       {
-        r: clamp(shaded.r + reflection * 0.08 + specular * 0.14 - occlusion, 0, 1),
-        g: clamp(shaded.g + reflection * 0.08 + specular * 0.15 - occlusion, 0, 1),
-        b: clamp(shaded.b + reflection * 0.16 + specular * 0.2 - occlusion * 0.5, 0, 1),
+        r: clamp(
+          shaded.r + reflection * 0.08 + specular * 0.16 + emissive.r * 0.42 + localLight.r - occlusion,
+          0,
+          1
+        ),
+        g: clamp(
+          shaded.g + reflection * 0.08 + specular * 0.16 + emissive.g * 0.42 + localLight.g - occlusion,
+          0,
+          1
+        ),
+        b: clamp(
+          shaded.b + reflection * 0.16 + specular * 0.22 + emissive.b * 0.46 + localLight.b - occlusion * 0.5,
+          0,
+          1
+        ),
       },
-      0.98
+      material,
+      triangle.worldCenter,
+      surfaceNormal,
+      triangle.surfaceType
+    );
+    const fill = colorToRgba(
+      detailed,
+      triangle.baseColor.a ?? 0.98
     );
     ctx.fillStyle = fill;
     ctx.beginPath();
@@ -1615,78 +2884,111 @@ function renderProjectedShadow(ctx, worldPoints, camera, viewport, lightDir, opt
   ctx.restore();
 }
 
-function pushHarborGeometry(camera, viewport, triangles, visuals) {
-  const harborObjects = [
-    {
-      position: vec3(-8.2, 1.1, -0.9),
-      rotationY: -0.16,
-      scale: { x: 5.4, y: 2.4, z: 4.2 },
-      color: visuals.harborWall,
-      accent: 0.06,
-    },
-    {
-      position: vec3(-5.7, 0.45, 1.4),
-      rotationY: -0.08,
-      scale: { x: 6.8, y: 0.3, z: 2.1 },
-      color: visuals.harborDeck,
-      accent: 0.04,
-    },
-    {
-      position: vec3(-10.4, 0.28, 0.8),
-      rotationY: 0.22,
-      scale: { x: 1.2, y: 0.9, z: 1.2 },
-      color: visuals.harborTower,
-      accent: 0.02,
-    },
-  ];
+function pushHarborGeometry(camera, viewport, triangles, state) {
+  if (!state.showcaseRealisticModelsEnabled) {
+    for (const object of LEGACY_HARBOR_LAYOUT) {
+      buildTrianglesFromMesh(
+        { positions: [object], indices: [0], normals: null, colors: null, material: createLegacyMeshPrimitive({})?.material, bounds: null, name: "legacy-structure" },
+        {
+          position: object.position,
+          rotationY: object.rotationY,
+          scale: object.scale,
+        },
+        object.color,
+        camera,
+        viewport,
+        triangles,
+        {
+          accent: object.accent,
+          reflection: 0,
+          surfaceType: "structure",
+        }
+      );
+    }
+
+    return;
+  }
+
+  for (const placement of SHOWCASE_ENVIRONMENT_LAYOUT) {
+    const mesh = state.assetCatalog?.environment?.[placement.assetKey] ?? null;
+    if (!mesh) {
+      continue;
+    }
 
-  for (const object of harborObjects) {
     buildTrianglesFromMesh(
-      UNIT_BOX_MESH,
+      mesh,
       {
-        position: object.position,
-        rotationY: object.rotationY,
-        scale: object.scale,
+        position: vec3(placement.position.x, placement.position.y, placement.position.z),
+        rotationY: placement.rotationY,
+        scale: placement.scale,
       },
-      object.color,
+      null,
       camera,
       viewport,
       triangles,
-      object.accent
+      {
+        accent: placement.accent,
+        reflection: 0,
+        surfaceType: "structure",
+      }
     );
   }
 }
 
 function renderShipRigging(ctx, ship, camera, viewport) {
   const transform = { position: ship.position, rotationY: ship.rotationY, scale: SHIP_SCALE };
-  const mastBase = transformPoint(vec3(0, 0.38, -0.4), transform);
-  const mastTop = transformPoint(vec3(0, 3.8, -0.2), transform);
-  const aftBase = transformPoint(vec3(-0.25, 0.32, -1.9), transform);
-  const aftTop = transformPoint(vec3(-0.15, 2.7, -1.75), transform);
-  const sailA = transformPoint(vec3(0.08, 3.2, -0.2), transform);
-  const sailB = transformPoint(vec3(0.12, 1.2, -0.5), transform);
-  const sailC = transformPoint(vec3(2.25, 2.25, 0.15), transform);
-  const projected = [mastBase, mastTop, aftBase, aftTop, sailA, sailB, sailC].map((point) =>
-    projectPoint(point, camera, viewport)
-  );
+  const layout =
+    ship.modelKey === "cutter"
+      ? {
+          lineColor: "rgba(85, 89, 97, 0.92)",
+          sailColor: "rgba(218, 232, 244, 0.28)",
+          points: [
+            vec3(0, 0.88, -0.32),
+            vec3(0, 2.4, -0.28),
+            vec3(0.1, 1.92, -0.3),
+            vec3(1.18, 1.72, -0.18),
+            vec3(1.04, 1.08, -0.12),
+          ],
+          mastPairs: [[0, 1], [2, 3]],
+          sailTriangle: [2, 3, 4],
+        }
+      : {
+          lineColor: "rgba(73, 54, 45, 0.94)",
+          sailColor: "rgba(238, 232, 214, 0.88)",
+          points: [
+            vec3(0, 0.38, -0.4),
+            vec3(0, 3.8, -0.2),
+            vec3(-0.25, 0.32, -1.9),
+            vec3(-0.15, 2.7, -1.75),
+            vec3(0.08, 3.2, -0.2),
+            vec3(0.12, 1.2, -0.5),
+            vec3(2.25, 2.25, 0.15),
+          ],
+          mastPairs: [[0, 1], [2, 3]],
+          sailTriangle: [4, 5, 6],
+        };
+  const projected = layout.points
+    .map((point) => transformPoint(point, transform))
+    .map((point) => projectPoint(point, camera, viewport));
   if (projected.some((value) => value === null)) {
     return;
   }
 
-  ctx.strokeStyle = "rgba(73, 54, 45, 0.94)";
-  ctx.lineWidth = 3.5;
+  ctx.strokeStyle = layout.lineColor;
+  ctx.lineWidth = ship.modelKey === "cutter" ? 2.2 : 3.5;
   ctx.beginPath();
-  ctx.moveTo(projected[0].x, projected[0].y);
-  ctx.lineTo(projected[1].x, projected[1].y);
-  ctx.moveTo(projected[2].x, projected[2].y);
-  ctx.lineTo(projected[3].x, projected[3].y);
+  for (const [from, to] of layout.mastPairs) {
+    ctx.moveTo(projected[from].x, projected[from].y);
+    ctx.lineTo(projected[to].x, projected[to].y);
+  }
   ctx.stroke();
 
-  ctx.fillStyle = "rgba(238, 232, 214, 0.88)";
+  const [a, b, c] = layout.sailTriangle;
+  ctx.fillStyle = layout.sailColor;
   ctx.beginPath();
-  ctx.moveTo(projected[4].x, projected[4].y);
-  ctx.lineTo(projected[5].x, projected[5].y);
-  ctx.lineTo(projected[6].x, projected[6].y);
+  ctx.moveTo(projected[a].x, projected[a].y);
+  ctx.lineTo(projected[b].x, projected[b].y);
+  ctx.lineTo(projected[c].x, projected[c].y);
   ctx.closePath();
   ctx.fill();
 }
@@ -1941,10 +3243,10 @@ function resolveBoundaryCollision(ship, state, shipModel) {
   }
 }
 
-function resolveShipCollision(state, a, b, shipModel) {
+function resolveShipCollision(state, a, b, shipModelA, shipModelB) {
   const delta = subVec3(b.position, a.position);
-  const radiusA = getShipCollisionRadius(a, shipModel);
-  const radiusB = getShipCollisionRadius(b, shipModel);
+  const radiusA = getShipCollisionRadius(a, shipModelA);
+  const radiusB = getShipCollisionRadius(b, shipModelB);
   const distance = Math.hypot(delta.x, delta.z);
   const minDistance = radiusA + radiusB;
   if (distance >= minDistance) {
@@ -1957,8 +3259,8 @@ function resolveShipCollision(state, a, b, shipModel) {
       : normalizeVec3(vec3(Math.cos(state.time * 5.2), 0, Math.sin(state.time * 4.8)));
   const tangent = vec3(-normal.z, 0, normal.x);
   const penetration = minDistance - distance;
-  const invMassA = getShipInverseMass(a, shipModel);
-  const invMassB = getShipInverseMass(b, shipModel);
+  const invMassA = getShipInverseMass(a, shipModelA);
+  const invMassB = getShipInverseMass(b, shipModelB);
   const invMassSum = invMassA + invMassB;
   const correction = scaleVec3(normal, (penetration / Math.max(0.0001, invMassSum)) * 0.72);
   a.position = subVec3(a.position, scaleVec3(correction, invMassA));
@@ -1966,7 +3268,11 @@ function resolveShipCollision(state, a, b, shipModel) {
 
   const relativeVelocity = subVec3(b.velocity, a.velocity);
   const velocityAlongNormal = dotVec3(relativeVelocity, normal);
-  const restitution = readPhysicsNumber(shipModel.physics, "restitution", 0.22) * 0.88;
+  const restitution =
+    ((readPhysicsNumber(shipModelA.physics, "restitution", 0.22) +
+      readPhysicsNumber(shipModelB.physics, "restitution", 0.22)) /
+      2) *
+    0.88;
   if (velocityAlongNormal < 0) {
     const impulseMagnitude =
       (-(1 + restitution) * velocityAlongNormal) / Math.max(0.0001, invMassSum);
@@ -1985,10 +3291,10 @@ function resolveShipCollision(state, a, b, shipModel) {
     b.velocity = addVec3(b.velocity, scaleVec3(frictionImpulse, invMassB));
 
     a.angularVelocity -=
-      tangentSpeed * radiusA * getShipInverseInertia(a, shipModel) * 0.2 +
+      tangentSpeed * radiusA * getShipInverseInertia(a, shipModelA) * 0.2 +
       impulseMagnitude * 0.00024;
     b.angularVelocity +=
-      tangentSpeed * radiusB * getShipInverseInertia(b, shipModel) * 0.2 +
+      tangentSpeed * radiusB * getShipInverseInertia(b, shipModelB) * 0.2 +
       impulseMagnitude * 0.00024;
 
     const impactSpeed = Math.abs(velocityAlongNormal);
@@ -2028,14 +3334,19 @@ function updateShips(state, dt, shipModel) {
   state.contactCount = 0;
 
   for (const ship of state.ships) {
-    updateShipMotion(state, ship, dt, shipModel);
-    resolveBoundaryCollision(ship, state, shipModel);
+    const activeShipModel = resolveShipModel(state, ship, shipModel);
+    updateShipMotion(state, ship, dt, activeShipModel);
+    resolveBoundaryCollision(ship, state, activeShipModel);
   }
 
   for (let index = 0; index < state.ships.length; index += 1) {
     for (let otherIndex = index + 1; otherIndex < state.ships.length; otherIndex += 1) {
+      const shipA = state.ships[index];
+      const shipB = state.ships[otherIndex];
+      const shipModelA = resolveShipModel(state, shipA, shipModel);
+      const shipModelB = resolveShipModel(state, shipB, shipModel);
       collided =
-        resolveShipCollision(state, state.ships[index], state.ships[otherIndex], shipModel) ||
+        resolveShipCollision(state, shipA, shipB, shipModelA, shipModelB) ||
         collided;
     }
   }
@@ -2327,6 +3638,108 @@ function renderWaterLightReflection(ctx, source, state, camera, viewport) {
   ctx.restore();
 }
 
+function renderLighthouseBeam(ctx, state, camera, viewport, visuals) {
+  const lighthousePlacement = SHOWCASE_ENVIRONMENT_LAYOUT.find(
+    (placement) => placement.assetKey === "lighthouse"
+  );
+  if (!lighthousePlacement || !state.showcaseRealisticModelsEnabled) {
+    return;
+  }
+
+  const source = transformPoint(
+    vec3(0, 11.34, 0),
+    {
+      position: vec3(
+        lighthousePlacement.position.x,
+        lighthousePlacement.position.y,
+        lighthousePlacement.position.z
+      ),
+      rotationY: lighthousePlacement.rotationY,
+      scale: lighthousePlacement.scale,
+    }
+  );
+  const sweep = state.time * 0.22 + 0.8;
+  const direction = normalizeVec3(vec3(Math.sin(sweep), -0.07, Math.cos(sweep)));
+  const spread = perpendicularOnWater(direction);
+  const farCenter = addVec3(source, scaleVec3(direction, 34));
+  const left = addVec3(farCenter, scaleVec3(spread, 7.4));
+  const right = addVec3(farCenter, scaleVec3(spread, -7.4));
+  const projectedSource = projectPoint(source, camera, viewport);
+  const projectedLeft = projectPoint(left, camera, viewport);
+  const projectedRight = projectPoint(right, camera, viewport);
+  if (!projectedSource || !projectedLeft || !projectedRight) {
+    return;
+  }
+
+  const pulse = 0.72 + Math.sin(state.time * 1.7) * 0.08;
+  ctx.save();
+  ctx.globalCompositeOperation = "screen";
+  ctx.fillStyle = colorToRgba(visuals.torchCore, 0.055 * pulse);
+  ctx.beginPath();
+  ctx.moveTo(projectedSource.x, projectedSource.y);
+  ctx.lineTo(projectedLeft.x, projectedLeft.y);
+  ctx.lineTo(projectedRight.x, projectedRight.y);
+  ctx.closePath();
+  ctx.fill();
+
+  const beamLength = Math.hypot(
+    projectedLeft.x - projectedSource.x,
+    projectedLeft.y - projectedSource.y
+  );
+  const core = ctx.createRadialGradient(
+    projectedSource.x,
+    projectedSource.y,
+    2,
+    projectedSource.x,
+    projectedSource.y,
+    clamp(beamLength * 0.22, 18, 80)
+  );
+  core.addColorStop(0, colorToRgba(visuals.torchCore, 0.58));
+  core.addColorStop(0.5, colorToRgba(visuals.torchGlow, 0.18));
+  core.addColorStop(1, colorToRgba(visuals.torchGlow, 0));
+  ctx.fillStyle = core;
+  ctx.beginPath();
+  ctx.arc(projectedSource.x, projectedSource.y, clamp(beamLength * 0.18, 14, 64), 0, Math.PI * 2);
+  ctx.fill();
+  ctx.restore();
+}
+
+function renderAtmosphericGrade(ctx, canvas, state, visuals) {
+  const vignette = ctx.createRadialGradient(
+    canvas.width * 0.5,
+    canvas.height * 0.48,
+    canvas.width * 0.2,
+    canvas.width * 0.5,
+    canvas.height * 0.5,
+    canvas.width * 0.72
+  );
+  vignette.addColorStop(0, "rgba(0, 0, 0, 0)");
+  vignette.addColorStop(0.68, "rgba(0, 0, 0, 0.08)");
+  vignette.addColorStop(1, "rgba(0, 0, 0, 0.32)");
+  ctx.fillStyle = vignette;
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+  const seaHaze = ctx.createLinearGradient(0, canvas.height * 0.34, 0, canvas.height);
+  seaHaze.addColorStop(0, "rgba(0, 0, 0, 0)");
+  seaHaze.addColorStop(0.5, visuals.ambientMist);
+  seaHaze.addColorStop(1, "rgba(3, 8, 16, 0.18)");
+  ctx.fillStyle = seaHaze;
+  ctx.fillRect(0, canvas.height * 0.34, canvas.width, canvas.height * 0.66);
+
+  if (state.captureMode) {
+    ctx.save();
+    ctx.globalCompositeOperation = "screen";
+    for (let index = 0; index < 70; index += 1) {
+      const x = pseudoRandom(index * 19 + 3) * canvas.width;
+      const y = pseudoRandom(index * 23 + 7) * canvas.height;
+      const alpha = 0.008 + pseudoRandom(index * 31 + 11) * 0.012;
+      ctx.fillStyle = `rgba(255, 255, 255, ${alpha})`;
+      ctx.fillRect(x, y, 1.1, 1.1);
+    }
+    ctx.restore();
+  }
+}
+
 function renderWaterMotionEffects(ctx, effects, camera, viewport) {
   ctx.save();
   ctx.globalCompositeOperation = "screen";
@@ -2405,12 +3818,24 @@ function renderWaterMotionEffects(ctx, effects, camera, viewport) {
   ctx.restore();
 }
 
-function renderScene(ctx, canvas, state, shipModel, dom) {
+function renderScene(
+  ctx,
+  canvas,
+  state,
+  shipModel,
+  dom,
+  lightingFeatures,
+  fluidFeatures,
+  clothFeatures
+) {
   const viewport = { width: canvas.width, height: canvas.height };
   const camera = buildCamera(state, canvas);
   state.camera.eye = camera.eye;
-  const lightingPlan = createLightingBandPlan({
-    profile: state.focus === "lighting" ? defaultLightingProfile : getLightingProfile(defaultLightingProfile).name,
+  const lightingPlan = lightingFeatures.createBandPlan({
+    profile:
+      state.focus === "lighting"
+        ? lightingFeatures.defaultProfile
+        : lightingFeatures.getProfile(lightingFeatures.defaultProfile).name,
     importance: state.focus === "lighting" ? "critical" : "high",
   });
   const nearLighting = lightingPlan.bands.find((entry) => entry.band === "near") ?? lightingPlan.bands[0];
@@ -2439,7 +3864,8 @@ function renderScene(ctx, canvas, state, shipModel, dom) {
   const water = buildWaterBands(
     state,
     state.fluidDetail.getSnapshot().currentLevel.config,
-    visuals
+    visuals,
+    fluidFeatures
   );
   for (const bandMesh of water.bandMeshes) {
     const bandAccent = bandMesh.band === "near" ? 0.06 : bandMesh.band === "mid" ? 0.04 : 0;
@@ -2459,6 +3885,15 @@ function renderScene(ctx, canvas, state, shipModel, dom) {
         normal,
         baseColor: bandMesh.color,
         accent: bandAccent,
+        material: {
+          name: "water-surface",
+          color: bandMesh.color,
+          roughness: 0.2,
+          metallic: 0,
+          emissive: { r: 0, g: 0, b: 0 },
+        },
+        reflection: 1,
+        surfaceType: "water",
       });
     }
   }
@@ -2466,12 +3901,13 @@ function renderScene(ctx, canvas, state, shipModel, dom) {
   const waterMotionEffects = buildWaterMotionEffects(state);
   const lightSources = collectSceneLightSources(state, visuals);
 
-  pushHarborGeometry(camera, viewport, sceneTriangles, visuals);
+  pushHarborGeometry(camera, viewport, sceneTriangles, state);
   const cloth = buildClothSurface(
     state,
     state,
     state.clothDetail.getSnapshot().currentLevel.config,
-    visuals
+    visuals,
+    clothFeatures
   );
   for (let index = 0; index < cloth.indices.length; index += 3) {
     const a = cloth.positions[cloth.indices[index]];
@@ -2489,24 +3925,47 @@ function renderScene(ctx, canvas, state, shipModel, dom) {
       normal,
       baseColor: cloth.color,
       accent: cloth.band === "near" ? 0.1 : 0.04,
+      material: {
+        name: "flag-cloth",
+        color: cloth.color,
+        roughness: 0.94,
+        metallic: 0,
+        emissive: { r: 0, g: 0, b: 0 },
+      },
+      reflection: 0,
+      surfaceType: "cloth",
     });
   }
 
   for (const ship of state.ships) {
+    const activeShipModel = resolveShipModel(state, ship, shipModel);
     buildTrianglesFromMesh(
-      shipModel,
+      activeShipModel,
       { position: ship.position, rotationY: ship.rotationY, scale: SHIP_SCALE },
       ship.tint,
       camera,
       viewport,
       sceneTriangles,
-      nearLighting.rtParticipation.directShadows === "premium" ? 0.08 : 0.02
+      {
+        accent: nearLighting.rtParticipation.directShadows === "premium" ? 0.08 : 0.02,
+        reflection: 0,
+        surfaceType: "ship",
+      }
     );
   }
 
   drawTriangles(ctx, waterTriangles, lightDir, reflectionStrength, camera, shadowStrength);
   for (const ship of state.ships) {
-    renderShipShadow(ctx, shipModel, ship, state, camera, viewport, lightDir, shadowStrength);
+    renderShipShadow(
+      ctx,
+      resolveShipModel(state, ship, shipModel),
+      ship,
+      state,
+      camera,
+      viewport,
+      lightDir,
+      shadowStrength
+    );
   }
   renderFlagShadow(ctx, cloth, camera, viewport, lightDir, shadowStrength);
   for (const source of lightSources.reflectionLights) {
@@ -2514,9 +3973,18 @@ function renderScene(ctx, canvas, state, shipModel, dom) {
   }
   renderWaterMotionEffects(ctx, waterMotionEffects, camera, viewport);
   renderWaterHighlights(ctx, water.bandMeshes, camera, viewport);
-  drawTriangles(ctx, sceneTriangles, lightDir, reflectionStrength, camera, shadowStrength);
+  drawTriangles(
+    ctx,
+    sceneTriangles,
+    lightDir,
+    reflectionStrength,
+    camera,
+    shadowStrength,
+    lightSources.directLights
+  );
   renderFlagPole(ctx, camera, viewport);
   renderClothAccent(ctx, cloth, camera, viewport);
+  renderLighthouseBeam(ctx, state, camera, viewport, visuals);
   for (const source of lightSources.directLights) {
     renderDirectLightGlow(ctx, source, camera, viewport);
   }
@@ -2524,6 +3992,7 @@ function renderScene(ctx, canvas, state, shipModel, dom) {
     renderShipRigging(ctx, ship, camera, viewport);
   }
   renderSprays(ctx, state.sprays, camera, viewport);
+  renderAtmosphericGrade(ctx, canvas, state, visuals);
 
   const debugSnapshot = state.debugSession.getSnapshot();
   const quality = {
@@ -2534,14 +4003,14 @@ function renderScene(ctx, canvas, state, shipModel, dom) {
 
   const sceneMetrics = [
     `focus: ${state.focus}`,
-    `ships: ${state.ships.length} active GLTF hulls`,
-    `moonlight: cold overhead key + ${HARBOR_TORCHES.length + state.ships.length * SHIP_LANTERNS.length} warm deck and harbor lights`,
+    `ships: ${state.ships.length} active GLTF hulls across ${new Set(state.ships.map((ship) => ship.modelKey)).size} model families`,
+    `moonlight: cold overhead key + ${HARBOR_TORCHES.length + state.ships.reduce((total, ship) => total + (Array.isArray(ship.lanterns) ? ship.lanterns.length : 0), 0)} warm deck and harbor lights`,
     `physics snapshot: ${state.physics.snapshot.stage} (${state.physics.snapshot.stability})`,
     `physics contacts: ${state.contactCount}`,
-    `mass split: ${state.ships.map((ship) => `${ship.id} ${(getShipMass(ship, shipModel) / 1000).toFixed(1)}t`).join(" · ")}`,
+    `mass split: ${state.ships.map((ship) => `${ship.id} ${(getShipMass(ship, resolveShipModel(state, ship, shipModel)) / 1000).toFixed(1)}t`).join(" · ")}`,
     `cloth band: ${cloth.band} -> ${cloth.representation.output}`,
     `fluid near band: ${water.bandMeshes[0].representation.output}`,
-    `lighting profile: ${lightingPlan.profile} (${lightingDistanceBands.length} bands)`,
+    `lighting profile: ${lightingPlan.profile} (${lightingFeatures.distanceBands.length} bands)`,
   ];
   const qualityMetrics = [
     `fluid detail: ${quality.fluid.currentLevel.id} (${quality.fluid.currentLevel.config.nearResolution} near cells)`,
@@ -2561,12 +4030,8 @@ function renderScene(ctx, canvas, state, shipModel, dom) {
   ];
   const sceneNotes =
     state.focus === "physics"
-      ? [
-          "Stable world snapshots are taken after the authoritative rigid-body commit and before visual follow-up work.",
-          "The ships collide with mass-weighted impulses and positional correction, so the heavier hull keeps more of its line.",
-          "Moonlight keeps the overall read legible while lanterns and torches make collision moments easy to track against the water.",
-        ]
-      : SCENE_NOTES;
+      ? PHYSICS_SCENE_NOTE_KEYS.map((key) => state.translate(key))
+      : SCENE_NOTE_KEYS.map((key) => state.translate(key));
   const custom = state.demoDescription ?? null;
 
   setListContent(
@@ -2586,22 +4051,33 @@ function renderScene(ctx, canvas, state, shipModel, dom) {
   dom.status.textContent =
     typeof custom?.status === "string"
       ? custom.status
-      : `3D scene live · ${state.lastDecision.metrics.fps.toFixed(1)} FPS`;
+      : state.translate(gpuSharedTranslationKeys.statusLive, {
+          fps: state.lastDecision.metrics.fps.toFixed(1),
+        });
   dom.details.textContent =
     typeof custom?.details === "string"
       ? custom.details
       : state.focus === "physics"
-        ? `Stable world snapshots are emitted from ${state.physics.plan.snapshotStageId} after the authoritative solver; the heavier hull now carries momentum through mass-aware collision impulses while cloth and fluid remain downstream.`
-        : `Moonlit GLTF ships collide on ${shipModel.physics.shape ?? "box"} physics volumes; lantern reflections, cloth, and fluid remain continuous while the governor pressure is ${state.lastDecision.pressureLevel}.`;
+        ? state.translate(gpuSharedTranslationKeys.detailsPhysics, {
+            snapshotStageId: state.physics.plan.snapshotStageId,
+          })
+        : state.showcaseRealisticModelsEnabled
+          ? state.translate(gpuSharedTranslationKeys.detailsRealistic, {
+              pressureLevel: state.lastDecision.pressureLevel,
+            })
+          : state.translate(gpuSharedTranslationKeys.detailsLegacy, {
+              pressureLevel: state.lastDecision.pressureLevel,
+            });
 }
 
-function updateSceneState(state, dt, shipModel) {
+function updateSceneState(state, dt, shipModel, featureAdapters) {
   updateShips(state, dt, shipModel);
   updateWaveImpulses(state, dt);
   updateSpray(state, dt);
   const clothPresentation = resolveClothPresentation(
     state,
-    state.clothDetail.getSnapshot().currentLevel.config
+    state.clothDetail.getSnapshot().currentLevel.config,
+    featureAdapters.cloth
   );
   const clothState = ensureShowcaseClothState(
     state,
@@ -2614,25 +4090,28 @@ function updateSceneState(state, dt, shipModel) {
     flagMotion: readVisualNumber(state.demoVisuals?.flagMotion, 0.92),
     waveInfluence: sampleWave(state, FLAG_LAYOUT.origin.x + FLAG_LAYOUT.width * 0.55, FLAG_LAYOUT.origin.z + FLAG_LAYOUT.width * 0.48, state.time),
   });
-  updatePhysicsSnapshot(state, shipModel);
+  updatePhysicsSnapshot(state, shipModel, featureAdapters.physics);
 }
 
-function syncTextState(state, shipModel) {
+function syncTextState(state, shipModel, featureAdapters) {
   const snapshot = {
     coordinateSystem: "right-handed world; +x right, +y up, +z forward from the shore",
     focus: state.focus,
     stress: state.stress,
     ships: state.ships.map((ship) => ({
       id: ship.id,
+      modelKey: ship.modelKey ?? "brigantine",
       x: Number(ship.position.x.toFixed(2)),
       y: Number(ship.position.y.toFixed(2)),
       z: Number(ship.position.z.toFixed(2)),
       vx: Number(ship.velocity.x.toFixed(2)),
       vz: Number(ship.velocity.z.toFixed(2)),
-      massKg: Math.round(getShipMass(ship, shipModel)),
+      massKg: Math.round(getShipMass(ship, resolveShipModel(state, ship, shipModel))),
       lanterns: Array.isArray(ship.lanterns) ? ship.lanterns.length : 0,
     })),
-    shipPhysics: shipModel.physics,
+    shipPhysics: Object.fromEntries(
+      state.ships.map((ship) => [ship.id, resolveShipModel(state, ship, shipModel)?.physics ?? null])
+    ),
     sprays: state.sprays.length,
     waveImpulses: state.waveImpulses.length,
     pressure: state.lastDecision?.pressureLevel ?? "stable",
@@ -2650,41 +4129,63 @@ function syncTextState(state, shipModel) {
     for (let index = 0; index < step; index += 1) {
       state.frame += 1;
       state.time += 1 / 60;
-      updateSceneState(state, 1 / 60, shipModel);
+      updateSceneState(state, 1 / 60, shipModel, featureAdapters);
       state.lastDecision = recordTelemetry(state, 16.67 + (state.stress ? 6.5 : 0));
     }
   };
 }
 
-export async function mountGpuShowcase(options = {}) {
+export async function mountGpuShowcase(options = {}, featureFlags = null) {
+  const featureAdapters = await resolveShowcaseFeatureAdapters(options);
   injectStyles();
   const root = options.root ?? document.body;
   root.classList?.add?.(ROOT_CLASS);
+  const captureSettings = resolveCaptureSettings(options);
+  if (captureSettings.captureMode) {
+    root.classList?.add?.(CAPTURE_CLASS);
+  }
   const previousMarkup = root.innerHTML;
   const previousRenderGameToText = window.render_game_to_text;
   const previousAdvanceTime = window.advanceTime;
   const focus = options.focus ?? new URLSearchParams(window.location.search).get("focus") ?? "integrated";
+  const translate = createGpuSharedTranslator(options.translate);
   const dom = buildDemoDom(root, {
     packageName: options.packageName ?? "@plasius/gpu-demo-viewer",
-    title: options.title ?? DEFAULT_TITLE,
-    subtitle: options.subtitle ?? DEFAULT_SUBTITLE,
+    title: options.title ?? translate(gpuSharedTranslationKeys.showcaseTitle),
+    subtitle: options.subtitle ?? translate(gpuSharedTranslationKeys.showcaseSubtitle),
+    translate,
   });
   dom.focusMode.value = focus;
+  const state = createSceneState(
+    {
+      focus,
+      translate,
+      realisticModelsEnabled: isFeatureEnabled(featureFlags, GPU_SHOWCASE_REALISTIC_MODELS_FEATURE, true),
+      captureMode: captureSettings.captureMode,
+      renderScale: captureSettings.renderScale,
+    },
+    featureAdapters
+  );
+  const assetCatalog = await (state.showcaseRealisticModelsEnabled
+    ? loadShowcaseAssetCatalog()
+    : createLegacyShowcaseAssetCatalog());
+  const shipModel = assetCatalog.ships[assetCatalog.primaryShipKey];
 
-  const state = createSceneState({ focus });
-  const shipModel = await loadGltfModel(resolveShowcaseAssetUrl());
+  state.assetCatalog = assetCatalog;
   state.shipModel = shipModel;
   state.packageState =
     typeof options.createState === "function" ? options.createState() : undefined;
-  updatePhysicsSnapshot(state, shipModel);
+  updatePhysicsSnapshot(state, shipModel, featureAdapters.physics);
   state.lastDecision = recordTelemetry(state, 16.4);
   state.demoDescription = resolveSceneDescription(state, options, shipModel).description;
-  syncTextState(state, shipModel);
+  syncTextState(state, shipModel, featureAdapters);
 
   const ctx = dom.canvas.getContext("2d");
   if (!ctx) {
     throw new Error("2D canvas context is required for the shared showcase.");
   }
+  ctx.imageSmoothingEnabled = true;
+  ctx.imageSmoothingQuality = "high";
   let animationFrameId = 0;
   let destroyed = false;
   const renderFrame = (nowMs) => {
@@ -2699,21 +4200,33 @@ export async function mountGpuShowcase(options = {}) {
       state.lastTimeMs = nowMs;
       state.time += dt;
       state.frame += 1;
-      updateSceneState(state, dt, shipModel);
+      updateSceneState(state, dt, shipModel, featureAdapters);
       updatePackageState(state, options, shipModel, dt);
       const syntheticFrame = 14.2 + state.sprays.length * 0.1 + (state.stress ? 6.4 : 0);
       state.lastDecision = recordTelemetry(state, syntheticFrame);
     }
 
     state.demoDescription = resolveSceneDescription(state, options, shipModel).description;
-    renderScene(ctx, dom.canvas, state, shipModel, dom);
-    syncTextState(state, shipModel);
+    resizeCanvasToDisplaySize(dom.canvas, state);
+    renderScene(
+      ctx,
+      dom.canvas,
+      state,
+      shipModel,
+      dom,
+      featureAdapters.lighting,
+      featureAdapters.fluid,
+      featureAdapters.cloth
+    );
+    syncTextState(state, shipModel, featureAdapters);
     animationFrameId = requestAnimationFrame(renderFrame);
   };
 
   const handlePauseClick = () => {
     state.paused = !state.paused;
-    dom.pauseButton.textContent = state.paused ? "Resume" : "Pause";
+    dom.pauseButton.textContent = state.paused
+      ? state.translate(gpuSharedTranslationKeys.resume)
+      : state.translate(gpuSharedTranslationKeys.pause);
   };
   const handleStressChange = () => {
     state.stress = dom.stressToggle.checked;
@@ -2750,6 +4263,7 @@ export async function mountGpuShowcase(options = {}) {
       state.packageState = undefined;
     }
     root.classList?.remove?.(ROOT_CLASS);
+    root.classList?.remove?.(CAPTURE_CLASS);
     root.innerHTML = previousMarkup;
     if (typeof previousRenderGameToText === "function") {
       window.render_game_to_text = previousRenderGameToText;
@@ -2770,7 +4284,19 @@ export async function mountGpuShowcase(options = {}) {
   };
 }
 
-function updatePhysicsSnapshot(state, shipModel) {
+function updatePhysicsSnapshot(state, shipModel, physicsFeatures) {
+  const createPhysicsWorldSnapshot = assertRequiredFunction(
+    physicsFeatures,
+    "physics",
+    "createWorldSnapshot"
+  );
+  const rigidBodyShapes = Object.fromEntries(
+    state.ships.map((ship) => [
+      ship.id,
+      resolveShipModel(state, ship, shipModel)?.physics?.shape ?? "box",
+    ])
+  );
+
   state.physics.snapshot = createPhysicsWorldSnapshot({
     frameId: `showcase-${state.frame}`,
     tick: state.frame,
@@ -2787,6 +4313,7 @@ function updatePhysicsSnapshot(state, shipModel) {
       contactCount: state.contactCount,
       snapshotStageId: state.physics.plan.snapshotStageId,
       rigidBodyShape: shipModel.physics.shape ?? "box",
+      rigidBodyShapes,
     },
   });
 }