Exemplos Babylon.js

// Babylon.js Hello World Examples

import * as BABYLON from '@babylonjs/core';

// 1. Basic Babylon.js Scene Setup
class BasicBabylonScene {
    private engine: BABYLON.Engine;
    private scene: BABYLON.Scene;
    private camera: BABYLON.UniversalCamera;

    constructor(canvas: HTMLCanvasElement) {
        // Create engine
        this.engine = new BABYLON.Engine(canvas, true);

        // Create scene
        this.scene = new BABYLON.Scene(this.engine);
        this.scene.clearColor = new BABYLON.Color4(0.2, 0.2, 0.2, 1);

        // Setup camera
        this.setupCamera();

        // Add lights
        this.addLights();

        // Create 3D objects
        this.createObjects();

        // Handle window resize
        window.addEventListener('resize', this.handleResize.bind(this));

        // Start render loop
        this.startRenderLoop();
    }

    private setupCamera(): void {
        // Create universal camera
        this.camera = new BABYLON.UniversalCamera(
            'camera',
            new BABYLON.Vector3(0, 5, -10),
            this.scene
        );

        this.camera.setTarget(BABYLON.Vector3.Zero());
        this.camera.attachControl(this.engine.getRenderingCanvas(), true);

        // Set camera controls
        this.camera.keysUp = [87, 38];    // W, Up arrow
        this.camera.keysDown = [83, 40];  // S, Down arrow
        this.camera.keysLeft = [65, 37];  // A, Left arrow
        this.camera.keysRight = [68, 39]; // D, Right arrow
    }

    private addLights(): void {
        // Ambient light for overall illumination
        const ambientLight = new BABYLON.HemisphericLight(
            'ambientLight',
            new BABYLON.Vector3(0, 1, 0),
            this.scene
        );
        ambientLight.intensity = 0.7;

        // Directional light for shadows
        const directionalLight = new BABYLON.DirectionalLight(
            'directionalLight',
            new BABYLON.Vector3(1, -1, 1),
            this.scene
        );
        directionalLight.intensity = 0.8;
        directionalLight.position = new BABYLON.Vector3(10, 10, 10);
    }

    private createObjects(): void {
        // Create ground
        const ground = BABYLON.MeshBuilder.CreateGround(
            'ground',
            { width: 20, height: 20 },
            this.scene
        );
        const groundMaterial = new BABYLON.StandardMaterial('groundMat', this.scene);
        groundMaterial.diffuseColor = new BABYLON.Color3(0.5, 0.5, 0.5);
        ground.material = groundMaterial;

        // Create rotating cube
        const cube = BABYLON.MeshBuilder.CreateBox('cube', { size: 2 }, this.scene);
        cube.position.y = 1;
        const cubeMaterial = new BABYLON.StandardMaterial('cubeMat', this.scene);
        cubeMaterial.diffuseColor = new BABYLON.Color3(1, 0, 0); // Red
        cube.material = cubeMaterial;

        // Create sphere
        const sphere = BABYLON.MeshBuilder.CreateSphere(
            'sphere',
            { diameter: 2, segments: 32 },
            this.scene
        );
        sphere.position.set(-3, 1, 0);
        const sphereMaterial = new BABYLON.StandardMaterial('sphereMat', this.scene);
        sphereMaterial.diffuseColor = new BABYLON.Color3(0, 1, 0); // Green
        sphere.material = sphereMaterial;

        // Create cylinder
        const cylinder = BABYLON.MeshBuilder.CreateCylinder(
            'cylinder',
            { height: 3, diameter: 1.5 },
            this.scene
        );
        cylinder.position.set(3, 1.5, 0);
        const cylinderMaterial = new BABYLON.StandardMaterial('cylinderMat', this.scene);
        cylinderMaterial.diffuseColor = new BABYLON.Color3(0, 0, 1); // Blue
        cylinder.material = cylinderMaterial;

        // Create torus
        const torus = BABYLON.MeshBuilder.CreateTorus(
            'torus',
            { diameter: 2, thickness: 0.5, tessellation: 32 },
            this.scene
        );
        torus.position.set(0, 1, 3);
        const torusMaterial = new BABYLON.StandardMaterial('torusMat', this.scene);
        torusMaterial.diffuseColor = new BABYLON.Color3(1, 1, 0); // Yellow
        torus.material = torusMaterial;

        // Add rotation animations
        this.scene.registerBeforeRender(() => {
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            sphere.rotation.y += 0.02;
            cylinder.rotation.y += 0.015;
            torus.rotation.x += 0.01;
            torus.rotation.z += 0.01;
        });
    }

    private handleResize(): void {
        this.engine.resize();
    }

    private startRenderLoop(): void {
        this.engine.runRenderLoop(() => {
            this.scene.render();
        });
    }
}

// 2. Interactive Scene with GUI
class InteractiveScene {
    private engine: BABYLON.Engine;
    private scene: BABYLON.Scene;
    private camera: BABYLON.ArcRotateCamera;
    private meshes: BABYLON.Mesh[] = [];

    constructor(canvas: HTMLCanvasElement) {
        this.engine = new BABYLON.Engine(canvas, true);
        this.scene = new BABYLON.Scene(this.engine);
        this.scene.clearColor = new BABYLON.Color4(0.1, 0.1, 0.2, 1);

        this.setupCamera();
        this.addLights();
        this.createInteractiveObjects();
        this.setupGUI();
        this.setupInteraction();
        this.startRenderLoop();
    }

    private setupCamera(): void {
        this.camera = new BABYLON.ArcRotateCamera(
            'camera',
            0,
            Math.PI / 3,
            15,
            BABYLON.Vector3.Zero(),
            this.scene
        );
        this.camera.attachControl(this.engine.getRenderingCanvas(), true);
        this.camera.lowerRadiusLimit = 5;
        this.camera.upperRadiusLimit = 25;
    }

    private addLights(): void {
        // Multiple light sources for better illumination
        const light1 = new BABYLON.HemisphericLight(
            'light1',
            new BABYLON.Vector3(0, 1, 0),
            this.scene
        );
        light1.intensity = 0.6;

        const light2 = new BABYLON.PointLight(
            'light2',
            new BABYLON.Vector3(5, 5, 5),
            this.scene
        );
        light2.intensity = 0.8;

        const light3 = new BABYLON.PointLight(
            'light3',
            new BABYLON.Vector3(-5, 5, -5),
            this.scene
        );
        light3.intensity = 0.8;
        light3.diffuse = new BABYLON.Color3(0.5, 0.5, 1); // Blue-ish light
    }

    private createInteractiveObjects(): void {
        // Create various meshes for interaction
        const meshData = [
            { type: 'box', name: 'Box', position: new BABYLON.Vector3(0, 1, 0), color: new BABYLON.Color3(1, 0, 0) },
            { type: 'sphere', name: 'Sphere', position: new BABYLON.Vector3(-4, 1, 0), color: new BABYLON.Color3(0, 1, 0) },
            { type: 'cylinder', name: 'Cylinder', position: new BABYLON.Vector3(4, 1, 0), color: new BABYLON.Color3(0, 0, 1) },
            { type: 'torus', name: 'Torus', position: new BABYLON.Vector3(0, 1, 4), color: new BABYLON.Color3(1, 1, 0) }
        ];

        meshData.forEach(data => {
            let mesh: BABYLON.Mesh;

            switch (data.type) {
                case 'box':
                    mesh = BABYLON.MeshBuilder.CreateBox(data.name, { size: 2 }, this.scene);
                    break;
                case 'sphere':
                    mesh = BABYLON.MeshBuilder.CreateSphere(data.name, { diameter: 2 }, this.scene);
                    break;
                case 'cylinder':
                    mesh = BABYLON.MeshBuilder.CreateCylinder(data.name, { height: 2, diameter: 1.5 }, this.scene);
                    break;
                case 'torus':
                    mesh = BABYLON.MeshBuilder.CreateTorus(data.name, { diameter: 2, thickness: 0.5 }, this.scene);
                    break;
            }

            mesh.position = data.position;
            const material = new BABYLON.StandardMaterial(`${data.name}Mat`, this.scene);
            material.diffuseColor = data.color;
            mesh.material = material;

            // Store original properties for reset
            mesh.metadata = {
                originalColor: data.color,
                originalPosition: data.position.clone(),
                originalScaling: mesh.scaling.clone()
            };

            this.meshes.push(mesh);
        });

        // Create ground
        const ground = BABYLON.MeshBuilder.CreateGround('ground', { width: 20, height: 20 }, this.scene);
        const groundMaterial = new BABYLON.StandardMaterial('groundMat', this.scene);
        groundMaterial.diffuseColor = new BABYLON.Color3(0.3, 0.3, 0.3);
        groundMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
        ground.material = groundMaterial;
    }

    private setupGUI(): void {
        // Add advanced texture for 3D text
        const advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI('UI');

        // Title text
        const title = new BABYLON.GUI.TextBlock();
        title.text = 'Babylon.js Interactive Scene';
        title.color = 'white';
        title.fontSize = 24;
        title.fontWeight = 'bold';
        title.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
        title.textVerticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
        title.top = '20px';
        advancedTexture.addControl(title);

        // Instructions
        const instructions = new BABYLON.GUI.TextBlock();
        instructions.text = 'Click on objects to interact with them';
        instructions.color = 'white';
        instructions.fontSize = 16;
        instructions.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
        instructions.textVerticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
        instructions.top = '60px';
        advancedTexture.addControl(instructions);

        // Object info panel
        const infoPanel = new BABYLON.GUI.StackPanel();
        infoPanel.width = '200px';
        infoPanel.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;
        infoPanel.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
        infoPanel.top = '20px';
        advancedTexture.addControl(infoPanel);

        const infoText = new BABYLON.GUI.TextBlock();
        infoText.text = 'Click an object';
        infoText.color = 'white';
        infoText.fontSize = 14;
        infoPanel.addControl(infoText);

        // Store reference to update info text
        this.scene.metadata = { infoText };
    }

    private setupInteraction(): void {
        this.scene.onPointerObservable.add((pointerInfo) => {
            switch (pointerInfo.type) {
                case BABYLON.PointerEventTypes.POINTERDOWN:
                    this.handlePointerDown(pointerInfo);
                    break;
            }
        });
    }

    private handlePointerDown(pointerInfo: BABYLON.PointerInfo): void {
        if (pointerInfo.pickInfo && pointerInfo.pickInfo.hit && pointerInfo.pickInfo.pickedMesh) {
            const mesh = pointerInfo.pickInfo.pickedMesh;
            this.interactWithMesh(mesh);
        }
    }

    private interactWithMesh(mesh: BABYLON.Mesh): void {
        // Update info text
        const infoText = this.scene.metadata.infoText;
        if (infoText) {
            infoText.text = `Selected: ${mesh.name}`;
        }

        // Create interaction effect
        this.createInteractionEffect(mesh);

        // Animate the mesh
        this.animateMesh(mesh);
    }

