@vib3code/sdk 2.0.3-canary.91a95f3 → 2.0.3-canary.98b84da

package/src/geometry/warp/HypersphereCore.js

@@ -16,13 +16,14 @@ import { Vec4 } from '../../math/Vec4.js';
  * @param {number} radius - Hypersphere radius
  * @returns {Vec4} Point on hypersphere
  */
-export function projectToHypersphere(point, radius = 1) {
+export function projectToHypersphere(point, radius = 1, target = null) {
     const len = point.length();
     if (len < 0.0001) {
         // Handle origin - project to north pole
+        if (target) return target.set(0, 0, 0, radius);
         return new Vec4(0, 0, 0, radius);
     }
-    return point.scale(radius / len);
+    return point.scale(radius / len, target);
 }
 
 /**
@@ -30,9 +31,10 @@ export function projectToHypersphere(point, radius = 1) {
  * Maps all of 3D space onto the 4D hypersphere
  * @param {Vec4} point - Input point (uses x, y, z)
  * @param {number} radius - Hypersphere radius
+ * @param {Vec4} [target=null] - Optional target vector
  * @returns {Vec4} Point on hypersphere
  */
-export function stereographicToHypersphere(point, radius = 1) {
+export function stereographicToHypersphere(point, radius = 1, target = null) {
     const x = point.x;
     const y = point.y;
     const z = point.z;
@@ -40,6 +42,15 @@ export function stereographicToHypersphere(point, radius = 1) {
     const sumSq = x * x + y * y + z * z;
     const denom = sumSq + 1;
 
+    if (target) {
+        return target.set(
+            (2 * x) / denom * radius,
+            (2 * y) / denom * radius,
+            (2 * z) / denom * radius,
+            (sumSq - 1) / denom * radius
+        );
+    }
+
     return new Vec4(
         (2 * x) / denom * radius,
         (2 * y) / denom * radius,
@@ -56,12 +67,22 @@ export function stereographicToHypersphere(point, radius = 1) {
  * @param {number} phi - Azimuth on base S² (0 to 2π)
  * @param {number} psi - Fiber angle (0 to 2π)
  * @param {number} radius - Hypersphere radius
+ * @param {Vec4} [target=null] - Optional target vector
  * @returns {Vec4} Point on hypersphere
  */
-export function hopfFibration(theta, phi, psi, radius = 1) {
+export function hopfFibration(theta, phi, psi, radius = 1, target = null) {
     const cosTheta2 = Math.cos(theta / 2);
     const sinTheta2 = Math.sin(theta / 2);
 
+    if (target) {
+        return target.set(
+            cosTheta2 * Math.cos((phi + psi) / 2) * radius,
+            cosTheta2 * Math.sin((phi + psi) / 2) * radius,
+            sinTheta2 * Math.cos((phi - psi) / 2) * radius,
+            sinTheta2 * Math.sin((phi - psi) / 2) * radius
+        );
+    }
+
     return new Vec4(
         cosTheta2 * Math.cos((phi + psi) / 2) * radius,
         cosTheta2 * Math.sin((phi + psi) / 2) * radius,
@@ -78,8 +99,9 @@ export function hopfFibration(theta, phi, psi, radius = 1) {
  * @returns {Vec4[]} Warped vertices
  */
 export function warpRadial(vertices, radius = 1, blendFactor = 1) {
+    const onSphere = new Vec4();
     return vertices.map(v => {
-        const onSphere = projectToHypersphere(v, radius);
+        projectToHypersphere(v, radius, onSphere);
         return v.lerp(onSphere, blendFactor);
     });
 }
@@ -93,8 +115,9 @@ export function warpRadial(vertices, radius = 1, blendFactor = 1) {
  * @returns {Vec4[]} Warped vertices
  */
 export function warpStereographic(vertices, radius = 1, scale = 1) {
+    const scaled = new Vec4();
     return vertices.map(v => {
-        const scaled = v.scale(scale);
+        v.scale(scale, scaled);
         return stereographicToHypersphere(scaled, radius);
     });
 }
@@ -146,25 +169,31 @@ export function warpHypersphereCore(geometry, options = {}) {
         twist = 1
     } = options;
 
-    let warpedVertices;
-
-    // Pre-scale vertices
-    const scaledVertices = geometry.vertices.map(v => v.scale(scale));
-
-    switch (method) {
-        case 'stereographic':
-            warpedVertices = warpStereographic(scaledVertices, radius, 1);
-            break;
-
-        case 'hopf':
-            warpedVertices = warpHopf(scaledVertices, radius, twist);
-            break;
+    const temp = new Vec4();
+    const warpedVertices = geometry.vertices.map(v => {
+        // Combined scaling and warping to minimize allocations
+        const result = v.scale(scale);
+
+        if (method === 'stereographic') {
+            stereographicToHypersphere(result, radius, result);
+        } else if (method === 'hopf') {
+            const r = result.length();
+            if (r < 0.0001) {
+                result.set(0, 0, 0, radius);
+            } else {
+                const theta = Math.acos(result.z / r);
+                const phi = Math.atan2(result.y, result.x);
+                const psi = result.w * twist + phi * 0.5;
+                hopfFibration(theta, phi, psi, radius, result);
+            }
+        } else {
+            // Radial (default)
+            projectToHypersphere(result, radius, temp);
+            result.lerp(temp, blend, result);
+        }
 
-        case 'radial':
-        default:
-            warpedVertices = warpRadial(scaledVertices, radius, blend);
-            break;
-    }
+        return result;
+    });
 
     return {
         ...geometry,

package/src/holograms/HolographicVisualizer.js

@@ -132,28 +132,28 @@ export class HolographicVisualizer {
         const finalName = geometryName + suffixes[variationLevel];
         
         const geometryConfigs = {
-            0: { density: 0.8 + variationLevel * 0.2, speed: 0.3 + variationLevel * 0.1, chaos: variationLevel * 0.1, morph: 0.0 + variationLevel * 0.2 },
-            1: { density: 1.0 + variationLevel * 0.3, speed: 0.5 + variationLevel * 0.1, chaos: variationLevel * 0.15, morph: variationLevel * 0.2 },
-            2: { density: 1.2 + variationLevel * 0.4, speed: 0.4 + variationLevel * 0.2, chaos: 0.1 + variationLevel * 0.1, morph: 0.3 + variationLevel * 0.2 },
-            3: { density: 0.9 + variationLevel * 0.3, speed: 0.6 + variationLevel * 0.2, chaos: 0.2 + variationLevel * 0.2, morph: 0.5 + variationLevel * 0.1 },
-            4: { density: 1.4 + variationLevel * 0.5, speed: 0.7 + variationLevel * 0.1, chaos: 0.3 + variationLevel * 0.2, morph: 0.7 + variationLevel * 0.1 },
-            5: { density: 1.8 + variationLevel * 0.3, speed: 0.5 + variationLevel * 0.3, chaos: 0.5 + variationLevel * 0.2, morph: 0.8 + variationLevel * 0.05 },
-            6: { density: 0.6 + variationLevel * 0.4, speed: 0.8 + variationLevel * 0.4, chaos: 0.4 + variationLevel * 0.3, morph: 0.6 + variationLevel * 0.2 },
-            7: { density: 1.6 + variationLevel * 0.2, speed: 0.2 + variationLevel * 0.1, chaos: 0.1 + variationLevel * 0.1, morph: 0.2 + variationLevel * 0.2 }
+            0: { gridDensity: 0.8 + variationLevel * 0.2, speed: 0.3 + variationLevel * 0.1, chaos: variationLevel * 0.1, morphFactor: 0.0 + variationLevel * 0.2 },
+            1: { gridDensity: 1.0 + variationLevel * 0.3, speed: 0.5 + variationLevel * 0.1, chaos: variationLevel * 0.15, morphFactor: variationLevel * 0.2 },
+            2: { gridDensity: 1.2 + variationLevel * 0.4, speed: 0.4 + variationLevel * 0.2, chaos: 0.1 + variationLevel * 0.1, morphFactor: 0.3 + variationLevel * 0.2 },
+            3: { gridDensity: 0.9 + variationLevel * 0.3, speed: 0.6 + variationLevel * 0.2, chaos: 0.2 + variationLevel * 0.2, morphFactor: 0.5 + variationLevel * 0.1 },
+            4: { gridDensity: 1.4 + variationLevel * 0.5, speed: 0.7 + variationLevel * 0.1, chaos: 0.3 + variationLevel * 0.2, morphFactor: 0.7 + variationLevel * 0.1 },
+            5: { gridDensity: 1.8 + variationLevel * 0.3, speed: 0.5 + variationLevel * 0.3, chaos: 0.5 + variationLevel * 0.2, morphFactor: 0.8 + variationLevel * 0.05 },
+            6: { gridDensity: 0.6 + variationLevel * 0.4, speed: 0.8 + variationLevel * 0.4, chaos: 0.4 + variationLevel * 0.3, morphFactor: 0.6 + variationLevel * 0.2 },
+            7: { gridDensity: 1.6 + variationLevel * 0.2, speed: 0.2 + variationLevel * 0.1, chaos: 0.1 + variationLevel * 0.1, morphFactor: 0.2 + variationLevel * 0.2 }
         };
-        
+
         const config = geometryConfigs[baseGeometry];
-        
+
         return {
-            geometryType: baseGeometry,
+            geometry: baseGeometry,
             name: finalName,
-            density: config.density,
+            gridDensity: config.gridDensity,
             speed: config.speed,
             hue: (variant * 12.27) % 360,
-            saturation: 0.8 + (variationLevel * 0.05), // Add saturation parameter
+            saturation: 0.8 + (variationLevel * 0.05),
             intensity: 0.5 + (variationLevel * 0.1),
             chaos: config.chaos,
-            morph: config.morph
+            morphFactor: config.morphFactor
         };
     }
     
@@ -169,20 +169,20 @@ export class HolographicVisualizer {
                 densityMult: 0.8, speedMult: 0.3, colorShift: 180.0, intensity: 0.4,
                 mouseReactivity: 0.5, clickReactivity: 0.3 
             },
-            'content': { 
-                densityMult: vp.density, speedMult: vp.speed, 
+            'content': {
+                densityMult: vp.gridDensity, speedMult: vp.speed,
                 colorShift: vp.hue, intensity: vp.intensity,
-                mouseReactivity: 1.0, clickReactivity: 0.8 
+                mouseReactivity: 1.0, clickReactivity: 0.8
             },
-            'highlight': { 
-                densityMult: 1.5 + (vp.density * 0.3), speedMult: 0.8 + (vp.speed * 0.2), 
+            'highlight': {
+                densityMult: 1.5 + (vp.gridDensity * 0.3), speedMult: 0.8 + (vp.speed * 0.2),
                 colorShift: vp.hue + 60.0, intensity: 0.6 + (vp.intensity * 0.2),
-                mouseReactivity: 1.2, clickReactivity: 1.0 
+                mouseReactivity: 1.2, clickReactivity: 1.0
             },
-            'accent': { 
-                densityMult: 2.5 + (vp.density * 0.5), speedMult: 0.4 + (vp.speed * 0.1), 
+            'accent': {
+                densityMult: 2.5 + (vp.gridDensity * 0.5), speedMult: 0.4 + (vp.speed * 0.1),
                 colorShift: vp.hue + 300.0, intensity: 0.3 + (vp.intensity * 0.1),
-                mouseReactivity: 1.5, clickReactivity: 1.2 
+                mouseReactivity: 1.5, clickReactivity: 1.2
             }
         };
         
@@ -207,7 +207,7 @@ export class HolographicVisualizer {
             uniform float u_time;
             uniform vec2 u_mouse;
             uniform float u_geometry;
-            uniform float u_density;
+            uniform float u_gridDensity;
             uniform float u_speed;
             uniform vec3 u_color;
             uniform float u_intensity;
@@ -218,9 +218,8 @@ export class HolographicVisualizer {
             uniform float u_mouseIntensity;
             uniform float u_clickIntensity;
             uniform float u_densityVariation;
-            uniform float u_geometryType;
             uniform float u_chaos;
-            uniform float u_morph;
+            uniform float u_morphFactor;
             uniform float u_touchMorph;
             uniform float u_touchChaos;
             uniform float u_scrollParallax;
@@ -293,7 +292,7 @@ export class HolographicVisualizer {
             // ========================================
             vec3 warpHypersphereCore(vec3 p, int geometryIndex, vec2 mouseDelta) {
                 float radius = length(p);
-                float morphBlend = clamp(u_morph * 0.6 + 0.3, 0.0, 2.0);
+                float morphBlend = clamp(u_morphFactor * 0.6 + 0.3, 0.0, 2.0);
                 float w = sin(radius * (1.3 + float(geometryIndex) * 0.12) + u_time * 0.0008 * u_speed);
                 w *= (0.4 + morphBlend * 0.45);
 
@@ -315,7 +314,7 @@ export class HolographicVisualizer {
                 vec3 c3 = normalize(vec3(-1.0, 1.0, -1.0));
                 vec3 c4 = normalize(vec3(1.0, -1.0, -1.0));
 
-                float morphBlend = clamp(u_morph * 0.8 + 0.2, 0.0, 2.0);
+                float morphBlend = clamp(u_morphFactor * 0.8 + 0.2, 0.0, 2.0);
                 float basisMix = dot(p, c1) * 0.14 + dot(p, c2) * 0.1 + dot(p, c3) * 0.08;
                 float w = sin(basisMix * 5.5 + u_time * 0.0009 * u_speed);
                 w *= cos(dot(p, c4) * 4.2 - u_time * 0.0007 * u_speed);
@@ -551,12 +550,12 @@ export class HolographicVisualizer {
                 float audioDensityMod = 1.0 + u_audioDensityBoost * 0.5;
                 // Controlled density calculation - breathing modulation added
                 float breathDensityMod = 1.0 + u_breath * 0.1;
-                float baseDensity = u_density * u_roleDensity * breathDensityMod;
+                float baseDensity = u_gridDensity * u_roleDensity * breathDensityMod;
 
                 float densityVariations = (u_densityVariation * 0.3 + (scrollDensityMod - 1.0) * 0.4 + (audioDensityMod - 1.0) * 0.2);
                 float roleDensity = baseDensity + densityVariations;
                 
-                float morphedGeometry = u_geometryType + u_morph * 3.0 + u_touchMorph * 2.0 + u_audioMorphBoost * 1.5;
+                float morphedGeometry = u_geometry + u_morphFactor * 3.0 + u_touchMorph * 2.0 + u_audioMorphBoost * 1.5;
                 float lattice = getDynamicGeometry(p, roleDensity, morphedGeometry);
                 
                 // Enhanced holographic color processing
@@ -590,9 +589,9 @@ export class HolographicVisualizer {
                 color = rgbGlitch(color, uv, enhancedChaos);
                 
                 // Apply morph distortion to position
-                vec2 morphDistortion = vec2(sin(uv.y * 10.0 + u_time * 0.001) * u_morph * 0.1, 
-                                           cos(uv.x * 10.0 + u_time * 0.001) * u_morph * 0.1);
-                color = mix(color, color * (1.0 + length(morphDistortion)), u_morph * 0.5);
+                vec2 morphDistortion = vec2(sin(uv.y * 10.0 + u_time * 0.001) * u_morphFactor * 0.1, 
+                                           cos(uv.x * 10.0 + u_time * 0.001) * u_morphFactor * 0.1);
+                color = mix(color, color * (1.0 + length(morphDistortion)), u_morphFactor * 0.5);
                 
                 // Enhanced holographic interaction effects
                 float mouseDist = length(uv - (u_mouse - 0.5) * vec2(aspectRatio, 1.0));
@@ -621,7 +620,7 @@ export class HolographicVisualizer {
             time: this.gl.getUniformLocation(this.program, 'u_time'),
             mouse: this.gl.getUniformLocation(this.program, 'u_mouse'),
             geometry: this.gl.getUniformLocation(this.program, 'u_geometry'),
-            density: this.gl.getUniformLocation(this.program, 'u_density'),
+            gridDensity: this.gl.getUniformLocation(this.program, 'u_gridDensity'),
             speed: this.gl.getUniformLocation(this.program, 'u_speed'),
             color: this.gl.getUniformLocation(this.program, 'u_color'),
             intensity: this.gl.getUniformLocation(this.program, 'u_intensity'),
@@ -632,9 +631,8 @@ export class HolographicVisualizer {
             mouseIntensity: this.gl.getUniformLocation(this.program, 'u_mouseIntensity'),
             clickIntensity: this.gl.getUniformLocation(this.program, 'u_clickIntensity'),
             densityVariation: this.gl.getUniformLocation(this.program, 'u_densityVariation'),
-            geometryType: this.gl.getUniformLocation(this.program, 'u_geometryType'),
             chaos: this.gl.getUniformLocation(this.program, 'u_chaos'),
-            morph: this.gl.getUniformLocation(this.program, 'u_morph'),
+            morphFactor: this.gl.getUniformLocation(this.program, 'u_morphFactor'),
             touchMorph: this.gl.getUniformLocation(this.program, 'u_touchMorph'),
             touchChaos: this.gl.getUniformLocation(this.program, 'u_touchChaos'),
             scrollParallax: this.gl.getUniformLocation(this.program, 'u_scrollParallax'),
@@ -894,11 +892,11 @@ export class HolographicVisualizer {
         this.gl.uniform2f(this.uniforms.resolution, this.canvas.width, this.canvas.height);
         this.gl.uniform1f(this.uniforms.time, time);
         this.gl.uniform2f(this.uniforms.mouse, this.mouseX, this.mouseY);
-        this.gl.uniform1f(this.uniforms.geometryType, this.variantParams.geometryType || 0);
-        this.gl.uniform1f(this.uniforms.density, this.variantParams.density || 1.0);
-        // FIX: Controlled speed calculation - base speed controls main movement, audio provides subtle boost
-        const baseSpeed = (this.variantParams.speed || 0.5) * 0.2; // Much slower base speed
-        const audioBoost = (this.audioSpeedBoost || 0.0) * 0.1; // Subtle audio boost only
+        this.gl.uniform1f(this.uniforms.geometry, this.variantParams.geometry !== undefined ? this.variantParams.geometry : this.variant || 0);
+        this.gl.uniform1f(this.uniforms.gridDensity, this.variantParams.gridDensity || 1.0);
+        // Controlled speed calculation - base speed controls main movement, audio provides subtle boost
+        const baseSpeed = (this.variantParams.speed || 0.5) * 0.2;
+        const audioBoost = (this.audioSpeedBoost || 0.0) * 0.1;
         this.gl.uniform1f(this.uniforms.speed, baseSpeed + audioBoost);
         this.gl.uniform3fv(this.uniforms.color, new Float32Array(rgbColor));
         this.gl.uniform1f(this.uniforms.intensity, (this.variantParams.intensity || 0.5) * this.roleParams.intensity);
@@ -909,9 +907,8 @@ export class HolographicVisualizer {
         this.gl.uniform1f(this.uniforms.mouseIntensity, this.mouseIntensity);
         this.gl.uniform1f(this.uniforms.clickIntensity, this.clickIntensity);
         this.gl.uniform1f(this.uniforms.densityVariation, this.densityVariation);
-        this.gl.uniform1f(this.uniforms.geometryType, this.variantParams.geometryType !== undefined ? this.variantParams.geometryType : this.variant || 0);
         this.gl.uniform1f(this.uniforms.chaos, this.variantParams.chaos || 0.0);
-        this.gl.uniform1f(this.uniforms.morph, this.variantParams.morph || 0.0);
+        this.gl.uniform1f(this.uniforms.morphFactor, this.variantParams.morphFactor || 0.0);
         
         // Touch and scroll uniforms
         this.gl.uniform1f(this.uniforms.touchMorph, this.touchMorph);
@@ -1001,62 +998,34 @@ export class HolographicVisualizer {
     }
 
     /**
-     * CRITICAL FIX: Update visualization parameters with immediate re-render
-     * This method was missing and causing parameter sliders to not work in holographic system
+     * Update visualization parameters from SDK global parameter names.
+     * Parameters are written directly to variantParams — no name mapping needed
+     * since shader uniforms now use SDK-standard names.
      */
     updateParameters(params) {
         if (!params || typeof params !== 'object') return;
-        // Update variant parameters with proper mapping and scaling
         if (this.variantParams) {
             Object.keys(params).forEach(param => {
-                const mappedParam = this.mapParameterName(param);
-                if (mappedParam !== null) {
-                    let scaledValue = params[param];
-                    // Guard against NaN/Infinity reaching GPU uniforms
-                    if (typeof scaledValue !== 'number' || !Number.isFinite(scaledValue)) return;
-                    
-                    // FIX: Scale gridDensity to reasonable holographic density range (back to normal levels)
-                    if (param === 'gridDensity') {
-                        // Convert gridDensity (5-100) to holographic density (0.3-2.5) - reasonable range
-                        // Formula: density = 0.3 + (gridDensity - 5) / (100 - 5) * (2.5 - 0.3)
-                        scaledValue = 0.3 + (parseFloat(params[param]) - 5) / 95 * 2.2;
-                        console.log(`🔧 Density scaling: gridDensity=${params[param]} → density=${scaledValue.toFixed(3)} (normal range)`);
-                    }
-                    
-                    this.variantParams[mappedParam] = scaledValue;
-                    
-                    // Handle special parameter types
-                    if (mappedParam === 'geometryType') {
-                        // Regenerate role params with new geometry
-                        this.roleParams = this.generateRoleParams(this.role);
-                    }
+                let scaledValue = params[param];
+                // Guard against NaN/Infinity reaching GPU uniforms
+                if (typeof scaledValue !== 'number' || !Number.isFinite(scaledValue)) return;
+
+                // Scale gridDensity (5-100) to holographic density range (0.3-2.5)
+                if (param === 'gridDensity') {
+                    scaledValue = 0.3 + (parseFloat(params[param]) - 5) / 95 * 2.2;
+                }
+
+                this.variantParams[param] = scaledValue;
+
+                // Regenerate role params when geometry changes
+                if (param === 'geometry') {
+                    this.roleParams = this.generateRoleParams(this.role);
                 }
             });
         }
-        
+
         // Don't call render() here - engine will call it to prevent infinite loop
     }
-    
-    /**
-     * Map global parameter names to holographic system parameter names
-     */
-    mapParameterName(globalParam) {
-        const paramMap = {
-            'gridDensity': 'density',
-            'morphFactor': 'morph',
-            'rot4dXW': 'rot4dXW',
-            'rot4dYW': 'rot4dYW', 
-            'rot4dZW': 'rot4dZW',
-            'hue': 'hue',
-            'intensity': 'intensity',
-            'saturation': 'saturation',
-            'chaos': 'chaos',
-            'speed': 'speed',
-            'geometry': 'geometryType',
-            'breath': 'breath'
-        };
-        return paramMap[globalParam] || globalParam;
-    }
 
     /**
      * Clean up all WebGL resources and event listeners

package/src/holograms/RealHolographicSystem.js

@@ -5,6 +5,7 @@
  */
 import { HolographicVisualizer } from './HolographicVisualizer.js';
 import { MultiCanvasBridge } from '../render/MultiCanvasBridge.js';
+import { LayerRelationshipGraph } from '../render/LayerRelationshipGraph.js';
 import { shaderLoader } from '../render/ShaderLoader.js';
 
 export class RealHolographicSystem {
@@ -32,6 +33,12 @@ export class RealHolographicSystem {
         /** @type {number} time accumulator for bridge rendering (ms) */
         this._bridgeTime = 0;
 
+        // Layer relationship graph — keystone-driven inter-layer parameter system
+        /** @type {LayerRelationshipGraph} */
+        this._layerGraph = new LayerRelationshipGraph({
+            profile: options.relationshipProfile || 'holographic'
+        });
+
         // Conditional reactivity: Use built-in only if ReactivityManager not active
         this.useBuiltInReactivity = !window.reactivityManager;
 
@@ -220,7 +227,11 @@ export class RealHolographicSystem {
         if (Object.keys(canvasMap).length === 0) return null;
 
         const bridge = new MultiCanvasBridge();
-        await bridge.initialize({ canvases: canvasMap, preferWebGPU: options.preferWebGPU !== false });
+        await bridge.initialize({
+            canvases: canvasMap,
+            preferWebGPU: options.preferWebGPU !== false,
+            relationshipGraph: this._layerGraph
+        });
 
         // Load external shader files, fall back to inline if unavailable
         let sources = {
@@ -369,48 +380,130 @@ export class RealHolographicSystem {
     }
     
     updateParameter(param, value) {
-        // Store custom parameter overrides
+        // Store custom parameter overrides (keystone state)
         if (!this.customParams) {
             this.customParams = {};
         }
         this.customParams[param] = value;
-        
-        console.log(`🌌 Updating holographic ${param}: ${value} (${this.visualizers.length} visualizers)`);
-        
-        // CRITICAL FIX: Call updateParameters method on ALL visualizers for immediate render
+
+        // Build keystone params from current state + this update
+        const keystoneParams = { ...this._buildKeystoneParams(), [param]: value };
+
+        // Resolve all layers through the relationship graph
+        const resolved = this._layerGraph.resolveAll(keystoneParams, Date.now());
+
+        // Apply resolved params to each visualizer by role
         this.visualizers.forEach((visualizer, index) => {
+            const role = visualizer.role || 'content';
+            const layerParams = resolved[role] || keystoneParams;
+
             try {
                 if (visualizer.updateParameters) {
-                    // Use new updateParameters method with proper parameter mapping
-                    const params = {};
-                    params[param] = value;
-                    visualizer.updateParameters(params);
-                    console.log(`✅ Updated holographic layer ${index} (${visualizer.role}) with ${param}=${value}`);
-                } else {
-                    console.warn(`⚠️ Holographic layer ${index} missing updateParameters method, using fallback`);
-                    // Fallback for older method (direct parameter setting)
-                    if (visualizer.variantParams) {
-                        visualizer.variantParams[param] = value;
-                        
-                        // If it's a geometry type change, regenerate role params with new geometry
-                        if (param === 'geometryType') {
-                            visualizer.roleParams = visualizer.generateRoleParams(visualizer.role);
-                        }
-                        
-                        // Force manual render for older visualizers
-                        if (visualizer.render) {
-                            visualizer.render();
-                        }
+                    visualizer.updateParameters(layerParams);
+                } else if (visualizer.variantParams) {
+                    Object.assign(visualizer.variantParams, layerParams);
+                    if (param === 'geometryType' || param === 'geometry') {
+                        visualizer.roleParams = visualizer.generateRoleParams(role);
                     }
                 }
             } catch (error) {
-                console.error(`❌ Failed to update holographic layer ${index}:`, error);
+                console.error(`Failed to update holographic layer ${index} (${role}):`, error);
             }
         });
-        
-        console.log(`🔄 Holographic parameter update complete: ${param}=${value}`);
     }
-    
+
+    /**
+     * Update multiple parameters at once (RendererContract / VIB3Engine compatible).
+     * Resolves all layers through the relationship graph in a single pass.
+     * @param {Object} params - Key-value pairs of parameters to update
+     */
+    updateParameters(params) {
+        if (!params || typeof params !== 'object') return;
+
+        // Merge into custom params (keystone state)
+        if (!this.customParams) {
+            this.customParams = {};
+        }
+        Object.assign(this.customParams, params);
+
+        // Build keystone params + resolve all layers in one shot
+        const keystoneParams = { ...this._buildKeystoneParams(), ...params };
+        const resolved = this._layerGraph.resolveAll(keystoneParams, Date.now());
+
+        this.visualizers.forEach((visualizer, index) => {
+            const role = visualizer.role || 'content';
+            const layerParams = resolved[role] || keystoneParams;
+
+            try {
+                if (visualizer.updateParameters) {
+                    visualizer.updateParameters(layerParams);
+                } else if (visualizer.variantParams) {
+                    Object.assign(visualizer.variantParams, layerParams);
+                }
+            } catch (error) {
+                console.error(`Failed to update holographic layer ${index} (${role}):`, error);
+            }
+        });
+    }
+
+    // ========================================================================
+    // Layer Relationship Graph API
+    // ========================================================================
+
+    /**
+     * Build keystone parameters from current state.
+     * These are the driver values that get transformed by the relationship
+     * graph to produce each dependent layer's parameters.
+     * @private
+     * @returns {Object}
+     */
+    _buildKeystoneParams() {
+        const base = {};
+        // Pull from first (content) visualizer's variant params if available
+        const content = this.visualizers.find(v => v.role === 'content');
+        if (content && content.variantParams) {
+            Object.assign(base, content.variantParams);
+        }
+        // Merge custom overrides
+        if (this.customParams) {
+            Object.assign(base, this.customParams);
+        }
+        return base;
+    }
+
+    /**
+     * Get the layer relationship graph for direct configuration.
+     * @returns {LayerRelationshipGraph}
+     */
+    get layerGraph() {
+        return this._layerGraph;
+    }
+
+    /**
+     * Load a relationship profile by name.
+     * @param {string} profileName - holographic, symmetry, chord, storm, legacy
+     */
+    loadRelationshipProfile(profileName) {
+        this._layerGraph.loadProfile(profileName);
+    }
+
+    /**
+     * Set the keystone (driver) layer.
+     * @param {string} layerName - background, shadow, content, highlight, or accent
+     */
+    setKeystone(layerName) {
+        this._layerGraph.setKeystone(layerName);
+    }
+
+    /**
+     * Set the relationship for a dependent layer.
+     * @param {string} layerName
+     * @param {string|Function|Object} relationship - Preset name, function, or { preset, config }
+     */
+    setLayerRelationship(layerName, relationship) {
+        this._layerGraph.setRelationship(layerName, relationship);
+    }
+
     // Override updateVariant to preserve custom parameters
     updateVariant(newVariant) {
         if (newVariant < 0) newVariant = this.totalVariants - 1;
@@ -469,7 +562,9 @@ export class RealHolographicSystem {
             Object.assign(params, this.customParams);
         }
         
-        console.log('🌌 Holographic system getParameters:', params);
+        // Include layer relationship graph config for serialization
+        params.layerRelationship = this._layerGraph.exportConfig();
+
         return params;
     }