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

package/src/faceted/FacetedSystem.js

@@ -50,6 +50,7 @@ const FRAGMENT_SHADER_GLSL = `
     uniform float u_bass;
     uniform float u_mid;
     uniform float u_high;
+    uniform float u_breath; // Vitality System Breath (0.0 - 1.0)
 
     // ── 6D Rotation Matrices ──
 
@@ -159,10 +160,16 @@ const FRAGMENT_SHADER_GLSL = `
         int geomType = int(clamp(floor(baseGeomFloat + 0.5), 0.0, totalBase - 1.0));
 
         if (geomType == 0) {
-            // Tetrahedron lattice
-            vec4 pos = fract(p * u_gridDensity * 0.08);
-            vec4 dist = min(pos, 1.0 - pos);
-            return min(min(dist.x, dist.y), min(dist.z, dist.w)) * u_morphFactor;
+            // Tetrahedron lattice — tetrahedral symmetry planes
+            float d = u_gridDensity * 0.08;
+            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));
+            vec3 q = fract(p.xyz * d + 0.5) - 0.5;
+            float 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 (geomType == 1) {
             // Hypercube lattice
@@ -267,7 +274,11 @@ const FRAGMENT_SHADER_GLSL = `
         // Intensity from lattice
         float geometryIntensity = 1.0 - clamp(abs(value), 0.0, 1.0);
         geometryIntensity += u_clickIntensity * 0.3;
-        float finalIntensity = geometryIntensity * u_intensity;
+
+        // Exhale: Vitality Breath Modulation
+        float breathMod = 1.0 + (u_breath * 0.3); // +30% intensity at full breath
+
+        float finalIntensity = geometryIntensity * u_intensity * breathMod;
 
         // Audio-reactive hue shift
         float hue = u_hue / 360.0 + value * 0.1 + u_high * 0.08;
@@ -283,7 +294,7 @@ const FRAGMENT_SHADER_GLSL = `
         float gray = (baseColor.r + baseColor.g + baseColor.b) / 3.0;
         vec3 color = mix(vec3(gray), baseColor, u_saturation) * finalIntensity;
 
-        gl_FragColor = vec4(color, finalIntensity * u_roleIntensity);
+        gl_FragColor = vec4(color, finalIntensity);
     }
 `;
 
@@ -291,7 +302,7 @@ const FRAGMENT_SHADER_GLSL = `
 const FRAGMENT_SHADER_WGSL = `
 struct VIB3Uniforms {
     time: f32,
-    speed: f32,
+    _pad0: f32,
     resolution: vec2<f32>,
     geometry: f32,
     rot4dXY: f32,
@@ -304,18 +315,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,
-    _pad0: f32,
-    mouse: vec2<f32>,
-    _pad1: vec2<f32>,
+    layerScale: f32,
+    layerOpacity: f32,
+    _pad1: f32,
+    layerColorR: f32,
+    layerColorG: f32,
+    layerColorB: f32,
+    densityMult: f32,
+    speedMult: f32,
+    breath: f32, // Index 32
 };
 
 @group(0) @binding(0) var<uniform> u: VIB3Uniforms;
@@ -406,7 +423,7 @@ fn warpHypertetraCore_w(p: vec3<f32>, geomIdx: i32) -> vec3<f32> {
 fn applyCoreWarp_w(p: vec3<f32>, geomType: f32, mouseDelta: vec2<f32>) -> vec3<f32> {
     let coreFloat = floor(geomType / 8.0);
     let coreIndex = i32(clamp(coreFloat, 0.0, 2.0));
-    let baseFloat = geomType - coreFloat * 8.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_w(p, geomIdx); }
     if (coreIndex == 2) { return warpHypertetraCore_w(p, geomIdx); }
@@ -418,8 +435,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;
@@ -459,7 +483,7 @@ fn main(input: VertexOutput) -> @location(0) vec4<f32> {
     let timeSpeed = u.time * 0.0001 * u.speed;
 
     var pos = vec4<f32>(uv2 * 3.0, sin(timeSpeed * 3.0), cos(timeSpeed * 2.0));
-    pos = vec4<f32>(pos.xy + (u.mouse - 0.5) * u.mouseIntensity * 2.0, pos.z, pos.w);
+    pos = vec4<f32>(pos.xy + (vec2<f32>(0.5, 0.5) - 0.5) * u.mouseIntensity * 2.0, pos.z, pos.w);
 
     pos = rotateXY_w(u.rot4dXY) * pos;
     pos = rotateXZ_w(u.rot4dXZ) * pos;
@@ -469,7 +493,7 @@ fn main(input: VertexOutput) -> @location(0) vec4<f32> {
     pos = rotateZW_w(u.rot4dZW) * pos;
 
     let basePoint = project4Dto3D_w(pos);
-    let warpedPoint = applyCoreWarp_w(basePoint, u.geometry, u.mouse - 0.5);
+    let warpedPoint = applyCoreWarp_w(basePoint, u.geometry, vec2<f32>(0.0, 0.0));
     let warpedPos = vec4<f32>(warpedPoint, pos.w);
     var value = geometryFunction_w(warpedPos);
 
@@ -478,7 +502,10 @@ fn main(input: VertexOutput) -> @location(0) vec4<f32> {
 
     var geomIntensity = 1.0 - clamp(abs(value), 0.0, 1.0);
     geomIntensity += u.clickIntensity * 0.3;
-    let finalIntensity = geomIntensity * u.intensity;
+
+    // Vitality (Breath) modulation
+    let breathMod = 1.0 + (u.breath * 0.3);
+    let finalIntensity = geomIntensity * u.intensity * breathMod;
 
     let hueVal = u.hue / 360.0 + value * 0.1 + u.high * 0.08;
     let baseColor = vec3<f32>(
@@ -488,7 +515,7 @@ fn main(input: VertexOutput) -> @location(0) vec4<f32> {
     let gray = (baseColor.r + baseColor.g + baseColor.b) / 3.0;
     let color = mix(vec3<f32>(gray), baseColor, u.saturation) * finalIntensity;
 
-    return vec4<f32>(color, finalIntensity * u.roleIntensity);
+    return vec4<f32>(color, finalIntensity);
 }
 `;
 
