@3driseai/3drise-viewer 0.1.6 → 0.1.8

package/dist/utils/terrainUniforms.js

@@ -0,0 +1,196 @@
+import * as THREE from 'three';
+/**
+ * Config to uniform mapping for the terrain material.
+ *
+ * The config speaks in the units a person thinks in — "6 km features", "340 m
+ * dune wavelength", "#6b6248" — and the shader wants reciprocals, angular
+ * frequencies, direction vectors and linear-space colours. Doing the conversion
+ * here rather than storing shader-space numbers means the settings panel, the
+ * presets and the AI agent all read in world units.
+ *
+ * Mutates in place and is called every frame, for the same reason
+ * `cloudUniforms` does: a 45-uniform shader driven through React props would
+ * re-render the tree once per frame.
+ */
+const TYPE_INDEX = {
+    mountains: 0,
+    dunes: 1,
+    hills: 2,
+    canyon: 3,
+};
+const _dir = new THREE.Vector2();
+function bearingToVector(degrees, out) {
+    const a = THREE.MathUtils.degToRad(degrees);
+    return out.set(Math.sin(a), Math.cos(a)).normalize();
+}
+/** Guard against a zero or negative size producing an infinite scale. */
+function inverse(size, fallback) {
+    return size > 1e-6 ? 1 / size : 1 / fallback;
+}
+/**
+ * Colours are authored as hex and consumed as linear.
+ *
+ * `setStyle(hex, SRGBColorSpace)` and NOT `set(hex).convertSRGBToLinear()`. Under
+ * three's ColorManagement — on by default since r152 — `set()` already treats a
+ * hex string as sRGB and converts it into the working (linear) space, so the
+ * explicit call applies the conversion a second time. That is a factor of about
+ * eight on a mid-tone: #6b6248 arrives as linear 0.019 instead of 0.147, and every
+ * terrain in the app renders near-black no matter what the lighting does. It cost
+ * a long detour through the lighting maths before anyone thought to read the
+ * uniform back off the material.
+ */
+function setColor(uniform, hex) {
+    if (!uniform)
+        return;
+    uniform.value.setStyle(hex, THREE.SRGBColorSpace);
+}
+export function applyTerrainUniforms(material, config, quality) {
+    const u = material.uniforms;
+    if (!u)
+        return;
+    u.u_terrainType.value = TYPE_INDEX[config.terrainType] ?? 2;
+    u.u_elevation.value = Math.max(config.elevation, 0.01);
+    u.u_seaLevel.value = config.seaLevel;
+    u.u_baseScale.value = inverse(config.featureSize, 2600);
+    u.u_octaves.value = Math.round(THREE.MathUtils.clamp(config.octaves, 1, 12));
+    u.u_lacunarity.value = config.lacunarity;
+    u.u_gain.value = config.gain;
+    u.u_ridge.value = config.ridgeSharpness;
+    u.u_warpStrength.value = config.warpStrength;
+    u.u_warpScale.value = config.warpSize;
+    u.u_erosion.value = config.erosion;
+    u.u_terraces.value = Math.round(config.terraces);
+    u.u_terraceSharp.value = config.terraceSharpness;
+    u.u_bearingDir.value.copy(bearingToVector(config.bearing, _dir));
+    u.u_duneFreq.value = (Math.PI * 2) / Math.max(config.duneWavelength, 1);
+    u.u_duneAsym.value = config.duneAsymmetry;
+    u.u_plateau.value = config.plateau;
+    u.u_valleyDepth.value = config.valleyDepth;
+    u.u_valleyWidth.value = config.valleyWidth;
+    setColor(u.u_lowColor, config.lowColor);
+    setColor(u.u_midColor, config.midColor);
+    setColor(u.u_rockColor, config.rockColor);
+    setColor(u.u_peakColor, config.peakColor);
+    u.u_slopeRockStart.value = Math.min(config.slopeRockStart, config.slopeRockEnd - 0.005);
+    u.u_slopeRockEnd.value = config.slopeRockEnd;
+    u.u_peakLevel.value = config.peakLevel;
+    u.u_peakBlend.value = Math.max(config.peakBlend, 0.005);
+    u.u_peakSlopeFalloff.value = config.peakSlopeFalloff;
+    u.u_macroVariation.value = config.macroVariation;
+    u.u_macroScale.value = inverse(config.macroSize, 1400);
+    u.u_detailStrength.value = config.detailStrength;
+    u.u_detailScale.value = inverse(config.detailSize, 6);
+    u.u_roughness.value = config.roughness;
+    u.u_specular.value = config.specular;
+    u.u_ambient.value = config.ambient;
+    u.u_bounce.value = config.bounce;
+    u.u_sunShadow.value = config.sunShadow;
+    u.u_shadowSoftness.value = config.shadowSoftness;
+    u.u_fogDensity.value = config.aerialPerspective;
+    u.u_cellSize.value = quality.cellSize;
+    u.u_curvature.value = quality.curvature;
+    u.u_shadowSteps.value = Math.round(quality.shadowSteps);
+    u.u_shadowDistance.value = Math.max(quality.shadowDistance ?? 5000, 1);
+    u.u_detailFade.value = inverse(quality.detailFadeDistance, 900);
+    u.u_exposure.value = quality.exposure;
+    u.u_receiveShadows.value = quality.receiveShadows ? 1 : 0;
+    material.wireframe = !!quality.wireframe;
+}
+export default applyTerrainUniforms;
+// -----------------------------------------------------------------------------
+// Ambient
+// -----------------------------------------------------------------------------
+/**
+ * The sky-dome fill, computed on the CPU.
+ *
+ * A port of `skyRadiance` from `cloudCore.glsl` — the same function that draws the
+ * sky and lights the clouds. It is the same for every pixel on the screen, so
+ * paying an acos, a pow and three exps per fragment for it was waste.
+ *
+ * Two things this must NOT be, both of which it has been:
+ *
+ * 1. **`CloudSunState.skyAmbient`.** That is a hand-tuned curve for cloud
+ *    interiors — roughly twice too bright at midday, half as bright at sunset, and
+ *    differently balanced. Terrain lit by it goes almost black under a bright
+ *    sunset sky, which is exactly what it did.
+ * 2. **The zenith alone.** The dome is not one colour. At midday the zenith is a
+ *    fair stand-in for the average, but at low sun almost all the light in the sky
+ *    is in a bright band around the horizon and the zenith is the darkest part of
+ *    it — so a zenith-only fill makes a sunset landscape black under a blazing
+ *    sky. Three samples, weighted, are enough to fix it and still cost nothing.
+ */
+const RAYLEIGH_BASE = [0.0487, 0.113, 0.278];
+function airMassAt(cosZenith) {
+    const cy = Math.max(cosZenith, -0.02);
+    const zenithDeg = (Math.acos(THREE.MathUtils.clamp(cy, -1, 1)) * 180) / Math.PI;
+    return Math.min(1 / (Math.max(cy, 0) + 0.15 * Math.pow(Math.max(93.885 - zenithDeg, 0.5), -1.253)), 40);
+}
+/** skyRadiance(rd), in the units the shader returns. */
+export function skyRadianceAt(rd, sun, out) {
+    const mu = rd.dot(sun.direction);
+    const am = airMassAt(Math.max(rd.y, -0.02));
+    const bR = [
+        RAYLEIGH_BASE[0] * sun.turbidity * sun.rayleigh,
+        RAYLEIGH_BASE[1] * sun.turbidity * sun.rayleigh,
+        RAYLEIGH_BASE[2] * sun.turbidity * sun.rayleigh,
+    ];
+    const bM = sun.mieCoefficient * sun.turbidity * 4.25;
+    const rayleighPhase = (3 / (16 * Math.PI)) * (1 + mu * mu);
+    const g2 = sun.mieG * sun.mieG;
+    const miePhase = (1 - g2) / (4 * Math.PI * Math.pow(Math.max(1 + g2 - 2 * sun.mieG * mu, 1e-4), 1.5));
+    const c = [sun.color.r, sun.color.g, sun.color.b];
+    const rgb = [0, 0, 0];
+    for (let i = 0; i < 3; i++) {
+        const ext = bR[i] * am + bM * am * 1.2;
+        // Same whitening the shader applies: most of the light reaching the eye
+        // from the sky has been multiply scattered, so the Rayleigh term sees a
+        // partly whitened sun rather than the full reddened beam.
+        const rayCol = c[i] + (1 - c[i]) * 0.6;
+        const insR = bR[i] * am * rayleighPhase * rayCol;
+        const insM = bM * am * miePhase * 1.3 * c[i];
+        rgb[i] = ((insR + insM) / Math.max(ext, 1e-4)) * (1 - Math.exp(-ext)) * 26;
+    }
+    return out.setRGB(rgb[0], rgb[1], rgb[2]);
+}
+const _zenith = new THREE.Color();
+const _toward = new THREE.Color();
+const _rd = new THREE.Vector3();
+/**
+ * Sets the two ambient uniforms. Call after `applySunUniforms`, which fills them
+ * from the cloud curve — this overwrites that with the sky the terrain is actually
+ * standing under.
+ */
+export function applyTerrainAmbient(material, sun) {
+    const u = material.uniforms;
+    if (!u || !u.u_skyAmbient)
+        return;
+    skyRadianceAt(_rd.set(0, 1, 0), sun, _zenith);
+    // Four samples around the compass at 20 degrees, where the bright low band
+    // lives, averaged. Four and not two: a single sample toward the sun sits
+    // inside the mie aureole and reads several times the rest of the dome, so
+    // weighting it on its own hands the ground more ambient than direct sun.
+    // Averaging puts the aureole at a quarter of the low term, which is roughly
+    // the solid angle it actually occupies.
+    const hx = sun.direction.x, hz = sun.direction.z;
+    const hl = Math.hypot(hx, hz) || 1;
+    const ux = hx / hl, uz = hz / hl;
+    const c = 0.94, y = 0.342; // cos/sin of 20 degrees
+    let lr = 0, lg = 0, lb = 0;
+    const dirs = [[ux, uz], [-ux, -uz], [-uz, ux], [uz, -ux]];
+    for (const [dx, dz] of dirs) {
+        skyRadianceAt(_rd.set(dx * c, y, dz * c), sun, _toward);
+        lr += _toward.r;
+        lg += _toward.g;
+        lb += _toward.b;
+    }
+    lr /= 4;
+    lg /= 4;
+    lb /= 4;
+    u.u_skyAmbient.value.setRGB(_zenith.r * 0.45 + lr * 0.55, _zenith.g * 0.45 + lg * 0.55, _zenith.b * 0.45 + lb * 0.55);
+    // Bounce is that fill re-reflected off lit ground, so it carries the sun's own
+    // colour and dies with its elevation. Keeps north faces and overhangs off pure
+    // black without the flattening that raising ambient causes.
+    const lit = Math.max(sun.direction.y, 0);
+    const sky = u.u_skyAmbient.value;
+    u.u_groundAmbient.value.setRGB(sky.r * 0.45 + sun.color.r * lit * 0.35, sky.g * 0.45 + sun.color.g * lit * 0.35, sky.b * 0.45 + sun.color.b * lit * 0.35);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@3driseai/3drise-viewer",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",
@@ -39,6 +39,6 @@
   },
   "dependencies": {
     "@3driseai/3drise-common": "^1.0.1",
-    "@3driseai/3drise-core": "^1.0.3"
+    "@3driseai/3drise-core": "^1.0.5"
   }
 }