@vib3code/sdk 2.0.1

package/src/quantum/QuantumVisualizer.js

@@ -0,0 +1,1103 @@
+/**
+ * VIB34D Quantum Holographic Visualizer
+ * Enhanced WebGL renderer with complex 3D lattice functions and holographic effects
+ * This is the superior system with volumetric lighting, particles, and RGB glitch effects
+ */
+
+import { GeometryLibrary } from '../geometry/GeometryLibrary.js';
+
+export class QuantumHolographicVisualizer {
+    constructor(canvasIdOrElement, role, reactivity, variant) {
+        this.canvas = (canvasIdOrElement instanceof HTMLCanvasElement)
+            ? canvasIdOrElement
+            : document.getElementById(canvasIdOrElement);
+        this.role = role;
+        this.reactivity = reactivity;
+        this.variant = variant;
+        
+        // CRITICAL FIX: Define contextOptions as instance property to match SmartCanvasPool
+        this.contextOptions = {
+            alpha: true,
+            depth: true,
+            stencil: false,
+            antialias: false,  // Disable antialiasing on mobile for performance
+            premultipliedAlpha: true,
+            preserveDrawingBuffer: false,
+            powerPreference: 'high-performance',
+            failIfMajorPerformanceCaveat: false  // Don't fail on mobile
+        };
+        
+        // CRITICAL FIX: Don't create context here - let SmartCanvasPool handle it
+        // Try WebGL2 first (better mobile support), then WebGL1
+        this.gl = this.canvas.getContext('webgl2', this.contextOptions) || 
+                  this.canvas.getContext('webgl', this.contextOptions) ||
+                  this.canvas.getContext('experimental-webgl', this.contextOptions);
+        
+        if (!this.gl) {
+            console.error(`WebGL not supported for ${canvasId}`);
+            if (window.mobileDebug) {
+                window.mobileDebug.log(`❌ ${canvasId}: WebGL context creation failed`);
+            }
+            // Show user-friendly error instead of white screen
+            this.showWebGLError();
+            return;
+        } else {
+            if (window.mobileDebug) {
+                const version = this.gl.getParameter(this.gl.VERSION);
+                window.mobileDebug.log(`✅ ${canvasId}: WebGL context created - ${version}`);
+            }
+        }
+        
+        this.mouseX = 0.5;
+        this.mouseY = 0.5;
+        this.mouseIntensity = 0.0;
+        this.clickIntensity = 0.0;
+        this.startTime = Date.now();
+        this._contextLost = false;
+
+        // WebGL context loss/restore handlers
+        this._onContextLost = (e) => {
+            e.preventDefault();
+            this._contextLost = true;
+            console.warn(`WebGL context lost for ${canvasId}`);
+        };
+        this._onContextRestored = () => {
+            console.log(`WebGL context restored for ${canvasId}`);
+            this._contextLost = false;
+            try {
+                this.init();
+            } catch (err) {
+                console.error(`Failed to reinit after context restore for ${canvasId}:`, err);
+            }
+        };
+        this.canvas.addEventListener('webglcontextlost', this._onContextLost);
+        this.canvas.addEventListener('webglcontextrestored', this._onContextRestored);
+
+        // Default parameters
+        this.params = {
+            geometry: 0,
+            gridDensity: 15,
+            morphFactor: 1.0,
+            chaos: 0.2,
+            speed: 1.0,
+            hue: 200,
+            intensity: 0.5,
+            saturation: 0.8,
+            dimension: 3.5,
+            rot4dXY: 0.0,
+            rot4dXZ: 0.0,
+            rot4dYZ: 0.0,
+            rot4dXW: 0.0,
+            rot4dYW: 0.0,
+            rot4dZW: 0.0
+        };
+        
+        this.init();
+    }
+    
+    /**
+     * CRITICAL FIX: Ensure canvas is properly sized before creating WebGL context
+     */
+    async ensureCanvasSizedThenInitWebGL() {
+        // Set proper canvas dimensions for mobile - with fallbacks
+        let rect = this.canvas.getBoundingClientRect();
+        const devicePixelRatio = Math.min(window.devicePixelRatio || 1, 2); // Cap at 2x for performance
+        
+        // If canvas has no dimensions, wait for layout or use viewport
+        if (rect.width === 0 || rect.height === 0) {
+            // Wait for layout with promise
+            await new Promise(resolve => {
+                setTimeout(() => {
+                    rect = this.canvas.getBoundingClientRect();
+                    if (rect.width === 0 || rect.height === 0) {
+                        // Use viewport dimensions as fallback
+                        const viewWidth = window.innerWidth;
+                        const viewHeight = window.innerHeight;
+                        this.canvas.width = viewWidth * devicePixelRatio;
+                        this.canvas.height = viewHeight * devicePixelRatio;
+                        
+                        if (window.mobileDebug) {
+                            window.mobileDebug.log(`📐 Quantum Canvas ${this.canvas.id}: Using viewport fallback ${this.canvas.width}x${this.canvas.height}`);
+                        }
+                    } else {
+                        this.canvas.width = rect.width * devicePixelRatio;
+                        this.canvas.height = rect.height * devicePixelRatio;
+                        
+                        if (window.mobileDebug) {
+                            window.mobileDebug.log(`📐 Quantum Canvas ${this.canvas.id}: Layout ready ${this.canvas.width}x${this.canvas.height}`);
+                        }
+                    }
+                    resolve();
+                }, 100);
+            });
+        } else {
+            this.canvas.width = rect.width * devicePixelRatio;
+            this.canvas.height = rect.height * devicePixelRatio;
+            
+            if (window.mobileDebug) {
+                window.mobileDebug.log(`📐 Quantum Canvas ${this.canvas.id}: ${this.canvas.width}x${this.canvas.height} (DPR: ${devicePixelRatio})`);
+            }
+        }
+        
+        // NOW create WebGL context with properly sized canvas
+        this.createWebGLContext();
+        
+        // Initialize rendering pipeline
+        if (this.gl) {
+            this.init();
+        }
+    }
+    
+    /**
+     * Create WebGL context after canvas is properly sized
+     */
+    createWebGLContext() {
+        // CRITICAL FIX: Check if context already exists from SmartCanvasPool
+        let existingContext = this.canvas.getContext('webgl2') || 
+                             this.canvas.getContext('webgl') || 
+                             this.canvas.getContext('experimental-webgl');
+        
+        if (existingContext && !existingContext.isContextLost()) {
+            console.log(`🔄 Reusing existing WebGL context for ${this.canvas.id}`);
+            this.gl = existingContext;
+            return;
+        }
+        
+        // Try WebGL2 first (better mobile support), then WebGL1
+        this.gl = this.canvas.getContext('webgl2', this.contextOptions) || 
+                  this.canvas.getContext('webgl', this.contextOptions) ||
+                  this.canvas.getContext('experimental-webgl', this.contextOptions);
+        
+        if (!this.gl) {
+            console.error(`WebGL not supported for ${this.canvas.id}`);
+            if (window.mobileDebug) {
+                window.mobileDebug.log(`❌ Quantum ${this.canvas.id}: WebGL context creation failed (size: ${this.canvas.width}x${this.canvas.height})`);
+            }
+            // Show user-friendly error instead of white screen
+            this.showWebGLError();
+            return;
+        } else {
+            if (window.mobileDebug) {
+                const version = this.gl.getParameter(this.gl.VERSION);
+                window.mobileDebug.log(`✅ Quantum ${this.canvas.id}: WebGL context created - ${version} (size: ${this.canvas.width}x${this.canvas.height})`);
+            }
+        }
+    }
+
+    /**
+     * Initialize WebGL rendering pipeline
+     */
+    init() {
+        this.initShaders();
+        this.initBuffers();
+        this.resize();
+    }
+    
+    /**
+     * Reinitialize WebGL context and resources after SmartCanvasPool context recreation
+     */
+    reinitializeContext() {
+        console.log(`🔄 Reinitializing WebGL context for ${this.canvas.id}`);
+        
+        // CRITICAL FIX: Clear old WebGL references first
+        this.program = null;
+        this.buffer = null;
+        this.uniforms = null;
+        this.gl = null;
+        
+        // CRITICAL FIX: Don't create new context - SmartCanvasPool already did this
+        // Just get the existing context that SmartCanvasPool created
+        this.gl = this.canvas.getContext('webgl2') || 
+                  this.canvas.getContext('webgl') ||
+                  this.canvas.getContext('experimental-webgl');
+        
+        if (!this.gl) {
+            console.error(`❌ No WebGL context available for ${this.canvas.id} - SmartCanvasPool should have created one`);
+            return false;
+        }
+        
+        if (this.gl.isContextLost()) {
+            console.error(`❌ WebGL context is lost for ${this.canvas.id}`);
+            return false;
+        }
+        
+        // Reinitialize all WebGL resources with the existing context
+        try {
+            this.initShaders();
+            this.initBuffers();
+            this.resize();
+            
+            console.log(`✅ WebGL context reinitialized for ${this.canvas.id}`);
+            return true;
+        } catch (error) {
+            console.error(`❌ Failed to reinitialize WebGL resources for ${this.canvas.id}:`, error);
+            return false;
+        }
+    }
+    
+    /**
+     * Initialize shaders with complex 3D lattice functions and holographic effects
+     */
+    initShaders() {
+        const vertexShaderSource = `attribute vec2 a_position;
+void main() {
+    gl_Position = vec4(a_position, 0.0, 1.0);
+}`;
+        
+        // Mobile-friendly precision - try highp, fallback to mediump
+        const isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+        const precision = isMobile ? 'mediump' : 'highp';
+        
+        const fragmentShaderSource = `
+#ifdef GL_FRAGMENT_PRECISION_HIGH
+    precision highp float;
+#else
+    precision mediump float;
+#endif
+
+uniform vec2 u_resolution;
+uniform float u_time;
+uniform vec2 u_mouse;
+uniform float u_geometry;
+uniform float u_gridDensity;
+uniform float u_morphFactor;
+uniform float u_chaos;
+uniform float u_speed;
+uniform float u_hue;
+uniform float u_intensity;
+uniform float u_saturation;
+uniform float u_dimension;
+uniform float u_rot4dXY;
+uniform float u_rot4dXZ;
+uniform float u_rot4dYZ;
+uniform float u_rot4dXW;
+uniform float u_rot4dYW;
+uniform float u_rot4dZW;
+uniform float u_mouseIntensity;
+uniform float u_clickIntensity;
+uniform float u_roleIntensity;
+
+// 6D rotation matrices - 3D space rotations (XY, XZ, YZ)
+mat4 rotateXY(float theta) {
+    float c = cos(theta);
+    float s = sin(theta);
+    return mat4(c, -s, 0.0, 0.0, s, c, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0);
+}
+
+mat4 rotateXZ(float theta) {
+    float c = cos(theta);
+    float s = sin(theta);
+    return mat4(c, 0.0, s, 0.0, 0.0, 1.0, 0.0, 0.0, -s, 0.0, c, 0.0, 0.0, 0.0, 0.0, 1.0);
+}
+
+mat4 rotateYZ(float theta) {
+    float c = cos(theta);
+    float s = sin(theta);
+    return mat4(1.0, 0.0, 0.0, 0.0, 0.0, c, -s, 0.0, 0.0, s, c, 0.0, 0.0, 0.0, 0.0, 1.0);
+}
+
+// 4D hyperspace rotations (XW, YW, ZW)
+mat4 rotateXW(float theta) {
+    float c = cos(theta);
+    float s = sin(theta);
+    return mat4(c, 0.0, 0.0, -s, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, s, 0.0, 0.0, c);
+}
+
+mat4 rotateYW(float theta) {
+    float c = cos(theta);
+    float s = sin(theta);
+    return mat4(1.0, 0.0, 0.0, 0.0, 0.0, c, 0.0, -s, 0.0, 0.0, 1.0, 0.0, 0.0, s, 0.0, c);
+}
+
+mat4 rotateZW(float theta) {
+    float c = cos(theta);
+    float s = sin(theta);
+    return mat4(1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, c, -s, 0.0, 0.0, s, c);
+}
+
+vec3 project4Dto3D(vec4 p) {
+    float w = 2.5 / (2.5 + p.w);
+    return vec3(p.x * w, p.y * w, p.z * w);
+}
+
+// ========================================
+// POLYTOPE CORE WARP FUNCTIONS (24 Geometries)
+// ========================================
+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 = mod(geometryType, 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;
+}
+// ========================================
+
+// Complex 3D Lattice Functions - Superior Quantum Shaders
+float tetrahedronLattice(vec3 p, float gridSize) {
+    vec3 q = fract(p * gridSize) - 0.5;
+    float d1 = length(q);
+    float d2 = length(q - vec3(0.4, 0.0, 0.0));
+    float d3 = length(q - vec3(0.0, 0.4, 0.0));
+    float d4 = length(q - vec3(0.0, 0.0, 0.4));
+    float vertices = 1.0 - smoothstep(0.0, 0.04, min(min(d1, d2), min(d3, d4)));
+    float edges = 0.0;
+    edges = max(edges, 1.0 - smoothstep(0.0, 0.02, abs(length(q.xy) - 0.2)));
+    edges = max(edges, 1.0 - smoothstep(0.0, 0.02, abs(length(q.yz) - 0.2)));
+    edges = max(edges, 1.0 - smoothstep(0.0, 0.02, abs(length(q.xz) - 0.2)));
+    return max(vertices, edges * 0.5);
+}
+
+float hypercubeLattice(vec3 p, float gridSize) {
+    vec3 grid = fract(p * gridSize);
+    vec3 edges = min(grid, 1.0 - grid);
+    float minEdge = min(min(edges.x, edges.y), edges.z);
+    float lattice = 1.0 - smoothstep(0.0, 0.03, minEdge);
+    
+    vec3 centers = abs(grid - 0.5);
+    float maxCenter = max(max(centers.x, centers.y), centers.z);
+    float vertices = 1.0 - smoothstep(0.45, 0.5, maxCenter);
+    
+    return max(lattice * 0.7, vertices);
+}
+
+float sphereLattice(vec3 p, float gridSize) {
+    vec3 cell = fract(p * gridSize) - 0.5;
+    float sphere = 1.0 - smoothstep(0.15, 0.25, length(cell));
+    
+    float rings = 0.0;
+    float ringRadius = length(cell.xy);
+    rings = max(rings, 1.0 - smoothstep(0.0, 0.02, abs(ringRadius - 0.3)));
+    rings = max(rings, 1.0 - smoothstep(0.0, 0.02, abs(ringRadius - 0.2)));
+    
+    return max(sphere, rings * 0.6);
+}
+
+float torusLattice(vec3 p, float gridSize) {
+    vec3 cell = fract(p * gridSize) - 0.5;
+    float majorRadius = 0.3;
+    float minorRadius = 0.1;
+    
+    float toroidalDist = length(vec2(length(cell.xy) - majorRadius, cell.z));
+    float torus = 1.0 - smoothstep(minorRadius - 0.02, minorRadius + 0.02, toroidalDist);
+    
+    float rings = 0.0;
+    float angle = atan(cell.y, cell.x);
+    rings = sin(angle * 8.0) * 0.02;
+    
+    return max(torus, 0.0) + rings;
+}
+
+float kleinLattice(vec3 p, float gridSize) {
+    vec3 cell = fract(p * gridSize) - 0.5;
+    float u = atan(cell.y, cell.x) / 3.14159 + 1.0;
+    float v = cell.z + 0.5;
+    
+    float x = (2.0 + cos(u * 0.5)) * cos(u);
+    float y = (2.0 + cos(u * 0.5)) * sin(u);
+    float z = sin(u * 0.5) + v;
+    
+    vec3 kleinPoint = vec3(x, y, z) * 0.1;
+    float dist = length(cell - kleinPoint);
+    
+    return 1.0 - smoothstep(0.1, 0.15, dist);
+}
+
+float fractalLattice(vec3 p, float gridSize) {
+    vec3 cell = fract(p * gridSize);
+    cell = abs(cell * 2.0 - 1.0);
+    
+    float dist = length(max(abs(cell) - 0.3, 0.0));
+    
+    // Recursive subdivision
+    for(int i = 0; i < 3; i++) {
+        cell = abs(cell * 2.0 - 1.0);
+        float subdist = length(max(abs(cell) - 0.3, 0.0)) / pow(2.0, float(i + 1));
+        dist = min(dist, subdist);
+    }
+    
+    return 1.0 - smoothstep(0.0, 0.05, dist);
+}
+
+float waveLattice(vec3 p, float gridSize) {
+    float time = u_time * 0.001 * u_speed;
+    vec3 cell = fract(p * gridSize) - 0.5;
+    
+    float wave1 = sin(p.x * gridSize * 2.0 + time * 2.0);
+    float wave2 = sin(p.y * gridSize * 1.8 + time * 1.5);
+    float wave3 = sin(p.z * gridSize * 2.2 + time * 1.8);
+    
+    float interference = (wave1 + wave2 + wave3) / 3.0;
+    float amplitude = 1.0 - length(cell) * 2.0;
+    
+    return max(0.0, interference * amplitude);
+}
+
+float crystalLattice(vec3 p, float gridSize) {
+    vec3 cell = fract(p * gridSize) - 0.5;
+    
+    // Octahedral crystal structure
+    float crystal = max(max(abs(cell.x) + abs(cell.y), abs(cell.y) + abs(cell.z)), abs(cell.x) + abs(cell.z));
+    crystal = 1.0 - smoothstep(0.3, 0.4, crystal);
+    
+    // Add crystalline faces
+    float faces = 0.0;
+    faces = max(faces, 1.0 - smoothstep(0.0, 0.02, abs(abs(cell.x) - 0.35)));
+    faces = max(faces, 1.0 - smoothstep(0.0, 0.02, abs(abs(cell.y) - 0.35)));
+    faces = max(faces, 1.0 - smoothstep(0.0, 0.02, abs(abs(cell.z) - 0.35)));
+    
+    return max(crystal, faces * 0.5);
+}
+
+// Enhanced geometry function with holographic effects (24 GEOMETRIES)
+float geometryFunction(vec4 p) {
+    // Decode geometry: base = geometry % 8 (supports 24 geometries)
+    float totalBase = 8.0;
+    float baseGeomFloat = mod(u_geometry, totalBase);
+    int geomType = int(clamp(floor(baseGeomFloat + 0.5), 0.0, totalBase - 1.0));
+
+    // Project to 3D and apply polytope warp
+    vec3 p3d = project4Dto3D(p);
+    vec3 warped = applyCoreWarp(p3d, u_geometry, vec2(0.0, 0.0));
+    float gridSize = u_gridDensity * 0.08;
+    
+    if (geomType == 0) {
+        return tetrahedronLattice(warped, gridSize) * u_morphFactor;
+    }
+    else if (geomType == 1) {
+        return hypercubeLattice(warped, gridSize) * u_morphFactor;
+    }
+    else if (geomType == 2) {
+        return sphereLattice(warped, gridSize) * u_morphFactor;
+    }
+    else if (geomType == 3) {
+        return torusLattice(warped, gridSize) * u_morphFactor;
+    }
+    else if (geomType == 4) {
+        return kleinLattice(warped, gridSize) * u_morphFactor;
+    }
+    else if (geomType == 5) {
+        return fractalLattice(warped, gridSize) * u_morphFactor;
+    }
+    else if (geomType == 6) {
+        return waveLattice(warped, gridSize) * u_morphFactor;
+    }
+    else if (geomType == 7) {
+        return crystalLattice(warped, gridSize) * u_morphFactor;
+    }
+    else {
+        return hypercubeLattice(warped, gridSize) * u_morphFactor;
+    }
+}
+
+// HSL to RGB conversion for proper color control
+vec3 hsl2rgb(float h, float s, float l) {
+    float c = (1.0 - abs(2.0 * l - 1.0)) * s;
+    float hp = h * 6.0; // h is 0-1
+    float x = c * (1.0 - abs(mod(hp, 2.0) - 1.0));
+    float m = l - c * 0.5;
+    vec3 rgb;
+    if (hp < 1.0)      rgb = vec3(c, x, 0.0);
+    else if (hp < 2.0) rgb = vec3(x, c, 0.0);
+    else if (hp < 3.0) rgb = vec3(0.0, c, x);
+    else if (hp < 4.0) rgb = vec3(0.0, x, c);
+    else if (hp < 5.0) rgb = vec3(x, 0.0, c);
+    else               rgb = vec3(c, 0.0, x);
+    return rgb + m;
+}
+
+// LAYER-BY-LAYER COLOR SYSTEM with user hue/saturation control
+// Each layer gets a hue offset from the user-controlled base hue
+vec3 getLayerColorPalette(int layerIndex, float t) {
+    float baseHue = u_hue; // 0-1 from JavaScript (user hue / 360)
+    float sat = u_saturation;
+
+    // Per-layer hue offsets for visual variety
+    float hueOffset = 0.0;
+    float lightness = 0.5;
+
+    if (layerIndex == 0) {
+        // BACKGROUND: Darkened, shifted hue
+        hueOffset = 0.0;
+        lightness = 0.15;
+        sat *= 0.7;
+    }
+    else if (layerIndex == 1) {
+        // SHADOW: Complementary offset, medium-dark
+        hueOffset = 0.33;
+        lightness = 0.3;
+        sat *= 0.9;
+    }
+    else if (layerIndex == 2) {
+        // CONTENT: Primary hue, bright
+        hueOffset = 0.0;
+        lightness = 0.55;
+    }
+    else if (layerIndex == 3) {
+        // HIGHLIGHT: Analogous offset, bright
+        hueOffset = 0.15;
+        lightness = 0.6;
+    }
+    else {
+        // ACCENT: Triadic offset, vivid
+        hueOffset = 0.67;
+        lightness = 0.5;
+    }
+
+    // Animate hue gently over time and geometry value
+    float animatedHue = fract(baseHue + hueOffset + sin(t * 3.0) * 0.05);
+    return hsl2rgb(animatedHue, sat, lightness);
+}
+
+// Extreme RGB separation and distortion for each layer
+vec3 extremeRGBSeparation(vec3 baseColor, vec2 uv, float intensity, int layerIndex) {
+    vec2 offset = vec2(0.01, 0.005) * intensity;
+    
+    // Different separation patterns per layer
+    if (layerIndex == 0) {
+        // Background: Minimal separation, smooth
+        return baseColor + vec3(
+            sin(uv.x * 10.0 + u_time * 0.001) * 0.02,
+            cos(uv.y * 8.0 + u_time * 0.0015) * 0.02,
+            sin(uv.x * uv.y * 6.0 + u_time * 0.0008) * 0.02
+        ) * intensity;
+    }
+    else if (layerIndex == 1) {
+        // Shadow: Heavy vertical separation
+        float r = baseColor.r + sin(uv.y * 50.0 + u_time * 0.003) * intensity * 0.15;
+        float g = baseColor.g + sin((uv.y + 0.1) * 45.0 + u_time * 0.0025) * intensity * 0.12;
+        float b = baseColor.b + sin((uv.y - 0.1) * 55.0 + u_time * 0.0035) * intensity * 0.18;
+        return vec3(r, g, b);
+    }
+    else if (layerIndex == 2) {
+        // Content: Explosive radial separation
+        float dist = length(uv);
+        float angle = atan(uv.y, uv.x);
+        float r = baseColor.r + sin(dist * 30.0 + angle * 10.0 + u_time * 0.004) * intensity * 0.2;
+        float g = baseColor.g + cos(dist * 25.0 + angle * 8.0 + u_time * 0.0035) * intensity * 0.18;
+        float b = baseColor.b + sin(dist * 35.0 + angle * 12.0 + u_time * 0.0045) * intensity * 0.22;
+        return vec3(r, g, b);
+    }
+    else if (layerIndex == 3) {
+        // Highlight: Lightning-like separation
+        float lightning = sin(uv.x * 80.0 + u_time * 0.008) * cos(uv.y * 60.0 + u_time * 0.006);
+        float r = baseColor.r + lightning * intensity * 0.25;
+        float g = baseColor.g + sin(lightning * 40.0 + u_time * 0.005) * intensity * 0.2;
+        float b = baseColor.b + cos(lightning * 30.0 + u_time * 0.007) * intensity * 0.3;
+        return vec3(r, g, b);
+    }
+    else {
+        // Accent: Chaotic multi-directional separation
+        float chaos1 = sin(uv.x * 100.0 + uv.y * 80.0 + u_time * 0.01);
+        float chaos2 = cos(uv.x * 70.0 - uv.y * 90.0 + u_time * 0.008);
+        float chaos3 = sin(uv.x * uv.y * 150.0 + u_time * 0.012);
+        return baseColor + vec3(chaos1, chaos2, chaos3) * intensity * 0.3;
+    }
+}
+
+void main() {
+    vec2 uv = (gl_FragCoord.xy - u_resolution.xy * 0.5) / min(u_resolution.x, u_resolution.y);
+    
+    // Enhanced 4D position with holographic depth
+    float timeSpeed = u_time * 0.0001 * u_speed;
+    vec4 pos = vec4(uv * 3.0, sin(timeSpeed * 3.0), cos(timeSpeed * 2.0));
+    pos.xy += (u_mouse - 0.5) * u_mouseIntensity * 2.0;
+
+    // Apply 6D rotations - 3D space rotations first, then 4D hyperspace
+    pos = rotateXY(u_rot4dXY) * pos;
+    pos = rotateXZ(u_rot4dXZ) * pos;
+    pos = rotateYZ(u_rot4dYZ) * pos;
+    pos = rotateXW(u_rot4dXW) * pos;
+    pos = rotateYW(u_rot4dYW) * pos;
+    pos = rotateZW(u_rot4dZW) * pos;
+    
+    // Calculate enhanced geometry value
+    float value = geometryFunction(pos);
+    
+    // Enhanced chaos with holographic effects
+    float noise = sin(pos.x * 7.0) * cos(pos.y * 11.0) * sin(pos.z * 13.0);
+    value += noise * u_chaos;
+    
+    // Enhanced intensity calculation with holographic glow
+    float geometryIntensity = 1.0 - clamp(abs(value * 0.8), 0.0, 1.0);
+    geometryIntensity = pow(geometryIntensity, 1.5); // More dramatic falloff
+    geometryIntensity += u_clickIntensity * 0.3;
+    
+    // Holographic shimmer effect
+    float shimmer = sin(uv.x * 20.0 + timeSpeed * 5.0) * cos(uv.y * 15.0 + timeSpeed * 3.0) * 0.1;
+    geometryIntensity += shimmer * geometryIntensity;
+    
+    // Apply user intensity control
+    float finalIntensity = geometryIntensity * u_intensity;
+    
+    // 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)
+    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
+    
+    // Get layer-specific base color using user hue/saturation controls
+    float colorTime = timeSpeed * 2.0 + value * 3.0;
+    vec3 layerColor = getLayerColorPalette(layerIndex, colorTime);
+    
+    // Apply geometry-based intensity modulation per layer
+    vec3 extremeBaseColor;
+    if (layerIndex == 0) {
+        // Background: Subtle, fills empty space
+        extremeBaseColor = layerColor * (0.3 + geometryIntensity * 0.4);
+    }
+    else if (layerIndex == 1) {
+        // Shadow: Aggressive, high contrast where geometry is weak
+        float shadowIntensity = pow(1.0 - geometryIntensity, 2.0); // Inverted for shadows
+        extremeBaseColor = layerColor * (shadowIntensity * 0.8 + 0.1);
+    }
+    else if (layerIndex == 2) {
+        // Content: Dominant, follows geometry strongly
+        extremeBaseColor = layerColor * (geometryIntensity * 1.2 + 0.2);
+    }
+    else if (layerIndex == 3) {
+        // Highlight: Electric, peaks only
+        float peakIntensity = pow(geometryIntensity, 3.0); // Cubic for sharp peaks
+        extremeBaseColor = layerColor * (peakIntensity * 1.5 + 0.1);
+    }
+    else {
+        // Accent: Chaotic, random bursts
+        float randomBurst = sin(value * 50.0 + timeSpeed * 10.0) * 0.5 + 0.5;
+        extremeBaseColor = layerColor * (randomBurst * geometryIntensity * 2.0 + 0.05);
+    }
+    
+    // Apply extreme RGB separation per layer
+    vec3 extremeColor = extremeRGBSeparation(extremeBaseColor, uv, finalIntensity, layerIndex);
+    
+    // Layer-specific particle systems with extreme colors
+    float extremeParticles = 0.0;
+    if (layerIndex == 2 || layerIndex == 3) {
+        // Only content and highlight layers get particles
+        vec2 particleUV = uv * (layerIndex == 2 ? 12.0 : 20.0);
+        vec2 particleID = floor(particleUV);
+        vec2 particlePos = fract(particleUV) - 0.5;
+        float particleDist = length(particlePos);
+        
+        float particleTime = timeSpeed * (layerIndex == 2 ? 3.0 : 8.0) + dot(particleID, vec2(127.1, 311.7));
+        float particleAlpha = sin(particleTime) * 0.5 + 0.5;
+        float particleSize = layerIndex == 2 ? 0.2 : 0.1;
+        extremeParticles = (1.0 - smoothstep(0.05, particleSize, particleDist)) * particleAlpha * 0.4;
+    }
+    
+    // Combine color with particles based on layer
+    // Particle color derives from user hue for consistency
+    vec3 particleColor = hsl2rgb(fract(u_hue + 0.15), u_saturation * 0.5, 0.85);
+    vec3 finalColor;
+    if (layerIndex == 0) {
+        finalColor = extremeColor;
+    }
+    else if (layerIndex == 1) {
+        finalColor = extremeColor * 0.8;
+    }
+    else if (layerIndex == 2) {
+        finalColor = extremeColor + extremeParticles * particleColor;
+    }
+    else if (layerIndex == 3) {
+        finalColor = extremeColor + extremeParticles * particleColor;
+    }
+    else {
+        finalColor = extremeColor * (1.0 + sin(timeSpeed * 20.0) * 0.3);
+    }
+    
+    // Layer-specific alpha intensity with extreme contrast
+    float layerAlpha;
+    if (layerIndex == 0) layerAlpha = 0.6;        // Background: Medium
+    else if (layerIndex == 1) layerAlpha = 0.4;   // Shadow: Lower
+    else if (layerIndex == 2) layerAlpha = 1.0;   // Content: Full intensity
+    else if (layerIndex == 3) layerAlpha = 0.8;   // Highlight: High
+    else layerAlpha = 0.3;                        // Accent: Subtle bursts
+    
+    gl_FragColor = vec4(finalColor, finalIntensity * layerAlpha);
+}`;
+        
+        this.program = this.createProgram(vertexShaderSource, fragmentShaderSource);
+        this.uniforms = {
+            resolution: this.gl.getUniformLocation(this.program, 'u_resolution'),
+            time: this.gl.getUniformLocation(this.program, 'u_time'),
+            mouse: this.gl.getUniformLocation(this.program, 'u_mouse'),
+            geometry: this.gl.getUniformLocation(this.program, 'u_geometry'),
+            gridDensity: this.gl.getUniformLocation(this.program, 'u_gridDensity'),
+            morphFactor: this.gl.getUniformLocation(this.program, 'u_morphFactor'),
+            chaos: this.gl.getUniformLocation(this.program, 'u_chaos'),
+            speed: this.gl.getUniformLocation(this.program, 'u_speed'),
+            hue: this.gl.getUniformLocation(this.program, 'u_hue'),
+            intensity: this.gl.getUniformLocation(this.program, 'u_intensity'),
+            saturation: this.gl.getUniformLocation(this.program, 'u_saturation'),
+            dimension: this.gl.getUniformLocation(this.program, 'u_dimension'),
+            rot4dXY: this.gl.getUniformLocation(this.program, 'u_rot4dXY'),
+            rot4dXZ: this.gl.getUniformLocation(this.program, 'u_rot4dXZ'),
+            rot4dYZ: this.gl.getUniformLocation(this.program, 'u_rot4dYZ'),
+            rot4dXW: this.gl.getUniformLocation(this.program, 'u_rot4dXW'),
+            rot4dYW: this.gl.getUniformLocation(this.program, 'u_rot4dYW'),
+            rot4dZW: this.gl.getUniformLocation(this.program, 'u_rot4dZW'),
+            mouseIntensity: this.gl.getUniformLocation(this.program, 'u_mouseIntensity'),
+            clickIntensity: this.gl.getUniformLocation(this.program, 'u_clickIntensity'),
+            roleIntensity: this.gl.getUniformLocation(this.program, 'u_roleIntensity')
+        };
+    }
+    
+    /**
+     * Create WebGL program from shaders
+     */
+    createProgram(vertexSource, fragmentSource) {
+        const vertexShader = this.createShader(this.gl.VERTEX_SHADER, vertexSource);
+        const fragmentShader = this.createShader(this.gl.FRAGMENT_SHADER, fragmentSource);
+        
+        if (!vertexShader || !fragmentShader) {
+            return null;
+        }
+        
+        const program = this.gl.createProgram();
+        this.gl.attachShader(program, vertexShader);
+        this.gl.attachShader(program, fragmentShader);
+        this.gl.linkProgram(program);
+        
+        if (!this.gl.getProgramParameter(program, this.gl.LINK_STATUS)) {
+            const error = this.gl.getProgramInfoLog(program);
+            console.error('Program linking failed:', error);
+            if (window.mobileDebug) {
+                window.mobileDebug.log(`❌ ${this.canvas?.id}: Shader program link failed - ${error}`);
+            }
+            return null;
+        } else {
+            if (window.mobileDebug) {
+                window.mobileDebug.log(`✅ ${this.canvas?.id}: Shader program linked successfully`);
+            }
+        }
+        
+        return program;
+    }
+    
+    /**
+     * Create individual shader
+     */
+    createShader(type, source) {
+        // CRITICAL FIX: Check WebGL context state before shader operations
+        if (!this.gl) {
+            console.error('❌ Cannot create shader: WebGL context is null');
+            if (window.mobileDebug) {
+                window.mobileDebug.log(`❌ ${this.canvas?.id}: Cannot create shader - WebGL context is null`);
+            }
+            return null;
+        }
+        
+        if (this.gl.isContextLost()) {
+            console.error('❌ Cannot create shader: WebGL context is lost');
+            if (window.mobileDebug) {
+                window.mobileDebug.log(`❌ ${this.canvas?.id}: Cannot create shader - WebGL context is lost`);
+            }
+            return null;
+        }
+        
+        try {
+            const shader = this.gl.createShader(type);
+            
+            if (!shader) {
+                console.error('❌ Failed to create shader object - WebGL context may be invalid');
+                if (window.mobileDebug) {
+                    window.mobileDebug.log(`❌ ${this.canvas?.id}: Failed to create shader object`);
+                }
+                return null;
+            }
+            
+            this.gl.shaderSource(shader, source);
+            this.gl.compileShader(shader);
+            
+            if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
+                const error = this.gl.getShaderInfoLog(shader);
+                const shaderType = type === this.gl.VERTEX_SHADER ? 'vertex' : 'fragment';
+                
+                // CRITICAL FIX: Show actual error instead of null
+                if (error) {
+                    console.error(`❌ ${shaderType} shader compilation failed:`, error);
+                } else {
+                    console.error(`❌ ${shaderType} shader compilation failed: WebGL returned no error info (context may be invalid)`);
+                }
+                
+                console.error('Shader source:', source);
+                
+                if (window.mobileDebug) {
+                    const errorMsg = error || 'No error info (context may be invalid)';
+                    window.mobileDebug.log(`❌ ${this.canvas?.id}: ${shaderType} shader compile failed - ${errorMsg}`);
+                    // Log first few lines of problematic shader for mobile debugging
+                    const sourceLines = source.split('\n').slice(0, 5).join('\\n');
+                    window.mobileDebug.log(`🔍 ${shaderType} shader source start: ${sourceLines}...`);
+                }
+                
+                this.gl.deleteShader(shader);
+                return null;
+            } else {
+                if (window.mobileDebug) {
+                    const shaderType = type === this.gl.VERTEX_SHADER ? 'vertex' : 'fragment';
+                    window.mobileDebug.log(`✅ ${this.canvas?.id}: ${shaderType} shader compiled successfully`);
+                }
+            }
+            
+            return shader;
+        } catch (error) {
+            console.error('❌ Exception during shader creation:', error);
+            if (window.mobileDebug) {
+                window.mobileDebug.log(`❌ ${this.canvas?.id}: Exception during shader creation - ${error.message}`);
+            }
+            return null;
+        }
+    }
+    
+    /**
+     * Initialize vertex buffers
+     */
+    initBuffers() {
+        const positions = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]);
+        
+        this.buffer = this.gl.createBuffer();
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffer);
+        this.gl.bufferData(this.gl.ARRAY_BUFFER, positions, this.gl.STATIC_DRAW);
+        
+        const positionLocation = this.gl.getAttribLocation(this.program, 'a_position');
+        this.gl.enableVertexAttribArray(positionLocation);
+        this.gl.vertexAttribPointer(positionLocation, 2, this.gl.FLOAT, false, 0, 0);
+    }
+    
+    /**
+     * Resize canvas and viewport
+     */
+    resize() {
+        // Mobile-optimized canvas sizing
+        const dpr = Math.min(window.devicePixelRatio || 1, 2); // Cap at 2x for mobile performance
+        const width = this.canvas.clientWidth;
+        const height = this.canvas.clientHeight;
+        
+        // Mobile debug: Check for zero dimensions that would cause invisible rendering
+        if (window.mobileDebug && (width === 0 || height === 0) && !this._zeroDimWarned) {
+            window.mobileDebug.log(`⚠️ ${this.canvas?.id}: Canvas clientWidth=${width}, clientHeight=${height} - will be invisible`);
+            this._zeroDimWarned = true;
+        }
+        
+        // Only resize if dimensions actually changed (mobile optimization)
+        if (this.canvas.width !== width * dpr || this.canvas.height !== height * dpr) {
+            this.canvas.width = width * dpr;
+            this.canvas.height = height * dpr;
+            this.gl.viewport(0, 0, this.canvas.width, this.canvas.height);
+            
+            // Mobile debug: Log final canvas dimensions
+            if (window.mobileDebug && !this._finalSizeLogged) {
+                window.mobileDebug.log(`📐 ${this.canvas?.id}: Final canvas buffer ${this.canvas.width}x${this.canvas.height} (DPR=${dpr})`);
+                this._finalSizeLogged = true;
+            }
+        }
+    }
+    
+    /**
+     * Show user-friendly WebGL error message
+     */
+    showWebGLError() {
+        if (!this.canvas) return;
+        const ctx = this.canvas.getContext('2d');
+        if (ctx) {
+            ctx.fillStyle = '#000';
+            ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+            ctx.fillStyle = '#64ff96';
+            ctx.font = '16px Orbitron, monospace';
+            ctx.textAlign = 'center';
+            ctx.fillText('WebGL Required', this.canvas.width / 2, this.canvas.height / 2);
+            ctx.fillStyle = '#888';
+            ctx.font = '12px Orbitron, monospace';
+            ctx.fillText('Please enable WebGL in your browser', this.canvas.width / 2, this.canvas.height / 2 + 25);
+        }
+    }
+    
+    /**
+     * Update visualization parameters with immediate GPU sync
+     */
+    updateParameters(params) {
+        if (!params || typeof params !== 'object') return;
+        // Filter to only finite numbers to prevent NaN/Infinity reaching GPU uniforms
+        for (const [key, value] of Object.entries(params)) {
+            if (typeof value === 'number' && Number.isFinite(value)) {
+                this.params[key] = value;
+            }
+        }
+        // Don't call render() here - engine will call it to prevent infinite loop
+    }
+    
+    /**
+     * Update mouse interaction state
+     */
+    updateInteraction(x, y, intensity) {
+        this.mouseX = x;
+        this.mouseY = y;
+        this.mouseIntensity = intensity;
+    }
+    
+    /**
+     * Render frame
+     */
+    render() {
+        if (!this.program || this._contextLost) return;
+        if (!this.gl || this.gl.isContextLost()) {
+            this._contextLost = true;
+            return;
+        }
+
+        this.resize();
+        this.gl.useProgram(this.program);
+        
+        // CRITICAL FIX: Clear framebuffer before rendering
+        this.gl.clearColor(0.0, 0.0, 0.0, 0.0);
+        this.gl.clear(this.gl.COLOR_BUFFER_BIT);
+        
+        // Mobile optimization: Log render parameters once per canvas (console only)
+        if (!this._renderParamsLogged) {
+            console.log(`[Mobile] ${this.canvas?.id}: Render params - geometry=${this.params.geometry}, gridDensity=${this.params.gridDensity}, intensity=${this.params.intensity}`);
+            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
+        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.geometry, this.params.geometry);
+        // 🎵 QUANTUM AUDIO REACTIVITY - Direct and effective
+        let gridDensity = this.params.gridDensity;
+        let morphFactor = this.params.morphFactor;
+        let hue = this.params.hue;
+        let chaos = this.params.chaos;
+        
+        if (window.audioEnabled && window.audioReactive) {
+            // Quantum audio mapping: Enhanced complex lattice response
+            gridDensity += window.audioReactive.bass * 40;      // Bass creates dense lattice structures
+            morphFactor += window.audioReactive.mid * 1.2;      // Mid frequencies morph the geometry
+            hue += window.audioReactive.high * 120;             // High frequencies shift colors dramatically
+            chaos += window.audioReactive.energy * 0.6;         // Overall energy adds chaos/complexity
+            
+            // Debug logging every 10 seconds to verify audio reactivity is working
+            if (Date.now() % 10000 < 16) {
+                console.log(`🌌 Quantum audio reactivity: Density+${(window.audioReactive.bass * 40).toFixed(1)} Morph+${(window.audioReactive.mid * 1.2).toFixed(2)} Hue+${(window.audioReactive.high * 120).toFixed(1)} Chaos+${(window.audioReactive.energy * 0.6).toFixed(2)}`);
+            }
+        }
+        
+        this.gl.uniform1f(this.uniforms.gridDensity, Math.min(100, gridDensity));
+        this.gl.uniform1f(this.uniforms.morphFactor, Math.min(2, morphFactor));
+        this.gl.uniform1f(this.uniforms.chaos, Math.min(1, chaos));
+        this.gl.uniform1f(this.uniforms.speed, this.params.speed);
+        // Hue passed as normalized 0-1 for HSL color control
+        this.gl.uniform1f(this.uniforms.hue, (hue % 360) / 360.0);
+        this.gl.uniform1f(this.uniforms.intensity, this.params.intensity);
+        this.gl.uniform1f(this.uniforms.saturation, this.params.saturation);
+        this.gl.uniform1f(this.uniforms.dimension, this.params.dimension);
+        this.gl.uniform1f(this.uniforms.rot4dXY, this.params.rot4dXY || 0.0);
+        this.gl.uniform1f(this.uniforms.rot4dXZ, this.params.rot4dXZ || 0.0);
+        this.gl.uniform1f(this.uniforms.rot4dYZ, this.params.rot4dYZ || 0.0);
+        this.gl.uniform1f(this.uniforms.rot4dXW, this.params.rot4dXW || 0.0);
+        this.gl.uniform1f(this.uniforms.rot4dYW, this.params.rot4dYW || 0.0);
+        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.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
+    }
+    
+    // Audio reactivity now handled directly in render() loop - no complex methods needed
+    
+    /**
+     * Clean up WebGL resources
+     */
+    destroy() {
+        // Remove context loss listeners
+        if (this.canvas) {
+            if (this._onContextLost) {
+                this.canvas.removeEventListener('webglcontextlost', this._onContextLost);
+            }
+            if (this._onContextRestored) {
+                this.canvas.removeEventListener('webglcontextrestored', this._onContextRestored);
+            }
+        }
+
+        // Clean up WebGL resources (guard against lost context)
+        if (this.gl && !this.gl.isContextLost()) {
+            if (this.program) {
+                this.gl.deleteProgram(this.program);
+            }
+            if (this.buffer) {
+                this.gl.deleteBuffer(this.buffer);
+            }
+        }
+
+        this.program = null;
+        this.buffer = null;
+        this.gl = null;
+        this._contextLost = true;
+    }
+}