    private createInteractionEffect(mesh: BABYLON.Mesh): void {
        // Create particle effect at mesh position
        const particleSystem = new BABYLON.ParticleSystem('particles', 1000, this.scene);
        particleSystem.particleTexture = new BABYLON.Texture('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChAI9jU77yQAAAABJRU5ErkJggg==', this.scene);

        particleSystem.emitter = mesh.position;
        particleSystem.minEmitBox = new BABYLON.Vector3(-0.5, -0.5, -0.5);
        particleSystem.maxEmitBox = new BABYLON.Vector3(0.5, 0.5, 0.5);

        particleSystem.color1 = new BABYLON.Color4(1, 1, 1, 1);
        particleSystem.color2 = new BABYLON.Color4(1, 1, 0, 1);
        particleSystem.colorDead = new BABYLON.Color4(0, 0, 0, 0);

        particleSystem.minSize = 0.1;
        particleSystem.maxSize = 0.5;

        particleSystem.minLifeTime = 0.5;
        particleSystem.maxLifeTime = 2;

        particleSystem.emitRate = 500;
        particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;
        particleSystem.gravity = new BABYLON.Vector3(0, -9.81, 0);
        particleSystem.direction1 = new BABYLON.Vector3(-1, 1, -1);
        particleSystem.direction2 = new BABYLON.Vector3(1, 1, 1);
        particleSystem.minAngularSpeed = 0;
        particleSystem.maxAngularSpeed = Math.PI;
        particleSystem.minEmitPower = 0.5;
        particleSystem.maxEmitPower = 2;
        particleSystem.updateSpeed = 0.01;

        particleSystem.start();

        // Stop particles after 1 second
        setTimeout(() => {
            particleSystem.stop();
        }, 1000);
    }

    private animateMesh(mesh: BABYLON.Mesh): void {
        // Bounce animation
        BABYLON.Animation.CreateAndStartAnimation(
            'bounce',
            mesh,
            'position.y',
            30,
            20,
            mesh.position.y,
            mesh.position.y + 3,
            BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
        );

        // Rotation animation
        BABYLON.Animation.CreateAndStartAnimation(
            'rotate',
            mesh,
            'rotation.y',
            30,
            30,
            mesh.rotation.y,
            mesh.rotation.y + Math.PI * 2,
            BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
        );

        // Scale animation
        BABYLON.Animation.CreateAndStartAnimation(
            'scale',
            mesh,
            'scaling',
            30,
            15,
            mesh.scaling.clone(),
            mesh.metadata.originalScaling.scale(1.5),
            BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
        );
    }

    private startRenderLoop(): void {
        this.engine.runRenderLoop(() => {
            this.scene.render();
        });
    }
}

// 3. Physics-Based Scene
class PhysicsScene {
    private engine: BABYLON.Engine;
    private scene: BABYLON.Scene;
    private camera: BABYLON.UniversalCamera;
    private boxes: BABYLON.Mesh[] = [];

    constructor(canvas: HTMLCanvasElement) {
        this.engine = new BABYLON.Engine(canvas, true);
        this.scene = new BABYLON.Scene(this.scene);
        this.scene.clearColor = new BABYLON.Color4(0.5, 0.8, 0.9, 1); // Sky blue

        this.setupCamera();
        this.addLights();
        this.enablePhysics();
        this.createPhysicsObjects();
        this.setupControls();
        this.startRenderLoop();
    }

    private setupCamera(): void {
        this.camera = new BABYLON.UniversalCamera(
            'camera',
            new BABYLON.Vector3(0, 5, -15),
            this.scene
        );
        this.camera.setTarget(BABYLON.Vector3.Zero());
        this.camera.attachControl(this.engine.getRenderingCanvas(), true);
    }

    private addLights(): void {
        const light = new BABYLON.HemisphericLight(
            'light',
            new BABYLON.Vector3(0, 1, 0),
            this.scene
        );
        light.intensity = 1;

        const dirLight = new BABYLON.DirectionalLight(
            'dirLight',
            new BABYLON.Vector3(-1, -2, -1),
            this.scene
        );
        dirLight.position = new BABYLON.Vector3(20, 40, 20);
        dirLight.intensity = 0.5;
    }

    private enablePhysics(): void {
        // Enable physics with gravity
        this.scene.enablePhysics(
            new BABYLON.Vector3(0, -9.81, 0),
            new BABYLON.CannonJSPlugin()
        );
    }

    private createPhysicsObjects(): void {
        // Create ground
        const ground = BABYLON.MeshBuilder.CreateGround(
            'ground',
            { width: 20, height: 20 },
            this.scene
        );
        const groundMaterial = new BABYLON.StandardMaterial('groundMat', this.scene);
        groundMaterial.diffuseColor = new BABYLON.Color3(0.3, 0.7, 0.3);
        ground.material = groundMaterial;
        ground.physicsImpostor = new BABYLON.PhysicsImpostor(
            ground,
            BABYLON.PhysicsImpostor.BoxImpostor,
            { mass: 0, restitution: 0.7 },
            this.scene
        );

        // Create walls
        this.createWalls();

        // Create initial boxes
        for (let i = 0; i < 5; i++) {
            this.createBox(
                new BABYLON.Vector3(
                    (Math.random() - 0.5) * 4,
                    2 + i * 1.1,
                    (Math.random() - 0.5) * 4
                )
            );
        }

        // Create bouncing spheres
        for (let i = 0; i < 3; i++) {
            this.createSphere(
                new BABYLON.Vector3(
                    (Math.random() - 0.5) * 6,
                    5 + i * 2,
                    (Math.random() - 0.5) * 6
                )
            );
        }
    }

    private createWalls(): void {
        const wallMaterial = new BABYLON.StandardMaterial('wallMat', this.scene);
        wallMaterial.diffuseColor = new BABYLON.Color3(0.7, 0.7, 0.7);
        wallMaterial.alpha = 0.3;

        // Back wall
        const backWall = BABYLON.MeshBuilder.CreateBox(
            'backWall',
            { width: 20, height: 10, depth: 0.5 },
            this.scene
        );
        backWall.position.z = -10;
        backWall.material = wallMaterial;
        backWall.physicsImpostor = new BABYLON.PhysicsImpostor(
            backWall,
            BABYLON.PhysicsImpostor.BoxImpostor,
            { mass: 0, restitution: 0.5 },
            this.scene
        );

        // Side walls
        const leftWall = BABYLON.MeshBuilder.CreateBox(
            'leftWall',
            { width: 0.5, height: 10, depth: 20 },
            this.scene
        );
        leftWall.position.x = -10;
        leftWall.material = wallMaterial;
        leftWall.physicsImpostor = new BABYLON.PhysicsImpostor(
            leftWall,
            BABYLON.PhysicsImpostor.BoxImpostor,
            { mass: 0, restitution: 0.5 },
            this.scene
        );

        const rightWall = leftWall.clone('rightWall');
        rightWall.position.x = 10;
        this.scene.addMesh(rightWall);
    }

    private createBox(position: BABYLON.Vector3): void {
        const box = BABYLON.MeshBuilder.CreateBox(
            `box${this.boxes.length}`,
            { size: 1 },
            this.scene
        );
        box.position = position;

        const boxMaterial = new BABYLON.StandardMaterial(`boxMat${this.boxes.length}`, this.scene);
        const hue = Math.random();
        boxMaterial.diffuseColor = new BABYLON.Color3.FromHSV(hue * 360, 1, 1);
        box.material = boxMaterial;

        // Add physics impostor
        box.physicsImpostor = new BABYLON.PhysicsImpostor(
            box,
            BABYLON.PhysicsImpostor.BoxImpostor,
            { mass: 1, restitution: 0.8, friction: 0.5 },
            this.scene
        );

        this.boxes.push(box);
    }

    private createSphere(position: BABYLON.Vector3): void {
        const sphere = BABYLON.MeshBuilder.CreateSphere(
            `sphere${Date.now()}`,
            { diameter: 0.8, segments: 16 },
            this.scene
        );
        sphere.position = position;

        const sphereMaterial = new BABYLON.StandardMaterial(`sphereMat${Date.now()}`, this.scene);
        sphereMaterial.diffuseColor = new BABYLON.Color3.FromHSV(Math.random() * 360, 1, 1);
        sphere.material = sphereMaterial;

        sphere.physicsImpostor = new BABYLON.PhysicsImpostor(
            sphere,
            BABYLON.PhysicsImpostor.SphereImpostor,
            { mass: 0.5, restitution: 0.9, friction: 0.3 },
            this.scene
        );
    }

    private setupControls(): void {
        this.scene.onPointerDown = (evt, pickResult) => {
            if (pickResult.hit) {
                // Apply impulse to clicked object
                const direction = this.camera.position.subtract(pickResult.pickedPoint!).normalize();
                const force = direction.scale(10);

                if (pickResult.pickedMesh!.physicsImpostor) {
                    pickResult.pickedMesh!.physicsImpostor!.applyImpulse(
                        force,
                        pickResult.pickedPoint!
                    );
                }
            }
        };

        // Add keyboard controls
        window.addEventListener('keydown', (event) => {
            switch (event.key) {
                case ' ':
                    // Space: Add new box at camera position
                    this.createBox(
                        this.camera.position.add(
                            this.camera.getDirection(new BABYLON.Vector3(0, 0, 1)).scale(2)
                        )
                    );
                    break;
                case 's':
                    // S: Add new sphere
                    this.createSphere(
                        this.camera.position.add(
                            this.camera.getDirection(new BABYLON.Vector3(0, 0, 1)).scale(2)
                        )
                    );
                    break;
                case 'r':
                    // R: Reset scene
                    this.resetScene();
                    break;
            }
        });
    }

    private resetScene(): void {
        // Remove all physics objects except ground and walls
        this.scene.meshes.forEach(mesh => {
            if (mesh.name.startsWith('box') || mesh.name.startsWith('sphere')) {
                mesh.dispose();
            }
        });

        this.boxes = [];

        // Create new initial objects
        for (let i = 0; i < 5; i++) {
            this.createBox(
                new BABYLON.Vector3(
                    (Math.random() - 0.5) * 4,
                    2 + i * 1.1,
                    (Math.random() - 0.5) * 4
                )
            );
        }
    }

    private startRenderLoop(): void {
        // Add instructions text
        const advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI('UI');

        const text = new BABYLON.GUI.TextBlock();
        text.text = 'Click objects to apply force | Space: Add box | S: Add sphere | R: Reset';
        text.color = 'white';
        text.fontSize = 14;
        text.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
        text.textVerticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
        text.top = '20px';
        advancedTexture.addControl(text);

        this.engine.runRenderLoop(() => {
            this.scene.render();
        });
    }
}