@@ -498,466 +525,305 @@ fn main(input: VertexOutput) -> @location(0) vec4<f32> {
 
 export class FacetedSystem {
     constructor() {
+        this.bridge = null;
         this.canvas = null;
         this.gl = null;
         this.program = null;
-        this.isActive = false;
-        this.time = 0;
-        this.parameters = {
-            geometry: 0,
-            rot4dXY: 0, rot4dXZ: 0, rot4dYZ: 0,
-            rot4dXW: 0, rot4dYW: 0, rot4dZW: 0,
-            gridDensity: 15,
-            morphFactor: 1.0,
-            chaos: 0.2,
-            speed: 1.0,
-            hue: 200,
-            intensity: 0.7,
-            saturation: 0.8,
-            dimension: 3.5,
-            mouseX: 0.5,
-            mouseY: 0.5,
-            mouseIntensity: 0.0,
-            clickIntensity: 0.0,
-            roleIntensity: 1.0,
-            bass: 0.0,
-            mid: 0.0,
-            high: 0.0
-        };
-
-        /** @type {UnifiedRenderBridge|null} */
-        this._bridge = null;
-
-        /** @type {'direct'|'bridge'} Rendering mode */
-        this._renderMode = 'direct';
+        this.params = {};
+        this.initialized = false;
+        this.contextLost = false;
+        this._animFrame = null;
+        this._time = 0;
+        this._running = false;
+        this._quadBuffer = null;
+        this._uniformLocations = {};
+        this._useDirectGL = false;
     }
 
+    // ─── Synchronous Direct WebGL Init (matches Quantum/Holographic pattern) ───
+
     /**
-     * Initialize with UnifiedRenderBridge for WebGL/WebGPU abstraction.
-     * @param {HTMLCanvasElement} canvas
-     * @param {object} [options]
-     * @param {boolean} [options.preferWebGPU=true]
-     * @param {boolean} [options.debug=false]
-     * @returns {Promise<boolean>}
+     * Initialize directly with WebGL on a given canvas.
+     * Synchronous — no async bridge, no WebGPU.
+     * This is the preferred path for the landing page and adapters.
      */
-    async initWithBridge(canvas, options = {}) {
+    initDirect(canvas) {
         this.canvas = canvas;
         try {
-            this._bridge = await UnifiedRenderBridge.create(canvas, options);
-
-            // Try loading external shader files first, fall back to inline
-            let sources = {
-                glslVertex: VERTEX_SHADER_GLSL,
-                glslFragment: FRAGMENT_SHADER_GLSL,
-                wgslFragment: FRAGMENT_SHADER_WGSL
-            };
-
-            try {
-                const external = await shaderLoader.loadShaderPair('faceted', 'faceted/faceted.frag');
-                if (external.glslFragment) {
-                    sources.glslFragment = external.glslFragment;
-                }
-                if (external.wgslFragment) {
-                    sources.wgslFragment = external.wgslFragment;
-                }
-                if (external.glslVertex) {
-                    sources.glslVertex = external.glslVertex;
-                }
-            } catch (loadErr) {
-                // External load failed — use inline shaders (already set above)
-            }
-
-            const compiled = this._bridge.compileShader('faceted', sources);
-
-            if (!compiled) {
-                console.error('Failed to compile faceted shaders via bridge');
-                return false;
-            }
-
-            this._renderMode = 'bridge';
-            console.log(`Faceted System initialized via ${this._bridge.getBackendType()} bridge`);
-            return true;
+            this.gl = canvas.getContext('webgl2') || canvas.getContext('webgl');
         } catch (e) {
-            console.error('Faceted bridge init failed, falling back to direct:', e);
-            return this.initialize(canvas);
-        }
-    }
-
-    /**
-     * Initialize faceted system (direct WebGL mode)
-     * Finds canvas by ID in DOM (matches reference architecture)
-     */
-    initialize(canvasOverride = null) {
-        this.canvas = canvasOverride ?? document.getElementById('content-canvas');
-        if (!this.canvas) {
-            console.error('Faceted canvas (content-canvas) not found in DOM');
-            console.log('Looking for canvas IDs:', ['background-canvas', 'shadow-canvas', 'content-canvas', 'highlight-canvas', 'accent-canvas']);
+            console.warn('FacetedSystem: WebGL context creation failed', e);
             return false;
         }
-
-        this.gl = this.canvas.getContext('webgl');
         if (!this.gl) {
-            console.error('WebGL not available for Faceted System');
+            console.warn('FacetedSystem: WebGL not available');
             return false;
         }
 
-        this._contextLost = false;
-
-        // WebGL context loss/restore handlers
-        this._onContextLost = (e) => {
-            e.preventDefault();
-            this._contextLost = true;
-            console.warn('Faceted: WebGL context lost');
-        };
-        this._onContextRestored = () => {
-            console.log('Faceted: WebGL context restored');
-            this._contextLost = false;
-            this.createShaderProgram();
-        };
-        this.canvas.addEventListener('webglcontextlost', this._onContextLost);
-        this.canvas.addEventListener('webglcontextrestored', this._onContextRestored);
-
-        if (!this.createShaderProgram()) {
-            console.error('Failed to create faceted shader program');
+        // Compile shader program
+        this.program = this._compileProgram(this.gl, VERTEX_SHADER_GLSL, FRAGMENT_SHADER_GLSL);
+        if (!this.program) {
+            console.error('FacetedSystem: Shader compilation failed');
             return false;
         }
 
-        this.setupCanvasSize();
-        this._renderMode = 'direct';
-        console.log('Faceted System initialized on content-canvas');
-        return true;
-    }
-
-    /**
-     * Create shader program with 6D rotation and 24 geometry support
-     */
-    createShaderProgram() {
-        this.program = this.compileProgram(VERTEX_SHADER_GLSL, FRAGMENT_SHADER_GLSL);
-        if (!this.program) return false;
-
-        // Create fullscreen quad
-        const vertices = new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]);
-        const buffer = this.gl.createBuffer();
-        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffer);
+        // Create fullscreen quad buffer
+        const vertices = new Float32Array([-1,-1, 1,-1, -1,1, -1,1, 1,-1, 1,1]);
+        this._quadBuffer = this.gl.createBuffer();
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this._quadBuffer);
         this.gl.bufferData(this.gl.ARRAY_BUFFER, vertices, this.gl.STATIC_DRAW);
 
+        // Cache uniform locations
+        const gl = this.gl;
+        const numUniforms = gl.getProgramParameter(this.program, gl.ACTIVE_UNIFORMS);
+        for (let i = 0; i < numUniforms; i++) {
+            const info = gl.getActiveUniform(this.program, i);
+            if (info) {
+                this._uniformLocations[info.name] = gl.getUniformLocation(this.program, info.name);
+            }
+        }
+
+        this._useDirectGL = true;
+        this.initialized = true;
+        this.start();
         return true;
     }
 
