@jgengine/shell 0.22.0 → 0.23.0

package/dist/render/modelSurface.js

@@ -0,0 +1,206 @@
+import * as THREE from "three";
+const ORIGINAL_KEY = "jgSurfaceOriginal";
+const OPT_OUT_KEY = "jgSurfaceDetail";
+let activeLevel = "full";
+let gameEnabled = true;
+const compiled = new Set();
+const strengthUniform = { value: 1 };
+const VERTEX_PARS = /* glsl */ `
+varying vec3 vJgSurfPos;`;
+// Captured before skinning so the pattern rides the bind pose instead of swimming through animated limbs;
+// the scale terms convert bind/object units to roughly world metres so one frequency suits every pack.
+const VERTEX_MAIN = /* glsl */ `
+vec3 jgSurfScale = vec3(length(modelMatrix[0].xyz), length(modelMatrix[1].xyz), length(modelMatrix[2].xyz));
+#ifdef USE_SKINNING
+  jgSurfScale *= length((bindMatrixInverse * boneMatX * bindMatrix)[0].xyz);
+#endif
+vJgSurfPos = transformed * jgSurfScale;
+#ifdef USE_INSTANCING
+  vJgSurfPos *= vec3(length(instanceMatrix[0].xyz), length(instanceMatrix[1].xyz), length(instanceMatrix[2].xyz));
+  vJgSurfPos += mod(instanceMatrix[3].xyz, 97.0);
+#endif
+#include <skinning_vertex>`;
+const FRAGMENT_PARS = /* glsl */ `
+varying vec3 vJgSurfPos;
+uniform float jgSurfStrength;
+float jgSurfHash(vec3 p) {
+  p = fract(p * 0.1031);
+  p += dot(p, p.zyx + 31.32);
+  return fract((p.x + p.y) * p.z);
+}
+float jgSurfNoise(vec3 x) {
+  vec3 i = floor(x);
+  vec3 f = fract(x);
+  vec3 u = f * f * (3.0 - 2.0 * f);
+  return mix(
+    mix(mix(jgSurfHash(i), jgSurfHash(i + vec3(1, 0, 0)), u.x), mix(jgSurfHash(i + vec3(0, 1, 0)), jgSurfHash(i + vec3(1, 1, 0)), u.x), u.y),
+    mix(mix(jgSurfHash(i + vec3(0, 0, 1)), jgSurfHash(i + vec3(1, 0, 1)), u.x), mix(jgSurfHash(i + vec3(0, 1, 1)), jgSurfHash(i + vec3(1, 1, 1)), u.x), u.y),
+    u.z);
+}`;
+// Three octaves of object-space value noise, each faded once a pixel spans its cell so distance never
+// shimmers: broad mottling, brush-scale variation and fine speckle. Wear lifts raised spots paler and drier.
+const COLOR_MAIN = /* glsl */ `
+#include <color_fragment>
+float jgFootprint = max(length(dFdx(vJgSurfPos)), length(dFdy(vJgSurfPos)));
+float jgBroad = jgSurfNoise(vJgSurfPos * 1.6);
+float jgMid = mix(0.5, jgSurfNoise(vJgSurfPos * 4.5 + 7.0), 1.0 - smoothstep(0.12, 0.4, jgFootprint * 4.5));
+float jgFine = mix(0.5, jgSurfNoise(vJgSurfPos * 12.0 + 17.0), 1.0 - smoothstep(0.12, 0.4, jgFootprint * 12.0));
+float jgWear = smoothstep(0.56, 0.8, jgBroad * 0.45 + jgMid * 0.4 + jgFine * 0.15) * jgSurfStrength;
+float jgLuma = dot(diffuseColor.rgb, vec3(0.299, 0.587, 0.114));
+diffuseColor.rgb *= 1.0 + ((jgBroad - 0.5) * 0.2 + (jgMid - 0.5) * 0.16 + (jgFine - 0.5) * 0.1) * jgSurfStrength;
+diffuseColor.rgb = mix(diffuseColor.rgb, mix(vec3(jgLuma), diffuseColor.rgb, 0.7) * 1.18, jgWear * 0.5);`;
+const ROUGHNESS_MAIN = /* glsl */ `
+#include <roughnessmap_fragment>
+roughnessFactor = clamp(roughnessFactor + ((jgMid - 0.5) * 0.24 + (jgFine - 0.5) * 0.12 + jgWear * 0.08) * jgSurfStrength, 0.04, 1.0);`;
+// Mikkelsen's screen-space bump with unnormalized frame vectors, so the height is in metres and the
+// slope reads the same at every distance; fades before the grain aliases.
+const NORMAL_MAIN = /* glsl */ `
+#include <normal_fragment_maps>
+{
+  float jgGrainFade = 1.0 - smoothstep(0.12, 0.4, jgFootprint * 34.0);
+  float jgHeight = (jgMid * 0.012 + jgFine * 0.006 + jgSurfNoise(vJgSurfPos * 34.0 + 41.0) * 0.003 * jgGrainFade) * jgSurfStrength;
+  vec3 jgDpdx = dFdx(-vViewPosition);
+  vec3 jgDpdy = dFdy(-vViewPosition);
+  vec3 jgR1 = cross(jgDpdy, normal);
+  vec3 jgR2 = cross(normal, jgDpdx);
+  float jgDet = dot(jgDpdx, jgR1) * faceDirection;
+  vec3 jgGrad = sign(jgDet) * (dFdx(jgHeight) * jgR1 + dFdy(jgHeight) * jgR2);
+  vec3 jgBumped = abs(jgDet) * normal - jgGrad;
+  float jgLength2 = dot(jgBumped, jgBumped);
+  // A degenerate pixel frame (det 0, edge-on or helper lanes) would normalize zero into NaN, which bloom spreads across the frame.
+  if (jgLength2 > 1e-30 && jgLength2 < 1e30) normal = jgBumped * inversesqrt(jgLength2);
+}`;
+// Cheap cavity: down-facing and mottled-dark spots receive less sky, which grounds a form without an AO pass.
+const OCCLUSION_MAIN = /* glsl */ `
+#include <aomap_fragment>
+{
+  float jgUp = inverseTransformDirection(normal, viewMatrix).y * 0.5 + 0.5;
+  float jgCavity = mix(1.0, mix(0.7, 1.0, jgUp) * (0.88 + 0.12 * jgBroad), jgSurfStrength);
+  reflectedLight.indirectDiffuse *= jgCavity;
+  reflectedLight.indirectSpecular *= jgCavity;
+}`;
+function isStandard(material) {
+    return material.isMeshStandardMaterial === true;
+}
+/**
+ * Whether the procedural surface pass suits this material: an opaque standard/physical surface without
+ * its own normal map (flat colour, vertex colour, or a palette-atlas texture like KayKit's).
+ * @internal
+ */
+export function modelSurfaceEligible(material) {
+    return isStandard(material) && material.normalMap === null && !material.transparent && material.alphaTest === 0;
+}
+/** The level a material compiles with right now: the global tier unless the material opted out. @internal */
+export function materialSurfaceLevel(material) {
+    if (material.userData[OPT_OUT_KEY] === false || !modelSurfaceEligible(material))
+        return "off";
+    return activeLevel;
+}
+function surfaceOnBeforeCompile(shader) {
+    if (!compiled.has(this)) {
+        compiled.add(this);
+        const material = this;
+        material.addEventListener("dispose", function release() {
+            material.removeEventListener("dispose", release);
+            compiled.delete(material);
+        });
+    }
+    const level = materialSurfaceLevel(this);
+    if (level === "off")
+        return;
+    shader.uniforms.jgSurfStrength = strengthUniform;
+    shader.vertexShader = shader.vertexShader
+        .replace("#include <common>", `#include <common>${VERTEX_PARS}`)
+        .replace("#include <skinning_vertex>", VERTEX_MAIN);
+    let fragment = shader.fragmentShader
+        .replace("#include <common>", `#include <common>${FRAGMENT_PARS}`)
+        .replace("#include <color_fragment>", COLOR_MAIN)
+        .replace("#include <roughnessmap_fragment>", ROUGHNESS_MAIN)
+        .replace("#include <aomap_fragment>", OCCLUSION_MAIN);
+    if (level === "full")
+        fragment = fragment.replace("#include <normal_fragment_maps>", NORMAL_MAIN);
+    shader.fragmentShader = fragment;
+}
+function surfaceCacheKey() {
+    return `jg-surface:v1:${materialSurfaceLevel(this)}`;
+}
+/**
+ * Re-tune a glTF material's exported finish into the painted range: glossy 0.4–0.5 roughness reads as
+ * plastic, and metallic 1 / roughness 1 with no map is an exporter default that renders near-black.
+ * @internal
+ */
+export function normalizeModelMaterial(material) {
+    if (material.userData[ORIGINAL_KEY] !== undefined)
+        return;
+    const original = { roughness: material.roughness, metalness: material.metalness, envMapIntensity: material.envMapIntensity };
+    material.userData[ORIGINAL_KEY] = original;
+    if (material.roughnessMap === null)
+        material.roughness = 0.6 + 0.35 * THREE.MathUtils.clamp(material.roughness, 0, 1);
+    if (material.metalnessMap === null) {
+        material.metalness = original.metalness >= 0.99 && original.roughness >= 0.99 ? 0.1 : Math.min(material.metalness, 0.85);
+    }
+    material.envMapIntensity = Math.min(material.envMapIntensity, 0.8);
+}
+/**
+ * Give every eligible material in a freshly loaded model the engine's default painted finish: exported
+ * PBR params normalized and a shared, tier-aware procedural detail shader (object-space mottling, wear,
+ * roughness break-up, micro-normal and cavity). Idempotent; materials with their own normal maps, cutout
+ * or transparent materials and non-standard materials are left untouched.
+ * @internal
+ */
+export function applyModelSurface(root) {
+    if (!gameEnabled)
+        return;
+    const seen = new Set();
+    root.traverse((node) => {
+        const mesh = node;
+        if (!mesh.isMesh)
+            return;
+        for (const material of Array.isArray(mesh.material) ? mesh.material : [mesh.material]) {
+            if (seen.has(material) || !modelSurfaceEligible(material))
+                continue;
+            seen.add(material);
+            normalizeModelMaterial(material);
+            if (material.onBeforeCompile === surfaceOnBeforeCompile)
+                continue;
+            if (material.onBeforeCompile !== THREE.Material.prototype.onBeforeCompile)
+                continue;
+            material.onBeforeCompile = surfaceOnBeforeCompile;
+            material.customProgramCacheKey = surfaceCacheKey;
+        }
+    });
+}
+/**
+ * Opt one cloned material out of the default surface: restore its exported params and compile it
+ * without the detail shader. Used for a model whose `surfaceDetail` is `false`.
+ * @internal
+ */
+export function optOutModelSurface(material) {
+    const original = material.userData[ORIGINAL_KEY];
+    material.userData[OPT_OUT_KEY] = false;
+    if (original !== undefined && isStandard(material)) {
+        material.roughness = original.roughness;
+        material.metalness = original.metalness;
+        material.envMapIntensity = original.envMapIntensity;
+    }
+    material.needsUpdate = true;
+}
+/**
+ * Select the surface-detail level every patched model material compiles with, and whether models loaded
+ * from now on get the default finish at all (a game's `surfaceDetail: false`). Changing the level
+ * recompiles only materials already drawn; programs are shared per level, so the count stays bounded.
+ * @internal
+ */
+export function configureModelSurface(enabled, level) {
+    gameEnabled = enabled;
+    const next = enabled ? level : "off";
+    if (next === activeLevel)
+        return;
+    activeLevel = next;
+    for (const material of compiled)
+        material.needsUpdate = true;
+}
+/** Current model surface-detail level. @internal */
+export function modelSurfaceLevel() {
+    return activeLevel;
+}