// Usage examples:
// const basicScene = new BasicBabylonScene(document.getElementById('canvas1') as HTMLCanvasElement);
// const interactiveScene = new InteractiveScene(document.getElementById('canvas2') as HTMLCanvasElement);
// const physicsScene = new PhysicsScene(document.getElementById('canvas3') as HTMLCanvasElement);

export {
    BasicBabylonScene,
    InteractiveScene,
    PhysicsScene
};

// Babylon.js Materials and Shaders Examples

import * as BABYLON from '@babylonjs/core';
import { GridMaterial } from '@babylonjs/materials/grid';
import '@babylonjs/loaders';

// 1. Comprehensive Material Showcase
class MaterialShowcase {
    private engine: BABYLON.Engine;
    private scene: BABYLON.Scene;
    private camera: BABYLON.ArcRotateCamera;

    constructor(canvas: HTMLCanvasElement) {
        this.engine = new BABYLON.Engine(canvas, true);
        this.scene = new BABYLON.Scene(this.engine);
        this.scene.clearColor = new BABYLON.Color4(0.05, 0.05, 0.1, 1);

        this.setupCamera();
        this.setupLighting();
        this.createMaterialSamples();
        this.setupEnvironment();
        this.startRenderLoop();
    }

    private setupCamera(): void {
        this.camera = new BABYLON.ArcRotateCamera(
            'camera',
            0,
            Math.PI / 3,
            20,
            BABYLON.Vector3.Zero(),
            this.scene
        );
        this.camera.attachControl(this.engine.getRenderingCanvas(), true);
        this.camera.lowerRadiusLimit = 8;
        this.camera.upperRadiusLimit = 30;
    }

    private setupLighting(): void {
        // Multiple light setup for PBR materials
        const hemisphericLight = new BABYLON.HemisphericLight(
            'hemiLight',
            new BABYLON.Vector3(0, 1, 0),
            this.scene
        );
        hemisphericLight.intensity = 0.3;
        hemisphericLight.groundColor = new BABYLON.Color3(0.2, 0.2, 0.3);

        const mainLight = new BABYLON.DirectionalLight(
            'mainLight',
            new BABYLON.Vector3(-1, -2, 1),
            this.scene
        );
        mainLight.intensity = 3;
        mainLight.position = new BABYLON.Vector3(20, 40, 20);

        // Colored fill lights
        const warmLight = new BABYLON.PointLight(
            'warmLight',
            new BABYLON.Vector3(10, 5, -5),
            this.scene
        );
        warmLight.intensity = 1;
        warmLight.diffuse = new BABYLON.Color3(1, 0.8, 0.4);

        const coolLight = new BABYLON.PointLight(
            'coolLight',
            new BABYLON.Vector3(-10, 5, 5),
            this.scene
        );
        coolLight.intensity = 1;
        coolLight.diffuse = new BABYLON.Color3(0.4, 0.6, 1);
    }

    private createMaterialSamples(): void {
        const materials = [
            this.createStandardMaterial(),
            this.createPBRMaterial(),
            this.createGridMaterial(),
            this.createCustomShaderMaterial(),
            this.createAnimatedMaterial(),
            this.createToonMaterial(),
            this.createNormalMaterial(),
            this.createWireframeMaterial()
        ];

        materials.forEach((material, index) => {
            const mesh = BABYLON.MeshBuilder.CreateSphere(
                `sphere${index}`,
                { diameter: 2, segments: 32 },
                this.scene
            );

            const angle = (index / materials.length) * Math.PI * 2;
            mesh.position.set(
                Math.cos(angle) * 6,
                0,
                Math.sin(angle) * 6
            );

            mesh.material = material;

            // Add subtle rotation
            this.scene.registerBeforeRender(() => {
                mesh.rotation.y += 0.005 * (index % 2 === 0 ? 1 : -1);
            });
        });
    }

    private createStandardMaterial(): BABYLON.StandardMaterial {
        const material = new BABYLON.StandardMaterial('standardMat', this.scene);
        material.diffuseColor = new BABYLON.Color3(0.8, 0.2, 0.2);
        material.specularColor = new BABYLON.Color3(1, 1, 1);
        material.specularPower = 128;
        material.emissiveColor = new BABYLON.Color3(0.1, 0, 0);
        material.backFaceCulling = false;

        // Add texture
        material.diffuseTexture = this.createProceduralTexture(256, (ctx, w, h) => {
            const gradient = ctx.createLinearGradient(0, 0, w, h);
            gradient.addColorStop(0, '#ff6666');
            gradient.addColorStop(0.5, '#cc0000');
            gradient.addColorStop(1, '#990000');
            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0, w, h);

            // Add pattern
            ctx.strokeStyle = '#ffffff';
            ctx.lineWidth = 2;
            for (let i = 0; i < w; i += 16) {
                ctx.beginPath();
                ctx.moveTo(i, 0);
                ctx.lineTo(i, h);
                ctx.stroke();
            }
        });

