@3driseai/3drise-core 1.0.20 → 1.0.22

package/dist/services/SkySystemManager.js

@@ -1,4 +1,6 @@
 import * as THREE from 'three';
+import { sunDirectionFromAngles } from '../utils/sunUtils.js';
+import { SKY_PHASE_ELEVATIONS } from '../utils/skyPhase.js';
 const SUNRISE = 6;
 const SUNSET = 21;
 const MAX_ELEVATION = 42;
@@ -9,6 +11,11 @@ const HORIZON_OFFSET = 5;
 const MAX_NIGHT_DEPTH = 21;
 /** Real seconds between playback write-backs to the host. */
 const SYNC_INTERVAL_SECONDS = 0.25;
+const DEFAULT_MOON_PHASE = 0.5;
+const wrap01 = (v) => ((v % 1) + 1) % 1;
+const wrap24 = (h) => ((h % 24) + 24) % 24;
+/** Lit fraction of the moon's disc for a phase in 0..1. */
+export const moonIlluminationForPhase = (phase) => (1 - Math.cos(2 * Math.PI * phase)) / 2;
 export class SkySystemManager {
     static instance = null;
     timeInHours = 12;
@@ -20,6 +27,9 @@ export class SkySystemManager {
     sunElevation = 37;
     sunAzimuth = 270;
     sunDirection = new THREE.Vector3(0, 1, 0);
+    moonPhase = DEFAULT_MOON_PHASE;
+    moonElevation = 0;
+    moonDirection = new THREE.Vector3(0, -1, 0);
     enabled = false;
     timescale = 60;
     autoAnimate = false;
@@ -38,7 +48,7 @@ export class SkySystemManager {
      *  otherwise double-tick it and stomp its settings. */
     driver = null;
     constructor() {
-        this.updateSunDirection();
+        this.recalculateState();
     }
     static getInstance() {
         if (!SkySystemManager.instance) {
@@ -67,6 +77,9 @@ export class SkySystemManager {
         return this.driver !== null;
     }
     setTimeSettings(settings) {
+        const moonPhase = wrap01(settings.moonPhase ?? DEFAULT_MOON_PHASE);
+        const phaseChanged = moonPhase !== this.moonPhase;
+        this.moonPhase = moonPhase;
         this.enabled = settings.enabled;
         this.timescale = settings.timescale;
         this.autoAnimate = settings.autoAnimate;
@@ -94,6 +107,9 @@ export class SkySystemManager {
             this.syncAccumulator = 0;
             this.recalculateState();
         }
+        else if (phaseChanged) {
+            this.recalculateState();
+        }
     }
     setOnTimeSync(callback) {
         this.onTimeSync = callback;
@@ -139,14 +155,16 @@ export class SkySystemManager {
             elapsedTime: this.elapsedTime,
             autoAnimate: this.autoAnimate,
             advancing: this.isAdvancing(),
+            moonDirection: this.moonDirection,
+            moonElevation: this.moonElevation,
+            moonPhase: this.moonPhase,
+            moonIllumination: moonIlluminationForPhase(this.moonPhase),
         };
     }
     getStateByTime(timeOfDay) {
         const state = this.calculateTimeState(timeOfDay);
-        const el = THREE.MathUtils.degToRad(state.sunElevation);
-        const az = THREE.MathUtils.degToRad(this.transformAzimuth(state.sunAzimuth));
-        const distance = 0.5;
-        const sunDirection = new THREE.Vector3(distance * Math.cos(el) * Math.sin(az), distance * Math.sin(el), distance * Math.cos(el) * Math.cos(az)).normalize();
+        const sunDirection = sunDirectionFromAngles(state.sunElevation, this.transformAzimuth(state.sunAzimuth), new THREE.Vector3());
+        const moon = this.calculateMoon(timeOfDay, new THREE.Vector3());
         return {
             timeInHours: timeOfDay,
             normalizedTime: state.normalizedTime,
@@ -159,6 +177,10 @@ export class SkySystemManager {
             elapsedTime: this.elapsedTime,
             autoAnimate: this.autoAnimate,
             advancing: this.isAdvancing(),
+            moonDirection: moon.direction,
+            moonElevation: moon.elevation,
+            moonPhase: this.moonPhase,
+            moonIllumination: moonIlluminationForPhase(this.moonPhase),
         };
     }
     getTime() {
@@ -240,6 +262,18 @@ export class SkySystemManager {
         this.sunElevation = state.sunElevation;
         this.sunAzimuth = state.sunAzimuth;
         this.updateSunDirection();
+        this.moonElevation = this.calculateMoon(this.timeInHours, this.moonDirection).elevation;
+    }
+    /**
+     * The moon runs the sun's own daily arc, `moonPhase` of a day behind it:
+     * a new moon rides with the sun, a full moon is 12 h behind — rising at
+     * sunset, highest at midnight, setting at sunrise — which is where the real
+     * one is. Same curve, same convention, so the two can never cross wrongly.
+     */
+    calculateMoon(timeInHours, out) {
+        const m = this.calculateTimeState(wrap24(timeInHours - this.moonPhase * 24));
+        sunDirectionFromAngles(m.sunElevation, this.transformAzimuth(m.sunAzimuth), out);
+        return { elevation: m.sunElevation, direction: out };
     }
     /**
      * Sun elevation and azimuth for a given hour.
@@ -277,14 +311,14 @@ export class SkySystemManager {
             sunElevation = -HORIZON_OFFSET - Math.cos(Math.PI * (normalizedTime - 0.5)) * MAX_NIGHT_DEPTH;
             sunAzimuth = 360 + 180 * normalizedTime;
         }
+        // Labels follow the sun's height (skyPhase), the same keys the atmosphere
+        // and the stars turn on, so the label never says Midday under a red sky.
         let timeOfDay = 'Nighttime';
-        if (isDaytime) {
-            if (normalizedTime <= 0.25)
-                timeOfDay = 'Sunrise';
-            else if (normalizedTime <= 0.75)
-                timeOfDay = 'Midday';
-            else
-                timeOfDay = 'Sunset';
+        if (sunElevation >= SKY_PHASE_ELEVATIONS.day)
+            timeOfDay = 'Midday';
+        else if (sunElevation > SKY_PHASE_ELEVATIONS.twilight) {
+            const morning = isDaytime ? normalizedTime < 0.5 : timeInHours < 12;
+            timeOfDay = morning ? 'Sunrise' : 'Sunset';
         }
         return { normalizedTime, isDaytime, timeOfDay, sunElevation, sunAzimuth };
     }
@@ -295,13 +329,11 @@ export class SkySystemManager {
         const wrapped = (((270 - rawAzimuth) % 360) + 360) % 360;
         return wrapped - 180;
     }
+    /** Same convention as the Preetham sky (sunUtils), so the direction this
+     *  publishes is exactly where SkyController draws the disc for the same
+     *  elevation/azimuth. */
     updateSunDirection() {
-        const el = THREE.MathUtils.degToRad(this.sunElevation);
-        const az = THREE.MathUtils.degToRad(this.transformAzimuth(this.sunAzimuth));
-        const distance = 0.5;
-        this.sunDirection
-            .set(distance * Math.cos(el) * Math.sin(az), distance * Math.sin(el), distance * Math.cos(el) * Math.cos(az))
-            .normalize();
+        sunDirectionFromAngles(this.sunElevation, this.transformAzimuth(this.sunAzimuth), this.sunDirection);
     }
 }
 export const skySystemManager = SkySystemManager.getInstance();

package/dist/services/TextureResolver.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextureResolver.d.ts","sourceRoot":"","sources":["../../src/services/TextureResolver.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,cAAM,sBAAsB;IAExB,OAAO,CAAC,KAAK,CAAa;IAC1B;;;OAGG;IACG,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC;IAe5C;;OAEG;IACH,YAAY,CAAC,IAAI,GAAE,MAAiB,GAAG,OAAO;IAG9C;;;;;;;;;;OAUG;IACG,eAAe,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAqCnG;;OAEG;IACH,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO;IAG9B;;OAEG;IACH,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS;IAG3C;;OAEG;IACH,UAAU,IAAI,IAAI;IAMlB;;OAEG;IACH,KAAK,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAOxB;;OAEG;IACH,QAAQ,IAAI;QACA,SAAS,EAAE,MAAM,CAAC;QAClB,UAAU,EAAE,MAAM,EAAE,CAAC;KACxB;CAMZ;AAED,eAAO,MAAM,eAAe,EAAE,sBAAqD,CAAC;AAEpF,OAAO,EAAE,sBAAsB,EAAE,CAAC"}
+{"version":3,"file":"TextureResolver.d.ts","sourceRoot":"","sources":["../../src/services/TextureResolver.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,OAAO,EAAkB,MAAM,OAAO,CAAC;AAKhD,cAAM,sBAAsB;IAExB,OAAO,CAAC,KAAK,CAAa;IAC1B;;;OAGG;IACG,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC;IAe5C;;OAEG;IACH,YAAY,CAAC,IAAI,GAAE,MAAiB,GAAG,OAAO;IAG9C;;;;;;;;;;OAUG;IACG,eAAe,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAoDnG;;OAEG;IACH,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO;IAG9B;;OAEG;IACH,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS;IAG3C;;OAEG;IACH,UAAU,IAAI,IAAI;IAMlB;;OAEG;IACH,KAAK,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAOxB;;OAEG;IACH,QAAQ,IAAI;QACA,SAAS,EAAE,MAAM,CAAC;QAClB,UAAU,EAAE,MAAM,EAAE,CAAC;KACxB;CAMZ;AAED,eAAO,MAAM,eAAe,EAAE,sBAAqD,CAAC;AAEpF,OAAO,EAAE,sBAAsB,EAAE,CAAC"}

package/dist/services/TextureResolver.js

@@ -13,6 +13,9 @@
 import { loadTextureAsync } from '../utils/loadingManager.js';
 import { NoiseGenerator } from './NoiseGenerator.js';
 import MaterialRegistryAPI from '../services/MaterialRegistry.js';
+import { SRGBColorSpace } from "three";
+/** Texture slots that hold colour (sRGB) data; the rest (normal, roughness…) are linear. */
+const SRGB_TEXTURE_KEYS = new Set(['map', 'emissiveMap', 'specularColorMap', 'sheenColorMap']);
 class TextureResolverService {
     // Cache: URL string → loaded Texture
     cache = new Map();
@@ -87,6 +90,25 @@ class TextureResolverService {
         }
         // Wait for all texture loads to complete
         await Promise.all(texturePromises);
+        // Per-material texture state on a copy (the loaded texture is cached and shared):
+        // tiling from settings.textureRepeat ([x, y] or a number), and sRGB for colour maps.
+        const rep = settings.textureRepeat;
+        const repeat = Array.isArray(rep) && rep.length === 2 ? rep : typeof rep === 'number' ? [rep, rep] : null;
+        for (const key of textureKeys) {
+            const tex = resolved[key];
+            if (!tex || !tex.isTexture || typeof settings[key] !== 'string')
+                continue;
+            const srgb = SRGB_TEXTURE_KEYS.has(key);
+            if (!repeat && !srgb)
+                continue;
+            const copy = tex.clone();
+            if (srgb)
+                copy.colorSpace = SRGBColorSpace;
+            if (repeat)
+                copy.repeat.set(Number(repeat[0]) || 1, Number(repeat[1]) || 1);
+            copy.needsUpdate = true;
+            resolved[key] = copy;
+        }
         return resolved;
     }
     /**

package/dist/services/index.d.ts

@@ -12,7 +12,7 @@ export { PositionsCreator } from './PositionsCreator';
 export * from './NoiseGenerator';
 export { TextureResolverService, textureResolver } from './TextureResolver';
 export { UniformConverter, UniformProcessor, uniformConverter } from './UniformConverter';
-export { SkySystemManager, skySystemManager } from './SkySystemManager';
+export { SkySystemManager, skySystemManager, moonIlluminationForPhase } from './SkySystemManager';
 export { CubeCameraManager, cubeCameraManager } from './CubeCameraManager';
 export { default as SceneStore } from './SceneStore';
 export { default as SceneActions } from './SceneActions';

package/dist/services/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/services/index.ts"],"names":[],"mappings":"AAAA,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,eAAe,EAAE,YAAY,EAAE,WAAW,GAAG,MAAM,oBAAoB,CAAC;AAE5H,YAAY,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAG9C,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEvE,OAAO,EAAE,gBAAgB,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AACtF,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,sBAAsB,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC1F,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/services/index.ts"],"names":[],"mappings":"AAAA,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,eAAe,EAAE,YAAY,EAAE,WAAW,GAAG,MAAM,oBAAoB,CAAC;AAE5H,YAAY,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAG9C,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEvE,OAAO,EAAE,gBAAgB,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AACtF,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,sBAAsB,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC1F,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAClG,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/services/index.js

@@ -9,7 +9,7 @@ export { PositionsCreator } from './PositionsCreator.js';
 export * from './NoiseGenerator.js';
 export { TextureResolverService, textureResolver } from './TextureResolver.js';
 export { UniformConverter, UniformProcessor, uniformConverter } from './UniformConverter.js';
-export { SkySystemManager, skySystemManager } from './SkySystemManager.js';
+export { SkySystemManager, skySystemManager, moonIlluminationForPhase } from './SkySystemManager.js';
 export { CubeCameraManager, cubeCameraManager } from './CubeCameraManager.js';
 export { default as SceneStore } from './SceneStore.js';
 export { default as SceneActions } from './SceneActions.js';

package/dist/shaders/ApollonianGridMaterial.d.ts

@@ -0,0 +1,70 @@
+import * as THREE from 'three';
+export interface ApollonianGridMaterialUniforms {
+    /** elapsed seconds (useGridSurface) */
+    u_time: number;
+    /** size of one cell, in world units */
+    u_cellSize: number;
+    /** line thickness, in pixels */
+    u_lineWidth: number;
+    u_sectionSize: number;
+    /** accent thickness, in pixels; 0 disables the layer */
+    u_sectionWidth: number;
+    u_lineColor: THREE.Color;
+    u_sectionColor: THREE.Color;
+    u_cellColor: THREE.Color;
+    u_glowColor: THREE.Color;
+    u_bgColor: THREE.Color;
+    u_bgOpacity: number;
+    u_lineMode: number;
+    u_cellMode: number;
+    u_animSpeed: number;
+    u_animScale: number;
+    u_animIntensity: number;
+    u_fadeDistance: number;
+    u_fadeStrength: number;
+    /** ripple / reveal origin; stays at the origin */
+    u_focus: THREE.Vector2;
+    u_mouse: THREE.Vector2;
+    u_displace: number;
+    /** 0..1 assemble / dissolve */
+    u_reveal: number;
+    /** Inversion levels: how deep the packing nests */
+    u_depth: number;
+    /** Strength of the Möbius flow that re-balances the packing; 0 holds it symmetric */
+    u_morph: number;
+}
+declare module '@react-three/fiber' {
+    interface ThreeElements {
+        apollonianGridMaterial: ThreeElements['shaderMaterial'] & Partial<ApollonianGridMaterialUniforms>;
+    }
+}
+export declare const apollonianGridMaterialDefaults: ApollonianGridMaterialUniforms;
+export declare const ApollonianGridMaterial: import("@react-three/fiber").ConstructorRepresentation<THREE.ShaderMaterial & {
+    u_time: number;
+    u_cellSize: number;
+    u_lineWidth: number;
+    u_sectionSize: number;
+    u_sectionWidth: number;
+    u_lineColor: THREE.Color;
+    u_sectionColor: THREE.Color;
+    u_cellColor: THREE.Color;
+    u_glowColor: THREE.Color;
+    u_bgColor: THREE.Color;
+    u_bgOpacity: number;
+    u_lineMode: number;
+    u_cellMode: number;
+    u_animSpeed: number;
+    u_animScale: number;
+    u_animIntensity: number;
+    u_fadeDistance: number;
+    u_fadeStrength: number;
+    u_focus: THREE.Vector2;
+    u_mouse: THREE.Vector2;
+    u_displace: number;
+    u_reveal: number;
+    u_depth: number;
+    u_morph: number;
+}> & {
+    key: string;
+};
+//# sourceMappingURL=ApollonianGridMaterial.d.ts.map

package/dist/shaders/ApollonianGridMaterial.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApollonianGridMaterial.d.ts","sourceRoot":"","sources":["../../src/shaders/ApollonianGridMaterial.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,MAAM,WAAW,8BAA8B;IAC3C,uCAAuC;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,UAAU,EAAE,MAAM,CAAC;IACnB,gCAAgC;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,wDAAwD;IACxD,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC;IACzB,cAAc,EAAE,KAAK,CAAC,KAAK,CAAC;IAC5B,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC;IACzB,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC;IACzB,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,kDAAkD;IAClD,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC;IACvB,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,mDAAmD;IACnD,OAAO,EAAE,MAAM,CAAC;IAChB,qFAAqF;IACrF,OAAO,EAAE,MAAM,CAAC;CACnB;AAED,OAAO,QAAQ,oBAAoB,CAAC;IAChC,UAAU,aAAa;QACnB,sBAAsB,EAAE,aAAa,CAAC,gBAAgB,CAAC,GAAG,OAAO,CAAC,8BAA8B,CAAC,CAAC;KACrG;CACJ;AAED,eAAO,MAAM,8BAA8B,EAAE,8BAyB5C,CAAC;AA6OF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BlC,CAAC"}

package/dist/shaders/ApollonianGridMaterial.js

@@ -0,0 +1,289 @@
+import * as THREE from 'three';
+import { shaderMaterial } from '@react-three/drei';
+import { extend } from '@react-three/fiber';
+export const apollonianGridMaterialDefaults = {
+    u_time: 0,
+    u_cellSize: 2,
+    u_lineWidth: 1.1,
+    u_sectionSize: 2,
+    u_sectionWidth: 2,
+    u_lineColor: new THREE.Color('#6a90c8'),
+    u_sectionColor: new THREE.Color('#c9e4ff'),
+    u_cellColor: new THREE.Color('#1a2f5c'),
+    u_glowColor: new THREE.Color('#8fb8ff'),
+    u_bgColor: new THREE.Color('#03050c'),
+    u_bgOpacity: 0,
+    u_lineMode: 0,
+    u_cellMode: 1,
+    u_animSpeed: 1,
+    u_animScale: 0.5,
+    u_animIntensity: 0.6,
+    u_fadeDistance: 25,
+    u_fadeStrength: 0.15,
+    u_focus: new THREE.Vector2(0, 0),
+    u_mouse: new THREE.Vector2(0, 0),
+    u_displace: 0,
+    u_reveal: 1,
+    u_depth: 12,
+    u_morph: 0.25,
+};
+const vertex = /* glsl */ `
+  uniform float u_time;
+  uniform float u_cellSize;
+  uniform float u_displace;
+  uniform float u_animSpeed;
+  uniform float u_animScale;
+
+  varying vec2 vGridPos;
+
+  
+  const float PI  = 3.14159265359;
+  const float TAU = 6.28318530718;
+
+  float hash21(vec2 p){
+    p = fract(p * vec2(123.34, 456.21));
+    p += dot(p, p + 45.32);
+    return fract(p.x * p.y);
+  }
+
+
+  void main(){
+    vGridPos = position.xy;
+    vec3 pos = position;
+    if (u_displace > 0.0){
+      float t = u_time * u_animSpeed;
+      float d = length(position.xy) / max(u_cellSize, 1e-4);
+      pos.z += sin(d * u_animScale - t) * u_displace;
+    }
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
+  }
+`;
+const fragment = /* glsl */ `
+  precision highp float;
+
+  uniform float u_time;
+  uniform float u_cellSize;
+  uniform float u_lineWidth;
+  uniform float u_sectionSize;
+  uniform float u_sectionWidth;
+  uniform vec3  u_lineColor;
+  uniform vec3  u_sectionColor;
+  uniform vec3  u_cellColor;
+  uniform vec3  u_glowColor;
+  uniform vec3  u_bgColor;
+  uniform float u_bgOpacity;
+  uniform float u_lineMode;
+  uniform float u_cellMode;
+  uniform float u_animSpeed;
+  uniform float u_animScale;
+  uniform float u_animIntensity;
+  uniform float u_fadeDistance;
+  uniform float u_fadeStrength;
+  uniform vec2  u_focus;
+  uniform float u_reveal;
+
+  uniform float u_depth;
+  uniform float u_morph;
+
+  varying vec2 vGridPos;
+
+  
+  const float PI  = 3.14159265359;
+  const float TAU = 6.28318530718;
+
+  float hash21(vec2 p){
+    p = fract(p * vec2(123.34, 456.21));
+    p += dot(p, p + 45.32);
+    return fract(p.x * p.y);
+  }
+
+
+  float lineAt(float c, float width, float fp){
+    float d = abs(fract(c - 0.5) - 0.5);
+    return 1.0 - clamp(d / max(fp * max(width, 0.05), 1e-6), 0.0, 1.0);
+  }
+
+  vec2 cmul(vec2 a, vec2 b){ return vec2(a.x * b.x - a.y * b.y, a.x * b.y + a.y * b.x); }
+  vec2 cdiv(vec2 a, vec2 b){ return vec2(a.x * b.x + a.y * b.y, a.y * b.x - a.x * b.y) / max(dot(b, b), 1e-8); }
+
+  void main(){
+    vec2 coord = vGridPos / max(u_cellSize, 1e-4);
+    vec2 focus = u_focus / max(u_cellSize, 1e-4);
+    float t  = u_time * u_animSpeed;
+
+    // Apollonian gasket by circle inversion. Inside the unit circle sit three
+    // mutually tangent circles of radius 2*sqrt(3)-3. Each of the four
+    // curvilinear gaps between the circles is cut out by a "dual" circle through
+    // its three tangency points, orthogonal to the circles that bound it.
+    // Inverting in a gap's dual circle keeps those circles fixed and maps the
+    // fourth circle onto the gap's inscribed circle, so a point is walked out of
+    // nested gaps one inversion per level until it lands in a base circle. The
+    // number of inversions is its depth; the product of their scale factors takes
+    // distances back to the plane, so every circle gets a pixel-true stroke.
+    float R  = u_fadeDistance * 0.9;
+    vec2  z  = vGridPos / R;
+    float fpz = max(max(fwidth(z.x), fwidth(z.y)), 1e-6);
+
+    // A Mobius automorphism of the disk, z -> (z - a) / (1 - conj(a) z), maps the
+    // gasket onto another Apollonian gasket. Orbiting a slowly makes the packing
+    // flow and re-balance while every circle stays a circle and every tangency holds.
+    vec2  am  = u_morph * 0.8 * vec2(cos(t * 0.13), sin(t * 0.19));
+    vec2  den = vec2(1.0, 0.0) - cmul(vec2(am.x, -am.y), z);
+    vec2  w   = cdiv(z - am, den);
+    float J   = (1.0 - dot(am, am)) / max(dot(den, den), 1e-8);   // |dw/dz|
+
+    const float RHO = 0.46410161514;   // 2 sqrt(3) - 3
+    const float DC  = 0.53589838486;   // 1 - RHO: centre distance of the three
+    const float SQ3 = 1.73205080757;
+    float maxD  = clamp(floor(u_depth + 0.5), 1.0, 24.0);
+    float depth = 0.0;
+    float path  = 0.37;
+    float term  = -1.0;
+    vec2  cc = vec2(0.0);
+    float cr = 1.0;
+    for (int i = 0; i < 25; i++){
+      // landed in one of the three base circles (centres at 90, 210, 330 deg)?
+      for (int k = 0; k < 3; k++){
+        float ak = PI * 0.5 + float(k) * TAU / 3.0;
+        vec2  ck = DC * vec2(cos(ak), sin(ak));
+        if (length(w - ck) < RHO){ term = float(k) + 1.0; cc = ck; cr = RHO; }
+      }
+      if (term > 0.0) break;
+      if (length(w) > 1.0){ term = 0.0; cc = vec2(0.0); cr = 1.0; break; }
+      if (depth >= maxD) break;
+      // which gap: the central one, or the outer gap facing 30, 150 or 270 deg
+      vec2  dcen; float drad; float gap;
+      if (length(w) < DC * 0.5){
+        dcen = vec2(0.0); drad = DC * 0.5; gap = 0.0;
+      } else {
+        float ang = atan(w.y, w.x);
+        float kk = floor(mod(ang - PI / 6.0 + PI / 3.0, TAU) / (TAU / 3.0));
+        float ag = PI / 6.0 + kk * TAU / 3.0;
+        dcen = 2.0 * vec2(cos(ag), sin(ag)); drad = SQ3; gap = kk + 1.0;
+      }
+      vec2  v  = w - dcen;
+      float v2 = max(dot(v, v), 1e-10);
+      w = dcen + drad * drad * v / v2;
+      J *= drad * drad / v2;
+      depth += 1.0;
+      path = hash21(vec2(path * 17.0 + gap, depth));
+    }
+
+    float found = step(-0.5, term);
+    float outside = found * step(term, 0.5) * step(depth, 0.5);  // beyond the outer circle
+    float dz = abs(length(w - cc) - cr) / max(J, 1e-12);           // distance to this circle, z units
+    // this circle's radius, z units. Inside an image of the outer circle the point
+    // can sit near the pole of the inversion, where cr/J collapses; the distance
+    // to the rim is the safe lower bound there.
+    float rz = max(cr / max(J, 1e-12), dz);
+    float dens = smoothstep(1.0, 3.0, rz / fpz) * found;           // circles under ~2px fade out
+
+    float lines = (1.0 - clamp(dz / (fpz * max(u_lineWidth, 0.05)), 0.0, 1.0)) * dens;
+    float accent = 0.0;
+    if (u_sectionWidth > 0.0 && depth < u_sectionSize){
+      accent = (1.0 - clamp(dz / (fpz * max(u_sectionWidth, 0.05)), 0.0, 1.0)) * dens;
+    }
+
+    float dmin = clamp(dz / max(rz, 1e-9), 0.0, 1.0) * dens * (1.0 - outside);
+    // fills are per circle, so the wave and the ripple both step down the levels
+    float idAcc = depth * 20.0;
+    vec2  cellPos = focus + vec2(depth * 2.0, 0.0);
+    float cellH = hash21(vec2(path, term + 1.0));
+    float tone = step(0.55, cellH);
+
+    // a soft inner bevel along every rim, brightest on the shallow circles
+    float bevel = exp(-pow(dz / max(rz * 0.12, fpz), 2.0)) * dens * (1.0 - outside);
+    float lvl = 1.0 / (1.0 + depth * 0.45);
+    vec3  extraCol = u_glowColor * (bevel * 0.35 + lines * 0.5) * lvl;
+    float extraA = bevel * 0.3 * lvl;
+
+    // ---- line animation --------------------------------------------------
+    float lineAnim = 1.0;
+    // Mode 0 is static: the chain starts at 0.5 so 0 never falls into flow.
+    if (u_lineMode < 0.5){
+    } else if (u_lineMode < 1.5){
+      lineAnim = 0.5 + 0.5 * sin(length(cellPos - focus) * u_animScale - t);
+    } else if (u_lineMode < 2.5){
+      lineAnim = 0.5 + 0.5 * sin(dot(cellPos, vec2(0.5, 0.5)) * u_animScale - t);
+    } else if (u_lineMode < 3.5){
+      float s = fract((coord.x + coord.y) * 0.05 * u_animScale - t * 0.15);
+      lineAnim = 0.25 + smoothstep(0.0, 0.15, s) * (1.0 - smoothstep(0.15, 0.35, s));
+    } else if (u_lineMode < 4.5){
+      lineAnim = 0.5 + 0.5 * sin(t);
+    }
+    lineAnim = mix(1.0, lineAnim, u_animIntensity);
+
+    // ---- cell fill -------------------------------------------------------
+    float cell = 0.0;
+    if (u_cellMode < 0.5){
+    } else if (u_cellMode < 1.5){
+      cell = 0.5 + 0.5 * sin(idAcc * 0.05 * u_animScale - t);
+    } else if (u_cellMode < 2.5){
+      cell = 0.5 + 0.5 * sin(t * (0.6 + cellH) + cellH * TAU);
+    } else if (u_cellMode < 3.5){
+      cell = smoothstep(0.6, 1.0, sin(length(cellPos - focus) * u_animScale - t));
+    } else if (u_cellMode < 4.5){
+      cell = step(0.5, cellH) * (0.5 + 0.5 * sin(t));
+    }
+    cell *= u_animIntensity;
+    cell *= smoothstep(0.0, 0.16, dmin); // keep the fill off its own edges
+
+    float r = length(vGridPos) / max(u_fadeDistance, 1e-4);
+    float fade = 1.0 - smoothstep(1.0 - u_fadeStrength, 1.0, r);
+
+    vec3 col = u_bgColor * u_bgOpacity;
+    float a  = u_bgOpacity;
+
+    col += mix(u_cellColor, u_cellColor * 2.2, tone) * cell;
+    a = max(a, cell * 0.9);
+    float linesI = lines * lineAnim;
+    col += u_lineColor * linesI;            a = max(a, linesI);
+    float accentI = accent * lineAnim;
+    col += u_sectionColor * accentI;        a = max(a, accentI);
+    col += u_glowColor * (linesI * 0.2 + cell * 0.35) * u_animIntensity;
+    col += extraCol;                        a = max(a, extraA);
+
+    col *= fade;
+    a   *= fade;
+
+    // ---- reveal ----------------------------------------------------------
+    if (u_reveal < 0.999){
+      float rd = length(vGridPos - u_focus) / max(u_fadeDistance, 1e-4);
+      float edge = u_reveal * 1.1;
+      float mask = 1.0 - smoothstep(edge - 0.05, edge, rd);
+      float front = mask * smoothstep(edge - 0.22, edge - 0.05, rd);
+      col = col * mask + u_glowColor * front * (a * 1.8 + 0.08);
+      a   = max(a * mask, front * 0.10);
+    }
+
+    if (a < 0.002) discard;
+    gl_FragColor = vec4(col, a);
+  }
+`;
+export const ApollonianGridMaterial = shaderMaterial({
+    u_time: apollonianGridMaterialDefaults.u_time,
+    u_cellSize: apollonianGridMaterialDefaults.u_cellSize,
+    u_lineWidth: apollonianGridMaterialDefaults.u_lineWidth,
+    u_sectionSize: apollonianGridMaterialDefaults.u_sectionSize,
+    u_sectionWidth: apollonianGridMaterialDefaults.u_sectionWidth,
+    u_lineColor: apollonianGridMaterialDefaults.u_lineColor.clone(),
+    u_sectionColor: apollonianGridMaterialDefaults.u_sectionColor.clone(),
+    u_cellColor: apollonianGridMaterialDefaults.u_cellColor.clone(),
+    u_glowColor: apollonianGridMaterialDefaults.u_glowColor.clone(),
+    u_bgColor: apollonianGridMaterialDefaults.u_bgColor.clone(),
+    u_bgOpacity: apollonianGridMaterialDefaults.u_bgOpacity,
+    u_lineMode: apollonianGridMaterialDefaults.u_lineMode,
+    u_cellMode: apollonianGridMaterialDefaults.u_cellMode,
+    u_animSpeed: apollonianGridMaterialDefaults.u_animSpeed,
+    u_animScale: apollonianGridMaterialDefaults.u_animScale,
+    u_animIntensity: apollonianGridMaterialDefaults.u_animIntensity,
+    u_fadeDistance: apollonianGridMaterialDefaults.u_fadeDistance,
+    u_fadeStrength: apollonianGridMaterialDefaults.u_fadeStrength,
+    u_focus: apollonianGridMaterialDefaults.u_focus.clone(),
+    u_mouse: apollonianGridMaterialDefaults.u_mouse.clone(),
+    u_displace: apollonianGridMaterialDefaults.u_displace,
+    u_reveal: apollonianGridMaterialDefaults.u_reveal,
+    u_depth: apollonianGridMaterialDefaults.u_depth,
+    u_morph: apollonianGridMaterialDefaults.u_morph,
+}, vertex, fragment);
+extend({ ApollonianGridMaterial });

package/dist/shaders/ConformalGridMaterial.d.ts

@@ -0,0 +1,91 @@
+import * as THREE from 'three';
+export interface ConformalGridMaterialUniforms {
+    /** elapsed seconds (useGridSurface) */
+    u_time: number;
+    /** size of one cell, in world units */
+    u_cellSize: number;
+    /** line thickness, in pixels */
+    u_lineWidth: number;
+    u_sectionSize: number;
+    /** accent thickness, in pixels; 0 disables the layer */
+    u_sectionWidth: number;
+    u_lineColor: THREE.Color;
+    u_sectionColor: THREE.Color;
+    u_cellColor: THREE.Color;
+    u_glowColor: THREE.Color;
+    u_bgColor: THREE.Color;
+    u_bgOpacity: number;
+    u_lineMode: number;
+    u_cellMode: number;
+    u_animSpeed: number;
+    u_animScale: number;
+    u_animIntensity: number;
+    u_fadeDistance: number;
+    u_fadeStrength: number;
+    /** ripple / reveal origin; stays at the origin */
+    u_focus: THREE.Vector2;
+    u_mouse: THREE.Vector2;
+    u_displace: number;
+    /** 0..1 assemble / dissolve */
+    u_reveal: number;
+    /** The flow: 0 source + sink, 1 spiral vortex, 2 spinning cylinder, 3 corner */
+    u_flowMap: number;
+    /** Distance from the centre to the poles, or the cylinder radius, in world units */
+    u_poleSpread: number;
+    /** Lattice lines per turn round a pole (whole number, so the log seam closes) */
+    u_spokes: number;
+    /** Spiral arms of the vortex flow; 0 gives a plain polar web */
+    u_arms: number;
+    /** Circulation round the cylinder (lift); at ±2 both stagnation points meet */
+    u_circulation: number;
+    /** How fast the lattice streams along the flow; negative reverses it */
+    u_drift: number;
+    /** Strength of the speed-coloured stream-tube fill */
+    u_fill: number;
+    /** Brightness of the dashes carried along the streamlines */
+    u_dye: number;
+    /** accumulated on the CPU from drift (never multiplied by time in the shader) */
+    u_flowPhase: number;
+}
+declare module '@react-three/fiber' {
+    interface ThreeElements {
+        conformalGridMaterial: ThreeElements['shaderMaterial'] & Partial<ConformalGridMaterialUniforms>;
+    }
+}
+export declare const conformalGridMaterialDefaults: ConformalGridMaterialUniforms;
+export declare const ConformalGridMaterial: import("@react-three/fiber").ConstructorRepresentation<THREE.ShaderMaterial & {
+    u_time: number;
+    u_cellSize: number;
+    u_lineWidth: number;
+    u_sectionSize: number;
+    u_sectionWidth: number;
+    u_lineColor: THREE.Color;
+    u_sectionColor: THREE.Color;
+    u_cellColor: THREE.Color;
+    u_glowColor: THREE.Color;
+    u_bgColor: THREE.Color;
+    u_bgOpacity: number;
+    u_lineMode: number;
+    u_cellMode: number;
+    u_animSpeed: number;
+    u_animScale: number;
+    u_animIntensity: number;
+    u_fadeDistance: number;
+    u_fadeStrength: number;
+    u_focus: THREE.Vector2;
+    u_mouse: THREE.Vector2;
+    u_displace: number;
+    u_reveal: number;
+    u_flowMap: number;
+    u_poleSpread: number;
+    u_spokes: number;
+    u_arms: number;
+    u_circulation: number;
+    u_drift: number;
+    u_fill: number;
+    u_dye: number;
+    u_flowPhase: number;
+}> & {
+    key: string;
+};
+//# sourceMappingURL=ConformalGridMaterial.d.ts.map