@vib3code/sdk 2.0.3-canary.75a3290 → 2.0.3-canary.ef8d292

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/math/Mat4x4.js

@@ -160,21 +160,42 @@ export class Mat4x4 {
      * @returns {Mat4x4} New matrix = this * m
      */
     multiply(m) {
+        const out = new Mat4x4();
+        const r = out.data;
         const a = this.data;
         const b = m.data;
-        const result = new Float32Array(16);
 
-        for (let col = 0; col < 4; col++) {
-            for (let row = 0; row < 4; row++) {
-                let sum = 0;
-                for (let k = 0; k < 4; k++) {
-                    sum += a[k * 4 + row] * b[col * 4 + k];
-                }
-                result[col * 4 + row] = sum;
-            }
-        }
+        const a00 = a[0], a01 = a[4], a02 = a[8], a03 = a[12];
+        const a10 = a[1], a11 = a[5], a12 = a[9], a13 = a[13];
+        const a20 = a[2], a21 = a[6], a22 = a[10], a23 = a[14];
+        const a30 = a[3], a31 = a[7], a32 = a[11], a33 = a[15];
 
-        return new Mat4x4(result);
+        const b00 = b[0], b01 = b[4], b02 = b[8], b03 = b[12];
+        const b10 = b[1], b11 = b[5], b12 = b[9], b13 = b[13];
+        const b20 = b[2], b21 = b[6], b22 = b[10], b23 = b[14];
+        const b30 = b[3], b31 = b[7], b32 = b[11], b33 = b[15];
+
+        r[0] = a00 * b00 + a01 * b10 + a02 * b20 + a03 * b30;
+        r[1] = a10 * b00 + a11 * b10 + a12 * b20 + a13 * b30;
+        r[2] = a20 * b00 + a21 * b10 + a22 * b20 + a23 * b30;
+        r[3] = a30 * b00 + a31 * b10 + a32 * b20 + a33 * b30;
+
+        r[4] = a00 * b01 + a01 * b11 + a02 * b21 + a03 * b31;
+        r[5] = a10 * b01 + a11 * b11 + a12 * b21 + a13 * b31;
+        r[6] = a20 * b01 + a21 * b11 + a22 * b21 + a23 * b31;
+        r[7] = a30 * b01 + a31 * b11 + a32 * b21 + a33 * b31;
+
+        r[8] = a00 * b02 + a01 * b12 + a02 * b22 + a03 * b32;
+        r[9] = a10 * b02 + a11 * b12 + a12 * b22 + a13 * b32;
+        r[10] = a20 * b02 + a21 * b12 + a22 * b22 + a23 * b32;
+        r[11] = a30 * b02 + a31 * b12 + a32 * b22 + a33 * b32;
+
+        r[12] = a00 * b03 + a01 * b13 + a02 * b23 + a03 * b33;
+        r[13] = a10 * b03 + a11 * b13 + a12 * b23 + a13 * b33;
+        r[14] = a20 * b03 + a21 * b13 + a22 * b23 + a23 * b33;
+        r[15] = a30 * b03 + a31 * b13 + a32 * b23 + a33 * b33;
+
+        return out;
     }
 
     /**
@@ -183,8 +204,44 @@ export class Mat4x4 {
      * @returns {Mat4x4} this
      */
     multiplyInPlace(m) {
-        const result = this.multiply(m);
-        this.data.set(result.data);
+        const a = this.data;
+        const b = m.data;
+
+        // Cache values to avoid aliasing issues and repeated array access
+        const a00 = a[0], a01 = a[4], a02 = a[8], a03 = a[12];
+        const a10 = a[1], a11 = a[5], a12 = a[9], a13 = a[13];
+        const a20 = a[2], a21 = a[6], a22 = a[10], a23 = a[14];
+        const a30 = a[3], a31 = a[7], a32 = a[11], a33 = a[15];
+
+        const b00 = b[0], b01 = b[4], b02 = b[8], b03 = b[12];
+        const b10 = b[1], b11 = b[5], b12 = b[9], b13 = b[13];
+        const b20 = b[2], b21 = b[6], b22 = b[10], b23 = b[14];
+        const b30 = b[3], b31 = b[7], b32 = b[11], b33 = b[15];
+
+        // Column 0
+        a[0] = a00 * b00 + a01 * b10 + a02 * b20 + a03 * b30;
+        a[1] = a10 * b00 + a11 * b10 + a12 * b20 + a13 * b30;
+        a[2] = a20 * b00 + a21 * b10 + a22 * b20 + a23 * b30;
+        a[3] = a30 * b00 + a31 * b10 + a32 * b20 + a33 * b30;
+
+        // Column 1
+        a[4] = a00 * b01 + a01 * b11 + a02 * b21 + a03 * b31;
+        a[5] = a10 * b01 + a11 * b11 + a12 * b21 + a13 * b31;
+        a[6] = a20 * b01 + a21 * b11 + a22 * b21 + a23 * b31;
+        a[7] = a30 * b01 + a31 * b11 + a32 * b21 + a33 * b31;
+
+        // Column 2
+        a[8] = a00 * b02 + a01 * b12 + a02 * b22 + a03 * b32;
+        a[9] = a10 * b02 + a11 * b12 + a12 * b22 + a13 * b32;
+        a[10] = a20 * b02 + a21 * b12 + a22 * b22 + a23 * b32;
+        a[11] = a30 * b02 + a31 * b12 + a32 * b22 + a33 * b32;
+
+        // Column 3
+        a[12] = a00 * b03 + a01 * b13 + a02 * b23 + a03 * b33;
+        a[13] = a10 * b03 + a11 * b13 + a12 * b23 + a13 * b33;
+        a[14] = a20 * b03 + a21 * b13 + a22 * b23 + a23 * b33;
+        a[15] = a30 * b03 + a31 * b13 + a32 * b23 + a33 * b33;
+
         return this;
     }
 

package/src/math/Rotor4D.js

@@ -324,53 +324,114 @@ export class Rotor4D {
      * Rotate a 4D vector using sandwich product: v' = R v R†
      *
      * @param {Vec4} v - Vector to rotate
+     * @param {Vec4} [target] - Optional target vector to write result to
      * @returns {Vec4} Rotated vector
      */
-    rotate(v) {
-        // For efficiency, we expand the sandwich product directly
-        // rather than doing two rotor multiplications
+    rotate(v, target) {
+        // Direct matrix multiplication without allocation
 
-        const x = v.x, y = v.y, z = v.z, w = v.w;
-
-        // Compute R v (rotor times vector)
-        // Vector in GA is: x*e1 + y*e2 + z*e3 + w*e4
-        // This produces a mixed multivector
-
-        // Then multiply by R† (reverse of rotor)
-        // Extract the vector part of the result
+        // Normalize components for stability (same as toMatrix)
+        const n = this.norm();
+        const invN = n > 1e-10 ? 1 / n : 1;
 
-        // Pre-compute some common terms
-        const s = this.s;
-        const xy = this.xy, xz = this.xz, yz = this.yz;
-        const xw = this.xw, yw = this.yw, zw = this.zw;
-        const xyzw = this.xyzw;
+        const s = this.s * invN;
+        const xy = this.xy * invN;
+        const xz = this.xz * invN;
+        const yz = this.yz * invN;
+        const xw = this.xw * invN;
+        const yw = this.yw * invN;
+        const zw = this.zw * invN;
+        const xyzw = this.xyzw * invN;
 
-        // Squared terms for the rotation formula
+        // Pre-compute products
         const s2 = s * s;
-        const xy2 = xy * xy, xz2 = xz * xz, yz2 = yz * yz;
-        const xw2 = xw * xw, yw2 = yw * yw, zw2 = zw * zw;
+        const xy2 = xy * xy;
+        const xz2 = xz * xz;
+        const yz2 = yz * yz;
+        const xw2 = xw * xw;
+        const yw2 = yw * yw;
+        const zw2 = zw * zw;
         const xyzw2 = xyzw * xyzw;
 
-        // The full rotation formula derived from R v R†
-        const newX =
-            x * (s2 + xy2 + xz2 - yz2 + xw2 - yw2 - zw2 - xyzw2) +
-            2 * y * (s * xy + xz * yz + xw * yw - s * xyzw * zw + xy * s - xyzw * zw) +
-            2 * z * (s * xz - xy * yz + xw * zw + xyzw * yw) +
-            2 * w * (s * xw - xy * yw - xz * zw - xyzw * yz);
-
-        // Simplified rotation using matrix form
-        // This is equivalent but clearer
-
-        // Actually, let's use the direct matrix multiplication approach
-        // which is more numerically stable
-
-        const m = this.toMatrix();
-        return new Vec4(
-            m[0] * x + m[4] * y + m[8] * z + m[12] * w,
-            m[1] * x + m[5] * y + m[9] * z + m[13] * w,
-            m[2] * x + m[6] * y + m[10] * z + m[14] * w,
-            m[3] * x + m[7] * y + m[11] * z + m[15] * w
-        );
+        // Cross terms
+        const sxy = 2 * s * xy;
+        const sxz = 2 * s * xz;
+        const syz = 2 * s * yz;
+        const sxw = 2 * s * xw;
+        const syw = 2 * s * yw;
+        const szw = 2 * s * zw;
+        // const sxyzw = 2 * s * xyzw; // Unused in rotation matrix
+
+        const xyxz = 2 * xy * xz;
+        const xyyz = 2 * xy * yz;
+        const xyxw = 2 * xy * xw;
+        const xyyw = 2 * xy * yw;
+        // const xyzw_c = 2 * xy * zw; // Unused in rotation matrix
+
+        const xzyz = 2 * xz * yz;
+        const xzxw = 2 * xz * xw;
+        const xzyw = 2 * xz * yw;
+        const xzzw = 2 * xz * zw;
+
+        const yzxw = 2 * yz * xw;
+        const yzyw = 2 * yz * yw;
+        const yzzw = 2 * yz * zw;
+
+        const xwyw = 2 * xw * yw;
+        const xwzw = 2 * xw * zw;
+        const ywzw = 2 * yw * zw;
+
+        const xyxyzw = 2 * xy * xyzw;
+        const xzxyzw = 2 * xz * xyzw;
+        const yzxyzw = 2 * yz * xyzw;
+        const xwxyzw = 2 * xw * xyzw;
+        const ywxyzw = 2 * yw * xyzw;
+        const zwxyzw = 2 * zw * xyzw;
+
+        // Matrix elements
+        // Col 0
+        const m00 = s2 - xy2 - xz2 + yz2 - xw2 + yw2 + zw2 - xyzw2;
+        const m01 = sxy + xzyz + xwyw - zwxyzw;
+        const m02 = sxz - xyyz + xwzw + ywxyzw;
+        const m03 = sxw - xyyw - xzzw - yzxyzw;
+
+        // Col 1
+        const m10 = -sxy + xzyz + xwyw + zwxyzw;
+        const m11 = s2 - xy2 + xz2 - yz2 + xw2 - yw2 + zw2 - xyzw2;
+        const m12 = syz + xyxz + ywzw - xwxyzw;
+        const m13 = syw + xyxw - yzzw + xzxyzw;
+
+        // Col 2
+        const m20 = -sxz - xyyz + xwzw - ywxyzw;
+        const m21 = -syz + xyxz + ywzw + xwxyzw;
+        const m22 = s2 + xy2 - xz2 - yz2 + xw2 + yw2 - zw2 - xyzw2;
+        const m23 = szw + xzxw + yzyw - xyxyzw;
+
+        // Col 3
+        const m30 = -sxw - xyyw - xzzw + yzxyzw;
+        const m31 = -syw + xyxw - yzzw - xzxyzw;
+        const m32 = -szw + xzxw + yzyw + xyxyzw;
+        const m33 = s2 + xy2 + xz2 + yz2 - xw2 - yw2 - zw2 - xyzw2;
+
+        const x = v.x;
+        const y = v.y;
+        const z = v.z;
+        const w = v.w;
+
+        const rx = m00 * x + m10 * y + m20 * z + m30 * w;
+        const ry = m01 * x + m11 * y + m21 * z + m31 * w;
+        const rz = m02 * x + m12 * y + m22 * z + m32 * w;
+        const rw = m03 * x + m13 * y + m23 * z + m33 * w;
+
+        if (target) {
+            target.x = rx;
+            target.y = ry;
+            target.z = rz;
+            target.w = rw;
+            return target;
+        }
+
+        return new Vec4(rx, ry, rz, rw);
     }
 
     /**

package/src/quantum/QuantumVisualizer.js

@@ -6,6 +6,17 @@
 
 import { GeometryLibrary } from '../geometry/GeometryLibrary.js';
 
+// Role-specific intensity values for 5-layer canvas architecture.
+// IMPORTANT: Must stay in sync with shader epsilon comparisons in the fragment shader
+// at the "LAYER-BY-LAYER COLOR SYSTEM" section (search for layerIndex).
+const ROLE_INTENSITIES = {
+    'background': 0.4,
+    'shadow': 0.6,
+    'content': 1.0,
+    'highlight': 1.3,
+    'accent': 1.6
+};
+
 export class QuantumHolographicVisualizer {
     constructor(canvasIdOrElement, role, reactivity, variant) {
         this.canvas = (canvasIdOrElement instanceof HTMLCanvasElement)
@@ -14,6 +25,7 @@ export class QuantumHolographicVisualizer {
         this.role = role;
         this.reactivity = reactivity;
         this.variant = variant;
+        this._canvasLabel = typeof canvasIdOrElement === 'string' ? canvasIdOrElement : canvasIdOrElement?.id || 'unknown';
         
         // CRITICAL FIX: Define contextOptions as instance property to match SmartCanvasPool
         this.contextOptions = {
@@ -34,9 +46,9 @@ export class QuantumHolographicVisualizer {
                   this.canvas.getContext('experimental-webgl', this.contextOptions);
         
         if (!this.gl) {
-            console.error(`WebGL not supported for ${canvasId}`);
+            console.error(`WebGL not supported for ${this._canvasLabel}`);
             if (window.mobileDebug) {
-                window.mobileDebug.log(`❌ ${canvasId}: WebGL context creation failed`);
+                window.mobileDebug.log(`❌ ${this._canvasLabel}: WebGL context creation failed`);
             }
             // Show user-friendly error instead of white screen
             this.showWebGLError();
@@ -44,7 +56,7 @@ export class QuantumHolographicVisualizer {
         } else {
             if (window.mobileDebug) {
                 const version = this.gl.getParameter(this.gl.VERSION);
-                window.mobileDebug.log(`✅ ${canvasId}: WebGL context created - ${version}`);
+                window.mobileDebug.log(`✅ ${this._canvasLabel}: WebGL context created - ${version}`);
             }
         }
         
@@ -59,15 +71,15 @@ export class QuantumHolographicVisualizer {
         this._onContextLost = (e) => {
             e.preventDefault();
             this._contextLost = true;
-            console.warn(`WebGL context lost for ${canvasId}`);
+            console.warn(`WebGL context lost for ${this._canvasLabel}`);
         };
         this._onContextRestored = () => {
-            console.log(`WebGL context restored for ${canvasId}`);
+            console.log(`WebGL context restored for ${this._canvasLabel}`);
             this._contextLost = false;
             try {
                 this.init();
             } catch (err) {
-                console.error(`Failed to reinit after context restore for ${canvasId}:`, err);
+                console.error(`Failed to reinit after context restore for ${this._canvasLabel}:`, err);
             }
         };
         this.canvas.addEventListener('webglcontextlost', this._onContextLost);
@@ -688,11 +700,12 @@ void main() {
     
     // LAYER-BY-LAYER COLOR SYSTEM with user hue/saturation/intensity controls
     // Determine canvas layer from role/variant (0=background, 1=shadow, 2=content, 3=highlight, 4=accent)
+    // Values must match ROLE_INTENSITIES in JS: bg=0.4, shadow=0.6, content=1.0, highlight=1.3, accent=1.6
     int layerIndex = 0;
-    if (u_roleIntensity == 0.7) layerIndex = 1;      // shadow layer
-    else if (u_roleIntensity == 1.0) layerIndex = 2; // content layer  
-    else if (u_roleIntensity == 0.85) layerIndex = 3; // highlight layer
-    else if (u_roleIntensity == 0.6) layerIndex = 4;  // accent layer
+    if (abs(u_roleIntensity - 0.6) < 0.05) layerIndex = 1;       // shadow layer
+    else if (abs(u_roleIntensity - 1.0) < 0.05) layerIndex = 2;  // content layer
+    else if (abs(u_roleIntensity - 1.3) < 0.05) layerIndex = 3;  // highlight layer
+    else if (abs(u_roleIntensity - 1.6) < 0.05) layerIndex = 4;  // accent layer
     
     // Get layer-specific base color using user hue/saturation controls
     float colorTime = timeSpeed * 2.0 + value * 3.0;
@@ -1016,15 +1029,6 @@ void main() {
             this._renderParamsLogged = true;
         }
         
-        // Role-specific intensity for quantum effects
-        const roleIntensities = {
-            'background': 0.4,
-            'shadow': 0.6,
-            'content': 1.0,
-            'highlight': 1.3,
-            'accent': 1.6
-        };
-        
         const time = Date.now() - this.startTime;
         
         // Set uniforms
@@ -1068,7 +1072,7 @@ void main() {
         this.gl.uniform1f(this.uniforms.rot4dZW, this.params.rot4dZW || 0.0);
         this.gl.uniform1f(this.uniforms.mouseIntensity, this.mouseIntensity);
         this.gl.uniform1f(this.uniforms.clickIntensity, this.clickIntensity);
-        this.gl.uniform1f(this.uniforms.roleIntensity, roleIntensities[this.role] || 1.0);
+        this.gl.uniform1f(this.uniforms.roleIntensity, ROLE_INTENSITIES[this.role] || 1.0);
         this.gl.uniform1f(this.uniforms.breath, this.params.breath || 0.0);
         
         this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);