@vib3code/sdk 2.0.3-canary.0c55e5a → 2.0.3-canary.183c93e

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);

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;

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/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/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) {

package/src/shaders/common/geometry24.wgsl

@@ -47,6 +47,60 @@ fn hypertetrahedronCore(p: vec4<f32>, baseType: f32) -> f32 {
     return max(baseGeometry(p, baseType), tf);
 }
 
+// ── Polytope Core Warp Functions ──
+// Requires: rotation functions from rotation4d.wgsl and u: VIB3Uniforms
+
+fn warpHypersphereCore_common(p: vec3<f32>, geomIdx: i32) -> vec3<f32> {
+    let radius = length(p);
+    let morphBlend = clamp(u.morphFactor * 0.6 + (u.dimension - 3.0) * 0.25, 0.0, 2.0);
+    let w = sin(radius * (1.3 + f32(geomIdx) * 0.12) + u.time * 0.0008 * u.speed)
+          * (0.4 + morphBlend * 0.45);
+    var p4d = vec4<f32>(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;
+    let proj = project4Dto3D(p4d);
+    return mix(p, proj, clamp(0.45 + morphBlend * 0.35, 0.0, 1.0));
+}
+
+fn warpHypertetraCore_common(p: vec3<f32>, geomIdx: i32) -> vec3<f32> {
+    let c1 = normalize(vec3<f32>(1.0, 1.0, 1.0));
+    let c2 = normalize(vec3<f32>(-1.0, -1.0, 1.0));
+    let c3 = normalize(vec3<f32>(-1.0, 1.0, -1.0));
+    let c4 = normalize(vec3<f32>(1.0, -1.0, -1.0));
+    let morphBlend = clamp(u.morphFactor * 0.8 + (u.dimension - 3.0) * 0.2, 0.0, 2.0);
+    let basisMix = dot(p, c1) * 0.14 + dot(p, c2) * 0.1 + dot(p, c3) * 0.08;
+    let w = sin(basisMix * 5.5 + u.time * 0.0009 * u.speed)
+          * cos(dot(p, c4) * 4.2 - u.time * 0.0007 * u.speed)
+          * (0.5 + morphBlend * 0.4);
+    let offset = vec3<f32>(dot(p, c1), dot(p, c2), dot(p, c3)) * 0.1 * morphBlend;
+    var p4d = vec4<f32>(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;
+    let proj = project4Dto3D(p4d);
+    let planeInf = min(min(abs(dot(p, c1)), abs(dot(p, c2))),
+                       min(abs(dot(p, c3)), abs(dot(p, c4))));
+    let blended = mix(p, proj, clamp(0.45 + morphBlend * 0.35, 0.0, 1.0));
+    return mix(blended, blended * (1.0 - planeInf * 0.55), 0.2 + morphBlend * 0.2);
+}
+
+fn applyCoreWarp_common(p: vec3<f32>, geomType: f32) -> vec3<f32> {
+    let coreFloat = floor(geomType / 8.0);
+    let coreIndex = i32(clamp(coreFloat, 0.0, 2.0));
+    let baseFloat = geomType - floor(geomType / 8.0) * 8.0;
+    let geomIdx = i32(clamp(floor(baseFloat + 0.5), 0.0, 7.0));
+    if (coreIndex == 1) { return warpHypersphereCore_common(p, geomIdx); }
+    if (coreIndex == 2) { return warpHypertetraCore_common(p, geomIdx); }
+    return p;
+}
+
 fn geometry(p: vec4<f32>, t: f32) -> f32 {
     if (t < 8.0) { return baseGeometry(p, t); }
     else if (t < 16.0) { return hypersphereCore(p, t - 8.0); }

package/src/shaders/common/rotation4d.glsl

@@ -16,10 +16,10 @@ mat4 rotateXZ(float angle) {
     float c = cos(angle);
     float 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/shaders/common/rotation4d.wgsl

@@ -16,9 +16,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/shaders/common/uniforms.wgsl

@@ -1,16 +1,19 @@
 // VIB3+ Common Uniform Struct (WGSL)
 // Shared across all visualization systems
+// Canonical layout — must match packVIB3Uniforms() in UnifiedRenderBridge.js
+// All fields are f32 (except resolution vec2) to avoid alignment surprises.
+// Total: 33 floats (132 bytes), buffer padded to 256 bytes.
 
 struct VIB3Uniforms {
-    // Time and resolution
+    // Time and resolution (indices 0-3)
     time: f32,
     _pad0: f32,
     resolution: vec2<f32>,
 
-    // Geometry selection (0-23)
+    // Geometry selection 0-23 (index 4)
     geometry: f32,
 
-    // 6D Rotation (radians)
+    // 6D Rotation in radians (indices 5-10)
     rot4dXY: f32,
     rot4dXZ: f32,
     rot4dYZ: f32,
@@ -18,7 +21,7 @@ struct VIB3Uniforms {
     rot4dYW: f32,
     rot4dZW: f32,
 
-    // Visual parameters
+    // Visual parameters (indices 11-18)
     dimension: f32,
     gridDensity: f32,
     morphFactor: f32,
@@ -28,21 +31,25 @@ struct VIB3Uniforms {
     intensity: f32,
     saturation: f32,
 
-    // Reactivity
+    // Reactivity (indices 19-23)
     mouseIntensity: f32,
     clickIntensity: f32,
     bass: f32,
     mid: f32,
     high: f32,
 
-    // Layer parameters (holographic multi-layer)
+    // Layer parameters (indices 24-31)
     layerScale: f32,
     layerOpacity: f32,
     _pad1: f32,
-    layerColor: vec3<f32>,
+    layerColorR: f32,
+    layerColorG: f32,
+    layerColorB: f32,
     densityMult: f32,
     speedMult: f32,
-    _pad2: vec3<f32>,
+
+    // Vitality (index 32)
+    breath: f32,
 };
 
 @group(0) @binding(0) var<uniform> u: VIB3Uniforms;

package/src/shaders/faceted/faceted.frag.wgsl

@@ -4,7 +4,7 @@
 
 struct VIB3Uniforms {
     time: f32,
-    speed: f32,
+    _pad0: f32,
     resolution: vec2<f32>,
     geometry: f32,
     rot4dXY: f32,
@@ -17,18 +17,24 @@ struct VIB3Uniforms {
     gridDensity: f32,
     morphFactor: f32,
     chaos: f32,
+    speed: f32,
     hue: f32,
     intensity: f32,
     saturation: f32,
     mouseIntensity: f32,
     clickIntensity: f32,
-    roleIntensity: f32,
     bass: f32,
     mid: f32,
     high: f32,
+    layerScale: f32,
+    layerOpacity: f32,
+    _pad1: f32,
+    layerColorR: f32,
+    layerColorG: f32,
+    layerColorB: f32,
+    densityMult: f32,
+    speedMult: f32,
     breath: f32,
-    mouse: vec2<f32>,
-    _pad1: vec2<f32>,
 };
 
 @group(0) @binding(0) var<uniform> u: VIB3Uniforms;
@@ -131,8 +137,15 @@ fn geometryFunction_w(p: vec4<f32>) -> f32 {
     let gt = i32(clamp(floor(baseFloat + 0.5), 0.0, 7.0));
     let d = u.gridDensity * 0.08;
     if (gt == 0) {
-        let pos = fract(p * d); let dist = min(pos, 1.0 - pos);
-        return min(min(dist.x, dist.y), min(dist.z, dist.w)) * u.morphFactor;
+        // Tetrahedron — tetrahedral symmetry planes
+        let c1 = normalize(vec3<f32>(1.0, 1.0, 1.0));
+        let c2 = normalize(vec3<f32>(-1.0, -1.0, 1.0));
+        let c3 = normalize(vec3<f32>(-1.0, 1.0, -1.0));
+        let c4 = normalize(vec3<f32>(1.0, -1.0, -1.0));
+        let q = fract(p.xyz * d + 0.5) - 0.5;
+        let minPlane = min(min(abs(dot(q, c1)), abs(dot(q, c2))),
+                           min(abs(dot(q, c3)), abs(dot(q, c4))));
+        return (1.0 - smoothstep(0.0, 0.05, minPlane)) * u.morphFactor;
     } else if (gt == 1) {
         let pos = fract(p * d); let dist = min(pos, 1.0 - pos);
         return min(min(dist.x, dist.y), min(dist.z, dist.w)) * u.morphFactor;

package/src/shaders/holographic/holographic.frag.wgsl

@@ -28,11 +28,13 @@ struct VIB3Uniforms {
     high: f32,
     layerScale: f32,
     layerOpacity: f32,
-    breath: f32,
-    layerColor: vec3<f32>,
+    _pad1: f32,
+    layerColorR: f32,
+    layerColorG: f32,
+    layerColorB: f32,
     densityMult: f32,
     speedMult: f32,
-    _pad2: vec3<f32>,
+    breath: f32,
 };
 
 @group(0) @binding(0) var<uniform> u: VIB3Uniforms;
@@ -52,8 +54,8 @@ fn rotateXY(angle: f32) -> mat4x4<f32> {
 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>(0.0, 1.0, 0.0, 0.0),
-        vec4<f32>(s, 0.0, c, 0.0), vec4<f32>(0.0, 0.0, 0.0, 1.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>(0.0, 0.0, 0.0, 1.0));
 }
 fn rotateYZ(angle: f32) -> mat4x4<f32> {
     let c = cos(angle); let s = sin(angle);

package/src/shaders/quantum/quantum.frag.wgsl

@@ -28,11 +28,13 @@ struct VIB3Uniforms {
     high: f32,
     layerScale: f32,
     layerOpacity: f32,
-    breath: f32,
-    layerColor: vec3<f32>,
+    _pad1: f32,
+    layerColorR: f32,
+    layerColorG: f32,
+    layerColorB: f32,
     densityMult: f32,
     speedMult: f32,
-    _pad2: vec3<f32>,
+    breath: f32,
 };
 
 @group(0) @binding(0) var<uniform> u: VIB3Uniforms;
@@ -52,8 +54,8 @@ fn rotateXY(angle: f32) -> mat4x4<f32> {
 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>(0.0, 1.0, 0.0, 0.0),
-        vec4<f32>(s, 0.0, c, 0.0), vec4<f32>(0.0, 0.0, 0.0, 1.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>(0.0, 0.0, 0.0, 1.0));
 }
 fn rotateYZ(angle: f32) -> mat4x4<f32> {
     let c = cos(angle); let s = sin(angle);

package/src/ui/adaptive/renderers/webgpu/WebGPURenderer.ts

@@ -546,9 +546,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)
     );
 }