@vib3code/sdk 2.0.1 → 2.0.3-canary.0a63e71

package/src/render/MultiCanvasBridge.js

@@ -7,30 +7,30 @@
  * UnifiedRenderBridge instances — one per canvas — and coordinates shader
  * compilation, uniform updates, and rendering across all layers.
  *
+ * Layer parameters are derived through a LayerRelationshipGraph, where one
+ * layer acts as the keystone (driver) and others derive their state through
+ * configurable relationship functions — not static multipliers.
+ *
  * Usage:
  *   const multi = new MultiCanvasBridge();
  *   await multi.initialize({
- *       canvases: {
- *           background: document.getElementById('bg-canvas'),
- *           shadow: document.getElementById('shadow-canvas'),
- *           content: document.getElementById('content-canvas'),
- *           highlight: document.getElementById('highlight-canvas'),
- *           accent: document.getElementById('accent-canvas'),
- *       },
- *       preferWebGPU: true
+ *       canvases: { background, shadow, content, highlight, accent },
+ *       preferWebGPU: true,
+ *       relationshipProfile: 'holographic' // or 'symmetry', 'chord', 'storm'
  *   });
  *
  *   multi.compileShaderAll('holographic', shaderSources);
- *   multi.setSharedUniforms({ u_time: t, u_resolution: [w, h] });
- *   multi.setLayerUniforms('background', { u_layerOpacity: 0.2, u_densityMult: 0.4 });
+ *   multi.setKeystoneUniforms({ u_time: t, u_density: 1.0, u_hue: 320 });
  *   multi.renderAll('holographic');
  */
 
 import { UnifiedRenderBridge } from './UnifiedRenderBridge.js';