        return material;
    }

    private createPBRMaterial(): BABYLON.PBRMaterial {
        const material = new BABYLON.PBRMaterial('pbrMat', this.scene);
        material.baseColor = new BABYLON.Color3(0.2, 0.8, 0.2);
        material.metallic = 0.7;
        material.roughness = 0.3;
        material.alpha = 1;
        material.subSurface.isRefractionEnabled = true;
        material.subSurface.refractionIntensity = 0.5;

        // Add PBR textures
        material.albedoTexture = this.createProceduralTexture(512, (ctx, w, h) => {
            // Metallic green texture
            const imageData = ctx.createImageData(w, h);
            for (let i = 0; i < imageData.data.length; i += 4) {
                const x = (i / 4) % w;
                const y = Math.floor((i / 4) / w);
                const noise = Math.sin(x * 0.1) * Math.cos(y * 0.1);
                const value = 100 + noise * 50;

                imageData.data[i] = value * 0.2;     // R
                imageData.data[i + 1] = value;      // G
                imageData.data[i + 2] = value * 0.2; // B
                imageData.data[i + 3] = 255;       // A
            }
            ctx.putImageData(imageData, 0, 0);
        });

        material.metallicTexture = this.createProceduralTexture(256, (ctx, w, h) => {
            const imageData = ctx.createImageData(w, h);
            for (let i = 0; i < imageData.data.length; i += 4) {
                const value = 200 + Math.random() * 55;
                imageData.data[i] = value;     // R
                imageData.data[i + 1] = value; // G
                imageData.data[i + 2] = value; // B
                imageData.data[i + 3] = 255;   // A
            }
            ctx.putImageData(imageData, 0, 0);
        });

        return material;
    }

    private createGridMaterial(): GridMaterial {
        const material = new GridMaterial('gridMat', this.scene);
        material.majorUnitFrequency = 5;
        material.minorUnitVisibility = 0.5;
        material.gridRatio = 1;
        material.backFaceCulling = false;
        material.mainColor = new BABYLON.Color3(0, 0.5, 1);
        material.lineColor = new BABYLON.Color3(1, 1, 1);
        material.opacity = 0.95;

        return material;
    }

    private createCustomShaderMaterial(): BABYLON.ShaderMaterial {
        // Create custom shader
        BABYLON.Effect.ShadersStore['customVertexShader'] = `
            precision highp float;

            attribute vec3 position;
            attribute vec3 normal;
            attribute vec2 uv;

            uniform mat4 world;
            uniform mat4 worldViewProjection;

            varying vec3 vNormal;
            varying vec3 vPosition;
            varying vec2 vUV;
            varying float vTime;

            uniform float time;

            void main(void) {
                vec3 newPosition = position;
                newPosition.y += sin(position.x * 5.0 + time) * 0.1;
                newPosition.y += cos(position.z * 5.0 + time) * 0.1;

                vec4 worldPosition = world * vec4(newPosition, 1.0);
                vPosition = worldPosition.xyz;
                vNormal = normalize(world * vec4(normal, 0.0)).xyz;
                vUV = uv;
                vTime = time;

                gl_Position = worldViewProjection * worldPosition;
            }
        `;

        BABYLON.Effect.ShadersStore['customFragmentShader'] = `
            precision highp float;

            varying vec3 vNormal;
            varying vec3 vPosition;
            varying vec2 vUV;
            varying float vTime;

            uniform vec3 lightPosition;
            uniform vec3 cameraPosition;

            void main(void) {
                vec3 lightDirection = normalize(lightPosition - vPosition);
                vec3 viewDirection = normalize(cameraPosition - vPosition);
                vec3 normal = normalize(vNormal);

                float diff = max(dot(normal, lightDirection), 0.0);
                vec3 diffuse = diff * vec3(1.0, 1.0, 1.0);

                // Animated color based on time and UV
                vec3 color = vec3(
                    sin(vTime + vUV.x * 10.0) * 0.5 + 0.5,
                    cos(vTime + vUV.y * 10.0) * 0.5 + 0.5,
                    sin(vTime * 2.0) * 0.5 + 0.5
                );

                vec3 finalColor = color * (0.3 + diffuse * 0.7);

                gl_FragColor = vec4(finalColor, 1.0);
            }
        `;

        const shaderMaterial = new BABYLON.ShaderMaterial(
            'customShader',
            this.scene,
            {
                vertex: 'custom',
                fragment: 'custom',
            },
            {
                attributes: ['position', 'normal', 'uv'],
                uniforms: ['world', 'worldViewProjection', 'time', 'lightPosition', 'cameraPosition']
            }
        );

        shaderMaterial.setFloat('time', 0);
        shaderMaterial.setVector3('lightPosition', new BABYLON.Vector3(10, 10, 10));
        shaderMaterial.setVector3('cameraPosition', this.camera.position);

        // Animate the shader
        this.scene.registerBeforeRender(() => {
            shaderMaterial.setFloat('time', Date.now() * 0.001);
            shaderMaterial.setVector3('cameraPosition', this.camera.position);
        });

        return shaderMaterial;
    }

    private createAnimatedMaterial(): BABYLON.StandardMaterial {
        const material = new BABYLON.StandardMaterial('animatedMat', this.scene);

        // Create animated texture
        const dynamicTexture = new BABYLON.DynamicTexture('animated', 512, this.scene);
        const context = dynamicTexture.getContext();

        let frame = 0;
        this.scene.registerBeforeRender(() => {
            context.fillStyle = '#000080';
            context.fillRect(0, 0, 512, 512);

            // Draw animated circles
            for (let i = 0; i < 5; i++) {
                const x = 256 + Math.cos((frame + i * 60) * 0.05) * 150;
                const y = 256 + Math.sin((frame + i * 60) * 0.05) * 150;
                const radius = 20 + Math.sin(frame * 0.1 + i) * 10;

                context.beginPath();
                context.arc(x, y, radius, 0, Math.PI * 2);
                context.fillStyle = `hsl(${(frame + i * 60) % 360}, 100%, 50%)`;
                context.fill();
            }

            dynamicTexture.update();
            frame++;
        });

        material.diffuseTexture = dynamicTexture;
        material.emissiveTexture = dynamicTexture;
        material.emissiveColor = new BABYLON.Color3(0.5, 0.5, 0.5);

        return material;
    }

    private createToonMaterial(): BABYLON.StandardMaterial {
        const material = new BABYLON.StandardMaterial('toonMat', this.scene);

        // Create toon shading effect with texture
        material.diffuseTexture = this.createProceduralTexture(256, (ctx, w, h) => {
            // Create stepped gradient for toon effect
            const steps = 4;
            const stepHeight = h / steps;

            for (let i = 0; i < steps; i++) {
                const brightness = 255 - (i * 60);
                ctx.fillStyle = `rgb(${brightness}, ${brightness * 0.7}, ${brightness * 0.3})`;
                ctx.fillRect(0, i * stepHeight, w, stepHeight);
            }

            // Add cell border effect
            ctx.strokeStyle = '#000000';
            ctx.lineWidth = 2;
            for (let i = 1; i < steps; i++) {
                ctx.beginPath();
                ctx.moveTo(0, i * stepHeight);
                ctx.lineTo(w, i * stepHeight);
                ctx.stroke();
            }
        });

        material.specularColor = new BABYLON.Color3(0, 0, 0); // No specular highlights
        material.roughness = 1; // Rough surface

        return material;
    }

    private createNormalMaterial(): BABYLON.StandardMaterial {
        const material = new BABYLON.StandardMaterial('normalMat', this.scene);

        // Create normal map texture
        material.bumpTexture = this.createProceduralTexture(256, (ctx, w, h) => {
            const imageData = ctx.createImageData(w, h);
            for (let i = 0; i < imageData.data.length; i += 4) {
                const x = (i / 4) % w;
                const y = Math.floor((i / 4) / w);

                // Create flowing normal pattern
                const nx = Math.sin(x * 0.05) * 127 + 128;
                const ny = Math.cos(y * 0.05) * 127 + 128;
                const nz = 255;

                imageData.data[i] = nx;     // R (X normal)
                imageData.data[i + 1] = ny; // G (Y normal)
                imageData.data[i + 2] = nz; // B (Z normal)
                imageData.data[i + 3] = 255; // A
            }
            ctx.putImageData(imageData, 0, 0);
        });

        material.diffuseColor = new BABYLON.Color3(0.7, 0.7, 0.7);
        material.specularColor = new BABYLON.Color3(1, 1, 1);
        material.specularPower = 64;

        return material;
    }

    private createWireframeMaterial(): BABYLON.StandardMaterial {
        const material = new BABYLON.StandardMaterial('wireframeMat', this.scene);
        material.wireframe = true;
        material.emissiveColor = new BABYLON.Color3(0, 1, 1);
        material.diffuseColor = new BABYLON.Color3(0, 0, 0);
        material.specularColor = new BABYLON.Color3(0, 0, 0);

        return material;
    }

    private createProceduralTexture(size: number, generator: (ctx: CanvasRenderingContext2D, w: number, h: number) => void): BABYLON.Texture {
        const canvas = document.createElement('canvas');
        canvas.width = size;
        canvas.height = size;
        const context = canvas.getContext('2d')!;

        generator(context, size, size);

        return new BABYLON.Texture(null, this.scene, false, false, BABYLON.Texture.TRILINEAR_SAMPLINGMODE, null, canvas);
    }

    private setupEnvironment(): void {
        // Create ground with reflective material
        const ground = BABYLON.MeshBuilder.CreateGround('ground', { width: 30, height: 30 }, this.scene);
        ground.position.y = -3;

        const groundMaterial = new BABYLON.StandardMaterial('groundMat', this.scene);
        groundMaterial.diffuseColor = new BABYLON.Color3(0.1, 0.1, 0.1);
        groundMaterial.specularColor = new BABYLON.Color3(1, 1, 1);
        groundMaterial.specularPower = 128;
        groundMaterial.alpha = 0.9;
        ground.material = groundMaterial;

        // Create skybox
        this.createSkybox();

        // Add particle system for atmosphere
        this.createAtmosphere();
    }

    private createSkybox(): void {
        const skybox = BABYLON.MeshBuilder.CreateBox('skyBox', { size: 100 }, this.scene);
        const skyboxMaterial = new BABYLON.StandardMaterial('skyBox', this.scene);
        skyboxMaterial.backFaceCulling = false;
        skyboxMaterial.disableLighting = true;

        // Create gradient texture for skybox
        const skyTexture = this.createProceduralTexture(512, (ctx, w, h) => {
            const gradient = ctx.createLinearGradient(0, 0, 0, h);
            gradient.addColorStop(0, '#001133');
            gradient.addColorStop(0.5, '#004488');
            gradient.addColorStop(1, '#0088ff');
            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0, w, h);

            // Add stars
            ctx.fillStyle = '#ffffff';
            for (let i = 0; i < 100; i++) {
                const x = Math.random() * w;
                const y = Math.random() * h * 0.7;
                const size = Math.random() * 2;
                ctx.fillRect(x, y, size, size);
            }
        });

        skyboxMaterial.diffuseTexture = skyTexture;
        skyboxMaterial.emissiveTexture = skyTexture;
        skybox.material = skyboxMaterial;
    }

    private createAtmosphere(): void {
        const particleSystem = new BABYLON.ParticleSystem('atmosphere', 2000, this.scene);

        particleSystem.particleTexture = new BABYLON.Texture('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==', this.scene);

        particleSystem.emitter = BABYLON.Vector3.Zero();
        particleSystem.minEmitBox = new BABYLON.Vector3(-25, -25, -25);
        particleSystem.maxEmitBox = new BABYLON.Vector3(25, 25, 25);

        particleSystem.color1 = new BABYLON.Color4(1, 1, 1, 0.5);
        particleSystem.color2 = new BABYLON.Color4(0.5, 0.5, 1, 0.3);
        particleSystem.colorDead = new BABYLON.Color4(0, 0, 0, 0);

        particleSystem.minSize = 0.05;
        particleSystem.maxSize = 0.15;

        particleSystem.minLifeTime = 10;
        particleSystem.maxLifeTime = 30;

        particleSystem.emitRate = 50;
        particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ADD;
        particleSystem.gravity = new BABYLON.Vector3(0, 0, 0);
        particleSystem.direction1 = new BABYLON.Vector3(-1, -1, -1);
        particleSystem.direction2 = new BABYLON.Vector3(1, 1, 1);
        particleSystem.minEmitPower = 0.01;
        particleSystem.maxEmitPower = 0.05;

        particleSystem.start();
    }

    private startRenderLoop(): void {
        this.engine.runRenderLoop(() => {
            this.scene.render();
        });
    }
}

// 2. Advanced PBR Materials
class PBRMaterialDemo {
    private engine: BABYLON.Engine;
    private scene: BABYLON.Scene;
    private camera: BABYLON.ArcRotateCamera;

    constructor(canvas: HTMLCanvasElement) {
        this.engine = new BABYLON.Engine(canvas, true);
        this.scene = new BABYLON.Scene(this.engine);
        this.scene.clearColor = new BABYLON.Color4(0.02, 0.02, 0.05, 1);

        this.setupCamera();
        this.setupHDREnvironment();
        this.createPBRMaterials();
        this.createMaterialControls();
        this.startRenderLoop();
    }

    private setupCamera(): void {
        this.camera = new BABYLON.ArcRotateCamera(
            'camera',
            Math.PI / 2,
            Math.PI / 3,
            15,
            BABYLON.Vector3.Zero(),
            this.scene
        );
        this.camera.attachControl(this.engine.getRenderingCanvas(), true);
        this.camera.wheelPrecision = 50;
    }

    private setupHDREnvironment(): void {
        // Create HDR environment for realistic lighting
        const envTexture = BABYLON.CubeTexture.CreateFromPrefilteredData(
            'https://playground.babylonjs.com/textures/environment.dds',
            this.scene
        );
        envTexture.gammaSpace = false;
        envTexture.rotationY = Math.PI;

        // Set as environment texture
        this.scene.environmentTexture = envTexture;
        this.scene.createDefaultSkybox(envTexture, true, 1000);

        // Create IBL (Image Based Lighting)
        this.scene.environmentIntensity = 1.0;
    }

    private createPBRMaterials(): void {
        const materials = [
            this.createMetalMaterial(),
            this.createGlassMaterial(),
            this.createFabricMaterial(),
            this.createWoodMaterial(),
            this.createMarbleMaterial(),
            this.createHolographicMaterial()
        ];

        // Create display spheres
        materials.forEach((material, index) => {
            const mesh = BABYLON.MeshBuilder.CreateSphere(
                `pbrSphere${index}`,
                { diameter: 2, segments: 64 },
                this.scene
            );

            const angle = (index / materials.length) * Math.PI * 2;
            mesh.position.set(
                Math.cos(angle) * 5,
                0,
                Math.sin(angle) * 5
            );

            mesh.material = material;

            // Add animation
            this.scene.registerBeforeRender(() => {
                mesh.rotation.y += 0.01;
                mesh.position.y = Math.sin(Date.now() * 0.001 + index) * 0.5;
            });
        });

        // Create ground with PBR material
        this.createPBRGround();
    }

    private createMetalMaterial(): BABYLON.PBRMetallicRoughnessMaterial {
        const material = new BABYLON.PBRMetallicRoughnessMaterial('metal', this.scene);
        material.baseColor = new BABYLON.Color3(0.7, 0.7, 0.8);
        material.metallic = 1.0;
        material.roughness = 0.1;
        material.environmentIntensity = 1.0;

        // Add normal map for surface detail
        material.normalTexture = this.createNormalMap();
        material.useParallax = true;
        material.useParallaxOcclusion = true;

        return material;
    }

    private createGlassMaterial(): BABYLON.PBRMaterial {
        const material = new BABYLON.PBRMaterial('glass', this.scene);
        material.alpha = 0.2;
        material.subSurface.isRefractionEnabled = true;
        material.subSurface.refractionIntensity = 0.8;
        material.subSurface.tintColor = new BABYLON.Color3(0.8, 0.9, 1.0);
        material.indexOfRefraction = 1.5;
        material.metallic = 0;
        material.roughness = 0;
        material.clearCoat.isEnabled = true;
        material.clearCoat.intensity = 1.0;
        material.clearCoat.roughness = 0;

        return material;
    }

    private createFabricMaterial(): BABYLON.PBRMaterial {
        const material = new BABYLON.PBRMaterial('fabric', this.scene);
        material.albedoColor = new BABYLON.Color3(0.3, 0.2, 0.1);
        material.metallic = 0;
        material.roughness = 0.9;
        material.useSubSurfaceScattering = true;
        material.subSurface.tintColor = new BABYLON.Color3(0.8, 0.4, 0.1);
        material.subSurface.translucencyIntensity = 0.8;

        // Add fabric texture
        material.albedoTexture = this.createFabricTexture();
        material.bumpTexture = this.createFabricBumpTexture();

        return material;
    }