-    /**
-     * Compile shader program
-     */
-    compileProgram(vertexSource, fragmentSource) {
-        const vertexShader = this.compileShader(this.gl.VERTEX_SHADER, vertexSource);
-        const fragmentShader = this.compileShader(this.gl.FRAGMENT_SHADER, fragmentSource);
-
-        if (!vertexShader || !fragmentShader) return null;
+    _compileProgram(gl, vertexSrc, fragmentSrc) {
+        const vs = this._compileShader(gl, gl.VERTEX_SHADER, vertexSrc);
+        const fs = this._compileShader(gl, gl.FRAGMENT_SHADER, fragmentSrc);
+        if (!vs || !fs) return null;
 
-        const program = this.gl.createProgram();
-        this.gl.attachShader(program, vertexShader);
-        this.gl.attachShader(program, fragmentShader);
-        this.gl.linkProgram(program);
+        const program = gl.createProgram();
+        gl.attachShader(program, vs);
+        gl.attachShader(program, fs);
+        gl.linkProgram(program);
 
-        if (!this.gl.getProgramParameter(program, this.gl.LINK_STATUS)) {
-            console.error('Shader program link error:', this.gl.getProgramInfoLog(program));
+        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+            console.error('FacetedSystem link error:', gl.getProgramInfoLog(program));
             return null;
         }
 
+        gl.deleteShader(vs);
+        gl.deleteShader(fs);
         return program;
     }
 
-    /**
-     * Compile individual shader
-     */
-    compileShader(type, source) {
-        const shader = this.gl.createShader(type);
-        this.gl.shaderSource(shader, source);
-        this.gl.compileShader(shader);
-
-        if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
-            console.error('Shader compile error:', this.gl.getShaderInfoLog(shader));
+    _compileShader(gl, type, source) {
+        const shader = gl.createShader(type);
+        gl.shaderSource(shader, source);
+        gl.compileShader(shader);
+        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+            console.error('FacetedSystem shader error:', gl.getShaderInfoLog(shader));
+            gl.deleteShader(shader);
             return null;
         }
-
         return shader;
     }
 
-    /**
-     * Setup canvas size
-     */
-    setupCanvasSize() {
-        const rect = this.canvas.parentElement.getBoundingClientRect();
-        this.canvas.width = rect.width || 800;
-        this.canvas.height = rect.height || 600;
-        if (this.gl) {
-            this.gl.viewport(0, 0, this.canvas.width, this.canvas.height);
-        }
-    }
+    // ─── Async Bridge Init (for SDK/WebGPU usage) ───
 
-    /**
-     * Start rendering
-     */
-    start() {
-        this.isActive = true;
-        this.render();
-        console.log('Faceted System started');
-    }
-
-    /**
-     * Stop rendering
-     */
-    stop() {
-        this.isActive = false;
-        console.log('Faceted System stopped');
+    async initWithBridge(canvas, options) {
+        this.canvas = canvas;
+        try {
+            this.bridge = await UnifiedRenderBridge.create(canvas, options);
+            if (this.bridge) {
+                const success = this.bridge.compileShader('faceted', {
+                    glslVertex: VERTEX_SHADER_GLSL,
+                    glslFragment: FRAGMENT_SHADER_GLSL,
+                    wgslFragment: FRAGMENT_SHADER_WGSL
+                });
+                if (!success) {
+                    console.error("Faceted shader compilation failed");
+                    return false;
+                }
+                this.initialized = true;
+                this.start();
+                return true;
+            }
+        } catch (e) {
+            console.error("Faceted initWithBridge failed:", e);
+        }
+        return false;
     }
 
-    /**
-     * Set active state
-     */
-    setActive(active) {
-        if (active) {
-            this.start();
-        } else {
-            this.stop();
+    async initialize(options = {}) {
+        if (this.initialized) return true;
+        const canvas = options.canvas ||
+                      document.getElementById('faceted-content-canvas') ||
+                      document.getElementById('content-canvas');
+        if (!canvas) {
+            console.warn("FacetedSystem: No canvas found for initialize()");
+            return false;
         }
+        return this.initWithBridge(canvas, {
+            preferWebGPU: options.preferWebGPU !== undefined ? options.preferWebGPU : true,
+            debug: options.debug || false
+        });
     }
 
-    /**
-     * Get the current rendering backend type
-     * @returns {'webgl'|'webgpu'|'direct-webgl'}
-     */
-    getBackendType() {
-        if (this._renderMode === 'bridge' && this._bridge) {
-            return this._bridge.getBackendType();
-        }
-        return 'direct-webgl';
+    // ─── Parameters ───
+
+    updateParameters(params) {
+        if (!params) return;
+        this.params = { ...this.params, ...params };
     }
 
     /**
-     * Build uniform object for current parameters
-     * @private
+     * Build the uniform object with proper u_ prefixed names for the shader.
      */
     _buildUniforms() {
+        const p = this.params;
         return {
-            u_time: this.time,
-            u_resolution: [this.canvas.width, this.canvas.height],
-            u_mouse: [this.parameters.mouseX || 0.5, this.parameters.mouseY || 0.5],
-            u_geometry: this.parameters.geometry,
-            u_rot4dXY: this.parameters.rot4dXY,
-            u_rot4dXZ: this.parameters.rot4dXZ,
-            u_rot4dYZ: this.parameters.rot4dYZ,
-            u_rot4dXW: this.parameters.rot4dXW,
-            u_rot4dYW: this.parameters.rot4dYW,
-            u_rot4dZW: this.parameters.rot4dZW,
-            u_dimension: this.parameters.dimension,
-            u_gridDensity: this.parameters.gridDensity,
-            u_morphFactor: this.parameters.morphFactor,
-            u_chaos: this.parameters.chaos,
-            u_speed: this.parameters.speed,
-            u_hue: this.parameters.hue,
-            u_intensity: this.parameters.intensity,
-            u_saturation: this.parameters.saturation,
-            u_mouseIntensity: this.parameters.mouseIntensity || 0,
-            u_clickIntensity: this.parameters.clickIntensity || 0,
-            u_roleIntensity: this.parameters.roleIntensity || 1.0,
-            u_bass: this.parameters.bass || 0,
-            u_mid: this.parameters.mid || 0,
-            u_high: this.parameters.high || 0
+            u_time: this._time,
+            u_resolution: [this.canvas?.width || 800, this.canvas?.height || 600],
+            u_geometry: p.geometry ?? 0,
+            u_rot4dXY: p.rot4dXY ?? 0,
+            u_rot4dXZ: p.rot4dXZ ?? 0,
+            u_rot4dYZ: p.rot4dYZ ?? 0,
+            u_rot4dXW: p.rot4dXW ?? 0,
+            u_rot4dYW: p.rot4dYW ?? 0,
+            u_rot4dZW: p.rot4dZW ?? 0,
+            u_dimension: p.dimension ?? 3.5,
+            u_gridDensity: p.gridDensity ?? 15,
+            u_morphFactor: p.morphFactor ?? 1.0,
+            u_chaos: p.chaos ?? 0.2,
+            u_speed: p.speed ?? 1.0,
+            u_hue: p.hue ?? 200,
+            u_intensity: p.intensity ?? 0.7,
+            u_saturation: p.saturation ?? 0.8,
+            u_mouseIntensity: p.mouseIntensity ?? 0,
+            u_clickIntensity: p.clickIntensity ?? 0,
+            u_bass: p.bass ?? 0,
+            u_mid: p.mid ?? 0,
+            u_high: p.high ?? 0,
+            u_breath: p.breath ?? 0,
+            u_mouse: p.mouse ?? [0.5, 0.5],
         };
     }
 
-    /**
-     * Render a single frame (bridge mode)
-     * @private
-     */
-    _renderBridgeFrame() {
-        if (!this._bridge) return;
-        this._bridge.setUniforms(this._buildUniforms());
-        this._bridge.render('faceted');
+    // ─── Render Loop ───
+
+    start() {
+        if (this._running) return;
+        this._running = true;
+        this._renderLoop();
     }
 
-    /**
-     * Render a single frame (direct WebGL mode)
-     * @private
-     */
-    _renderDirectFrame() {
-        if (!this.gl || !this.program || this._contextLost) return;
-        if (this.gl.isContextLost()) {
-            this._contextLost = true;
-            return;
+    stop() {
+        this._running = false;
+        if (this._animFrame) {
+            cancelAnimationFrame(this._animFrame);
+            this._animFrame = null;
         }
-
-        this.gl.useProgram(this.program);
-        this.gl.enable(this.gl.BLEND);
-        this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA);
-
-        this.gl.clearColor(0, 0, 0, 1);
-        this.gl.clear(this.gl.COLOR_BUFFER_BIT);
-
-        const uniforms = this._buildUniforms();
-
-        Object.entries(uniforms).forEach(([name, value]) => {
-            const location = this.gl.getUniformLocation(this.program, name);
-            if (location !== null) {
-                if (Array.isArray(value)) {
-                    this.gl.uniform2fv(location, value);
-                } else {
-                    this.gl.uniform1f(location, value);
-                }
-            }
-        });
-
-        // Draw fullscreen quad
-        const posLocation = this.gl.getAttribLocation(this.program, 'a_position');
-        this.gl.enableVertexAttribArray(posLocation);
-        this.gl.vertexAttribPointer(posLocation, 2, this.gl.FLOAT, false, 0, 0);
-        this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);
     }
 
-    /**
-     * Render a single frame
-     */
-    renderFrame() {
-        if (!this.isActive) return;
-
-        // Apply audio reactivity
-        if (window.audioEnabled && window.audioReactive) {
-            this.parameters.bass = window.audioReactive.bass || 0;
-            this.parameters.mid = window.audioReactive.mid || 0;
-            this.parameters.high = window.audioReactive.high || 0;
-        }
+    _renderLoop() {
+        if (!this._running) return;
 
-        this.time += 0.016 * this.parameters.speed;
+        this._time += 16.0 * (this.params.speed ?? 1.0);
 
-        if (this._renderMode === 'bridge') {
-            this._renderBridgeFrame();
-        } else {
-            this._renderDirectFrame();
+        if (this._useDirectGL) {
+            this._renderDirectGL();
+        } else if (this.bridge) {
+            this.bridge.setUniforms(this._buildUniforms());
+            this.bridge.render('faceted', { clear: true, clearColor: [0, 0, 0, 1] });
         }
+
+        this._animFrame = requestAnimationFrame(() => this._renderLoop());
     }
 
     /**
-     * Render loop
+     * Direct WebGL rendering — no bridge, just raw GL calls.
+     * Matches the original working FacetedSystem pattern.
      */
-    render(frameState = {}) {
-        // Apply frameState parameters if provided
-        if (frameState.params) {
-            Object.assign(this.parameters, frameState.params);
-        }
-        if (typeof frameState.time === 'number') {
-            this.time = frameState.time;
-        }
+    _renderDirectGL() {
+        const gl = this.gl;
+        if (!gl || !this.program) return;
 
-        this.renderFrame();
+        gl.useProgram(this.program);
+        gl.enable(gl.BLEND);
+        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        gl.clearColor(0, 0, 0, 1);
+        gl.clear(gl.COLOR_BUFFER_BIT);
 
-        if (this.isActive) {
-            requestAnimationFrame(() => this.render());
+        // Set uniforms
+        const uniforms = this._buildUniforms();
+        for (const [name, value] of Object.entries(uniforms)) {
+            const loc = this._uniformLocations[name];
+            if (loc === null || loc === undefined) continue;
+            if (Array.isArray(value)) {
+                if (value.length === 2) gl.uniform2fv(loc, value);
+                else if (value.length === 3) gl.uniform3fv(loc, value);
+                else if (value.length === 4) gl.uniform4fv(loc, value);
+            } else {
+                gl.uniform1f(loc, value);
+            }
         }
-    }
 
-    /**
-     * Update parameters with validation
-     */
-    updateParameters(params) {
-        if (!params || typeof params !== 'object') return;
-        for (const [key, value] of Object.entries(params)) {
-            // Only accept finite numbers to prevent NaN/Infinity reaching shaders
-            if (typeof value === 'number' && Number.isFinite(value)) {
-                this.parameters[key] = value;
-            }
+        // Draw fullscreen quad
+        gl.bindBuffer(gl.ARRAY_BUFFER, this._quadBuffer);
+        const posLoc = gl.getAttribLocation(this.program, 'a_position');
+        if (posLoc >= 0) {
+            gl.enableVertexAttribArray(posLoc);
+            gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0);
         }
+        gl.drawArrays(gl.TRIANGLES, 0, 6);
     }
 
-    // ============================================
-    // RendererContract Compliance Methods
-    // ============================================
-
-    /**
-     * Initialize the renderer (RendererContract.init)
-     * @param {Object} [context] - Optional context with canvas or canvasId
-     * @returns {boolean|Promise<boolean>} Success status
-     */
-    init(context = {}) {
-        const canvasOverride = context.canvas ||
-            (context.canvasId ? document.getElementById(context.canvasId) : null);
-
-        // If preferWebGPU is set and canvas is provided, use bridge mode
-        if (context.preferWebGPU && canvasOverride) {
-            return this.initWithBridge(canvasOverride, {
-                preferWebGPU: true,
-                debug: context.debug
-            });
+    render() {
+        if (this._useDirectGL) {
+            this._renderDirectGL();
+        } else if (this.bridge) {
+            this.bridge.setUniforms(this._buildUniforms());
+            this.bridge.render('faceted', { clear: true, clearColor: [0, 0, 0, 1] });
         }
+    }
 
-        return this.initialize(canvasOverride);
+    getBackendType() {
+        if (this._useDirectGL) return 'webgl';
+        return this.bridge ? this.bridge.getBackendType() : 'none';
     }
 
-    /**
-     * Handle canvas resize (RendererContract.resize)
-     * @param {number} width
-     * @param {number} height
-     * @param {number} [pixelRatio=1]
-     */
-    resize(width, height, pixelRatio = 1) {
-        if (!this.canvas) return;
-
-        if (this._renderMode === 'bridge' && this._bridge) {
-            this._bridge.resize(width, height, pixelRatio);
-        } else if (this.gl) {
-            this.canvas.width = width * pixelRatio;
-            this.canvas.height = height * pixelRatio;
-            this.canvas.style.width = `${width}px`;
-            this.canvas.style.height = `${height}px`;
-            this.gl.viewport(0, 0, this.canvas.width, this.canvas.height);
-        }
+    setActive(active) {
+        if (active) this.start();
+        else this.stop();
+        const layer = document.getElementById('faceted-layer');
+        if (layer) layer.style.display = active ? 'block' : 'none';
     }
 
-    /**
-     * Clean up all resources (RendererContract.dispose)
-     */
-    dispose() {
-        this.isActive = false;
+    init(context = {}) { return this.initialize(context); }
 
-        // Remove context loss listeners
+    resize(width, height, pixelRatio = 1) {
+        const w = Math.floor(width * pixelRatio);
+        const h = Math.floor(height * pixelRatio);
         if (this.canvas) {
-            if (this._onContextLost) {
-                this.canvas.removeEventListener('webglcontextlost', this._onContextLost);
-            }
-            if (this._onContextRestored) {
-                this.canvas.removeEventListener('webglcontextrestored', this._onContextRestored);
-            }
+            this.canvas.width = w;
+            this.canvas.height = h;
         }
-
-        if (this._bridge) {
-            this._bridge.dispose();
-            this._bridge = null;
+        if (this._useDirectGL && this.gl) {
+            this.gl.viewport(0, 0, w, h);
+        } else if (this.bridge && this.bridge.resize) {
+            this.bridge.resize(width, height, pixelRatio);
         }
+    }
 
-        if (this.gl && !this.gl.isContextLost()) {
-            if (this.program) {
-                this.gl.deleteProgram(this.program);
-            }
-        }
-        this.program = null;
+    dispose() { this.destroy(); }
 
-        if (this.gl) {
-            const loseContext = this.gl.getExtension('WEBGL_lose_context');
-            if (loseContext) {
-                loseContext.loseContext();
-            }
+    destroy() {
+        this.stop();
+        if (this._useDirectGL && this.gl) {
+            if (this.program) this.gl.deleteProgram(this.program);
+            if (this._quadBuffer) this.gl.deleteBuffer(this._quadBuffer);
             this.gl = null;
+            this.program = null;
+            this._quadBuffer = null;
         }
-
-        this.canvas = null;
-        this._renderMode = 'direct';
-        this._contextLost = true;
-        console.log('Faceted System disposed');
-    }
-
-    /**
-     * Alias for dispose (for backward compatibility)
-     */
-    destroy() {
-        this.dispose();
+        if (this.bridge) {
+            this.bridge.dispose();
+            this.bridge = null;
+        }
+        this.initialized = false;
+        this._useDirectGL = false;
     }
 }