vr.js

import * as THREE from 'three';
import * as xb from 'xrblocks';

// ==========================================
// GLSL SHADERS (Optimized for WebXR Stereo)
// ==========================================

const patternVertexShader = `
    varying vec2 vUv;
    varying vec3 vPosition;
    varying vec3 vWorldPosition;
    void main() {
        vUv = uv;
        vPosition = position;
        vec4 worldPosition = modelMatrix * vec4(position, 1.0);
        vWorldPosition = worldPosition.xyz;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
`;

const patternFragmentShader = `
    uniform float time;
    uniform float intensity;
    uniform vec3 baseColor;
    uniform float roomTheme;
    varying vec2 vUv;
    varying vec3 vPosition;
    varying vec3 vWorldPosition;
    
    float noise(vec2 p) {
        return fract(sin(dot(p.xy, vec2(12.9898, 78.233))) * 43758.5453);
    }
    
    float fbm(vec2 p) {
        float f = 0.0;
        f += 0.5000 * noise(p); p = p * 2.01;
        f += 0.2500 * noise(p); p = p * 2.02;
        f += 0.1250 * noise(p); p = p * 2.03;
        f += 0.0625 * noise(p);
        return f;
    }
    
    vec3 createMirrorEffect(vec2 uv, float t, float intensity) {
        vec3 glassyAluminum = vec3(0.95, 0.97, 1.0);
        
        vec2 refraction = vec2(
            sin(uv.x * 40.0 + t * 2.5) * 0.005,
            cos(uv.y * 35.0 + t * 2.0) * 0.005
        );
        vec2 glossyUV = uv + refraction;
        
        vec2 center = vec2(0.5, 0.5);
        float glassFresnel = pow(1.0 - dot(normalize(vec3(uv - center, 0.1)), vec3(0.0, 0.0, 1.0)), 3.0);
        glassFresnel = clamp(glassFresnel, 0.3, 1.0);
        
        float dispersion = sin(glossyUV.x * 50.0 + t * 3.0) * cos(glossyUV.y * 45.0 + t * 2.5);
        vec3 spectrum = vec3(
            sin(dispersion * 3.14159 + t) * 0.5 + 0.5,
            sin(dispersion * 3.14159 + t + 2.09) * 0.5 + 0.5,
            sin(dispersion * 3.14159 + t + 4.19) * 0.5 + 0.5
        ) * 0.15;
        
        float sparkle1 = noise(glossyUV * 150.0 + t * 10.0);
        sparkle1 = pow(max(sparkle1 - 0.8, 0.0) * 5.0, 4.0);
        
        float sparkle2 = noise(glossyUV * 120.0 + t * 8.0 + vec2(100.0));
        sparkle2 = pow(max(sparkle2 - 0.85, 0.0) * 6.67, 6.0);
        
        float specular1 = sin(glossyUV.x * 20.0 + t * 4.0) * cos(glossyUV.y * 18.0 + t * 3.5);
        specular1 = pow(max(specular1, 0.0), 25.0) * 1.5;
        
        vec3 finalColor = glassyAluminum * glassFresnel + spectrum + vec3(sparkle1 + sparkle2) * 2.0 + vec3(specular1);
        finalColor *= (1.8 + intensity * 0.8);
        return clamp(finalColor, 0.0, 1.0);
    }
    
    void main() {
        vec2 uv = vUv * 20.0;
        float t = time * 0.8 + roomTheme * 15.0;
        
        vec2 morphedUV = uv + vec2(
            sin(uv.y * 6.0 + t) * 0.5 * intensity,
            cos(uv.x * 4.0 + t * 2.0) * 0.5 * intensity
        ) + vec2(
            sin(uv.x * 8.0 + t * 1.3) * 0.2,
            cos(uv.y * 10.0 + t * 0.7) * 0.2
        );
        
        float pattern1 = 0.0, pattern2 = 0.0;
        
        if (roomTheme < 1.0) {
            vec2 center = vec2(10.0, 10.0);
            float angle = atan(morphedUV.y - center.y, morphedUV.x - center.x);
            float radius = length(morphedUV - center);
            float spiral = angle + radius * 0.3 - t * 3.0;
            float hypnoticRings = sin(radius * 4.0 - t * 2.0) * 0.5 + 0.5;
            float spiralWave = sin(spiral * 8.0) * 0.5 + 0.5;
            pattern1 = mix(hypnoticRings, spiralWave, sin(t * 0.5) * 0.5 + 0.5);
            pattern2 = sin(angle * 12.0 + radius * 2.0 - t * 4.0) * cos(radius * 6.0 + t * 2.5);
        } else if (roomTheme < 2.0) {
            vec2 center1 = vec2(8.0, 8.0);
            vec2 center2 = vec2(12.0, 12.0);
            float angle1 = atan(morphedUV.y - center1.y, morphedUV.x - center1.x);
            float radius1 = length(morphedUV - center1);
            float angle2 = atan(morphedUV.y - center2.y, morphedUV.x - center2.x);
            float radius2 = length(morphedUV - center2);
            float spiral1 = sin(angle1 * 10.0 + radius1 * 3.0 - t * 4.0);
            float spiral2 = cos(angle2 * 8.0 - radius2 * 2.5 + t * 3.5);
            pattern1 = (spiral1 + spiral2) * 0.5;
            pattern2 = sin(radius1 * 5.0 - t * 3.0) * cos(radius2 * 4.0 + t * 2.0);
        } else if (roomTheme < 3.0) {
            float angle = atan(morphedUV.y - 10.0, morphedUV.x - 10.0);
            float radius = length(morphedUV - vec2(10.0));
            pattern1 = step(0.5, mod(morphedUV.x + t + sin(angle * 4.0), 1.0)) * step(0.5, mod(morphedUV.y + t * 1.3, 0.8));
            pattern2 = sin(angle * 16.0 + radius * 2.0 - t * 5.0) * step(0.3, mod(radius + t, 1.2));
        } else {
            vec2 center = vec2(10.0, 10.0);
            float angle = atan(morphedUV.y - center.y, morphedUV.x - center.x);
            float radius = length(morphedUV - center);
            float radialLines = sin(angle * 24.0 + t * 2.0) * 0.5 + 0.5;
            float concentricCircles = sin(radius * 8.0 - t * 4.0) * 0.5 + 0.5;
            pattern1 = mix(radialLines, concentricCircles, sin(t * 0.3) * 0.5 + 0.5);
            pattern2 = fbm(morphedUV * 0.8 + t * 0.1);
        }
        
        float pattern3 = sin(length(morphedUV - vec2(10.0)) * 16.0 - t * 6.0) * cos(length(morphedUV - vec2(5.0)) * 12.0 + t * 4.0);
        float noisePattern = fbm(morphedUV + t * 0.2) * 2.0 - 1.0;
        
        float combined = (pattern1 + pattern2 + pattern3 + noisePattern) * 0.25;
        combined = smoothstep(-0.8, 0.8, combined);
        
        vec2 center = vec2(0.5, 0.5);
        float distanceFromCenter = length(vUv - center);
        float circleMask = smoothstep(0.4, 0.35, distanceFromCenter);
        
        vec3 psychedelicColor = mix(baseColor, vec3(combined), 0.7);
        psychedelicColor += vec3(
            sin(t + morphedUV.x * 2.0) * 0.3,
            cos(t * 1.3 + morphedUV.y * 2.0) * 0.3,
            sin(t * 0.7 + (morphedUV.x + morphedUV.y)) * 0.3
        ) * intensity;
        
        vec3 mirrorColor = createMirrorEffect(vUv, t, intensity);
        vec3 finalColor = mix(mirrorColor, psychedelicColor, circleMask);
        
        gl_FragColor = vec4(finalColor, 1.0);
    }
`;