    private createWoodMaterial(): BABYLON.PBRMetallicRoughnessMaterial {
        const material = new BABYLON.PBRMetallicRoughnessMaterial('wood', this.scene);
        material.baseColor = new BABYLON.Color3(0.4, 0.2, 0.1);
        material.metallic = 0;
        material.roughness = 0.8;

        // Create wood grain texture
        material.baseTexture = this.createWoodGrainTexture();
        material.normalTexture = this.createWoodNormalTexture();

        return material;
    }

    private createMarbleMaterial(): BABYLON.PBRMaterial {
        const material = new BABYLON.PBRMaterial('marble', this.scene);
        material.albedoColor = new BABYLON.Color3(0.95, 0.95, 0.9);
        material.metallic = 0;
        material.roughness = 0.1;
        material.subSurface.isTranslucencyEnabled = true;
        material.subSurface.translucencyIntensity = 0.2;
        material.subSurface.tintColor = new BABYLON.Color3(0.9, 0.9, 0.8);

        // Create marble texture
        material.albedoTexture = this.createMarbleTexture();
        material.bumpTexture = this.createMarbleBumpTexture();

        return material;
    }

    private createHolographicMaterial(): BABYLON.PBRMaterial {
        const material = new BABYLON.PBRMaterial('holographic', this.scene);
        material.albedoColor = new BABYLON.Color3(1, 1, 1);
        material.metallic = 1.0;
        material.roughness = 0.1;

        // Create iridescent effect
        material.emissiveTexture = this.createIridescentTexture();
        material.emissiveIntensity = 0.5;

        // Animate the holographic effect
        this.scene.registerBeforeRender(() => {
            const time = Date.now() * 0.001;
            material.emissiveColor = new BABYLON.Color3(
                Math.sin(time) * 0.5 + 0.5,
                Math.sin(time + 2) * 0.5 + 0.5,
                Math.sin(time + 4) * 0.5 + 0.5
            );
        });

        return material;
    }

    private createPBRGround(): void {
        const ground = BABYLON.MeshBuilder.CreateGround('ground', { width: 30, height: 30 }, this.scene);
        ground.position.y = -3;

        const groundMaterial = new BABYLON.PBRMetallicRoughnessMaterial('groundPBR', this.scene);
        groundMaterial.baseColor = new BABYLON.Color3(0.1, 0.1, 0.1);
        groundMaterial.metallic = 0.1;
        groundMaterial.roughness = 0.8;
        groundMaterial.baseTexture = this.createGroundTexture();
        groundMaterial.normalTexture = this.createGroundNormalTexture();

        ground.material = groundMaterial;
    }

    // Texture creation helper methods
    private createNormalMap(): BABYLON.Texture {
        return this.createProceduralTexture('normalMap', (ctx, w, h) => {
            const imageData = ctx.createImageData(w, h);
            for (let i = 0; i < imageData.data.length; i += 4) {
                const x = (i / 4) % w;
                const y = Math.floor((i / 4) / w);
                const wave = Math.sin(x * 0.1) * Math.cos(y * 0.1);

                imageData.data[i] = 128 + wave * 50;     // R
                imageData.data[i + 1] = 128 - wave * 30; // G
                imageData.data[i + 2] = 255;             // B
                imageData.data[i + 3] = 255;             // A
            }
            ctx.putImageData(imageData, 0, 0);
        });
    }

    private createFabricTexture(): BABYLON.Texture {
        return this.createProceduralTexture('fabricTexture', (ctx, w, h) => {
            ctx.fillStyle = '#8B4513';
            ctx.fillRect(0, 0, w, h);

            // Create fabric weave pattern
            ctx.strokeStyle = '#654321';
            ctx.lineWidth = 1;

            for (let x = 0; x < w; x += 4) {
                ctx.beginPath();
                ctx.moveTo(x, 0);
                ctx.lineTo(x, h);
                ctx.stroke();
            }

            for (let y = 0; y < h; y += 4) {
                ctx.beginPath();
                ctx.moveTo(0, y);
                ctx.lineTo(w, y);
                ctx.stroke();
            }
        });
    }

    private createFabricBumpTexture(): BABYLON.Texture {
        return this.createProceduralTexture('fabricBump', (ctx, w, h) => {
            const imageData = ctx.createImageData(w, h);
            for (let i = 0; i < imageData.data.length; i += 4) {
                const x = (i / 4) % w;
                const y = Math.floor((i / 4) / h);
                const weave = (Math.floor(x / 4) + Math.floor(y / 4)) % 2;
                const value = weave ? 180 : 80;

                imageData.data[i] = 128;     // R
                imageData.data[i + 1] = 128; // G
                imageData.data[i + 2] = value; // B
                imageData.data[i + 3] = 255; // A
            }
            ctx.putImageData(imageData, 0, 0);
        });
    }

    private createWoodGrainTexture(): BABYLON.Texture {
        return this.createProceduralTexture('woodGrain', (ctx, w, h) => {
            const gradient = ctx.createLinearGradient(0, 0, w, 0);
            gradient.addColorStop(0, '#4A2C17');
            gradient.addColorStop(0.3, '#6B4423');
            gradient.addColorStop(0.6, '#8B5A2B');
            gradient.addColorStop(1, '#4A2C17');

            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0, w, h);

            // Add grain lines
            ctx.strokeStyle = '#2A1A0B';
            ctx.lineWidth = 1;
            for (let i = 0; i < 20; i++) {
                ctx.beginPath();
                ctx.moveTo(0, Math.random() * h);
                ctx.quadraticCurveTo(
                    w/2, Math.random() * h,
                    w, Math.random() * h
                );
                ctx.stroke();
            }
        });
    }

    private createWoodNormalTexture(): BABYLON.Texture {
        return this.createProceduralTexture('woodNormal', (ctx, w, h) => {
            const imageData = ctx.createImageData(w, h);
            for (let i = 0; i < imageData.data.length; i += 4) {
                const x = (i / 4) % w;
                const y = Math.floor((i / 4) / h);
                const grain = Math.sin(x * 0.05) * 20;

                imageData.data[i] = 128 + grain;     // R
                imageData.data[i + 1] = 128;         // G
                imageData.data[i + 2] = 255;         // B
                imageData.data[i + 3] = 255;         // A
            }
            ctx.putImageData(imageData, 0, 0);
        });
    }

    private createMarbleTexture(): BABYLON.Texture {
        return this.createProceduralTexture('marble', (ctx, w, h) => {
            ctx.fillStyle = '#F5F5DC';
            ctx.fillRect(0, 0, w, h);

            // Create marble veins
            ctx.strokeStyle = '#8B8680';
            ctx.lineWidth = 2;

            for (let i = 0; i < 15; i++) {
                ctx.beginPath();
                ctx.moveTo(Math.random() * w, 0);

                for (let y = 0; y < h; y += 10) {
                    const x = Math.random() * w;
                    ctx.lineTo(x, y);
                }

                ctx.globalAlpha = 0.3;
                ctx.stroke();
            }

            ctx.globalAlpha = 1;
        });
    }

    private createMarbleBumpTexture(): BABYLON.Texture {
        return this.createProceduralTexture('marbleBump', (ctx, w, h) => {
            const imageData = ctx.createImageData(w, h);
            for (let i = 0; i < imageData.data.length; i += 4) {
                const x = (i / 4) % w;
                const y = Math.floor((i / 4) / h);
                const noise = Math.sin(x * 0.02) * Math.cos(y * 0.02);

                imageData.data[i] = 128 + noise * 30;     // R
                imageData.data[i + 1] = 128 + noise * 30; // G
                imageData.data[i + 2] = 128 + noise * 20; // B
                imageData.data[i + 3] = 255;             // A
            }
            ctx.putImageData(imageData, 0, 0);
        });
    }

    private createIridescentTexture(): BABYLON.Texture {
        return this.createProceduralTexture('iridescent', (ctx, w, h) => {
            for (let x = 0; x < w; x++) {
                for (let y = 0; y < h; y++) {
                    const hue = (x / w) * 360;
                    const lightness = 50 + Math.sin((x / w) * Math.PI * 4) * 20;
                    ctx.fillStyle = `hsl(${hue}, 100%, ${lightness}%)`;
                    ctx.fillRect(x, y, 1, 1);
                }
            }
        });
    }

    private createGroundTexture(): BABYLON.Texture {
        return this.createProceduralTexture('ground', (ctx, w, h) => {
            ctx.fillStyle = '#1a1a1a';
            ctx.fillRect(0, 0, w, h);

            // Add concrete texture
            ctx.fillStyle = '#2a2a2a';
            for (let i = 0; i < 100; i++) {
                const x = Math.random() * w;
                const y = Math.random() * h;
                const size = Math.random() * 3;
                ctx.fillRect(x, y, size, size);
            }
        });
    }

    private createGroundNormalTexture(): BABYLON.Texture {
        return this.createProceduralTexture('groundNormal', (ctx, w, h) => {
            const imageData = ctx.createImageData(w, h);
            for (let i = 0; i < imageData.data.length; i += 4) {
                const noise = Math.random() * 20 - 10;

                imageData.data[i] = 128 + noise;     // R
                imageData.data[i + 1] = 128 + noise; // G
                imageData.data[i + 2] = 255;         // B
                imageData.data[i + 3] = 255;         // A
            }
            ctx.putImageData(imageData, 0, 0);
        });
    }

    private createProceduralTexture(name: string, generator: (ctx: CanvasRenderingContext2D, w: number, h: number) => void): BABYLON.Texture {
        const canvas = document.createElement('canvas');
        canvas.width = 512;
        canvas.height = 512;
        const context = canvas.getContext('2d')!;

        generator(context, 512, 512);

        const texture = new BABYLON.Texture(`${name}Texture`, this.scene, false, false, BABYLON.Texture.TRILINEAR_SAMPLINGMODE, null, canvas);
        texture.wrapU = BABYLON.Texture.WRAP_ADDRESSMODE;
        texture.wrapV = BABYLON.Texture.WRAP_ADDRESSMODE;

        return texture;
    }

    private createMaterialControls(): void {
        // Add UI for material controls
        const advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI('UI');

        const panel = new BABYLON.GUI.StackPanel();
        panel.width = '250px';
        panel.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;
        panel.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
        panel.top = '20px';

        advancedTexture.addControl(panel);

        const title = new BABYLON.GUI.TextBlock();
        title.text = 'PBR Material Showcase';
        title.color = 'white';
        title.fontSize = 16;
        title.fontWeight = 'bold';
        title.height = '30px';
        panel.addControl(title);

        const info = new BABYLON.GUI.TextBlock();
        info.text = 'Rotate camera to view different PBR materials\nEach material demonstrates different properties';
        info.color = 'white';
        info.fontSize = 12;
        info.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
        info.height = '60px';
        panel.addControl(info);
    }

    private startRenderLoop(): void {
        this.engine.runRenderLoop(() => {
            this.scene.render();
        });
    }
}

