implement basic tectonics + tectonic direction and velocity

src/index.html

@@ -2123,6 +2123,13 @@
             >
               Heightmap
             </button>
+            <button
+              id="editTectonicsButton"
+              data-tip="Click to open Tectonic Plates Editor (requires tectonic template)"
+              data-shortcut="Shift + T"
+            >
+              Tectonics
+            </button>
             <button id="overviewMarkersButton" data-tip="Click to open Markers Overview" data-shortcut="Shift + K">
               Markers
             </button>
@@ -4098,6 +4105,18 @@
         <div id="regimentSelectorBody" class="table"></div>
       </div>
 
+      <div id="tectonicEditor" class="dialog stable" style="display: none">
+        <div id="tectonicPlateList" style="max-height: 300px; overflow-y: auto"></div>
+        <div style="margin-top: 8px">
+          <button id="tectonicRegenerate" data-tip="Regenerate terrain preview from edited plates">Regenerate Preview</button>
+          <button id="tectonicApplyMap" data-tip="Apply changes and regenerate the full map">Apply to Map</button>
+        </div>
+        <div style="margin-top: 4px">
+          <button id="tectonicToggleOverlay" data-tip="Switch between plate view and height view">Toggle View</button>
+          <button id="tectonicClose" data-tip="Close editor and remove overlay">Close</button>
+        </div>
+      </div>
+
       <div id="brushesPanel" class="dialog stable" style="display: none">
         <div id="brushesButtons" style="display: inline-block">
           <button id="brushRaise" data-tip="Raise brush: increase height of cells in radius by Power value">
@@ -8538,6 +8557,7 @@
     <script type="module" src="renderers/index.ts"></script>
 
     <script defer src="config/heightmap-templates.js"></script>
+    <script defer src="config/tectonic-templates.js"></script>
     <script defer src="config/precreated-heightmaps.js"></script>
     <script defer src="libs/alea.min.js?v1.105.0"></script>
     <script defer src="libs/polylabel.min.js?v1.105.0"></script>
@@ -8554,6 +8574,7 @@
     <script defer src="modules/ui/tools.js?v=1.113.3"></script>
     <script defer src="modules/ui/world-configurator.js?v=1.105.4"></script>
     <script defer src="modules/ui/heightmap-editor.js?v=1.113.0"></script>
+    <script defer src="modules/ui/tectonic-editor.js?v=1.0.0"></script>
     <script defer src="modules/ui/provinces-editor.js?v=1.108.1"></script>
     <script defer src="modules/ui/biomes-editor.js?v=1.112.0"></script>
     <script defer src="modules/ui/namesbase-editor.js?v=1.105.11"></script>

src/modules/heightmap-generator.ts

@@ -10,6 +10,8 @@ import {
   P,
   rand,
 } from "../utils";
+import { TectonicPlateGenerator } from "./tectonic-generator";
+import type { TectonicConfig } from "../types/TectonicMetadata";
 
 declare global {
   var HeightmapGenerator: HeightmapModule;
@@ -596,17 +598,36 @@ class HeightmapModule {
     TIME && console.time("defineHeightmap");
     const id = (byId("templateInput")! as HTMLInputElement).value;
     Math.random = Alea(seed);
+
+    const isTectonic =
+      typeof tectonicTemplates !== "undefined" && id in tectonicTemplates;
     const isTemplate = id in heightmapTemplates;
 
-    const heights = isTemplate
-      ? this.fromTemplate(graph, id)
-      : await this.fromPrecreated(graph, id);
+    let heights: Uint8Array | null;
+    if (isTectonic) {
+      heights = this.fromTectonic(graph, tectonicTemplates[id].config);
+    } else if (isTemplate) {
+      heights = this.fromTemplate(graph, id);
+    } else {
+      heights = await this.fromPrecreated(graph, id);
+    }
+
     TIME && console.timeEnd("defineHeightmap");
 
     this.clearData();
     return heights as Uint8Array;
   }
 
+  fromTectonic(graph: any, config: TectonicConfig): Uint8Array {
+    this.setGraph(graph);
+    const generator = new TectonicPlateGenerator(this.grid!, config);
+    const result = generator.generate();
+    this.heights = result.heights;
+    window.tectonicMetadata = result.metadata;
+    window.tectonicGenerator = generator;
+    return this.heights;
+  }
+
   fromTemplate(graph: any, id: string): Uint8Array | null {
     const templateString = heightmapTemplates[id]?.template || "";
     const steps = templateString.split("\n");

src/types/TectonicMetadata.ts

@@ -0,0 +1,60 @@
+export interface TectonicPlate {
+  id: number;
+  cells: Set<number>;
+  isOceanic: boolean;
+  velocity: [number, number, number]; // 3D velocity vector on sphere surface
+  baseElevation: number;
+  seedCell: number;
+}
+
+export type BoundarySubtype =
+  | "cont-cont"
+  | "ocean-cont"
+  | "ocean-ocean"
+  | "cont-rift"
+  | "ocean-rift"
+  | "transform";
+
+export interface PlateBoundary {
+  plateA: number;
+  plateB: number;
+  cells: number[];
+  convergence: number;
+  subtype: BoundarySubtype;
+}
+
+export interface TectonicConfig {
+  plateCount: number;
+  continentalRatio: number;
+  collisionIntensity: number;
+  noiseLevel: number;
+  hotspotCount: number;
+  smoothingPasses: number;
+  erosionPasses: number;
+  seaLevel: number; // elevation shift: 0 = default, positive = more water, negative = more land
+}
+
+export const DEFAULT_TECTONIC_CONFIG: TectonicConfig = {
+  plateCount: 12,
+  continentalRatio: 0.35,
+  collisionIntensity: 1.0,
+  noiseLevel: 0.3,
+  hotspotCount: 3,
+  smoothingPasses: 3,
+  erosionPasses: 2,
+  seaLevel: 0
+};
+
+export interface TectonicMetadata {
+  plateIds: Uint8Array;
+  boundaryType: Int8Array;
+  roughness: Float32Array;
+  isOceanic: Uint8Array;
+  plates: TectonicPlate[];
+  boundaries: PlateBoundary[];
+}
+
+declare global {
+  var tectonicMetadata: TectonicMetadata | null;
+  var tectonicGenerator: import("../modules/tectonic-generator").TectonicPlateGenerator | null;
+}

src/types/global.ts

@@ -15,6 +15,7 @@ declare global {
   var options: any;
 
   var heightmapTemplates: any;
+  var tectonicTemplates: any;
   var Routes: any;
   var populationRate: number;
   var urbanDensity: number;