package/dist/render/useModelInstance.d.ts

@@ -1,7 +1,7 @@
 import { Group, type Object3D } from "three";
 import type { ModelConfig } from "@jgengine/core/game/playableGame";
 /** Model loading, placement, shadows and animation for a custom renderer. */
-export type ModelInstanceConfig = Pick<ModelConfig, "url" | "scale" | "targetHeight" | "y" | "anchor" | "dims" | "shadows" | "animation" | "hiddenNodes">;
+export type ModelInstanceConfig = Pick<ModelConfig, "url" | "scale" | "targetHeight" | "y" | "anchor" | "dims" | "shadows" | "animation" | "hiddenNodes" | "surfaceDetail">;
 /** Caller-owned styling runs on the isolated clone, never the loader cache. */
 export interface ModelInstanceOptions {
     instanceId?: string;

package/dist/render/useModelInstance.js

@@ -23,7 +23,7 @@ export function useModelInstance(model, options = {}) {
     const { configure, instanceId } = options;
     const hiddenNodesKey = modelHiddenNodesKey(hiddenNodes);
     const { content, scene, bindBounds } = useMemo(() => {
-        const content = cloneModelScene(gltf.scene, { shadows: model.shadows });
+        const content = cloneModelScene(gltf.scene, { shadows: model.shadows, surfaceDetail: model.surfaceDetail });
         try {
             configure?.(content);
             for (const diagnostic of applyModelNodeVisibility(content, hiddenNodes))
@@ -35,7 +35,7 @@ export function useModelInstance(model, options = {}) {
             disposeModelScene(content);
             throw error;
         }
-    }, [gltf.scene, model.shadows, configure, hiddenNodesKey]);
+    }, [gltf.scene, model.shadows, model.surfaceDetail, configure, hiddenNodesKey]);
     const placement = useMemo(() => modelPlacementTransform(scene, model, bindBounds), [scene, bindBounds, model.scale, model.targetHeight, model.y, model.anchor, model.dims]);
     useEffect(() => () => disposeModelScene(content), [content]);
     useModelAnimation(content, gltf.animations, model.animation, instanceId);

package/dist/scatter/scatterModels.js

@@ -2,6 +2,7 @@ import * as THREE from "three";
 import { parseModelHiddenNodes } from "@jgengine/core/editor/modelNodeVisibility";
 import { applyMaterialOverride } from "../materialOverride.js";
 import { cloneModelScene, disposeModelScene, ownModelMaterial } from "../render/modelRender.js";
+import { applyModelSurface } from "../render/modelSurface.js";
 /** The scale + position offset a `ModelConfig` applies before any per-instance transform — same anchor/targetHeight rules as the single-instance entity renderer. */
 function scatterModelBaseTransform(scene, model) {
     let scale = model.scale ?? 1;
@@ -40,7 +41,8 @@ export function buildScatterModelSources(gltfScene, model) {
         throw new Error("Instanced model material assignments require the individual model renderer; use EntityModel for authored slots");
     if (model.material?.maps !== undefined)
         throw new Error("Instanced model override maps require an owned texture loader; use EntityModel for authored maps");
-    const root = cloneModelScene(gltfScene, { shadows: model.shadows });
+    applyModelSurface(gltfScene);
+    const root = cloneModelScene(gltfScene, { shadows: model.shadows, surfaceDetail: model.surfaceDetail });
     if (model.material !== undefined)
         applyMaterialOverride(root, model.material, { clone: false, ownMaterial: material => ownModelMaterial(root, material) });
     root.updateMatrixWorld(true);

package/dist/scene/AuthoredScene.d.ts

@@ -16,13 +16,19 @@ export interface AuthoredPathsProps {
     field: TerrainField;
     /** Only render these path kinds; default renders every non-scatter path. */
     kinds?: readonly string[];
+    /**
+     * Shade paths with the terrain's procedural surfaces (dirt, gravel, paving), wear and soft edges.
+     * Default true; false keeps flat-colour ribbons. One path opts out with `meta.surfaceDetail: false`.
+     */
+    surfaceDetail?: boolean;
 }
 /**
  * Renders a document's non-scatter paths (roads, routes, corridors) as ground-draped ribbons — the
  * editor authors the polyline, the engine drapes it over the live terrain at runtime. Width comes
- * from `path.width`, color from `path.meta.color`/`path.color`. A game never hand-rolls path meshes.
+ * from `path.width`, color from `path.meta.color`/`path.color`, and the procedural surface from
+ * `path.meta.surface` or the kind (see `resolvePathSurface`). A game never hand-rolls path meshes.
  */
-export declare function AuthoredPaths({ document, field, kinds }: AuthoredPathsProps): import("react").JSX.Element;
+export declare function AuthoredPaths({ document, field, kinds, surfaceDetail }: AuthoredPathsProps): import("react").JSX.Element;
 /** Props for {@link AuthoredObjects}: document, ground field, and optional lift / onExisting. */
 export interface AuthoredObjectsProps extends ResolveAuthoredObjectsOptions {
     document: EditorDocument;
@@ -60,6 +66,8 @@ export interface AuthoredSceneProps {
     field: TerrainField;
     /** Restrict rendered path kinds; default renders every non-scatter path. */
     pathKinds?: readonly string[];
+    /** Procedural surface, wear and soft edges on paths (default true); see {@link AuthoredPathsProps.surfaceDetail}. */
+    pathSurfaceDetail?: boolean;
     /**
      * Scatter palette item id → model asset id or `ModelConfig`; a mapped item GPU-instances the real
      * catalog GLB instead of the stylized proxy. Keyed by scatter `item` (not entity name — pass a
@@ -98,4 +106,4 @@ export interface AuthoredSceneProps {
  * place markers with your own entity spawns. Pass `scatterModels`+`assets` to resolve palette items to
  * real catalog GLBs; unmapped items keep the stylized proxy.
  */
-export declare function AuthoredScene({ document, diagnostics, field, pathKinds, scatterModels, flockModels, assets, live, placeObjects, groundColorAt, }: AuthoredSceneProps): import("react").JSX.Element;
+export declare function AuthoredScene({ document, diagnostics, field, pathKinds, pathSurfaceDetail, scatterModels, flockModels, assets, live, placeObjects, groundColorAt, }: AuthoredSceneProps): import("react").JSX.Element;

package/dist/scene/AuthoredScene.js

@@ -10,6 +10,8 @@ import { buildRoadRibbon, GROUND_DECAL_LAYERS, roundPathCorners } from "@jgengin
 import { isScatterPath, resolveScatter } from "@jgengine/core/world/scatterRegion";
 import { getAssetGenerator } from "@jgengine/core/scene/assetGenerator";
 import { useGameContext } from "@jgengine/react/provider";
+import { resolvePathSurface, RIBBON_FRAME_ATTRIBUTE, ribbonEdgeMargin, ribbonSurfaceFrame, useSurfaceRibbonMaterial, } from "../terrain/surfaceRibbonMaterial.js";
+import { useTerrainQuality } from "../terrain/terrainQuality.js";
 import { createModelMapResolver } from "../render/resolveModel.js";
 import { InstancedScatter } from "../scatter/InstancedScatter.js";
 import { GeneratedAssetInstance } from "./GeneratedAssetRenderer.js";
@@ -93,26 +95,31 @@ function AuthoredStudios({ document, context }) {
 }
 const DEFAULT_PATH_COLOR = "#7a6444";
 /** One editor path drawn as a ground-draped ribbon — subdivided and sampled against the live field. */
-function DrapedPath({ points, width, color, field, }) {
+function DrapedPath({ points, width, color, field, surface, }) {
+    const quality = useTerrainQuality();
+    const margin = surface === null ? 0 : ribbonEdgeMargin(surface);
     const geometry = useMemo(() => {
         // Fillet sharp turns first so bends read as smooth arcs, not overlapping rectangles.
         const rounded = roundPathCorners(points, Math.max(1.5, width * 0.9), 6);
-        const ribbon = buildRoadRibbon(rounded, width, (x, z) => field.sampleHeight(x, z), {
+        // A soft edge needs the ribbon wider than authored so the fade straddles the authored edge.
+        const ribbon = buildRoadRibbon(rounded, width + margin, (x, z) => field.sampleHeight(x, z), {
             // Generic authored paths (dirt roads, routes, corridors) drape on the shared road decal layer.
             elevation: GROUND_DECAL_LAYERS.road,
             maxSegmentLength: 1,
         });
         const geo = new THREE.BufferGeometry();
         geo.setAttribute("position", new THREE.BufferAttribute(ribbon.positions, 3));
+        geo.setAttribute(RIBBON_FRAME_ATTRIBUTE, new THREE.BufferAttribute(ribbonSurfaceFrame([ribbon.positions]), 3));
         geo.setIndex(new THREE.BufferAttribute(ribbon.indices, 1));
         geo.computeVertexNormals();
         return geo;
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [points, width, field]);
+    }, [points, width, margin, field]);
     useEffect(() => () => geometry.dispose(), [geometry]);
+    const material = useSurfaceRibbonMaterial(surface === null ? null : { ...surface, color, halfWidth: width / 2, quality });
     if (points.length < 2)
         return null;
-    return (_jsx("mesh", { geometry: geometry, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: color, roughness: 1, metalness: 0, side: THREE.DoubleSide }) }));
+    return (_jsx("mesh", { geometry: geometry, receiveShadow: true, ...(material === null ? {} : { material }), children: material === null ? _jsx("meshStandardMaterial", { color: color, roughness: 1, metalness: 0, side: THREE.DoubleSide }) : null }));
 }
 function pathColor(meta, color) {
     if (typeof meta?.["color"] === "string")
@@ -122,11 +129,12 @@ function pathColor(meta, color) {
 /**
  * Renders a document's non-scatter paths (roads, routes, corridors) as ground-draped ribbons — the
  * editor authors the polyline, the engine drapes it over the live terrain at runtime. Width comes
- * from `path.width`, color from `path.meta.color`/`path.color`. A game never hand-rolls path meshes.
+ * from `path.width`, color from `path.meta.color`/`path.color`, and the procedural surface from
+ * `path.meta.surface` or the kind (see `resolvePathSurface`). A game never hand-rolls path meshes.
  */
-export function AuthoredPaths({ document, field, kinds }) {
+export function AuthoredPaths({ document, field, kinds, surfaceDetail = true }) {
     const paths = document.paths.filter((path) => !isScatterPath(path) && getSceneKindRenderer(path.kind) === undefined && (kinds === undefined || kinds.includes(path.kind)));
-    return (_jsx(_Fragment, { children: paths.map((path) => (_jsx(DrapedPath, { points: path.points.map((point) => [point.x, point.z]), width: path.width ?? 4, color: pathColor(path.meta, path.color), field: field }, path.id))) }));
+    return (_jsx(_Fragment, { children: paths.map((path) => (_jsx(DrapedPath, { points: path.points.map((point) => [point.x, point.z]), width: path.width ?? 4, color: pathColor(path.meta, path.color), field: field, surface: surfaceDetail ? resolvePathSurface(path.kind, path.width ?? 4, path.meta) : null }, path.id))) }));
 }
 /**
  * Places every editor marker with a catalog id into `ctx.scene.object`, grounded on `field`.
@@ -186,7 +194,7 @@ export function AuthoredSolids({ document, field }) {
  * place markers with your own entity spawns. Pass `scatterModels`+`assets` to resolve palette items to
  * real catalog GLBs; unmapped items keep the stylized proxy.
  */
-export function AuthoredScene({ document, diagnostics = false, field, pathKinds, scatterModels, flockModels, assets, live = true, placeObjects, groundColorAt, }) {
+export function AuthoredScene({ document, diagnostics = false, field, pathKinds, pathSurfaceDetail = true, scatterModels, flockModels, assets, live = true, placeObjects, groundColorAt, }) {
     const ctx = useGameContext();
     const liveDocument = useLiveEditorDocument(document, live);
     // Authoring updates configuration only. Physics remains owned by the fixed game-time stages.
@@ -196,7 +204,7 @@ export function AuthoredScene({ document, diagnostics = false, field, pathKinds,
     const shouldPlaceObjects = placeObjects === true || (typeof placeObjects === "object" && placeObjects !== null);
     const objectVerticalOffset = typeof placeObjects === "object" && placeObjects !== null ? (placeObjects.verticalOffset ?? 0) : 0;
     const objectExcludeKinds = typeof placeObjects === "object" && placeObjects !== null ? placeObjects.excludeKinds : undefined;
-    return (_jsxs(_Fragment, { children: [_jsx(AuthoredWeatherLayer, { document: liveDocument, heightAt: field.sampleHeight, diagnostics: diagnostics }), flockModels === undefined ? null : _jsx(AuthoredFlocks, { models: flockModels, assets: assets }), _jsx(AuthoredPaths, { document: liveDocument, field: field, ...(pathKinds === undefined ? {} : { kinds: pathKinds }) }), _jsx(InstancedScatter, { instances: instances, ...(resolveItem === undefined ? {} : { resolveItem }) }), _jsx(AuthoredStudios, { document: liveDocument, context: {
+    return (_jsxs(_Fragment, { children: [_jsx(AuthoredWeatherLayer, { document: liveDocument, heightAt: field.sampleHeight, diagnostics: diagnostics }), flockModels === undefined ? null : _jsx(AuthoredFlocks, { models: flockModels, assets: assets }), _jsx(AuthoredPaths, { document: liveDocument, field: field, surfaceDetail: pathSurfaceDetail, ...(pathKinds === undefined ? {} : { kinds: pathKinds }) }), _jsx(InstancedScatter, { instances: instances, ...(resolveItem === undefined ? {} : { resolveItem }) }), _jsx(AuthoredStudios, { document: liveDocument, context: {
                     document: liveDocument,
                     field,
                     ...(assets === undefined ? {} : { assets }),

package/dist/scene/CityRenderer.js

@@ -24,11 +24,15 @@ import { resolveCityObject, CITY_KIND, CITY_ZONE_KIND, } from "@jgengine/core/wo
 import { zoneBand, zoneMetric } from "@jgengine/core/world/cityContent";
 import { generateBuilding, buildingSurfaceColor, resolveBuildingPalette, resolveBuildingWallTones, } from "@jgengine/core/world/buildings";
 import { hashString } from "@jgengine/core/random/rng";
+import { valueNoise } from "@jgengine/core/world/terrain";
 import { buildScatterProxy } from "../scatter/scatterProxies.js";
 import { InstancedBuildings } from "../structures/GeneratedBuilding.js";
 import { getBuildingKit } from "../structures/buildingKitRegistry.js";
 import { createCityWindowMaterial } from "./cityWindowMaterial.js";
+import { createSurfaceRibbonMaterial } from "../terrain/surfaceRibbonMaterial.js";
+import { useTerrainQuality } from "../terrain/terrainQuality.js";
 import { registerSceneKindRenderer } from "./sceneKindRenderers.js";
+import { junctionSurface } from "./cityJunctionSurface.js";
 const ASPHALT_COLOR = "#3a3b3d";
 const GRAVEL_COLOR = "#93815f";
 const SIDEWALK_COLOR = "#867f74";
@@ -58,8 +62,8 @@ const CROP_COLORS = ["#5d7a35", "#7a6b41", "#6f7f3a"];
  *  only a low-density (large-block) district lets the edge band go back to lawn. */
 const BLOCK_SURFACE_COLORS = { core: "#5b5850", mid: "#6c6456", edge: "#78765c" };
 const BLOCK_EDGE_GREEN = "#6a7f4a";
-/** The developed ground fades into this at its outer reach so the fabric has no stamped rim. */
-const FRINGE_COLOR = "#5f7444";
+/** Width (m) over which the developed ground fades out at its outer reach, so it has no stamped rim. */
+const FABRIC_FADE = 9;
 /** Non-buildable block land takes its open-space colour so a park block never shows raw terrain. */
 const BLOCK_OPEN_COLORS = { park: PARK_COLORS.green, plaza: PARK_COLORS.plaza, field: PARK_COLORS.field, buffer: PARK_COLORS.buffer };
 /**
@@ -573,7 +577,7 @@ function OneCity({ object, context }) {
         const asphalt = new MeshAccumulator(true);
         const gravel = new MeshAccumulator();
         const sidewalks = new MeshAccumulator();
-        const urban = new MeshAccumulator(true);
+        let urban = null;
         const land = new MeshAccumulator(true);
         const patches = new MeshAccumulator(true);
         const markings = new MeshAccumulator(true);
@@ -706,7 +710,11 @@ function OneCity({ object, context }) {
             const crossIndex = trimmed.junctionIndices[j];
             const scuff = (hashString(`cross:${crossIndex}`) % 512) / 512;
             wearColor.setRGB(0.76 + scuff * 0.18, 0.77 + scuff * 0.17, 0.8 + scuff * 0.16);
-            patches.addMesh(trimmed.junctions[j], wearColor);
+            const cross = resolved.intersections[crossIndex];
+            if (cross !== undefined && junctionSurface(cross, resolved.streets) === "gravel")
+                gravel.addMesh(trimmed.junctions[j]);
+            else
+                patches.addMesh(trimmed.junctions[j], wearColor);
         }
         for (const paint of buildIntersectionMarkings(trimmed, deckSampler, {
             mouthClearance: 1.25,
@@ -846,32 +854,59 @@ function OneCity({ object, context }) {
                         }
                     }
                 }
-                const fringe = new THREE.Color(FRINGE_COLOR);
+                // One shared-vertex sheet coloured per vertex from smooth noise: a per-cell roll flipped
+                // neighbouring cells between zone bands and drew a hard checkerboard over the district.
                 const fabricColor = new THREE.Color();
+                const seed = hashString(`fabric:${resolved.center[0]}:${resolved.center[2]}`);
+                const vertexIndex = new Int32Array(nx * nz).fill(-1);
+                const fabric = { positions: [], indices: [], colors: [] };
+                const vertexAt = (i, j) => {
+                    const idx = j * nx + i;
+                    const existing = vertexIndex[idx];
+                    if (existing >= 0)
+                        return existing;
+                    const x = originX + i * cell;
+                    const z = originZ + j * cell;
+                    const d = field[idx];
+                    const tone = valueNoise(x / 9, z / 9, seed) * 0.5 + 0.5;
+                    if (d < pavedTo) {
+                        fabricColor.set(SIDEWALK_COLOR);
+                    }
+                    else {
+                        const band = bandAt(x, z, tone);
+                        fabricColor.set(band === "edge" && lawnEdge ? BLOCK_EDGE_GREEN : BLOCK_SURFACE_COLORS[band]);
+                        // A block-sized tone over the fine grain: yards, courts and lots, not one poured apron.
+                        fabricColor.multiplyScalar(0.8 + (valueNoise(x / 22, z / 22, seed + 1) * 0.5 + 0.5) * 0.42);
+                    }
+                    fabricColor.multiplyScalar(0.95 + tone * 0.1);
+                    // Fade to transparent over the outer reach so the sheet melts into whatever terrain lies
+                    // beyond it, instead of a hard stair-stepped rim in a fixed fringe colour.
+                    const t = Math.max(0, Math.min(1, (reach - d) / FABRIC_FADE));
+                    const next = fabric.positions.length / 3;
+                    fabric.positions.push(x, sample(x, z) + URBAN_LAYER, z);
+                    fabric.colors.push(fabricColor.r, fabricColor.g, fabricColor.b, t * t * (3 - 2 * t));
+                    vertexIndex[idx] = next;
+                    return next;
+                };
                 for (let j = 0; j + 1 < nz; j += 1) {
                     for (let i = 0; i + 1 < nx; i += 1) {
                         const d = (field[j * nx + i] + field[j * nx + i + 1] + field[(j + 1) * nx + i] + field[(j + 1) * nx + i + 1]) / 4;
                         if (d > reach)
                             continue;
-                        const x = originX + (i + 0.5) * cell;
-                        const z = originZ + (j + 0.5) * cell;
-                        const tone = (hashString(`fabric:${i}:${j}`) % 256) / 256;
-                        if (d < pavedTo) {
-                            fabricColor.set(SIDEWALK_COLOR);
-                        }
-                        else {
-                            const band = bandAt(x, z, tone);
-                            fabricColor.set(band === "edge" && lawnEdge ? BLOCK_EDGE_GREEN : BLOCK_SURFACE_COLORS[band]);
-                            // A block-sized patch tone over the fine per-cell grain: yards, courts and lots,
-                            // not one poured apron.
-                            fabricColor.multiplyScalar(0.8 + ((hashString(`yard:${Math.floor(x / 22)}:${Math.floor(z / 22)}`) % 256) / 256) * 0.42);
-                        }
-                        fabricColor.multiplyScalar(0.95 + tone * 0.1);
-                        if (d > reach - 7)
-                            fabricColor.lerp(fringe, Math.min(1, (d - (reach - 7)) / 7));
-                        urban.addPatch([x, z], [cell, cell], 0, sample, URBAN_LAYER, fabricColor);
+                        const a = vertexAt(i, j);
+                        const b = vertexAt(i + 1, j);
+                        const c = vertexAt(i, j + 1);
+                        const e = vertexAt(i + 1, j + 1);
+                        fabric.indices.push(a, c, b, b, c, e);
                     }
                 }
+                if (fabric.indices.length > 0) {
+                    urban = new THREE.BufferGeometry();
+                    urban.setAttribute("position", new THREE.BufferAttribute(new Float32Array(fabric.positions), 3));
+                    urban.setAttribute("color", new THREE.BufferAttribute(new Float32Array(fabric.colors), 4));
+                    urban.setIndex(fabric.indices);
+                    urban.computeVertexNormals();
+                }
             }
         }
         // The land ring behind the sidewalk is the block INTERIOR — fill it with a surface read from
@@ -941,7 +976,7 @@ function OneCity({ object, context }) {
             asphalt: asphalt.build(),
             gravel: gravel.build(),
             sidewalks: sidewalks.build(),
-            urban: urban.build(),
+            urban,
             land: land.build(),
             patches: patches.build(),
             markings: markings.build(),
@@ -1469,9 +1504,36 @@ function OneCity({ object, context }) {
         for (const material of race.materials)
             material.dispose();
     }, [race]);
+    const quality = useTerrainQuality();
+    const surfaceDetail = object.meta?.["surfaceDetail"] !== false;
+    const groundMaterials = useMemo(() => {
+        if (!surfaceDetail)
+            return null;
+        const make = (surface, color, vertexColors, roughness, scale = 1) => createSurfaceRibbonMaterial({ surface, color, vertexColors, roughness, scale, halfWidth: 1, quality });
+        const urban = make("dirt", "#ffffff", true, 1);
+        urban.transparent = true;
+        urban.depthWrite = false;
+        return {
+            urban,
+            land: make("dirt", "#ffffff", true, 1),
+            asphalt: make("road", ASPHALT_COLOR, true, 0.96),
+            gravel: make("gravel", GRAVEL_COLOR, false, 1),
+            sidewalks: make("pavement", SIDEWALK_COLOR, false, 1, 1.6),
+            patches: make("road", ASPHALT_COLOR, true, 0.96),
+            medians: make("grass", MEDIAN_COLOR, false, 1),
+            pavementDrives: make("concrete", PAVEMENT_COLOR, false, 1, 1.6),
+            gravelDrives: make("gravel", GRAVEL_COLOR, false, 1),
+            parks: make("ground", "#ffffff", true, 1),
+            crops: make("dirt", "#ffffff", true, 1),
+        };
+    }, [surfaceDetail, quality]);
+    useEffect(() => () => {
+        for (const material of Object.values(groundMaterials ?? {}))
+            material.dispose();
+    }, [groundMaterials]);
     if (resolved === null)
         return null;
-    return (_jsxs("group", { children: [ground?.urban != null ? (_jsx("mesh", { geometry: ground.urban, receiveShadow: true, children: _jsx("meshStandardMaterial", { vertexColors: true, roughness: 1, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.land != null ? (_jsx("mesh", { geometry: ground.land, receiveShadow: true, children: _jsx("meshStandardMaterial", { vertexColors: true, roughness: 1, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.asphalt != null ? (_jsx("mesh", { geometry: ground.asphalt, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: ASPHALT_COLOR, vertexColors: true, roughness: 0.96, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.gravel != null ? (_jsx("mesh", { geometry: ground.gravel, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: GRAVEL_COLOR, roughness: 1, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.sidewalks != null ? (_jsx("mesh", { geometry: ground.sidewalks, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: SIDEWALK_COLOR, roughness: 1, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.patches != null ? (_jsx("mesh", { geometry: ground.patches, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: ASPHALT_COLOR, vertexColors: true, roughness: 0.96, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.curbs != null ? (_jsx("mesh", { geometry: ground.curbs, receiveShadow: true, castShadow: true, children: _jsx("meshStandardMaterial", { color: CURB_COLOR, roughness: 0.9, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.markings != null ? (_jsx("mesh", { geometry: ground.markings, renderOrder: 1, children: _jsx("meshStandardMaterial", { color: MARKING_COLOR, vertexColors: true, roughness: 0.8, metalness: 0, side: THREE.DoubleSide, polygonOffset: true, polygonOffsetFactor: -1, polygonOffsetUnits: -1 }) })) : null, ground?.medians != null ? (_jsx("mesh", { geometry: ground.medians, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: MEDIAN_COLOR, roughness: 1, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.pavementDrives != null ? (_jsx("mesh", { geometry: ground.pavementDrives, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: PAVEMENT_COLOR, roughness: 1, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.gravelDrives != null ? (_jsx("mesh", { geometry: ground.gravelDrives, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: GRAVEL_COLOR, roughness: 1, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.parks != null ? (_jsx("mesh", { geometry: ground.parks, receiveShadow: true, children: _jsx("meshStandardMaterial", { vertexColors: true, roughness: 1, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.crops != null ? (_jsx("mesh", { geometry: ground.crops, receiveShadow: true, children: _jsx("meshStandardMaterial", { vertexColors: true, roughness: 1, metalness: 0, side: THREE.DoubleSide }) })) : null, bridges?.deck != null ? (_jsx("mesh", { geometry: bridges.deck, castShadow: true, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: CONCRETE_COLOR, roughness: 0.85, metalness: 0.05, side: THREE.DoubleSide }) })) : null, bridges !== null && bridges.concrete.length > 0 ? (_jsx(InstancedBoxes, { matrices: bridges.concrete, color: CONCRETE_COLOR })) : null, bridges !== null && bridges.steel.length > 0 ? _jsx(InstancedBoxes, { matrices: bridges.steel, color: STEEL_COLOR }) : null, tunnels?.roof != null ? (_jsx("mesh", { geometry: tunnels.roof, castShadow: true, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: TUNNEL_COLOR, roughness: 0.95, metalness: 0, side: THREE.DoubleSide }) })) : null, tunnels !== null && tunnels.stone.length > 0 ? _jsx(InstancedBoxes, { matrices: tunnels.stone, color: TUNNEL_COLOR }) : null, massing !== null ? massing.meshes.map((mesh, i) => _jsx("primitive", { object: mesh }, `massing:${i}`)) : null, furniture !== null ? furniture.meshes.map((mesh, i) => _jsx("primitive", { object: mesh }, `furniture:${i}`)) : null, race !== null ? race.meshes.map((mesh, i) => _jsx("primitive", { object: mesh }, `race:${i}`)) : null, _jsx(DetailBuildings, { buildings: detail.buildings, palette: palette, kitName: resolved?.rules.buildingKit ?? "" })] }));
+    return (_jsxs("group", { children: [ground?.urban != null ? (_jsx("mesh", { geometry: ground.urban, receiveShadow: true, ...(groundMaterials === null ? {} : { material: groundMaterials.urban }), children: groundMaterials === null ? (_jsx("meshStandardMaterial", { vertexColors: true, transparent: true, depthWrite: false, roughness: 1, metalness: 0, side: THREE.DoubleSide })) : null })) : null, ground?.land != null ? (_jsx("mesh", { geometry: ground.land, receiveShadow: true, ...(groundMaterials === null ? {} : { material: groundMaterials.land }), children: groundMaterials === null ? _jsx("meshStandardMaterial", { vertexColors: true, roughness: 1, metalness: 0, side: THREE.DoubleSide }) : null })) : null, ground?.asphalt != null ? (_jsx("mesh", { geometry: ground.asphalt, receiveShadow: true, ...(groundMaterials === null ? {} : { material: groundMaterials.asphalt }), children: groundMaterials === null ? _jsx("meshStandardMaterial", { color: ASPHALT_COLOR, vertexColors: true, roughness: 0.96, metalness: 0, side: THREE.DoubleSide }) : null })) : null, ground?.gravel != null ? (_jsx("mesh", { geometry: ground.gravel, receiveShadow: true, ...(groundMaterials === null ? {} : { material: groundMaterials.gravel }), children: groundMaterials === null ? _jsx("meshStandardMaterial", { color: GRAVEL_COLOR, roughness: 1, metalness: 0, side: THREE.DoubleSide }) : null })) : null, ground?.sidewalks != null ? (_jsx("mesh", { geometry: ground.sidewalks, receiveShadow: true, ...(groundMaterials === null ? {} : { material: groundMaterials.sidewalks }), children: groundMaterials === null ? _jsx("meshStandardMaterial", { color: SIDEWALK_COLOR, roughness: 1, metalness: 0, side: THREE.DoubleSide }) : null })) : null, ground?.patches != null ? (_jsx("mesh", { geometry: ground.patches, receiveShadow: true, ...(groundMaterials === null ? {} : { material: groundMaterials.patches }), children: groundMaterials === null ? _jsx("meshStandardMaterial", { color: ASPHALT_COLOR, vertexColors: true, roughness: 0.96, metalness: 0, side: THREE.DoubleSide }) : null })) : null, ground?.curbs != null ? (_jsx("mesh", { geometry: ground.curbs, receiveShadow: true, castShadow: true, children: _jsx("meshStandardMaterial", { color: CURB_COLOR, roughness: 0.9, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.markings != null ? (_jsx("mesh", { geometry: ground.markings, renderOrder: 1, children: _jsx("meshStandardMaterial", { color: MARKING_COLOR, vertexColors: true, roughness: 0.8, metalness: 0, side: THREE.DoubleSide, polygonOffset: true, polygonOffsetFactor: -1, polygonOffsetUnits: -1 }) })) : null, ground?.medians != null ? (_jsx("mesh", { geometry: ground.medians, receiveShadow: true, ...(groundMaterials === null ? {} : { material: groundMaterials.medians }), children: groundMaterials === null ? _jsx("meshStandardMaterial", { color: MEDIAN_COLOR, roughness: 1, metalness: 0, side: THREE.DoubleSide }) : null })) : null, ground?.pavementDrives != null ? (_jsx("mesh", { geometry: ground.pavementDrives, receiveShadow: true, ...(groundMaterials === null ? {} : { material: groundMaterials.pavementDrives }), children: groundMaterials === null ? _jsx("meshStandardMaterial", { color: PAVEMENT_COLOR, roughness: 1, metalness: 0, side: THREE.DoubleSide }) : null })) : null, ground?.gravelDrives != null ? (_jsx("mesh", { geometry: ground.gravelDrives, receiveShadow: true, ...(groundMaterials === null ? {} : { material: groundMaterials.gravelDrives }), children: groundMaterials === null ? _jsx("meshStandardMaterial", { color: GRAVEL_COLOR, roughness: 1, metalness: 0, side: THREE.DoubleSide }) : null })) : null, ground?.parks != null ? (_jsx("mesh", { geometry: ground.parks, receiveShadow: true, ...(groundMaterials === null ? {} : { material: groundMaterials.parks }), children: groundMaterials === null ? _jsx("meshStandardMaterial", { vertexColors: true, roughness: 1, metalness: 0, side: THREE.DoubleSide }) : null })) : null, ground?.crops != null ? (_jsx("mesh", { geometry: ground.crops, receiveShadow: true, ...(groundMaterials === null ? {} : { material: groundMaterials.crops }), children: groundMaterials === null ? _jsx("meshStandardMaterial", { vertexColors: true, roughness: 1, metalness: 0, side: THREE.DoubleSide }) : null })) : null, bridges?.deck != null ? (_jsx("mesh", { geometry: bridges.deck, castShadow: true, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: CONCRETE_COLOR, roughness: 0.85, metalness: 0.05, side: THREE.DoubleSide }) })) : null, bridges !== null && bridges.concrete.length > 0 ? (_jsx(InstancedBoxes, { matrices: bridges.concrete, color: CONCRETE_COLOR })) : null, bridges !== null && bridges.steel.length > 0 ? _jsx(InstancedBoxes, { matrices: bridges.steel, color: STEEL_COLOR }) : null, tunnels?.roof != null ? (_jsx("mesh", { geometry: tunnels.roof, castShadow: true, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: TUNNEL_COLOR, roughness: 0.95, metalness: 0, side: THREE.DoubleSide }) })) : null, tunnels !== null && tunnels.stone.length > 0 ? _jsx(InstancedBoxes, { matrices: tunnels.stone, color: TUNNEL_COLOR }) : null, massing !== null ? massing.meshes.map((mesh, i) => _jsx("primitive", { object: mesh }, `massing:${i}`)) : null, furniture !== null ? furniture.meshes.map((mesh, i) => _jsx("primitive", { object: mesh }, `furniture:${i}`)) : null, race !== null ? race.meshes.map((mesh, i) => _jsx("primitive", { object: mesh }, `race:${i}`)) : null, _jsx(DetailBuildings, { buildings: detail.buildings, palette: palette, kitName: resolved?.rules.buildingKit ?? "" })] }));
 }
 /** One instanced unit-box mesh from precomposed matrices (bridge parts). */
 function InstancedBoxes({ matrices, color }) {

package/dist/scene/cityJunctionSurface.d.ts

@@ -0,0 +1,7 @@
+import type { CityIntersection, CityStreet } from "@jgengine/core/world/cityKind";
+/**
+ * Surface for a crossing's welded patch: gravel only when every street running through the crossing
+ * is gravel, so an unpaved hamlet's junctions stay gravel while a lane meeting a paved main stays asphalt.
+ * @internal
+ */
+export declare function junctionSurface(cross: Pick<CityIntersection, "x" | "z" | "radius">, streets: readonly Pick<CityStreet, "points" | "width" | "surface">[]): CityStreet["surface"];

package/dist/scene/cityJunctionSurface.js

@@ -0,0 +1,34 @@
+/**
+ * Surface for a crossing's welded patch: gravel only when every street running through the crossing
+ * is gravel, so an unpaved hamlet's junctions stay gravel while a lane meeting a paved main stays asphalt.
+ * @internal
+ */
+export function junctionSurface(cross, streets) {
+    let touched = false;
+    for (const street of streets) {
+        const reach = cross.radius + street.width * 0.5 + 0.5;
+        if (distanceToPath(cross.x, cross.z, street.points) > reach)
+            continue;
+        if (street.surface !== "gravel")
+            return "asphalt";
+        touched = true;
+    }
+    return touched ? "gravel" : "asphalt";
+}
+function distanceToPath(x, z, points) {
+    if (points.length === 0)
+        return Infinity;
+    if (points.length === 1)
+        return Math.hypot(x - points[0][0], z - points[0][1]);
+    let best = Infinity;
+    for (let i = 1; i < points.length; i += 1) {
+        const [ax, az] = points[i - 1];
+        const [bx, bz] = points[i];
+        const dx = bx - ax;
+        const dz = bz - az;
+        const len2 = dx * dx + dz * dz;
+        const t = len2 === 0 ? 0 : Math.max(0, Math.min(1, ((x - ax) * dx + (z - az) * dz) / len2));
+        best = Math.min(best, Math.hypot(x - (ax + dx * t), z - (az + dz * t)));
+    }
+    return best;
+}

package/dist/settings/settingsController.js

@@ -51,7 +51,7 @@ export function useSettingsCategories(config) {
             const id = busVolumeSettingId(bus.id);
             return {
                 id,
-                label: `${bus.id.charAt(0).toUpperCase()}${bus.id.slice(1)} volume`,
+                label: bus.id === "ui" ? "UI volume" : `${bus.id.charAt(0).toUpperCase()}${bus.id.slice(1)} volume`,
                 kind: "slider",
                 value: store.get(id, bus.gain ?? 1),
                 min: 0,

package/dist/terrain/index.d.ts

@@ -10,3 +10,7 @@ export { createSeededRandom, hashNoise2, seedToUint32, type TerrainSeed } from "
 export { createFieldGroundGeometry, createProceduralGroundGeometry, createProceduralTerrainSampler, normalizeHeightBlend, resolveTerrainSegments, resolveTerrainSize, toNoiseFieldConfig, type FieldGroundOptions, type ProceduralTerrainConfig, type ResolvedTerrainSegments, type ResolvedTerrainSize, type TerrainArea, type TerrainHeightSampler, type TerrainSurfaceColorOptions, type TerrainVertexColorOptions, } from "./terrainMath.js";
 export { arenaField, flatField, fractalNoise, noiseField, resolveGroundStep, resolveTerrainField, valueNoise, withNormal, type FractalNoiseConfig, type NoiseFieldConfig, type TerrainField, type TerrainNormal, } from "@jgengine/core/world/terrain";
 export { createTerrainPaintColorSampler, type TerrainPaintColorSampler, type TerrainPaintSource } from "./terrainPaintColor.js";
+export { ALL_TERRAIN_SURFACE_CLASSES, createTerrainDetailMaterial, type TerrainDetailMaterialHandle, type TerrainDetailMaterialOptions, type TerrainDetailMaterialTextures, } from "./terrainDetailMaterial.js";
+export { createTerrainPaintTextures, MAX_TERRAIN_PAINT_LAYERS, packTerrainPaintWeights, terrainSurfaceClass, terrainSurfaceClassIndex, terrainSurfaceRoughness, type TerrainPaintSlot, type TerrainPaintTextures, type TerrainPaintWeights, type TerrainSurfaceClass, } from "./terrainSurfaces.js";
+export { TerrainQualityContext, useTerrainQuality } from "./terrainQuality.js";
+export { createSurfaceRibbonMaterial, resolvePathSurface, RIBBON_FRAME_ATTRIBUTE, ribbonEdgeMargin, ribbonSurfaceFrame, useSurfaceRibbonMaterial, type RibbonSurfaceStyle, type SurfaceRibbonMaterialOptions, } from "./surfaceRibbonMaterial.js";