export {
    MaterialShowcase,
    PBRMaterialDemo
};

// Babylon.js Animations and Interactions Examples

import * as BABYLON from '@babylonjs/core';
import { GridMaterial } from '@babylonjs/materials/grid';
import '@babylonjs/loaders';

// 1. Advanced Animation System
class AdvancedAnimationSystem {
    private engine: BABYLON.Engine;
    private scene: BABYLON.Scene;
    private camera: BABYLON.ArcRotateCamera;
    private animations: Map<string, BABYLON.AnimationGroup> = new Map();

    constructor(canvas: HTMLCanvasElement) {
        this.engine = new BABYLON.Engine(canvas, true);
        this.scene = new BABYLON.Scene(this.engine);
        this.scene.clearColor = new BABYLON.Color4(0.05, 0.05, 0.15, 1);

        this.setupCamera();
        this.setupLighting();
        this.createAnimatedObjects();
        this.setupInteractionSystem();
        this.createAnimationUI();
        this.startRenderLoop();
    }

    private setupCamera(): void {
        this.camera = new BABYLON.ArcRotateCamera(
            'camera',
            0,
            Math.PI / 3,
            25,
            BABYLON.Vector3.Zero(),
            this.scene
        );
        this.camera.attachControl(this.engine.getRenderingCanvas(), true);
        this.camera.lowerRadiusLimit = 10;
        this.camera.upperRadiusLimit = 50;
    }

    private setupLighting(): void {
        const ambientLight = new BABYLON.HemisphericLight(
            'ambientLight',
            new BABYLON.Vector3(0, 1, 0),
            this.scene
        );
        ambientLight.intensity = 0.4;

        const mainLight = new BABYLON.DirectionalLight(
            'mainLight',
            new BABYLON.Vector3(-1, -2, 1),
            this.scene
        );
        mainLight.intensity = 2;
        mainLight.position = new BABYLON.Vector3(20, 40, 20);

        // Add animated point light
        const animatedLight = new BABYLON.PointLight(
            'animatedLight',
            new BABYLON.Vector3(0, 5, 0),
            this.scene
        );
        animatedLight.intensity = 1;
        animatedLight.diffuse = new BABYLON.Color3(1, 0.5, 0.2);

        // Animate light position
        const lightAnimation = BABYLON.Animation.CreateAndStartAnimation(
            'lightMove',
            animatedLight,
            'position',
            30,
            120,
            animatedLight.position.clone(),
            new BABYLON.Vector3(10, 5, 10),
            BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
        );
    }

    private createAnimatedObjects(): void {
        this.createRobotCharacter();
        this.createParticleEffects();
        this.createMorphingGeometry();
        this.createProceduralAnimations();
        this.createPhysicsAnimations();
        this.createSoundReactiveObjects();
    }

    private createRobotCharacter(): void {
        const robot = new BABYLON.TransformNode('robot');

        // Body
        const body = BABYLON.MeshBuilder.CreateBox('body', { width: 2, height: 3, depth: 1.5 }, this.scene);
        const bodyMaterial = new BABYLON.StandardMaterial('bodyMat', this.scene);
        bodyMaterial.diffuseColor = new BABYLON.Color3(0.7, 0.7, 0.8);
        bodyMaterial.specularColor = new BABYLON.Color3(0.2, 0.2, 0.3);
        body.material = bodyMaterial;
        body.parent = robot;

        // Head
        const head = BABYLON.MeshBuilder.CreateSphere('head', { diameter: 1.2 }, this.scene);
        head.position.y = 2.5;
        const headMaterial = new BABYLON.StandardMaterial('headMat', this.scene);
        headMaterial.diffuseColor = new BABYLON.Color3(0.9, 0.9, 0.9);
        head.material = headMaterial;
        head.parent = robot;

        // Eyes
        const leftEye = BABYLON.MeshBuilder.CreateSphere('leftEye', { diameter: 0.2 }, this.scene);
        leftEye.position.set(-0.3, 2.6, 0.5);
        const eyeMaterial = new BABYLON.StandardMaterial('eyeMat', this.scene);
        eyeMaterial.emissiveColor = new BABYLON.Color3(0, 1, 0);
        leftEye.material = eyeMaterial;
        leftEye.parent = robot;

        const rightEye = BABYLON.MeshBuilder.CreateSphere('rightEye', { diameter: 0.2 }, this.scene);
        rightEye.position.set(0.3, 2.6, 0.5);
        rightEye.material = eyeMaterial;
        rightEye.parent = robot;

        // Arms
        const leftArm = BABYLON.MeshBuilder.CreateBox('leftArm', { width: 0.4, height: 2.5, depth: 0.4 }, this.scene);
        leftArm.position.set(-1.5, 0.5, 0);
        const armMaterial = new BABYLON.StandardMaterial('armMat', this.scene);
        armMaterial.diffuseColor = new BABYLON.Color3(0.5, 0.5, 0.6);
        leftArm.material = armMaterial;
        leftArm.parent = robot;

        const rightArm = BABYLON.MeshBuilder.CreateBox('rightArm', { width: 0.4, height: 2.5, depth: 0.4 }, this.scene);
        rightArm.position.set(1.5, 0.5, 0);
        rightArm.material = armMaterial;
        rightArm.parent = robot;

        // Legs
        const leftLeg = BABYLON.MeshBuilder.CreateBox('leftLeg', { width: 0.5, height: 2, depth: 0.5 }, this.scene);
        leftLeg.position.set(-0.5, -2.5, 0);
        leftLeg.material = armMaterial;
        leftLeg.parent = robot;

        const rightLeg = BABYLON.MeshBuilder.CreateBox('rightLeg', { width: 0.5, height: 2, depth: 0.5 }, this.scene);
        rightLeg.position.set(0.5, -2.5, 0);
        rightLeg.material = armMaterial;
        rightLeg.parent = robot;

        robot.position.set(0, 2, 0);

        // Create walk animation group
        const walkAnimationGroup = new BABYLON.AnimationGroup('walk', this.scene);

        // Body bob animation
        const bodyBobAnimation = BABYLON.Animation.CreateAndStartAnimation(
            'bodyBob',
            robot,
            'position.y',
            30,
            30,
            2,
            2.5,
            BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
        );
        walkAnimationGroup.addTargetedAnimation(bodyBobAnimation, robot);

        // Arm swing animations
        const leftArmSwing = BABYLON.Animation.CreateAndStartAnimation(
            'leftArmSwing',
            leftArm,
            'rotation.z',
            30,
            30,
            0,
            Math.PI / 4,
            BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
        );
        walkAnimationGroup.addTargetedAnimation(leftArmSwing, leftArm);

        const rightArmSwing = BABYLON.Animation.CreateAndStartAnimation(
            'rightArmSwing',
            rightArm,
            'rotation.z',
            30,
            30,
            0,
            -Math.PI / 4,
            BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
        );
        walkAnimationGroup.addTargetedAnimation(rightArmSwing, rightArm);

        // Leg swing animations
        const leftLegSwing = BABYLON.Animation.CreateAndStartAnimation(
            'leftLegSwing',
            leftLeg,
            'rotation.x',
            30,
            30,
            0,
            Math.PI / 6,
            BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
        );
        walkAnimationGroup.addTargetedAnimation(leftLegSwing, leftLeg);

        const rightLegSwing = BABYLON.Animation.CreateAndStartAnimation(
            'rightLegSwing',
            rightLeg,
            'rotation.x',
            30,
            30,
            0,
            -Math.PI / 6,
            BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
        );
        walkAnimationGroup.addTargetedAnimation(rightLegSwing, rightLeg);

        // Head rotation
        const headLook = BABYLON.Animation.CreateAndStartAnimation(
            'headLook',
            head,
            'rotation.y',
            30,
            60,
            0,
            Math.PI * 2,
            BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
        );
        walkAnimationGroup.addTargetedAnimation(headLook, head);

        // Eye blinking
        const eyeBlink = BABYLON.Animation.CreateAndStartAnimation(
            'eyeBlink',
            leftEye,
            'scaling.y',
            30,
            90,
            1,
            0.1,
            BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
        );
        walkAnimationGroup.addTargetedAnimation(eyeBlink, leftEye);
        walkAnimationGroup.addTargetedAnimation(eyeBlink.clone(), rightEye);

        this.animations.set('walk', walkAnimationGroup);

        // Create jump animation
        const jumpAnimationGroup = new BABYLON.AnimationGroup('jump', this.scene);

        const jumpUp = BABYLON.Animation.CreateAndStartAnimation(
            'jumpUp',
            robot,
            'position.y',
            30,
            20,
            2,
            6,
            BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
        );
        jumpAnimationGroup.addTargetedAnimation(jumpUp, robot);

        const jumpDown = BABYLON.Animation.CreateAndStartAnimation(
            'jumpDown',
            robot,
            'position.y',
            30,
            20,
            6,
            2,
            BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
        );
        jumpDown.setKeys([
            { frame: 0, value: 2 },
            { frame: 20, value: 6 },
            { frame: 40, value: 2 }
        ]);

        jumpAnimationGroup.addTargetedAnimation(jumpDown, robot);

        this.animations.set('jump', jumpAnimationGroup);

        // Store robot reference for interaction
        robot.metadata = { type: 'robot', animations: ['walk', 'jump'] };
        this.scene.metadata = { robot, currentAnimation: 'walk' };
    }