+import { LayerRelationshipGraph, LAYER_ORDER as GRAPH_LAYER_ORDER } from './LayerRelationshipGraph.js';
 
 /**
- * Default layer configuration matching the VIB3+ holographic system.
- * Each layer has role-specific opacity, density, and speed multipliers.
+ * Default layer configuration — used as fallback when no relationship graph
+ * is active (legacy mode). Preserved for backward compatibility only.
+ * @deprecated Use LayerRelationshipGraph profiles instead.
  */
 const DEFAULT_LAYER_CONFIG = {
     background: { layerScale: 1.0, layerOpacity: 0.2, densityMult: 0.4, speedMult: 0.2 },
@@ -43,7 +43,7 @@ const DEFAULT_LAYER_CONFIG = {
 /**
  * Standard layer order (back to front).
  */
-const LAYER_ORDER = ['background', 'shadow', 'content', 'highlight', 'accent'];
+const LAYER_ORDER = GRAPH_LAYER_ORDER;
 
 export class MultiCanvasBridge {
     constructor() {
@@ -59,7 +59,7 @@ export class MultiCanvasBridge {
         /** @type {Map<string, object>} Per-layer uniform overrides */
         this._layerUniforms = new Map();
 
-        /** @type {Map<string, object>} Per-layer config (opacity, density, speed) */
+        /** @type {Map<string, object>} Per-layer config (opacity, density, speed) — legacy fallback */
         this._layerConfig = new Map();
 
         /** @type {boolean} */
@@ -67,6 +67,12 @@ export class MultiCanvasBridge {
 
         /** @type {string|null} Active backend type (set after init) */
         this._backendType = null;
+
+        /** @type {LayerRelationshipGraph|null} */
+        this._relationshipGraph = null;
+
+        /** @type {number} Frame time counter for relationship resolution */
+        this._frameTime = 0;
     }
 
     /**
@@ -76,7 +82,9 @@ export class MultiCanvasBridge {
      * @param {object} options.canvases - Map of layer name → HTMLCanvasElement
      * @param {boolean} [options.preferWebGPU=true] - Try WebGPU for each canvas
      * @param {boolean} [options.debug=false]
-     * @param {object} [options.layerConfig] - Override default layer configuration
+     * @param {object} [options.layerConfig] - Override default layer configuration (legacy)
+     * @param {string} [options.relationshipProfile] - Named relationship profile to load
+     * @param {LayerRelationshipGraph} [options.relationshipGraph] - Pre-configured graph instance
      * @returns {Promise<void>}
      */
     async initialize(options) {
@@ -84,7 +92,9 @@ export class MultiCanvasBridge {
             canvases,
             preferWebGPU = true,
             debug = false,
-            layerConfig = {}
+            layerConfig = {},
+            relationshipProfile,
+            relationshipGraph
         } = options;
 
         // Initialize bridges in parallel
@@ -102,7 +112,7 @@ export class MultiCanvasBridge {
                 this._bridges.set(layerName, bridge);
                 this._canvases.set(layerName, canvas);
 
-                // Apply layer config (user override > default)
+                // Apply legacy layer config (user override > default)
                 const config = {
                     ...(DEFAULT_LAYER_CONFIG[layerName] || {}),
                     ...(layerConfig[layerName] || {})
@@ -118,9 +128,19 @@ export class MultiCanvasBridge {
             }
         }
 
+        // Set up relationship graph
+        if (relationshipGraph instanceof LayerRelationshipGraph) {
+            this._relationshipGraph = relationshipGraph;
+        } else if (relationshipProfile) {
+            this._relationshipGraph = new LayerRelationshipGraph({ profile: relationshipProfile });
+        }
+
         this._initialized = this._bridges.size > 0;
         if (debug) {
-            console.log(`MultiCanvasBridge: ${this._bridges.size}/${entries.length} layers initialized (${this._backendType})`);
+            const graphInfo = this._relationshipGraph
+                ? ` [graph: ${this._relationshipGraph.activeProfile || 'custom'}]`
+                : ' [legacy mode]';
+            console.log(`MultiCanvasBridge: ${this._bridges.size}/${entries.length} layers initialized (${this._backendType})${graphInfo}`);
         }
     }
 
@@ -157,6 +177,55 @@ export class MultiCanvasBridge {
         return this._bridges.get(layerName);
     }
 
+    // ========================================================================
+    // Layer Relationship Graph
+    // ========================================================================
+
+    /**
+     * Get the active relationship graph. Creates one with 'holographic' profile
+     * if none exists.
+     * @returns {LayerRelationshipGraph}
+     */
+    get relationshipGraph() {
+        if (!this._relationshipGraph) {
+            this._relationshipGraph = new LayerRelationshipGraph({ profile: 'holographic' });
+        }
+        return this._relationshipGraph;
+    }
+
+    /**
+     * Set or replace the relationship graph.
+     * @param {LayerRelationshipGraph} graph
+     */
+    set relationshipGraph(graph) {
+        this._relationshipGraph = graph;
+    }
+
+    /**
+     * Load a named relationship profile.
+     * @param {string} profileName - holographic, symmetry, chord, storm, legacy
+     */
+    loadRelationshipProfile(profileName) {
+        this.relationshipGraph.loadProfile(profileName);
+    }
+
+    /**
+     * Set the keystone (driver) layer.
+     * @param {string} layerName
+     */
+    setKeystone(layerName) {
+        this.relationshipGraph.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.relationshipGraph.setRelationship(layerName, relationship);
+    }
+
     // ========================================================================
     // Shader Compilation
     // ========================================================================
@@ -204,6 +273,7 @@ export class MultiCanvasBridge {
 
     /**
      * Set uniforms shared across all layers (e.g. time, resolution, geometry).
+     * When a relationship graph is active, these are treated as keystone parameters.
      *
      * @param {object} uniforms
      */
@@ -212,7 +282,17 @@ export class MultiCanvasBridge {
     }
 
     /**
-     * Set per-layer uniform overrides (e.g. layerOpacity, densityMult).
+     * Alias for setSharedUniforms when using relationship graph mode.
+     * Makes intent clearer — these are the keystone's parameters.
+     *
+     * @param {object} uniforms - Keystone parameters to derive other layers from
+     */
+    setKeystoneUniforms(uniforms) {
+        this._sharedUniforms = uniforms;
+    }
+
+    /**
+     * Set per-layer uniform overrides. Applied after relationship resolution.
      *
      * @param {string} layerName
      * @param {object} uniforms
@@ -223,7 +303,8 @@ export class MultiCanvasBridge {
     }
 
     /**
-     * Update the layer configuration.
+     * Update the legacy layer configuration.
+     * @deprecated Use setLayerRelationship() instead.
      *
      * @param {string} layerName
      * @param {object} config - Partial config update
@@ -236,15 +317,38 @@ export class MultiCanvasBridge {
     /**
      * Build the merged uniform set for a specific layer.
      *
-     * Priority: shared < layer config < layer overrides
+     * When a relationship graph is active:
+     *   1. Shared uniforms are treated as keystone parameters
+     *   2. The graph resolves derived parameters for the layer
+     *   3. Per-layer overrides are applied on top
+     *
+     * Legacy fallback (no graph):
+     *   Priority: shared < layer config < layer overrides
      *
      * @param {string} layerName
      * @returns {object}
      */
     _buildLayerUniforms(layerName) {
-        const config = this._layerConfig.get(layerName) || {};
         const overrides = this._layerUniforms.get(layerName) || {};
 
+        if (this._relationshipGraph) {
+            // Relationship graph mode: resolve layer params from keystone
+            const resolved = this._relationshipGraph.resolve(
+                this._sharedUniforms,
+                layerName,
+                this._frameTime
+            );
+
+            // Map relationship output to shader uniforms
+            return {
+                ...resolved,
+                u_layerOpacity: resolved.layerOpacity || resolved.u_layerOpacity || 1.0,
+                ...overrides
+            };
+        }
+
+        // Legacy mode: static multipliers
+        const config = this._layerConfig.get(layerName) || {};
         return {
             ...this._sharedUniforms,
             u_layerScale: config.layerScale || 1.0,
@@ -260,15 +364,31 @@ export class MultiCanvasBridge {
     // ========================================================================
 
     /**
-     * Render all layers in order using the named shader.
+     * Render all layers in order.
+     *
+     * When a relationship graph is active, each layer may use a different shader
+     * as assigned by graph.setLayerShader(). The shaderName parameter serves as
+     * the default for layers without an explicit shader assignment.
      *
-     * @param {string} shaderName - Shader program to use
+     * @param {string} shaderName - Default shader program to use
      * @param {object} [options]
      * @param {number[]} [options.clearColor] - RGBA clear color
+     * @param {number} [options.time] - Frame time for relationship resolution
      */
     renderAll(shaderName, options = {}) {
+        if (options.time !== undefined) {
+            this._frameTime = options.time;
+        } else {
+            this._frameTime += 16; // ~60fps fallback
+        }
+
         for (const layerName of this.layerNames) {
-            this.renderLayer(layerName, shaderName, options);
+            // Per-layer shader from relationship graph, or default
+            const layerShader = (this._relationshipGraph
+                ? this._relationshipGraph.getLayerShader(layerName)
+                : null) || shaderName;
+
+            this.renderLayer(layerName, layerShader, options);
         }
     }
 
@@ -334,7 +454,10 @@ export class MultiCanvasBridge {
         this._sharedUniforms = {};
         this._initialized = false;
         this._backendType = null;
+        this._relationshipGraph = null;
+        this._frameTime = 0;
     }
 }
 
+export { DEFAULT_LAYER_CONFIG, LAYER_ORDER };
 export default MultiCanvasBridge;

package/src/render/ShaderLoader.js

@@ -199,6 +199,44 @@ export class ShaderLoader {
         return results;
     }
 
+    /**
+     * Resolve #include directives in shader source.
+     * GLSL: #include "common/rotation4d.glsl"
+     * WGSL: // @include "common/rotation4d.wgsl"
+     *
+     * Includes are resolved from the loader's cache (call loadCommonLibrary() first).
+     * Non-recursive — only resolves one level of includes.
+     *
+     * @param {string} source - Shader source with include directives
+     * @returns {string} Resolved shader source
+     */
+    resolveIncludes(source) {
+        if (!source) return source;
+
+        // GLSL: #include "path"
+        // WGSL: // @include "path"
+        const includeRegex = /(?:^|\n)\s*(?:#include|\/\/\s*@include)\s+"([^"]+)"\s*(?:\n|$)/g;
+
+        return source.replace(includeRegex, (match, path) => {
+            const cached = this._cache.get(path);
+            if (cached) {
+                return '\n// --- included from ' + path + ' ---\n' + cached + '\n// --- end ' + path + ' ---\n';
+            }
+            console.warn(`ShaderLoader: Include not found in cache: "${path}" — load it first via loadCommonLibrary()`);
+            return match; // Leave directive in place if not found
+        });
+    }
+
+    /**
+     * Load a shader file and resolve includes.
+     * @param {string} relativePath
+     * @returns {Promise<string|null>}
+     */
+    async loadAndResolve(relativePath) {
+        const source = await this.load(relativePath);
+        return source ? this.resolveIncludes(source) : null;
+    }
+
     /**
      * Clear all cached shaders.
      */

package/src/render/ShaderProgram.js

@@ -384,10 +384,10 @@ export const ShaderLib = {
         mat4 rotateXZ(float angle) {
             float c = cos(angle), s = sin(angle);
             return mat4(
-                c, 0, -s, 0,
-                0, 1,  0, 0,
-                s, 0,  c, 0,
-                0, 0,  0, 1
+                c, 0, s, 0,
+                0, 1, 0, 0,
+               -s, 0, c, 0,
+                0, 0, 0, 1
             );
         }
 

package/src/render/UnifiedRenderBridge.js

@@ -25,7 +25,7 @@ import { createWebGPUBackend, isWebGPUSupported, WGSLShaderLib } from './backend
  * @returns {Float32Array}
  */
 function packVIB3Uniforms(uniforms) {
-    // Total: 32 floats = 128 bytes → aligned to 256 bytes in buffer
+    // Total: 33 floats (indices 0-32) = 132 bytes → padded to 256 bytes in buffer
     const data = new Float32Array(64); // 256 bytes
 
     data[0] = uniforms.u_time || 0;
@@ -56,6 +56,9 @@ function packVIB3Uniforms(uniforms) {
     data[22] = uniforms.u_mid || 0;
     data[23] = uniforms.u_high || 0;
 
+    // Breath/Vitality parameter
+    data[32] = uniforms.u_breath || 0;
+
     data[24] = uniforms.u_layerScale || 1.0;
     data[25] = uniforms.u_layerOpacity || 1.0;
     data[26] = 0; // _pad1

package/src/render/backends/WebGPUBackend.js

@@ -152,10 +152,14 @@ struct VIB3Uniforms {
     layerScale: f32,
     layerOpacity: f32,
     _pad1: f32,
-    layerColor: vec3<f32>,
+    layerColorR: f32,
+    layerColorG: f32,
+    layerColorB: f32,
     densityMult: f32,
     speedMult: f32,
-    _pad2: vec3<f32>,
+
+    // Vitality
+    breath: f32,
 };
 `;
 
@@ -178,9 +182,9 @@ fn rotateXZ(angle: f32) -> mat4x4<f32> {
     let c = cos(angle);
     let s = sin(angle);
     return mat4x4<f32>(
-        vec4<f32>(c, 0.0, -s, 0.0),
+        vec4<f32>( c, 0.0, s, 0.0),
         vec4<f32>(0.0, 1.0, 0.0, 0.0),
-        vec4<f32>(s, 0.0, c, 0.0),
+        vec4<f32>(-s, 0.0, c, 0.0),
         vec4<f32>(0.0, 0.0, 0.0, 1.0)
     );
 }

package/src/render/index.js

@@ -119,6 +119,31 @@ export {
     MultiCanvasBridge
 } from './MultiCanvasBridge.js';
 
+// Layer relationship graph (keystone-driven inter-layer parameter system)
+export {
+    LayerRelationshipGraph,
+    LAYER_ORDER,
+    PROFILES,
+    PRESET_REGISTRY,
+    echo,
+    mirror,
+    complement,
+    harmonic,
+    reactive,
+    chase
+} from './LayerRelationshipGraph.js';
+
+// Layer preset manager (save/load/tune relationship presets)
+export {
+    LayerPresetManager
+} from './LayerPresetManager.js';
+
+// Layer reactivity bridge (audio/tilt/input → relationship modulation)
+export {
+    LayerReactivityBridge,
+    MODULATION_PROFILES
+} from './LayerReactivityBridge.js';
+
 /**
  * Create a complete rendering context
  * @param {HTMLCanvasElement} canvas
@@ -129,8 +154,7 @@ export function createRenderContext(canvas, options = {}) {
     if (options.backend === 'webgpu') {
         return null;
     }
-    const { createWebGLBackend } = require('./backends/WebGLBackend.js');
-    const backend = createWebGLBackend(canvas, options);
+    const backend = _createWebGLBackend(canvas, options);
 
     if (!backend) {
         return null;
@@ -365,3 +389,4 @@ import { RenderState } from './RenderState.js';
 import { ShaderProgram, ShaderLib } from './ShaderProgram.js';
 import { UnifiedRenderBridge } from './UnifiedRenderBridge.js';
 import { createWebGPUBackend } from './backends/WebGPUBackend.js';
+import { createWebGLBackend as _createWebGLBackend } from './backends/WebGLBackend.js';

package/src/scene/Node4D.js

@@ -500,29 +500,74 @@ export class Node4D {
      * @private
      */
     _updateLocalMatrix() {
-        // Start with identity
-        this._localMatrix = Mat4x4.identity();
+        // Ensure matrix exists
+        if (!this._localMatrix) {
+            this._localMatrix = new Mat4x4();
+        }
+
+        const m = this._localMatrix.data;
+        const s = this._scale;
+        const p = this._position;
+
+        // 1. Write rotation directly to local matrix (No allocation)
+        this._rotation.toMatrix(m);
+
+        // 2. Apply scale (Diagonal matrix multiplication on the right)
+        // M = M * S
+        // Columns of M are scaled by s.x, s.y, s.z, s.w
+
+        // Col 0
+        m[0] *= s.x; m[1] *= s.x; m[2] *= s.x; m[3] *= s.x;
+        // Col 1
+        m[4] *= s.y; m[5] *= s.y; m[6] *= s.y; m[7] *= s.y;
+        // Col 2
+        m[8] *= s.z; m[9] *= s.z; m[10] *= s.z; m[11] *= s.z;
+        // Col 3
+        m[12] *= s.w; m[13] *= s.w; m[14] *= s.w; m[15] *= s.w;
+
+        // 3. Apply translation (Matrix multiplication on the left)
+        // M = T * M
+        // T is standard 3D translation:
+        // [ 1 0 0 px ]
+        // [ 0 1 0 py ]
+        // [ 0 0 1 pz ]
+        // [ 0 0 0 1  ]
+        //
+        // Row 0 += px * Row 3
+        // Row 1 += py * Row 3
+        // Row 2 += pz * Row 3
+
+        const px = p.x;
+        const py = p.y;
+        const pz = p.z;
+
+        // Row 3 elements of M (which are used in the calculation)
+        const m3 = m[3];
+        const m7 = m[7];
+        const m11 = m[11];
+        const m15 = m[15];
+
+        if (px !== 0) {
+            m[0] += px * m3;
+            m[4] += px * m7;
+            m[8] += px * m11;
+            m[12] += px * m15;
+        }
+
+        if (py !== 0) {
+            m[1] += py * m3;
+            m[5] += py * m7;
+            m[9] += py * m11;
+            m[13] += py * m15;
+        }
+
+        if (pz !== 0) {
+            m[2] += pz * m3;
+            m[6] += pz * m7;
+            m[10] += pz * m11;
+            m[14] += pz * m15;
+        }
 
-        // Apply scale
-        const scaleMatrix = Mat4x4.identity();
-        scaleMatrix.set(0, 0, this._scale.x);
-        scaleMatrix.set(1, 1, this._scale.y);
-        scaleMatrix.set(2, 2, this._scale.z);
-        scaleMatrix.set(3, 3, this._scale.w);
-
-        // Apply rotation (toMatrix returns Float32Array, wrap in Mat4x4)
-        const rotationMatrix = new Mat4x4(this._rotation.toMatrix());
-
-        // Apply translation (in 4D, translation is stored in last column, keep [3,3]=1)
-        const translationMatrix = Mat4x4.identity();
-        translationMatrix.set(0, 3, this._position.x);
-        translationMatrix.set(1, 3, this._position.y);
-        translationMatrix.set(2, 3, this._position.z);
-        // Note: position.w is the 4th spatial coordinate, handled separately
-        // Matrix[3,3] must remain 1 for proper transformation
-
-        // Compose: T * R * S
-        this._localMatrix = translationMatrix.multiply(rotationMatrix).multiply(scaleMatrix);
         this._localDirty = false;
     }
 
@@ -535,10 +580,15 @@ export class Node4D {
             this._updateLocalMatrix();
         }
 
+        // Ensure matrix exists
+        if (!this._worldMatrix) {
+            this._worldMatrix = new Mat4x4();
+        }
+
         if (this._parent) {
-            this._worldMatrix = this._parent.worldMatrix.multiply(this._localMatrix);
+            this._parent.worldMatrix.multiply(this._localMatrix, this._worldMatrix);
         } else {
-            this._worldMatrix = this._localMatrix.clone();
+            this._worldMatrix.copy(this._localMatrix);
         }
 
         this._worldDirty = false;

package/src/scene/index.js

@@ -60,10 +60,10 @@ export function createSceneContext(options = {}) {
         poolInitialSize = 100
     } = options;
 
-    const scene = new (require('./Scene4D.js').Scene4D)(sceneName);
-    const resources = new (require('./ResourceManager.js').ResourceManager)();
-    const disposal = new (require('./Disposable.js').DisposalManager)();
-    const poolManager = new (require('./MemoryPool.js').PoolManager)();
+    const scene = new Scene4D(sceneName);
+    const resources = new ResourceManager();
+    const disposal = new DisposalManager();
+    const poolManager = new PoolManager();
 
     resources.memoryLimit = memoryLimit;
 

package/src/shaders/common/geometry24.glsl

@@ -53,6 +53,71 @@ float hypertetrahedronCore(vec4 p, float baseType) {
     return max(baseShape, tetraField);
 }
 
+// ── Polytope Core Warp Functions ──
+// Requires: rotation matrices from rotation4d.glsl, project4Dto3D, and u_* uniforms
+
+vec3 warpHypersphereCore(vec3 p, int geometryIndex, vec2 mouseDelta) {
+    float radius = length(p);
+    float morphBlend = clamp(u_morphFactor * 0.6 + (u_dimension - 3.0) * 0.25, 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);
+
+    vec4 p4d = vec4(p * (1.0 + morphBlend * 0.2), w);
+    p4d = rotateXY(u_rot4dXY) * p4d;
+    p4d = rotateXZ(u_rot4dXZ) * p4d;
+    p4d = rotateYZ(u_rot4dYZ) * p4d;
+    p4d = rotateXW(u_rot4dXW) * p4d;
+    p4d = rotateYW(u_rot4dYW) * p4d;
+    p4d = rotateZW(u_rot4dZW) * p4d;
+
+    vec3 projected = project4Dto3D(p4d);
+    return mix(p, projected, clamp(0.45 + morphBlend * 0.35, 0.0, 1.0));
+}
+
+vec3 warpHypertetraCore(vec3 p, int geometryIndex, vec2 mouseDelta) {
+    vec3 c1 = normalize(vec3(1.0, 1.0, 1.0));
+    vec3 c2 = normalize(vec3(-1.0, -1.0, 1.0));
+    vec3 c3 = normalize(vec3(-1.0, 1.0, -1.0));
+    vec3 c4 = normalize(vec3(1.0, -1.0, -1.0));
+
+    float morphBlend = clamp(u_morphFactor * 0.8 + (u_dimension - 3.0) * 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);
+    w *= (0.5 + morphBlend * 0.4);
+
+    vec3 offset = vec3(dot(p, c1), dot(p, c2), dot(p, c3)) * 0.1 * morphBlend;
+    vec4 p4d = vec4(p + offset, w);
+    p4d = rotateXY(u_rot4dXY) * p4d;
+    p4d = rotateXZ(u_rot4dXZ) * p4d;
+    p4d = rotateYZ(u_rot4dYZ) * p4d;
+    p4d = rotateXW(u_rot4dXW) * p4d;
+    p4d = rotateYW(u_rot4dYW) * p4d;
+    p4d = rotateZW(u_rot4dZW) * p4d;
+
+    vec3 projected = project4Dto3D(p4d);
+    float planeInfluence = min(min(abs(dot(p, c1)), abs(dot(p, c2))),
+                               min(abs(dot(p, c3)), abs(dot(p, c4))));
+    vec3 blended = mix(p, projected, clamp(0.45 + morphBlend * 0.35, 0.0, 1.0));
+    return mix(blended, blended * (1.0 - planeInfluence * 0.55), 0.2 + morphBlend * 0.2);
+}
+
+vec3 applyCoreWarp(vec3 p, float geometryType, vec2 mouseDelta) {
+    float totalBase = 8.0;
+    float coreFloat = floor(geometryType / totalBase);
+    int coreIndex = int(clamp(coreFloat, 0.0, 2.0));
+    float baseGeomFloat = geometryType - floor(geometryType / totalBase) * totalBase;
+    int geometryIndex = int(clamp(floor(baseGeomFloat + 0.5), 0.0, totalBase - 1.0));
+
+    if (coreIndex == 1) {
+        return warpHypersphereCore(p, geometryIndex, mouseDelta);
+    }
+    if (coreIndex == 2) {
+        return warpHypertetraCore(p, geometryIndex, mouseDelta);
+    }
+    return p;
+}
+
 // Main geometry dispatcher (0-23)
 float geometry(vec4 p, float type) {
     if (type < 8.0) {