const crystalVertexShader = `
    varying vec2 vUv;
    varying vec3 vNormal;
    varying vec3 vViewPosition;
    void main() {
        vUv = uv;
        vNormal = normalize(normalMatrix * normal);
        vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
        vViewPosition = -mvPosition.xyz;
        gl_Position = projectionMatrix * mvPosition;
    }
`;

const crystalFragmentShader = `
    uniform float time;
    uniform float intensity;
    uniform vec3 crystalColor;
    varying vec2 vUv;
    varying vec3 vNormal;
    varying vec3 vViewPosition;
    void main() {
        vec3 normal = normalize(vNormal);
        vec3 viewDir = normalize(vViewPosition);
        float fresnel = pow(1.0 - max(dot(normal, viewDir), 0.0), 2.5);
        
        float pulse = sin(time * 4.0) * 0.5 + 0.5;
        vec3 glow = crystalColor * (0.8 + pulse * 0.4 + intensity * 0.8);
        vec3 edgeGlow = vec3(0.0, 1.0, 1.0) * fresnel * 2.0;
        
        gl_FragColor = vec4(glow + edgeGlow, 0.85);
    }
`;

// ==========================================
// MAZE CONFIGURATION & DEFINITIONS
// ==========================================

const mazeLayout = [
    [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
    [1,2,0,2,0,1,0,2,0,1,0,2,0,1,0,2,0,1,0,2,1],
    [1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1],
    [1,2,0,2,0,0,0,2,0,0,0,2,0,0,0,2,0,0,0,2,1],
    [1,0,1,0,1,1,1,0,1,1,1,0,1,1,1,0,1,1,1,0,1],
    [1,2,0,0,0,2,0,0,0,2,0,0,0,2,0,0,0,2,0,2,1],
    [1,0,1,1,1,0,1,1,1,0,1,1,1,0,1,1,1,0,1,0,1],
    [1,2,0,2,0,2,0,2,0,2,0,2,0,2,0,2,0,2,0,2,1],
    [1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1],
    [1,2,0,0,0,2,0,0,0,2,0,0,0,2,0,0,0,2,0,2,1],
    [1,0,1,1,1,0,1,0,1,0,1,0,1,0,1,1,1,0,1,0,1],
    [1,2,0,2,0,1,0,2,0,1,0,2,0,1,0,2,0,1,0,2,1],
    [1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1],
    [1,2,0,2,0,0,0,2,0,0,0,2,0,0,0,2,0,0,0,2,1],
    [1,0,1,0,1,1,1,0,1,1,1,0,1,1,1,0,1,1,1,0,1],
    [1,2,0,2,0,0,0,2,0,0,0,2,0,0,0,2,0,0,0,2,1],
    [1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1],
    [1,2,0,2,0,1,0,2,0,1,0,2,0,1,0,2,0,1,0,2,1],
    [1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1],
    [1,2,0,0,0,2,0,0,0,2,0,0,0,2,0,0,0,2,0,2,1],
    [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
];

const ROOM_THEMES = [
    'Hypnotic Swirl',
    'Multi Vortex',
    'Checkerboard Vortex',
    'Radial Hypnotic Wave'
];

// ==========================================
// MAIN XR BLOCKS APPLICATION SCRIPT
// ==========================================

export class NullVRExperience extends xb.Script {
    constructor() {
        super();
        this.cellSize = 4;
        this.wallHeight = 4;
        this.chunkSize = mazeLayout[0].length;
        this.renderDistance = 1;
        
        this.time = 0;
        this.intensity = 0;
        this.isResonating = false;
        this.isFlying = false;
        this.currentRoom = 1;
        this.currentRoomTheme = 0;
        
        // Player state
        this.playerPos = new THREE.Vector3(4 * this.cellSize, 0, 4 * this.cellSize);
        this.playerYaw = 0;
        this.flyVelocityY = 0;
        
        // Materials & Chunks
        this.materialPool = new Map();
        this.loadedChunks = new Map();
        this.roomMap = new Map();
        this.interactiveCrystals = [];
        this.coloredLights = [];
        
        // Keyboard controls
        this.keys = {
            KeyW: false, KeyS: false, KeyA: false, KeyD: false,
            ArrowUp: false, ArrowDown: false, ArrowLeft: false, ArrowRight: false,
            Space: false, ShiftLeft: false, ShiftRight: false
        };
        this.lastShiftTime = 0;
        
        // Snap turn cooldown
        this.lastSnapTurnTime = 0;
        this.snapTurnCooldown = 300; // ms
        
        // Shared Uniforms
        this.sharedUniforms = {
            time: { value: 0 },
            intensity: { value: 0 }
        };
        
        // Audio
        this.isAudioStarted = false;
        this.audioMuted = false;
        this.ambientVoices = [];
        this.dynamicOscillators = [];
        this.frictionSounds = [];
        this.noiseGenerators = [];
        this.isCollidingX = false;
        this.isCollidingZ = false;
        this.movementIntensity = 0;
        this.lastTrackedPos = { x: this.playerPos.x, z: this.playerPos.z };
    }

    async init() {
        console.log('🌌 [NullVRExperience] Initializing Google XR Blocks VR Engine...');
        
        // 1. Shared Geometries
        this.sharedFloorGeometry = new THREE.PlaneGeometry(this.cellSize, this.cellSize);
        this.sharedWallGeometry = new THREE.PlaneGeometry(this.cellSize, this.wallHeight);
        this.sharedBlockGeometry = new THREE.BoxGeometry(this.cellSize, this.wallHeight, this.cellSize);
        this.sharedCrystalGeometry = new THREE.OctahedronGeometry(0.5, 0);
        this.blackMaterial = new THREE.MeshBasicMaterial({ color: 0x000000, side: THREE.DoubleSide });

        // 2. Scene hierarchy container
        this.mazeGroup = new THREE.Group();
        this.add(this.mazeGroup);

        // 3. Dynamic Orbiting Lights
        const ambientLight = new THREE.AmbientLight(0x404040, 0.7);
        this.add(ambientLight);

        const lightColors = [0x00ffff, 0xff00ff, 0xffff00, 0x00ff00, 0xff8000, 0x8000ff, 0xff0080, 0x0080ff];
        for (let i = 0; i < 8; i++) {
            const light = new THREE.PointLight(lightColors[i], 3, 22);
            this.add(light);
            this.coloredLights.push(light);
        }

        // 4. Initial Maze Generation around spawn
        this.updateChunks();

        // 5. Create 3D Spatial Wrist HUD (attached to user / in VR space)
        this.createSpatialHUD();

        // 6. Setup Event Listeners (Keyboard, Touch, WebXR Gamepad / Gestures)
        this.setupInputListeners();
        this.setupDOMUI();

        // 7. Initialize player position in XR Blocks rig
        this.syncPlayerTransform();

        console.log('✨ [NullVRExperience] Ready! Spawned at Room 1');
    }

    // ==========================================
    // MATERIAL MANAGEMENT
    // ==========================================

    getMaterialKey(baseColor, roomTheme) {
        return `${baseColor.x.toFixed(2)}_${baseColor.y.toFixed(2)}_${baseColor.z.toFixed(2)}_${roomTheme}`;
    }

    createPatternMaterial(baseColor, roomTheme) {
        const key = this.getMaterialKey(baseColor, roomTheme);
        if (this.materialPool.has(key)) {
            return this.materialPool.get(key);
        }

        const material = new THREE.ShaderMaterial({
            uniforms: {
                time: this.sharedUniforms.time,
                intensity: this.sharedUniforms.intensity,
                baseColor: { value: baseColor },
                roomTheme: { value: roomTheme }
            },
            vertexShader: patternVertexShader,
            fragmentShader: patternFragmentShader,
            side: THREE.DoubleSide
        });

        this.materialPool.set(key, material);
        return material;
    }

    createCrystalMaterial(color) {
        return new THREE.ShaderMaterial({
            uniforms: {
                time: this.sharedUniforms.time,
                intensity: this.sharedUniforms.intensity,
                crystalColor: { value: color }
            },
            vertexShader: crystalVertexShader,
            fragmentShader: crystalFragmentShader,
            transparent: true,
            side: THREE.DoubleSide
        });
    }

    // ==========================================
    // PROCEDURAL MAZE & CHUNK STREAMING
    // ==========================================

    createWall(x, z, direction) {
        const seed = x * 1000 + z;
        const colorIndex = Math.abs(seed) % 5;
        const themeIndex = Math.abs(seed) % 4;

        const colors = [
            new THREE.Vector3(0.6, 0.4, 0.8),
            new THREE.Vector3(0.8, 0.6, 0.4),
            new THREE.Vector3(0.4, 0.8, 0.6),
            new THREE.Vector3(0.7, 0.5, 0.7),
            new THREE.Vector3(0.5, 0.7, 0.8)
        ];

        const wallMaterial = this.createPatternMaterial(colors[colorIndex], themeIndex);
        const wall = new THREE.Mesh(this.sharedWallGeometry, wallMaterial);

        if (direction === 'north') {
            wall.position.set(x * this.cellSize, 0, (z - 0.5) * this.cellSize);
        } else if (direction === 'south') {
            wall.position.set(x * this.cellSize, 0, (z + 0.5) * this.cellSize);
            wall.rotation.y = Math.PI;
        } else if (direction === 'east') {
            wall.position.set((x + 0.5) * this.cellSize, 0, z * this.cellSize);
            wall.rotation.y = -Math.PI / 2;
        } else if (direction === 'west') {
            wall.position.set((x - 0.5) * this.cellSize, 0, z * this.cellSize);
            wall.rotation.y = Math.PI / 2;
        }

        return wall;
    }

    createRoom(worldX, worldZ, theme, mazeX, mazeZ) {
        const roomGroup = new THREE.Group();

        // Floor & Ceiling
        const floor = new THREE.Mesh(this.sharedFloorGeometry, this.blackMaterial);
        floor.rotation.x = -Math.PI / 2;
        floor.position.set(worldX * this.cellSize, -this.wallHeight / 2, worldZ * this.cellSize);
        roomGroup.add(floor);

        const ceiling = new THREE.Mesh(this.sharedFloorGeometry, this.blackMaterial);
        ceiling.rotation.x = Math.PI / 2;
        ceiling.position.set(worldX * this.cellSize, this.wallHeight / 2, worldZ * this.cellSize);
        roomGroup.add(ceiling);

        const wallColors = [
            new THREE.Vector3(0.8, 0.3, 0.5),
            new THREE.Vector3(0.3, 0.8, 0.5),
            new THREE.Vector3(0.5, 0.3, 0.8),
            new THREE.Vector3(0.8, 0.8, 0.3)
        ];

        const hasNorthOpening = mazeZ > 0 && mazeLayout[mazeZ - 1][mazeX] === 0;
        const hasSouthOpening = mazeZ < mazeLayout.length - 1 && mazeLayout[mazeZ + 1][mazeX] === 0;
        const hasEastOpening = mazeX < mazeLayout[0].length - 1 && mazeLayout[mazeZ][mazeX + 1] === 0;
        const hasWestOpening = mazeX > 0 && mazeLayout[mazeZ][mazeX - 1] === 0;

        if (!hasNorthOpening) {
            const northWall = new THREE.Mesh(this.sharedWallGeometry, this.createPatternMaterial(wallColors[0], theme));
            northWall.position.set(worldX * this.cellSize, 0, (worldZ - 0.5) * this.cellSize);
            roomGroup.add(northWall);
        }
        if (!hasSouthOpening) {
            const southWall = new THREE.Mesh(this.sharedWallGeometry, this.createPatternMaterial(wallColors[1], theme));
            southWall.position.set(worldX * this.cellSize, 0, (worldZ + 0.5) * this.cellSize);
            southWall.rotation.y = Math.PI;
            roomGroup.add(southWall);
        }
        if (!hasEastOpening) {
            const eastWall = new THREE.Mesh(this.sharedWallGeometry, this.createPatternMaterial(wallColors[2], theme));
            eastWall.position.set((worldX + 0.5) * this.cellSize, 0, worldZ * this.cellSize);
            eastWall.rotation.y = -Math.PI / 2;
            roomGroup.add(eastWall);
        }
        if (!hasWestOpening) {
            const westWall = new THREE.Mesh(this.sharedWallGeometry, this.createPatternMaterial(wallColors[3], theme));
            westWall.position.set((worldX - 0.5) * this.cellSize, 0, worldZ * this.cellSize);
            westWall.rotation.y = Math.PI / 2;
            roomGroup.add(westWall);
        }

        // Add Interactive Floating VR Crystal in the center of the room!
        const crystalColor = new THREE.Vector3(
            0.5 + Math.sin(theme * 2.0) * 0.5,
            0.5 + Math.cos(theme * 3.0) * 0.5,
            1.0
        );
        const crystalMat = this.createCrystalMaterial(crystalColor);
        const crystal = new THREE.Mesh(this.sharedCrystalGeometry, crystalMat);
        crystal.position.set(worldX * this.cellSize, 0, worldZ * this.cellSize);
        crystal.userData = {
            isCrystal: true,
            roomIndex: this.roomMap.size + 1,
            themeIndex: theme,
            baseY: 0
        };
        roomGroup.add(crystal);
        this.interactiveCrystals.push(crystal);

        return roomGroup;
    }

    createMazeChunk(chunkX, chunkZ) {
        const chunkGroup = new THREE.Group();

        for (let z = 0; z < mazeLayout.length; z++) {
            for (let x = 0; x < mazeLayout[z].length; x++) {
                const cell = mazeLayout[z][x];
                const worldX = chunkX * this.chunkSize + x - Math.floor(mazeLayout[0].length / 2);
                const worldZ = chunkZ * this.chunkSize + z - Math.floor(mazeLayout.length / 2);

                if (cell === 2) { // Room
                    const theme = (this.roomMap.size + chunkX + chunkZ) % 4;
                    const room = this.createRoom(worldX, worldZ, theme, x, z);
                    chunkGroup.add(room);
                    this.roomMap.set(`${worldX},${worldZ}`, {
                        id: this.roomMap.size + 1,
                        theme: theme
                    });
                } else if (cell === 1) { // Wall block
                    const wallSeed = (worldX + chunkX * 100) * 1000 + (worldZ + chunkZ * 100);
                    const wallColorIndex = Math.abs(wallSeed) % 3;
                    const wallThemeIndex = Math.abs(wallSeed) % 4;
                    const wallColors = [
                        new THREE.Vector3(0.3, 0.2, 0.4),
                        new THREE.Vector3(0.4, 0.3, 0.5),
                        new THREE.Vector3(0.5, 0.2, 0.3)
                    ];

                    const wallBlock = new THREE.Mesh(
                        this.sharedBlockGeometry,
                        this.createPatternMaterial(wallColors[wallColorIndex], wallThemeIndex)
                    );
                    wallBlock.position.set(worldX * this.cellSize, 0, worldZ * this.cellSize);
                    chunkGroup.add(wallBlock);
                }
            }
        }

        // Passages
        for (let z = 0; z < mazeLayout.length; z++) {
            for (let x = 0; x < mazeLayout[z].length; x++) {
                const cell = mazeLayout[z][x];
                const worldX = chunkX * this.chunkSize + x - Math.floor(mazeLayout[0].length / 2);
                const worldZ = chunkZ * this.chunkSize + z - Math.floor(mazeLayout.length / 2);

                if (cell === 0) {
                    if (z > 0 && mazeLayout[z - 1][x] === 1) chunkGroup.add(this.createWall(worldX, worldZ, 'north'));
                    if (z < mazeLayout.length - 1 && mazeLayout[z + 1][x] === 1) chunkGroup.add(this.createWall(worldX, worldZ, 'south'));
                    if (x > 0 && mazeLayout[z][x - 1] === 1) chunkGroup.add(this.createWall(worldX, worldZ, 'west'));
                    if (x < mazeLayout[z].length - 1 && mazeLayout[z][x + 1] === 1) chunkGroup.add(this.createWall(worldX, worldZ, 'east'));
                }
            }
        }

        return chunkGroup;
    }

    updateChunks() {
        const playerChunkX = Math.floor(this.playerPos.x / (this.cellSize * this.chunkSize));
        const playerChunkZ = Math.floor(this.playerPos.z / (this.cellSize * this.chunkSize));

        for (let dx = -this.renderDistance; dx <= this.renderDistance; dx++) {
            for (let dz = -this.renderDistance; dz <= this.renderDistance; dz++) {
                const chunkX = playerChunkX + dx;
                const chunkZ = playerChunkZ + dz;
                const key = `${chunkX},${chunkZ}`;

                if (!this.loadedChunks.has(key)) {
                    const chunk = this.createMazeChunk(chunkX, chunkZ);
                    this.mazeGroup.add(chunk);
                    this.loadedChunks.set(key, chunk);
                }
            }
        }

        // Unload distant chunks
        for (const [key, chunk] of this.loadedChunks.entries()) {
            const [chunkX, chunkZ] = key.split(',').map(Number);
            const dist = Math.max(Math.abs(chunkX - playerChunkX), Math.abs(chunkZ - playerChunkZ));
            if (dist > this.renderDistance + 1) {
                this.mazeGroup.remove(chunk);
                this.loadedChunks.delete(key);
            }
        }
    }

    isWalkable(x, z) {
        const mapX = Math.round(x / this.cellSize) + Math.floor(mazeLayout[0].length / 2);
        const mapZ = Math.round(z / this.cellSize) + Math.floor(mazeLayout.length / 2);

        const wrappedX = ((mapX % mazeLayout[0].length) + mazeLayout[0].length) % mazeLayout[0].length;
        const wrappedZ = ((mapZ % mazeLayout.length) + mazeLayout.length) % mazeLayout.length;

        return mazeLayout[wrappedZ][wrappedX] !== 1;
    }

    // ==========================================
    // PROCEDURAL AUDIO SYSTEM
    // ==========================================

    startAudio() {
        if (this.isAudioStarted) return;
        try {
            const AudioContextClass = window.AudioContext || window.webkitAudioContext;
            this.audioContext = new AudioContextClass();
            this.masterGain = this.audioContext.createGain();
            this.masterGain.gain.value = 0.35;
            this.masterGain.connect(this.audioContext.destination);

            // Ambient Voices
            const frequencies = [130.81, 164.81, 196.00, 246.94, 293.66];
            this.ambientVoices = frequencies.map((freq, i) => this.createAmbientVoice(freq, i));

            // Rain & Water
            this.rainSound = this.createRainSound();
            this.waterSound = this.createWaterSound();

            // Dynamic Oscillators & Friction
            this.createDynamicOscillators();
            this.createFrictionSounds();
            this.createNoiseGenerators();

            this.isAudioStarted = true;
            console.log('🎵 [NullVRExperience] Spatial Web Audio System Started');
        } catch (e) {
            console.warn('Audio initiation deferred until user gesture:', e);
        }
    }

    createAmbientVoice(baseFreq, voiceIndex) {
        const ctx = this.audioContext;
        const osc1 = ctx.createOscillator();
        const osc2 = ctx.createOscillator();
        osc1.type = 'triangle';
        osc2.type = 'sine';
        osc1.frequency.value = baseFreq;
        osc2.frequency.value = baseFreq * 1.007;

        const lfo = ctx.createOscillator();
        const lfoGain = ctx.createGain();
        lfo.type = 'sine';
        lfo.frequency.value = 0.1 + voiceIndex * 0.05;
        lfoGain.gain.value = 2;
        lfo.connect(lfoGain);
        lfoGain.connect(osc1.frequency);
        lfoGain.connect(osc2.frequency);

        const filter = ctx.createBiquadFilter();
        filter.type = 'lowpass';
        filter.frequency.value = 800 + voiceIndex * 200;
        filter.Q.value = 1.2;

        const voiceGain = ctx.createGain();
        voiceGain.gain.value = 0.15;

        const delay = ctx.createDelay();
        const delayFeedback = ctx.createGain();
        const delayMix = ctx.createGain();
        delay.delayTime.value = 0.3 + voiceIndex * 0.1;
        delayFeedback.gain.value = 0.3;
        delayMix.gain.value = 0.35;

        osc1.connect(filter);
        osc2.connect(filter);
        filter.connect(voiceGain);
        voiceGain.connect(delay);
        delay.connect(delayFeedback);
        delayFeedback.connect(delay);
        delay.connect(delayMix);

        voiceGain.connect(this.masterGain);
        delayMix.connect(this.masterGain);

        osc1.start();
        osc2.start();
        lfo.start();

        return { voiceGain, filter, delay, delayMix };
    }

    createRainSound() {
        const ctx = this.audioContext;
        const bufferSize = ctx.sampleRate * 2;
        const noiseBuffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate);
        const output = noiseBuffer.getChannelData(0);
        for (let i = 0; i < bufferSize; i++) output[i] = Math.random() * 2 - 1;

        const whiteNoise = ctx.createBufferSource();
        whiteNoise.buffer = noiseBuffer;
        whiteNoise.loop = true;

        const filter = ctx.createBiquadFilter();
        filter.type = 'lowpass';
        filter.frequency.value = 2800;

        const gain = ctx.createGain();
        gain.gain.value = 0.1;

        whiteNoise.connect(filter);
        filter.connect(gain);
        gain.connect(this.masterGain);
        whiteNoise.start();

        return { gain, filter };
    }

    createWaterSound() {
        const ctx = this.audioContext;
        const bufferSize = ctx.sampleRate * 3;
        const noiseBuffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate);
        const output = noiseBuffer.getChannelData(0);
        let prev = 0;
        for (let i = 0; i < bufferSize; i++) {
            const raw = Math.random() * 2 - 1;
            output[i] = prev * 0.7 + raw * 0.3;
            prev = output[i];
        }

        const waterNoise = ctx.createBufferSource();
        waterNoise.buffer = noiseBuffer;
        waterNoise.loop = true;

        const filter = ctx.createBiquadFilter();
        filter.type = 'bandpass';
        filter.frequency.value = 750;
        filter.Q.value = 2.5;

        const gain = ctx.createGain();
        gain.gain.value = 0.08;

        waterNoise.connect(filter);
        filter.connect(gain);
        gain.connect(this.masterGain);
        waterNoise.start();

        return { gain, filter };
    }

    createDynamicOscillators() {
        const ctx = this.audioContext;
        const baseFrequencies = [80, 120, 160, 200];
        for (let i = 0; i < 4; i++) {
            const osc = ctx.createOscillator();
            const gain = ctx.createGain();
            const filter = ctx.createBiquadFilter();
            osc.type = ['sine', 'triangle', 'sawtooth', 'square'][i % 4];
            osc.frequency.value = baseFrequencies[i];
            filter.type = 'lowpass';
            filter.frequency.value = 1000 + i * 400;
            gain.gain.value = 0;

            osc.connect(filter);
            filter.connect(gain);
            gain.connect(this.masterGain);
            osc.start();

            this.dynamicOscillators.push({ osc, gain, filter });
        }
    }

    createFrictionSounds() {
        const ctx = this.audioContext;
        for (let i = 0; i < 2; i++) {
            const bufferSize = ctx.sampleRate * 0.5;
            const noiseBuffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate);
            const output = noiseBuffer.getChannelData(0);
            for (let j = 0; j < bufferSize; j++) output[j] = Math.random() * 2 - 1;

            const noise = ctx.createBufferSource();
            noise.buffer = noiseBuffer;
            noise.loop = true;

            const filter = ctx.createBiquadFilter();
            filter.type = 'bandpass';
            filter.frequency.value = 2200 + i * 800;

            const gain = ctx.createGain();
            gain.gain.value = 0;

            noise.connect(filter);
            filter.connect(gain);
            gain.connect(this.masterGain);
            noise.start();

            this.frictionSounds.push({ gain, filter });
        }
    }

    createNoiseGenerators() {
        const ctx = this.audioContext;
        for (let i = 0; i < 2; i++) {
            const bufferSize = ctx.sampleRate * 0.25;
            const noiseBuffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate);
            const output = noiseBuffer.getChannelData(0);
            for (let j = 0; j < bufferSize; j++) output[j] = Math.random() * 2 - 1;

            const source = ctx.createBufferSource();
            source.buffer = noiseBuffer;
            source.loop = true;

            const filter = ctx.createBiquadFilter();
            filter.type = 'highpass';
            filter.frequency.value = 1800;

            const gain = ctx.createGain();
            gain.gain.value = 0;

            source.connect(filter);
            filter.connect(gain);
            gain.connect(this.masterGain);
            source.start();

            this.noiseGenerators.push({ gain, filter, lastTrigger: 0 });
        }
    }

    playCrystalChime(pitchMultiplier = 1.0) {
        if (!this.isAudioStarted || !this.audioContext || this.audioMuted) return;
        const ctx = this.audioContext;
        const now = ctx.currentTime;
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();

        osc.type = 'sine';
        osc.frequency.setValueAtTime(523.25 * pitchMultiplier, now); // C5
        osc.frequency.exponentialRampToValueAtTime(1046.50 * pitchMultiplier, now + 0.3);

        gain.gain.setValueAtTime(0.2, now);
        gain.gain.exponentialRampToValueAtTime(0.001, now + 1.2);

        osc.connect(gain);
        gain.connect(this.masterGain);
        osc.start(now);
        osc.stop(now + 1.2);
    }

    updateAudio() {
        if (!this.isAudioStarted || !this.audioContext || this.audioMuted) return;
        const now = this.audioContext.currentTime;

        // Ambient Voices modulation
        this.ambientVoices.forEach((voice, index) => {
            if (voice?.voiceGain && voice?.filter) {
                const targetVol = 0.15 + this.intensity * 0.12;
                voice.voiceGain.gain.setTargetAtTime(targetVol, now, 0.1);
                const targetFreq = 600 + index * 150 + this.intensity * 500;
                voice.filter.frequency.setTargetAtTime(targetFreq, now, 0.2);
            }
        });

        // Rain & Water modulation
        if (this.rainSound?.gain) {
            this.rainSound.gain.gain.setTargetAtTime(0.1 + this.intensity * 0.08, now, 0.2);
        }
        if (this.waterSound?.gain) {
            this.waterSound.gain.gain.setTargetAtTime(0.08 + this.intensity * 0.06, now, 0.2);
        }

        // Friction sound on wall collision
        if (this.frictionSounds[0]?.gain) {
            const targetVol = (this.isCollidingX || this.isCollidingZ) ? 0.12 : 0;
            this.frictionSounds[0].gain.gain.setTargetAtTime(targetVol, now, 0.05);
        }
    }

    // ==========================================
    // SPATIAL 3D HUD & HOLOGRAM UI
    // ==========================================

    createSpatialHUD() {
        this.hudCanvas = document.createElement('canvas');
        this.hudCanvas.width = 512;
        this.hudCanvas.height = 256;
        this.hudContext = this.hudCanvas.getContext('2d');

        this.hudTexture = new THREE.CanvasTexture(this.hudCanvas);
        this.hudTexture.minFilter = THREE.LinearFilter;
        this.hudTexture.magFilter = THREE.LinearFilter;

        const hudMaterial = new THREE.MeshBasicMaterial({
            map: this.hudTexture,
            transparent: true,
            opacity: 0.9,
            side: THREE.DoubleSide
        });

        const hudGeometry = new THREE.PlaneGeometry(0.6, 0.3);
        this.hudMesh = new THREE.Mesh(hudGeometry, hudMaterial);
        this.hudMesh.position.set(0, -0.25, -0.8); // Floating in front-lower field of view
        this.hudMesh.renderOrder = 999;
        
        // Attach to XR Systems or camera
        this.add(this.hudMesh);
    }

    updateSpatialHUD() {
        if (!this.hudContext) return;
        const ctx = this.hudContext;
        ctx.clearRect(0, 0, 512, 256);

        // Background Glass Panel
        ctx.fillStyle = 'rgba(10, 15, 30, 0.85)';
        ctx.strokeStyle = '#00ffff';
        ctx.lineWidth = 4;
        ctx.beginPath();
        ctx.roundRect(8, 8, 496, 240, 16);
        ctx.fill();
        ctx.stroke();

        // Header
        ctx.fillStyle = '#00ffff';
        ctx.font = 'bold 26px "Courier New", monospace';
        ctx.fillText('NULL VR // MATRIX HUD', 24, 44);

        ctx.fillStyle = '#ff00ff';
        ctx.font = 'bold 20px "Courier New", monospace';
        ctx.fillText(`ROOM: ${this.currentRoom} [${ROOM_THEMES[this.currentRoomTheme]}]`, 24, 86);

        ctx.fillStyle = '#ffff00';
        ctx.font = '18px "Courier New", monospace';
        ctx.fillText(`POS: ${Math.round(this.playerPos.x)}, ${Math.round(this.playerPos.z)} | FLIGHT: ${this.isFlying ? 'ON' : 'OFF'}`, 24, 122);

        // Intensity Progress Bar
        ctx.fillStyle = '#ffffff';
        ctx.font = '16px "Courier New", monospace';
        ctx.fillText(`INTENSITY: ${Math.round(this.intensity * 100)}%`, 24, 160);

        ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';
        ctx.fillRect(24, 174, 464, 18);

        const gradient = ctx.createLinearGradient(24, 0, 488, 0);
        gradient.addColorStop(0, '#00ffff');
        gradient.addColorStop(0.5, '#ff00ff');
        gradient.addColorStop(1, '#ffff00');
        ctx.fillStyle = gradient;
        ctx.fillRect(24, 174, 464 * this.intensity, 18);

        // Controls Hint
        ctx.fillStyle = '#a0e0ff';
        ctx.font = '14px "Courier New", monospace';
        ctx.fillText('L-Stick: Move • R-Stick: Turn • Trigger/Pinch: Resonate', 24, 224);

        this.hudTexture.needsUpdate = true;

        // Position HUD comfortably relative to the user's viewpoint
        if (xb.camera) {
            const camPos = xb.camera.position;
            const camDir = new THREE.Vector3(0, -0.2, -0.85).applyQuaternion(xb.camera.quaternion);
            this.hudMesh.position.copy(camPos).add(camDir);
            this.hudMesh.quaternion.copy(xb.camera.quaternion);
        }
    }

    // ==========================================
    // INTERACTION & HAPTICS
    // ==========================================

    triggerHaptic(duration = 100, intensity = 0.5) {
        if (!navigator.getGamepads) return;
        const gamepads = navigator.getGamepads();
        for (const gp of gamepads) {
            if (gp && gp.hapticActuators && gp.hapticActuators[0]) {
                try {
                    gp.hapticActuators[0].pulse(intensity, duration);
                } catch (e) {}
            }
        }
    }

    onSelectStart(event) {
        this.startAudio();
        this.isResonating = true;
        this.triggerHaptic(80, 0.7);

        // Check if targeted crystal
        if (event?.target?.userData?.isCrystal || event?.surface?.userData?.isCrystal) {
            this.playCrystalChime(1.2);
            this.intensity = Math.min(1.0, this.intensity + 0.3);
        }
    }

    onSelectEnd(event) {
        this.isResonating = false;
    }

    toggleFlight() {
        this.isFlying = !this.isFlying;
        this.triggerHaptic(120, 0.9);
        this.playCrystalChime(this.isFlying ? 1.5 : 0.8);
        console.log(`✈️ [NullVRExperience] Flight Mode: ${this.isFlying ? 'ENABLED' : 'DISABLED'}`);
    }

    // ==========================================
    // INPUT HANDLING & LOCOMOTION
    // ==========================================

    setupInputListeners() {
        // Keyboard controls
        window.addEventListener('keydown', (e) => {
            this.startAudio();
            if (this.keys.hasOwnProperty(e.code)) {
                this.keys[e.code] = true;
            }
            if (e.code === 'ShiftLeft' || e.code === 'ShiftRight') {
                const now = Date.now();
                if (now - this.lastShiftTime < 350) {
                    this.toggleFlight();
                }
                this.lastShiftTime = now;
            }
            if (e.code === 'KeyF') {
                this.toggleFlight();
            }
            if (e.code === 'Space') {
                this.isResonating = true;
            }
        });

        window.addEventListener('keyup', (e) => {
            if (this.keys.hasOwnProperty(e.code)) {
                this.keys[e.code] = false;
            }
            if (e.code === 'Space') {
                this.isResonating = false;
            }
        });

        // Mouse / Touch
        window.addEventListener('pointerdown', () => {
            this.startAudio();
            this.isResonating = true;
        });

        window.addEventListener('pointerup', () => {
            this.isResonating = false;
        });
    }

    setupDOMUI() {
        const btnFlight = document.getElementById('btn-toggle-flight');
        const btnAudio = document.getElementById('btn-toggle-audio');
        const btnBoost = document.getElementById('btn-boost-intensity');

        if (btnFlight) {
            btnFlight.addEventListener('click', () => {
                this.toggleFlight();
                btnFlight.classList.toggle('active', this.isFlying);
            });
        }

        if (btnAudio) {
            btnAudio.addEventListener('click', () => {
                this.startAudio();
                this.audioMuted = !this.audioMuted;
                if (this.masterGain && this.audioContext) {
                    this.masterGain.gain.setTargetAtTime(this.audioMuted ? 0 : 0.35, this.audioContext.currentTime, 0.1);
                }
                btnAudio.classList.toggle('active', !this.audioMuted);
            });
        }

        if (btnBoost) {
            btnBoost.addEventListener('click', () => {
                this.startAudio();
                this.intensity = Math.min(1.0, this.intensity + 0.4);
                this.playCrystalChime(1.3);
            });
        }
    }

    updateLocomotion(deltaTime) {
        const moveSpeed = (this.isFlying ? 4.5 : 3.0) * deltaTime;
        const moveVector = new THREE.Vector3(0, 0, 0);

        // 1. Get Forward / Right directions from headset yaw
        let yaw = this.playerYaw;
        if (xb.camera) {
            const camEuler = new THREE.Euler().setFromQuaternion(xb.camera.quaternion, 'YXZ');
            yaw = camEuler.y;
        }

        const forward = new THREE.Vector3(0, 0, -1).applyAxisAngle(new THREE.Vector3(0, 1, 0), yaw);
        const right = new THREE.Vector3(1, 0, 0).applyAxisAngle(new THREE.Vector3(0, 1, 0), yaw);

        // 2. XR Gamepad / Thumbstick Input
        let hasStickInput = false;
        if (navigator.getGamepads) {
            const gamepads = navigator.getGamepads();
            for (let i = 0; i < gamepads.length; i++) {
                const gp = gamepads[i];
                if (!gp || !gp.axes) continue;

                // Left Controller Thumbstick: Movement (axes[2], axes[3] standard XR)
                const axisX = gp.axes[2] !== undefined ? gp.axes[2] : gp.axes[0];
                const axisY = gp.axes[3] !== undefined ? gp.axes[3] : gp.axes[1];

                if (gp.hand === 'left' || i === 0) {
                    if (Math.abs(axisX) > 0.15) {
                        moveVector.add(right.clone().multiplyScalar(axisX * moveSpeed));
                        hasStickInput = true;
                    }
                    if (Math.abs(axisY) > 0.15) {
                        moveVector.add(forward.clone().multiplyScalar(-axisY * moveSpeed));
                        hasStickInput = true;
                    }
                }

                // Right Controller Thumbstick: Snap Turn / Flight Pitch
                if (gp.hand === 'right' || i === 1) {
                    const now = Date.now();
                    if (Math.abs(axisX) > 0.65 && now - this.lastSnapTurnTime > this.snapTurnCooldown) {
                        const snapAngle = (axisX > 0 ? -1 : 1) * (Math.PI / 4); // 45 deg snap
                        this.playerYaw += snapAngle;
                        if (xb.core.xrSystemsGroup) {
                            xb.core.xrSystemsGroup.rotation.y += snapAngle;
                        }
                        this.lastSnapTurnTime = now;
                        this.triggerHaptic(50, 0.4);
                    }

                    if (this.isFlying && Math.abs(axisY) > 0.2) {
                        this.flyVelocityY = -axisY * moveSpeed * 1.5;
                        moveVector.y += this.flyVelocityY;
                    }
                }

                // Button checks: Grip / Squeeze for flight toggle
                if (gp.buttons && gp.buttons[1] && gp.buttons[1].pressed) {
                    // Grip button pressed
                }
            }
        }

        // 3. Desktop Keyboard Input
        if (this.keys.KeyW || this.keys.ArrowUp) moveVector.add(forward.clone().multiplyScalar(moveSpeed));
        if (this.keys.KeyS || this.keys.ArrowDown) moveVector.add(forward.clone().multiplyScalar(-moveSpeed));
        if (this.keys.KeyA || this.keys.ArrowLeft) moveVector.add(right.clone().multiplyScalar(-moveSpeed));
        if (this.keys.KeyD || this.keys.ArrowRight) moveVector.add(right.clone().multiplyScalar(moveSpeed));

        if (this.isFlying) {
            if (this.keys.Space) moveVector.y += moveSpeed;
            if (this.keys.ShiftLeft || this.keys.ShiftRight) moveVector.y -= moveSpeed;
        }

        // 4. Apply Collision & Position
        if (this.isFlying) {
            this.playerPos.add(moveVector);
            this.isCollidingX = false;
            this.isCollidingZ = false;
        } else {
            const newX = this.playerPos.x + moveVector.x;
            const newZ = this.playerPos.z + moveVector.z;

            this.isCollidingX = false;
            this.isCollidingZ = false;

            if (this.isWalkable(newX, this.playerPos.z)) {
                this.playerPos.x = newX;
            } else {
                this.isCollidingX = true;
            }

            if (this.isWalkable(this.playerPos.x, newZ)) {
                this.playerPos.z = newZ;
            } else {
                this.isCollidingZ = true;
            }

            this.playerPos.y = 0;
        }

        // 5. Update Current Room Detection
        const currentCoordKey = `${Math.round(this.playerPos.x / this.cellSize)},${Math.round(this.playerPos.z / this.cellSize)}`;
        if (this.roomMap.has(currentCoordKey)) {
            const rData = this.roomMap.get(currentCoordKey);
            this.currentRoom = rData.id;
            this.currentRoomTheme = rData.theme;
        }

        this.syncPlayerTransform();
    }

    syncPlayerTransform() {
        if (xb.core?.xrSystemsGroup) {
            xb.core.xrSystemsGroup.position.set(this.playerPos.x, this.playerPos.y, this.playerPos.z);
        }
    }

    // ==========================================
    // FRAME UPDATE LIFECYCLE
    // ==========================================

    update(timeMs, frame) {
        const delta = Math.min(xb.getDeltaTime() || 0.016, 0.1);
        this.time += delta;

        // 1. Locomotion & Collision
        this.updateLocomotion(delta);

        // 2. Chunk Streaming
        this.updateChunks();

        // 3. Intensity Modulation
        if (this.isResonating) {
            this.intensity = Math.min(1.0, this.intensity + delta * 1.5);
        } else {
            this.intensity = Math.max(0.0, this.intensity - delta * 0.4);
        }

        // 4. Update Shared Shader Uniforms
        this.sharedUniforms.time.value = this.time;
        this.sharedUniforms.intensity.value = this.intensity;

        // 5. Animate Floating Interactive Crystals
        this.interactiveCrystals.forEach((crystal, idx) => {
            crystal.rotation.y += delta * 1.2;
            crystal.rotation.x += delta * 0.6;
            crystal.position.y = crystal.userData.baseY + Math.sin(this.time * 2.0 + idx) * 0.25;
        });

        // 6. Dynamic Colored Lights Orbiting
        this.coloredLights.forEach((light, index) => {
            const angle = (index / this.coloredLights.length) * Math.PI * 2 + this.time * 0.6;
            light.position.x = this.playerPos.x + Math.cos(angle) * (6 + Math.sin(this.time * 2 + index) * 3);
            light.position.z = this.playerPos.z + Math.sin(angle) * (6 + Math.cos(this.time * 2 + index) * 3);
            light.position.y = 2 + Math.sin(this.time * 3 + index);
            light.intensity = 2.5 + this.intensity * 3.5;

            const colorShift = this.time * 2 + index * 0.5;
            light.color.setRGB(
                Math.sin(colorShift) * 0.5 + 0.5,
                Math.sin(colorShift + 2.09) * 0.5 + 0.5,
                Math.sin(colorShift + 4.19) * 0.5 + 0.5
            );
        });

        // 7. Update Spatial HUD & 2D DOM Telemetry
        this.updateSpatialHUD();
        this.updateDOMTelemetry();

        // 8. Update Procedural Audio System
        this.updateAudio();
    }

    updateDOMTelemetry() {
        const elRoom = document.getElementById('vr-room-value');
        const elTheme = document.getElementById('vr-room-theme');
        const elPos = document.getElementById('vr-pos-value');
        const elFlight = document.getElementById('vr-flight-value');
        const elIntVal = document.getElementById('vr-intensity-value');
        const elIntBar = document.getElementById('vr-intensity-bar');

        if (elRoom) elRoom.textContent = this.currentRoom;
        if (elTheme) elTheme.textContent = `(${ROOM_THEMES[this.currentRoomTheme]})`;
        if (elPos) elPos.textContent = `${Math.round(this.playerPos.x)}, ${Math.round(this.playerPos.z)}`;
        if (elFlight) elFlight.textContent = this.isFlying ? 'ON (NOCLIP)' : 'OFF';
        if (elIntVal) elIntVal.textContent = `${Math.round(this.intensity * 100)}%`;
        if (elIntBar) elIntBar.style.width = `${Math.round(this.intensity * 100)}%`;
    }

    dispose() {
        console.log('🛑 [NullVRExperience] Disposing resources...');
        if (this.audioContext && this.audioContext.state !== 'closed') {
            this.audioContext.close();
        }
        this.materialPool.clear();
        this.loadedChunks.clear();
    }
}

// ==========================================
// STARTUP AND INITIALIZATION
// ==========================================

const options = new xb.Options();
options.enableVR();
options.enableHands();
options.enableGestures();
options.controllers.visualization = true;
options.controllers.visualizeRays = true;
options.reticles.enabled = true;

const vrExperience = new NullVRExperience();
xb.add(vrExperience);

xb.init(options).then(() => {
    console.log('🚀 [NullVRExperience] Google XR Blocks Application Running!');
}).catch((err) => {
    console.error('❌ [NullVRExperience] Failed to initialize XR Blocks:', err);
});