    private createParticleEffects(): void {
        // Create multiple particle systems

        // Fire effect
        const fireSystem = new BABYLON.ParticleSystem('fire', 2000, this.scene);
        fireSystem.particleTexture = this.createFireTexture();
        fireSystem.emitter = new BABYLON.Vector3(-8, 0, 0);
        fireSystem.minEmitBox = new BABYLON.Vector3(-1, 0, -1);
        fireSystem.maxEmitBox = new BABYLON.Vector3(1, 0, 1);
        fireSystem.color1 = new BABYLON.Color4(1, 0.5, 0, 1);
        fireSystem.color2 = new BABYLON.Color4(1, 0, 0, 1);
        fireSystem.colorDead = new BABYLON.Color4(0, 0, 0, 0);
        fireSystem.minSize = 0.5;
        fireSystem.maxSize = 2;
        fireSystem.minLifeTime = 0.5;
        fireSystem.maxLifeTime = 2;
        fireSystem.emitRate = 500;
        fireSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ADD;
        fireSystem.gravity = new BABYLON.Vector3(0, -2, 0);
        fireSystem.direction1 = new BABYLON.Vector3(-1, 2, -1);
        fireSystem.direction2 = new BABYLON.Vector3(1, 4, 1);
        fireSystem.minAngularSpeed = -1;
        fireSystem.maxAngularSpeed = 1;
        fireSystem.minEmitPower = 1;
        fireSystem.maxEmitPower = 3;
        fireSystem.updateSpeed = 0.01;
        fireSystem.start();

        // Snow effect
        const snowSystem = new BABYLON.ParticleSystem('snow', 1000, this.scene);
        snowSystem.particleTexture = new BABYLON.Texture('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==', this.scene);
        snowSystem.emitter = new BABYLON.Vector3(0, 20, 0);
        snowSystem.minEmitBox = new BABYLON.Vector3(-15, 0, -15);
        snowSystem.maxEmitBox = new BABYLON.Vector3(15, 0, 15);
        snowSystem.color1 = new BABYLON.Color4(1, 1, 1, 1);
        snowSystem.color2 = new BABYLON.Color4(0.8, 0.8, 1, 1);
        snowSystem.colorDead = new BABYLON.Color4(0, 0, 0, 0);
        snowSystem.minSize = 0.2;
        snowSystem.maxSize = 0.8;
        snowSystem.minLifeTime = 5;
        snowSystem.maxLifeTime = 15;
        snowSystem.emitRate = 50;
        snowSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;
        snowSystem.gravity = new BABYLON.Vector3(0, -0.5, 0);
        snowSystem.direction1 = new BABYLON.Vector3(-0.5, -1, -0.5);
        snowSystem.direction2 = new BABYLON.Vector3(0.5, -1, 0.5);
        snowSystem.minAngularSpeed = 0;
        snowSystem.maxAngularSpeed = Math.PI;
        snowSystem.minEmitPower = 0.5;
        snowSystem.maxEmitPower = 1.5;
        snowSystem.start();

        // Magic portal effect
        const portalSystem = new BABYLON.ParticleSystem('portal', 1500, this.scene);
        portalSystem.particleTexture = this.createPortalTexture();
        portalSystem.emitter = new BABYLON.Vector3(8, 2, 0);
        portalSystem.minEmitBox = new BABYLON.Vector3(-1, 0, -1);
        portalSystem.maxEmitBox = new BABYLON.Vector3(1, 4, 1);
        portalSystem.color1 = new BABYLON.Color4(0.5, 0, 1, 1);
        portalSystem.color2 = new BABYLON.Color4(1, 0, 1, 1);
        portalSystem.colorDead = new BABYLON.Color4(0, 0, 0.5, 0);
        portalSystem.minSize = 0.3;
        portalSystem.maxSize = 1;
        portalSystem.minLifeTime = 1;
        portalSystem.maxLifeTime = 3;
        portalSystem.emitRate = 300;
        portalSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ADD;
        portalSystem.gravity = new BABYLON.Vector3(0, 0, 0);
        portalSystem.direction1 = new BABYLON.Vector3(-2, 2, -2);
        portalSystem.direction2 = new BABYLON.Vector3(2, 2, 2);
        portalSystem.minAngularSpeed = -Math.PI;
        portalSystem.maxAngularSpeed = Math.PI;
        portalSystem.minEmitPower = 0.5;
        portalSystem.maxEmitPower = 2;
        portalSystem.start();

        // Create platform for effects
        const platform1 = BABYLON.MeshBuilder.CreateCylinder(
            'firePlatform',
            { diameter: 3, height: 0.5 },
            this.scene
        );
        platform1.position.set(-8, -0.25, 0);
        const platformMaterial1 = new BABYLON.StandardMaterial('firePlatformMat', this.scene);
        platformMaterial1.diffuseColor = new BABYLON.Color3(0.3, 0.1, 0);
        platformMaterial1.emissiveColor = new BABYLON.Color3(0.2, 0.05, 0);
        platform1.material = platformMaterial1;

        const portalFrame = BABYLON.MeshBuilder.CreateTorus(
            'portalFrame',
            { diameter: 4, thickness: 0.3, tessellation: 32 },
            this.scene
        );
        portalFrame.position.set(8, 2, 0);
        const portalMaterial = new BABYLON.StandardMaterial('portalMat', this.scene);
        portalMaterial.diffuseColor = new BABYLON.Color3(0.5, 0, 1);
        portalMaterial.emissiveColor = new BABYLON.Color3(0.3, 0, 0.6);
        portalMaterial.specularColor = new BABYLON.Color3(1, 0, 1);
        portalFrame.material = portalMaterial;

        // Animate portal frame
        this.scene.registerBeforeRender(() => {
            portalFrame.rotation.y += 0.02;
            portalFrame.rotation.x = Math.sin(Date.now() * 0.001) * 0.1;
        });
    }

    private createMorphingGeometry(): void {
        // Create morphing sphere
        const sphere = BABYLON.MeshBuilder.CreateSphere(
            'morphingSphere',
            { diameter: 3, segments: 32 },
            this.scene
        );
        sphere.position.set(0, 5, 0);

        const sphereMaterial = new BABYLON.StandardMaterial('morphingSphereMat', this.scene);
        sphereMaterial.diffuseColor = new BABYLON.Color3(0.5, 0.8, 1);
        sphereMaterial.specularColor = new BABYLON.Color3(1, 1, 1);
        sphereMaterial.specularPower = 128;
        sphereMaterial.emissiveColor = new BABYLON.Color3(0.1, 0.2, 0.3);
        sphere.material = sphereMaterial;

        // Store original positions
        const positions = sphere.getVerticesData(BABYLON.VertexBuffer.PositionKind);
        const originalPositions = new Float32Array(positions!);

        // Animate morphing
        this.scene.registerBeforeRender(() => {
            const time = Date.now() * 0.001;
            const newPositions = new Float32Array(positions!.length);

            for (let i = 0; i < positions!.length; i += 3) {
                const x = originalPositions[i];
                const y = originalPositions[i + 1];
                const z = originalPositions[i + 2];

                // Apply wave deformation
                const wave = Math.sin(x * 2 + time * 2) * Math.cos(z * 2 + time * 3);
                const pulse = Math.sin(time * 2) * 0.1;

                newPositions[i] = x * (1 + pulse + wave * 0.1);
                newPositions[i + 1] = y * (1 + pulse) + Math.sin(time * 3 + x * 3) * 0.2;
                newPositions[i + 2] = z * (1 + pulse + wave * 0.1);
            }

            sphere.updateVerticesData(BABYLON.VertexBuffer.PositionKind, newPositions);
        });
    }

    private createProceduralAnimations(): void {
        // Create animated grid of cubes
        const gridSize = 5;
        const spacing = 2;
        const cubes: BABYLON.Mesh[] = [];

        for (let x = 0; x < gridSize; x++) {
            for (let z = 0; z < gridSize; z++) {
                const cube = BABYLON.MeshBuilder.CreateBox(
                    `cube${x}_${z}`,
                    { size: 1 },
                    this.scene
                );
                cube.position.set(
                    (x - gridSize / 2) * spacing,
                    0,
                    (z - gridSize / 2) * spacing
                );

                const material = new BABYLON.StandardMaterial(`cubeMat${x}_${z}`, this.scene);
                const hue = (x + z) / (gridSize * 2);
                material.diffuseColor = BABYLON.Color3.FromHSV(hue * 360, 1, 1);
                material.emissiveColor = material.diffuseColor.scale(0.3);
                cube.material = material;

                cubes.push(cube);
            }
        }

        // Animate the grid
        this.scene.registerBeforeRender(() => {
            const time = Date.now() * 0.001;

            cubes.forEach((cube, index) => {
                const x = index % gridSize;
                const z = Math.floor(index / gridSize);

                // Create wave effect
                const distance = Math.sqrt(
                    Math.pow(x - gridSize / 2, 2) +
                    Math.pow(z - gridSize / 2, 2)
                );

                const wave = Math.sin(time * 2 - distance * 0.5) * 0.5 + 0.5;
                cube.position.y = wave * 3;
                cube.rotation.y = time + index * 0.1;
                cube.scaling = cube.scaling.scale(1 + wave * 0.3);

                // Change material properties based on animation
                const mat = cube.material as BABYLON.StandardMaterial;
                mat.emissiveColor = mat.diffuseColor!.scale(wave * 0.5);
            });
        });
    }

    private createPhysicsAnimations(): void {
        // Enable physics
        this.scene.enablePhysics(
            new BABYLON.Vector3(0, -9.81, 0),
            new BABYLON.CannonJSPlugin()
        );

        // Create physics playground
        const ground = BABYLON.MeshBuilder.CreateGround('physicsGround', { width: 20, height: 20 }, this.scene);
        ground.position.set(-15, 0, 0);
        const groundMaterial = new BABYLON.StandardMaterial('physicsGroundMat', this.scene);
        groundMaterial.diffuseColor = new BABYLON.Color3(0.3, 0.3, 0.3);
        ground.material = groundMaterial;
        ground.physicsImpostor = new BABYLON.PhysicsImpostor(
            ground,
            BABYLON.PhysicsImpostor.BoxImpostor,
            { mass: 0, restitution: 0.8 },
            this.scene
        );

        // Create walls
        this.createPhysicsWalls();

        // Create physics objects periodically
        this.physicsSpawnTimer = 0;
        this.scene.registerBeforeRender(() => {
            this.physicsSpawnTimer += this.engine.getDeltaTime() / 1000;
            if (this.physicsSpawnTimer > 1) {
                this.spawnPhysicsObject();
                this.physicsSpawnTimer = 0;
            }
        });
    }

    private createPhysicsWalls(): void {
        const wallMaterial = new BABYLON.StandardMaterial('wallMat', this.scene);
        wallMaterial.diffuseColor = new BABYLON.Color3(0.6, 0.6, 0.6);
        wallMaterial.alpha = 0.5;

        // Create invisible walls
        const walls = [
            { position: new BABYLON.Vector3(-25, 5, 0), size: new BABYLON.Vector3(1, 10, 20) },
            { position: new BABYLON.Vector3(-5, 5, -10), size: new BABYLON.Vector3(20, 10, 1) },
            { position: new BABYLON.Vector3(-5, 5, 10), size: new BABYLON.Vector3(20, 10, 1) }
        ];

        walls.forEach(wallData => {
            const wall = BABYLON.MeshBuilder.CreateBox(
                `wall${walls.indexOf(wallData)}`,
                { width: wallData.size.x, height: wallData.size.y, depth: wallData.size.z },
                this.scene
            );
            wall.position = wallData.position;
            wall.material = wallMaterial;
            wall.physicsImpostor = new BABYLON.PhysicsImpostor(
                wall,
                BABYLON.PhysicsImpostor.BoxImpostor,
                { mass: 0, restitution: 0.5 },
                this.scene
            );
        });
    }

    private spawnPhysicsObject(): void {
        const shapes = ['box', 'sphere', 'cylinder'];
        const shape = shapes[Math.floor(Math.random() * shapes.length)];
        let mesh: BABYLON.Mesh;

        const position = new BABYLON.Vector3(
            -15 + (Math.random() - 0.5) * 10,
            5 + Math.random() * 5,
            (Math.random() - 0.5) * 5
        );

        switch (shape) {
            case 'box':
                mesh = BABYLON.MeshBuilder.CreateBox(`physicsBox${Date.now()}`, { size: 1 }, this.scene);
                break;
            case 'sphere':
                mesh = BABYLON.MeshBuilder.CreateSphere(`physicsSphere${Date.now()}`, { diameter: 1 }, this.scene);
                break;
            case 'cylinder':
                mesh = BABYLON.MeshBuilder.CreateCylinder(`physicsCylinder${Date.now()}`, { height: 1, diameter: 1 }, this.scene);
                break;
        }

        mesh.position = position;

        const material = new BABYLON.StandardMaterial(`physicsMat${Date.now()}`, this.scene);
        const hue = Math.random();
        material.diffuseColor = BABYLON.Color3.FromHSV(hue * 360, 1, 1);
        material.emissiveColor = material.diffuseColor.scale(0.3);
        mesh.material = material;

        // Add physics
        mesh.physicsImpostor = new BABYLON.PhysicsImpostor(
            mesh,
            shape === 'sphere' ? BABYLON.PhysicsImpostor.SphereImpostor : BABYLON.PhysicsImpostor.BoxImpostor,
            { mass: 1, restitution: 0.7, friction: 0.5 },
            this.scene
        );

        // Apply random impulse
        if (mesh.physicsImpostor) {
            const impulse = new BABYLON.Vector3(
                (Math.random() - 0.5) * 10,
                Math.random() * 5,
                (Math.random() - 0.5) * 10
            );
            mesh.physicsImpostor.applyImpulse(impulse, mesh.position);
        }
    }

    private createSoundReactiveObjects(): void {
        // Create animated spheres that react to "audio" (simulated)
        const audioReactiveSpheres: BABYLON.Mesh[] = [];
        const sphereCount = 8;

        for (let i = 0; i < sphereCount; i++) {
            const sphere = BABYLON.MeshBuilder.CreateSphere(
                `audioSphere${i}`,
                { diameter: 1.5, segments: 16 },
                this.scene
            );

            const angle = (i / sphereCount) * Math.PI * 2;
            sphere.position.set(
                Math.cos(angle) * 6,
                2,
                Math.sin(angle) * 6 + 10
            );

            const material = new BABYLON.StandardMaterial(`audioMat${i}`, this.scene);
            material.diffuseColor = BABYLON.Color3.FromHSV((i / sphereCount) * 360, 1, 1);
            material.emissiveColor = new BABYLON.Color3(0, 0, 0);
            sphere.material = material;

            audioReactiveSpheres.push(sphere);
        }

        // Simulate audio reaction
        this.scene.registerBeforeRender(() => {
            const time = Date.now() * 0.001;

            audioReactiveSpheres.forEach((sphere, index) => {
                // Simulate frequency bands
                const frequency = Math.sin(time * (index + 1) * 0.5) * 0.5 + 0.5;
                const bass = Math.sin(time * 0.8) * 0.5 + 0.5;

                // Scale based on simulated audio
                const scale = 1 + frequency * 2;
                sphere.scaling = new BABYLON.Vector3(scale, scale, scale);

                // Change color intensity
                const mat = sphere.material as BABYLON.StandardMaterial;
                const intensity = bass * 0.8;
                mat.emissiveColor = mat.diffuseColor!.scale(intensity);

                // Move up and down
                sphere.position.y = 2 + Math.sin(time * (index + 1) * 0.3) * 1.5;
            });
        });
    }

    private setupInteractionSystem(): void {
        // Ray casting for object selection
        this.scene.onPointerObservable.add((pointerInfo) => {
            if (pointerInfo.type === BABYLON.PointerEventTypes.POINTERDOWN) {
                const pickResult = this.scene.pick(pointerInfo.event.offsetX, pointerInfo.event.offsetY);

                if (pickResult && pickResult.hit && pickResult.pickedMesh) {
                    this.handleObjectInteraction(pickResult.pickedMesh);
                }
            }
        });

        // Keyboard controls
        window.addEventListener('keydown', (event) => {
            switch (event.key.toLowerCase()) {
                case '1':
                    this.switchAnimation('walk');
                    break;
                case '2':
                    this.switchAnimation('jump');
                    break;
                case ' ':
                    this.createExplosion(this.camera.position.add(this.camera.getDirection(new BABYLON.Vector3(0, 0, 1)).scale(10)));
                    break;
            }
        });
    }

    private handleObjectInteraction(mesh: BABYLON.Mesh): void {
        // Visual feedback
        this.createClickEffect(mesh.position);

        // Add impulse if physics object
        if (mesh.physicsImpostor && mesh.physicsImpostor.mass > 0) {
            const direction = this.camera.position.subtract(mesh.position).normalize();
            const impulse = direction.scale(-10);
            mesh.physicsImpostor.applyImpulse(impulse, mesh.position);
        }

        // Scale animation for non-physics objects
        if (!mesh.physicsImpostor || mesh.physicsImpostor.mass === 0) {
            BABYLON.Animation.CreateAndStartAnimation(
                'clickEffect',
                mesh,
                'scaling',
                30,
                10,
                mesh.scaling.clone(),
                mesh.scaling.scale(1.5),
                BABYLON.Animation.ANIMATIONLOOPMODE_YOYO
            );
        }
    }

    private createClickEffect(position: BABYLON.Vector3): void {
        const particleSystem = new BABYLON.ParticleSystem('clickEffect', 100, this.scene);
        particleSystem.particleTexture = new BABYLON.Texture('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==', this.scene);

        particleSystem.emitter = position;
        particleSystem.minEmitBox = new BABYLON.Vector3(-0.1, -0.1, -0.1);
        particleSystem.maxEmitBox = new BABYLON.Vector3(0.1, 0.1, 0.1);

        particleSystem.color1 = new BABYLON.Color4(1, 1, 1, 1);
        particleSystem.color2 = new BABYLON.Color4(1, 1, 0, 1);
        particleSystem.colorDead = new BABYLON.Color4(1, 0, 0, 0);

        particleSystem.minSize = 0.1;
        particleSystem.maxSize = 0.3;

        particleSystem.minLifeTime = 0.5;
        particleSystem.maxLifeTime = 1.5;

        particleSystem.emitRate = 100;
        particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ADD;
        particleSystem.gravity = new BABYLON.Vector3(0, -1, 0);
        particleSystem.direction1 = new BABYLON.Vector3(-1, 1, -1);
        particleSystem.direction2 = new BABYLON.Vector3(1, 1, 1);

        particleSystem.start();

        setTimeout(() => {
            particleSystem.stop();
        }, 100);
    }

    private createExplosion(position: BABYLON.Vector3): void {
        const explosionSystem = new BABYLON.ParticleSystem('explosion', 500, this.scene);
        explosionSystem.particleTexture = this.createExplosionTexture();

        explosionSystem.emitter = position;
        explosionSystem.minEmitBox = new BABYLON.Vector3(-1, -1, -1);
        explosionSystem.maxEmitBox = new BABYLON.Vector3(1, 1, 1);

        explosionSystem.color1 = new BABYLON.Color4(1, 1, 0, 1);
        explosionSystem.color2 = new BABYLON.Color4(1, 0.5, 0, 1);
        explosionSystem.colorDead = new BABYLON.Color4(1, 0, 0, 0);

        explosionSystem.minSize = 0.5;
        explosionSystem.maxSize = 2;

        explosionSystem.minLifeTime = 0.5;
        explosionSystem.maxLifeTime = 2;

        explosionSystem.emitRate = 500;
        explosionSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ADD;
        explosionSystem.gravity = new BABYLON.Vector3(0, -5, 0);
        explosionSystem.direction1 = new BABYLON.Vector3(-2, 2, -2);
        explosionSystem.direction2 = new BABYLON.Vector3(2, 5, 2);

        explosionSystem.start();

        // Apply explosion force to nearby physics objects
        this.scene.meshes.forEach(mesh => {
            if (mesh.physicsImpostor && mesh.physicsImpostor.mass > 0) {
                const distance = BABYLON.Vector3.Distance(mesh.position, position);
                if (distance < 10) {
                    const direction = mesh.position.subtract(position).normalize();
                    const force = direction.scale(50 / (distance + 1));
                    mesh.physicsImpostor.applyImpulse(force, mesh.position);
                }
            }
        });
    }

    private switchAnimation(animationName: string): void {
        const animation = this.animations.get(animationName);
        if (animation) {
            // Stop all other animations
            this.animations.forEach((anim) => {
                if (anim !== animation) {
                    anim.stop();
                }
            });

            // Start the requested animation
            animation.reset();
            animation.play(true);

            // Update current animation display
            if (this.scene.metadata.currentAnimationText) {
                this.scene.metadata.currentAnimationText.text = `Current Animation: ${animationName}`;
            }
        }
    }

    private createAnimationUI(): void {
        const advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI('UI');

        // Instructions panel
        const instructions = new BABYLON.GUI.TextBlock();
        instructions.text = 'Click objects to interact | 1: Walk Animation | 2: Jump Animation | Space: Explosion';
        instructions.color = 'white';
        instructions.fontSize = 14;
        instructions.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
        instructions.textVerticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
        instructions.top = '20px';
        advancedTexture.addControl(instructions);

        // Current animation display
        const currentAnimText = new BABYLON.GUI.TextBlock();
        currentAnimText.text = 'Current Animation: walk';
        currentAnimText.color = 'yellow';
        currentAnimText.fontSize = 16;
        currentAnimText.fontWeight = 'bold';
        currentAnimText.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
        currentAnimText.textVerticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
        currentAnimText.top = '50px';
        advancedTexture.addControl(currentAnimText);

        this.scene.metadata.currentAnimationText = currentAnimText;

        // Performance monitor
        const perfText = new BABYLON.GUI.TextBlock();
        perfText.text = 'FPS: --';
        perfText.color = 'white';
        perfText.fontSize = 12;
        perfText.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
        perfText.textVerticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_BOTTOM;
        perfText.left = '20px';
        perfText.top = '-40px';
        advancedTexture.addControl(perfText);

        // Update FPS counter
        let lastTime = performance.now();
        let frames = 0;

        this.scene.registerBeforeRender(() => {
            frames++;
            const currentTime = performance.now();

            if (currentTime >= lastTime + 1000) {
                const fps = Math.round((frames * 1000) / (currentTime - lastTime));
                perfText.text = `FPS: ${fps} | Meshes: ${this.scene.meshes.length} | Particles: Active`;

                frames = 0;
                lastTime = currentTime;
            }
        });
    }

    // Texture creation helper methods
    private createFireTexture(): BABYLON.Texture {
        return new BABYLON.Texture('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==', this.scene);
    }

    private createPortalTexture(): BABYLON.Texture {
        return new BABYLON.Texture('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==', this.scene);
    }

    private createExplosionTexture(): BABYLON.Texture {
        return new BABYLON.Texture('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==', this.scene);
    }

    private startRenderLoop(): void {
        this.engine.runRenderLoop(() => {
            this.scene.render();
        });
    }
}

export {
    AdvancedAnimationSystem
};