<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
        <link rel="manifest" href="/site.webmanifest">
        <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
        <meta name="msapplication-TileColor" content="#da532c">
        <!-- Character Encoding -->
        <meta charset="UTF-8">

        <!-- Responsive Design -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- SEO Title (Max 60 characters) -->
        <title>Dulce Dotcom - Where Dreams and Reality Cross Paths</title>

        <!-- Meta Description (Max 160 characters) -->
        <meta name="description" content="Explore AI-generated 3D art, interactive virtual environments, and cutting-edge digital experiences where dreams and reality cross paths.">

        <!-- Canonical URL (Prevents duplicate content issues) -->
        <link rel="canonical" href="https://dulce.com/">

        <!-- Keywords (Google ignores it, but some search engines use it) -->
        <meta name="keywords" content="AI art, 3D modeling, virtual environments, generative AI, Three.js, digital assets">

        <!-- Robots Instructions -->
        <meta name="robots" content="index, follow">

        <!-- Google Site Verification (For Google Search Console) -->
        <meta name="google-site-verification" content="PjLKrx4GCXbxb8Tj6KQK4KfJOqCXNF4Ef2lgJlXTfk0">

        <!-- Favicon -->
        <link rel="icon" href="https://dulce.com/favicon.ico" type="image/x-icon">
        <!-- Open Graph Protocol -->
         <meta property="fb:app_id" content="144568408972907">
        <meta property="og:type" content="website">
        <meta property="og:title" content="Dulce Dotcom - Where Dreams and Reality Cross Paths">
        <meta property="og:description" content="Explore AI-generated 3D art, interactive virtual environments, and cutting-edge digital experiences where dreams and reality cross paths.">
        <meta property="og:url" content="https://dulce.com/">
        <meta property="og:image" content="https://dulce.com/preview.png">
        <meta property="og:image:width" content="1200">
        <meta property="og:image:height" content="630">
        <meta property="og:site_name" content="Dulce Dotcom">
        <meta property="og:locale" content="en_US">

        <!-- Twitter Card Type (Summary with large image recommended) -->
        <meta name="twitter:card" content="summary_large_image">
        <meta name="twitter:title" content="Dulce Dotcom - Where Dreams and Reality Cross Paths">
        <meta name="twitter:description" content="Explore AI-generated 3D art, interactive virtual environments, and cutting-edge digital experiences where dreams and reality cross paths">
        <meta name="twitter:image" content="https://dulce.com/preview.png">
        <meta name="twitter:site" content="@dulce303">
        <meta name="twitter:creator" content="@dulce303">
        <!-- Prevent Clickjacking -->
        <meta http-equiv="X-Frame-Options" content="DENY">

        <!-- Force Latest Rendering Engine -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <!-- Referrer Policy (Limits Data Sent on External Links) -->
        <meta name="referrer" content="no-referrer-when-downgrade">

        <!-- Content Language -->
        <meta http-equiv="Content-Language" content="en">
        
        <!-- Structured Data -->
        <script type="application/ld+json">
        {
            "@context": "https://schema.org",
            "@type": "WebSite",
            "name": "Dulce Dotcom",
            "alternateName": "Dulce.com",
            "description": "Explore AI-generated 3D art, interactive virtual environments, and cutting-edge digital experiences where dreams and reality cross paths",
            "url": "https://dulce.com",
            "creator": {
                "@type": "Person",
                "name": "Dulce",
                "jobTitle": "AI Artist & Digital Creator",
                "url": "https://dulce.com/about/",
                "sameAs": [
                    "https://twitter.com/dulce303",
                    "https://instagram.com/dulce303",
                    "https://facebook.com/dulce303"
                ]
            },
            "mainEntity": {
                "@type": "CreativeWork",
                "name": "AI-Generated 3D Art & Virtual Environments",
                "description": "Interactive digital experiences where dreams and reality cross paths"
            },
            "potentialAction": {
                "@type": "SearchAction",
                "target": "https://dulce.com/?q={search_term_string}",
                "query-input": "required name=search_term_string"
            }
        }
        </script>
        <!-- Babylon.js -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
        <script src="https://assets.babylonjs.com/generated/Assets.js"></script>
        <script src="https://cdn.babylonjs.com/recast.js"></script>
        <script src="https://cdn.babylonjs.com/havok/HavokPhysics_umd.js"></script>
        <script src="https://cdn.babylonjs.com/addons/babylonjs.addons.min.js"></script>
        <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
        <script src="https://preview.babylonjs.com/ammo.js"></script>
        <script src="https://preview.babylonjs.com/cannon.js"></script>
        <script src="https://preview.babylonjs.com/Oimo.js"></script>
        <script src="https://preview.babylonjs.com/libktx.js"></script>
        <script src="https://preview.babylonjs.com/earcut.min.js"></script>
        <script src="https://preview.babylonjs.com/babylon.js"></script>
        <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
        <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
        <script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
        <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
        <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
        <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>

        <style>
            html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
                min-block-size: 100%;
                font-family: system-ui, sans-serif;
                display: grid;
                block-size: 100%;
            }

            #canvas1 {
                width: 100%;
                height: 100%;
                touch-action: none;
            }
            .wrapper {
            box-sizing: border-box;
            min-height: 100%;
            display: flex;
            flex-direction: column;
            z-index: initial;
            position: absolute;
            overflow: hidden;
            }
    .page-header {
    flex-grow: 0;
    flex-shrink: 0;
    z-index: 10;
    position: absolute;
    right: 0;
    left: 0;
    height: 100px;
    top: 0;
    float: right;
    color: black;
    height: 80px;

  }

  .page-header img {
    z-index: 10;
    position: absolute;
    right: 0;
    top: 0;
    width: 30%;
  }

        .scene-info-tab {
            position: fixed;
            top: 200px;
            right: 0;
            z-index: 9999;
            width: 320px;
            max-width: 90vw;
            background: rgba(255,255,255,0.97);
            box-shadow: -2px 0 12px rgba(0,0,0,0.15);
            border-radius: 10px 0 0 10px;
            transform: translateX(270px);
            transition: transform 0.3s cubic-bezier(.4,0,.2,1);
            animation: tabJitter 0.5s infinite;
        }
        .scene-info-tab.open {
            transform: translateX(0);
            animation: none;
        }
        @keyframes tabJitter {
            0% { transform: translateX(320px) translateY(0); }
            20% { transform: translateX(320px) translateY(-3px); }
            40% { transform: translateX(320px) translateY(3px); }
            60% { transform: translateX(320px) translateY(-2px); }
            80% { transform: translateX(320px) translateY(2px); }
            100% { transform: translateX(320px) translateY(0); }
        }

        .page-footer {
            flex-grow: 0;
            flex-shrink: 0;
            z-index: 10;
            position: fixed;
            right: 0;
            left: 0;
            height: 80px;
            bottom: 0;
            float: left;
            color: black;
            background: white;
            width: 100%;
        }
        .page-footer p {
            z-index: 10;
            position: absolute;
            top: 10px;
            left: 20px;
            margin: 0;
            width: auto;
            font-family: 'Roboto', sans-serif;
            font-weight: 300;
            float: left;
        }
        .page-footer img {
            z-index: 10;
            right: 0;
            bottom: 0;
            width: 15%;
        }
            .page-body {
            flex-grow: 1;
            }
            .shadow-button-set {
            margin: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 1vmin;
            z-index: 12;
            position: absolute;
            top: 02%;
            }

            a {
            text-decoration: none;
            color: black;
            outline: none;
            cursor: pointer;
        }

        a:hover {
            color: red;
            outline: none;
        }
                
        .shadow-button-set > li {
            display: inline-flex;
            background: black;
        }
        
        .shadow-button-set > li:is(:hover, :focus-within) > button:not(:active) {
            --distance: -10px;
            }
        
        .shadow-button-set button {
            -webkit-appearance: none;
            -moz-appearance: none;
                    appearance: none;
            outline: none;
            font-size: 5vmin;
            border: 3px solid black;
            background: white;
            
            --distance: 0;
            transform: translateX(var(--distance)) translateY(var(--distance));
        }
        
.footer__social {
            display: flex;
            justify-content: flex-start;
            margin: 0;
            padding: 0;
            list-style: none;
            float: left;
            position: absolute;
            bottom: 10px;
            left: 20px;
            top: 30px;
        }
        .footer__social img {
            width: 30px;
            height: 30px;
            margin: 0 0.3em 0.3em 0;
        }	
        .footer__social a.button1{
        display:inline-block;
        padding:0.35em 1.2em;
        margin:0 0.3em 0.3em 0;
        border-radius:0.12em;
        box-sizing: border-box;
        text-decoration:none;
        font-family:'Roboto',sans-serif;
        font-weight:300;
        color:#FFFFFF;
        text-align:center;
        transition: all 0.2s;
        }
        .footer__social a.button1:hover{
        color: #000000;
        background-color: grey;
            }

        .footer__copyright {
            font-family: 'Roboto', sans-serif;
            font-weight: 300;
            position: absolute;
            bottom: 10px;
            right: 20px;
            margin: 0;
        }

        #canvas2 {
                width: 100%;
                height: 100%;
            }
        #canvas1 {
                width: 100%;
                height: 100%;
            }
        #canvas3 {
                width: 100%;
                height: 100%;
            }
        #canvasZone {
                width: auto;
                height: auto;
                position: absolute;
                top: 550px;
                right: 50px;
                z-index: 10;
                font-family: 'Roboto', sans-serif;
                font-weight: 300;
                color: black;
                max-width: 800px;
                background-color: rgba(128, 128, 128, 0.5);
                border-radius: 10px;
                padding: 20px;
                text-align: left;
            }
    .switchCanvases {
        position: relative; 
        bottom: 150px; 
        z-index: 1000; 
        width: 100px; 
        height: 100px; 
        left: 50px; 
        color: white; 
        background-color: black; 
        border: 1px solid white; 
        border-radius: 5px; 
        padding: 10px; 
        font-size: 16px; 
        font-weight: bold; 
        cursor: pointer;
    }

    @media only screen and (min-width: 393px) and (max-width: 767px) { 

model-viewer {
        height: 600px;
        width: 400px; 
        position: relative; 
        margin: auto;
        margin-top: 150px;
    }

    .footer__social {
      width: 300px; 
      margin: auto 0;
      position: relative;
      left: 15%;
      top: 0%;
    }
    .footer__social img {
        width: 20px;
        height: 20px;
        margin: 0 0 0 0;
    }
    .footer__social a.button1 {
        padding: 2px;
    }

    .page-footer {
        height: 80px;
    }

    .page-header {
        height: 0px;
    }
    .page-header img {
    z-index: 10;
    position: absolute;
    right: 30%;
    top: 10%;
    width: 45%;
}
    .shadow-button-set {
    top: 10%;
    left: -08%;
}
.page-footer p {
    visibility: hidden;

    }

    .switchCanvases {
        left: 01%;
        top: -90%;
    }

    #canvasZone {
    right: 0%;
}

}
        @media (prefers-reduced-motion: no-preference) {
            .footer__social a.button1 {
            display:block;
            margin:0.4em auto;
            }
        
        .shadow-button-set button {
            will-change: transform;
            transition: transform .2s ease 
        }
            }

        * {
        box-sizing: border-box;
        margin: 0;
        }

        </style>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-65NSP2JNBQ"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag('config', 'G-65NSP2JNBQ');
</script>

    </head>
<body>
<!-- partial:index.partial.html -->
    <header class="page-header">
        <a href="index.html" target="_self"><img src="../dulcelogo.svg" alt="Dulce Dotcom Logo"></a>
    </header>
    <ul class="shadow-button-set">
        <li><button><a href="../oceansim/index.html" target="_self">🌊 Ocean Simulator</a></button></li>
        <li><button><a href="index.html" target="_self">Scenes</a></button></li>
        <li><button><a href="../avatars/index.html" target="_self">Avatars</a></button></li>
        <li><button><a href="../aiart/index.html" target="_self">AI Art</a></button></li>
        <li><button><a href="../ai3d/index.html" target="_self">AI 3D</a></button></li>
        <li><button><a href="../aivideo/index.html" target="_self">AI Films</a></button></li>
        <li><button><a href="../nft/index.html" target="_self">NFTs</a></button></li>
        <li><button><a href="../about/index.html" target="_self">About</a></button></li>
        <li><button><a href="../blog/index.html" target="_self">Blog</a></button></li>
    </ul>
    <div id="canvasZone" class="wrapper">
        <h1 style="font-size: 1.6em;">🍬 Dulce Dotcom 🍬 <br> Where Dreams and Reality Cross Paths! </h1><br>
        <p>Welcome to Dulce Dotcom, where dreams and reality cross paths. Explore AI crafted 3D art, interactive avatars, and immersive WebXR experiences—all built for the future of digital self expression. Discover how the boundary between dreams and reality is redefined through digital creativity.</p>
    </div>
    <!-- Floating Pop-out Tab -->
    <div id="sceneInfoTab" class="scene-info-tab">
        <button id="sceneInfoToggle" aria-label="Show scene info" class="scene-info-toggle">&#9776;</button>
        <div class="scene-info-content">
            <h2>About This Page</h2>
            <p>
                Experience three interactive 3D scenes: Dulce Dotcom with a hummingbird in sun rays, a dynamic studio set with moving shapes and lighting, and a vivid sun simulation. Switch scenes for a unique digital journey. These immersive experiences are crafted using Babylon.js, a powerful open-source 3D engine for the web. The entire site is built on JavaScript, serving as a showcase for dynamic, interactive, and visually rich web experiences. Every element, from the avatars to the animated environments, demonstrates the creative potential of modern JavaScript and real-time graphics in the browser.
            </p>
        </div>
    </div>
    <style>
        .scene-info-tab {
            position: fixed;
            top: 200px;
            right: 0;
            z-index: 9999;
            width: 320px;
            max-width: 90vw;
            background: rgba(255,255,255,0.97);
            box-shadow: -2px 0 12px rgba(0,0,0,0.15);
            border-radius: 10px 0 0 10px;
            transform: translateX(320px); /* flush right, tab only visible */
            transition: transform 0.3s cubic-bezier(.4,0,.2,1);
            animation: tabJitter 0.5s infinite;
        }
        .scene-info-tab.open {
            transform: translateX(0);
            animation: none;
        }
        .scene-info-toggle {
            position: absolute;
            left: -40px;
            top: 20px;
            width: 36px;
            height: 36px;
            background: #222;
            color: #fff;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            font-size: 1.5em;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        }
        .scene-info-content {
            padding: 24px 32px 18px 32px; /* pad left and right */
            font-family: 'Roboto', system-ui, sans-serif;
            font-size: 1em;
            color: #222;
        }
        @media (max-width: 600px) {
            .scene-info-tab {
                font-size: 0.95em;
            }
            .scene-info-content {
                padding: 16px 16px 8px 16px;
            }
        }
        @keyframes tabJitter {
            0% { transform: translateX(320px) translateY(0); }
            20% { transform: translateX(320px) translateY(-3px); }
            40% { transform: translateX(320px) translateY(3px); }
            60% { transform: translateX(320px) translateY(-2px); }
            80% { transform: translateX(320px) translateY(2px); }
            100% { transform: translateX(320px) translateY(0); }
        }
    </style>
    <script>
        const tab = document.getElementById('sceneInfoTab');
        const toggle = document.getElementById('sceneInfoToggle');
        toggle.addEventListener('click', function() {
            tab.classList.toggle('open');
        });
    </script>
    <!-- End Floating Pop-out Tab -->
    
    <!-- GoFundMe Slide-out Tab -->
    <div id="gofundmeTab" class="gofundme-tab">
        <button id="gofundmeToggle" aria-label="Show GoFundMe" class="gofundme-toggle">💜</button>
        <div class="gofundme-content">
            <div class="gfm-embed" data-url="https://www.gofundme.com/f/dulce-dotcom/widget/large?sharesheet=undefined&attribution_id=sl:fecbae88-cff4-4778-ada9-fa8bac9f7fdd"></div>
        </div>
    </div>
    <style>
        .gofundme-tab {
            position: fixed;
            top: 300px;
            right: 0;
            z-index: 9998;
            width: 350px;
            max-width: 90vw;
            background: rgba(255,255,255,0.98);
            box-shadow: -2px 0 12px rgba(0,0,0,0.2);
            border-radius: 10px 0 0 10px;
            transform: translateX(0); /* Start open (visible) */
            transition: transform 0.3s cubic-bezier(.4,0,.2,1);
        }
        .gofundme-tab.closed {
            transform: translateX(350px);
        }
        .gofundme-toggle {
            position: absolute;
            left: -40px;
            top: 20px;
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #fff;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            font-size: 1.2em;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .gofundme-toggle:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        }
        .gofundme-content {
            padding: 16px;
            font-family: 'Roboto', system-ui, sans-serif;
            color: #222;
            overflow-y: auto;
            max-height: 80vh;
        }
        @media (max-width: 600px) {
            .gofundme-tab {
                width: 90vw;
                transform: translateX(0);
            }
            .gofundme-tab.closed {
                transform: translateX(100%);
            }
            .gofundme-content {
                padding: 12px;
            }
        }
    </style>
    <script>
        const gfmTab = document.getElementById('gofundmeTab');
        const gfmToggle = document.getElementById('gofundmeToggle');
        gfmToggle.addEventListener('click', function() {
            gfmTab.classList.toggle('closed');
        });
    </script>
    <!-- End GoFundMe Slide-out Tab -->
    
    </div>
    <footer class="page-footer">
        <p>Join a journey into interactive 3D. Follow along on Instagram (@dulce303) & Threads for AI art drops and WebXR releases.</p>
                            <div class="footer__social">
                                <a href="https://facebook.com/dulce303" class="button1" target="_blank"><img src="../textures/SVG/fb.svg" alt="Facebook icon"></a>
                                <a href="https://instagram.com/dulce303" class="button1" target="_blank"><img src="../textures/SVG/ig.svg" alt="Instagram icon"></a>
                                <a href="https://www.threads.net/@dulce303" class="button1" target="_blank"><img src="../textures/SVG/th.svg" alt="Threads icon"></a>
                                <a href="https://youtube.com/dulce303" class="button1" target="_blank"><img src="../textures/SVG/yt.svg" alt="YouTube icon"></a>
                                <a href="https://x.com/dulce303" class="button1" target="_blank"><img src="../textures/SVG/x.svg" alt="X (Twitter) icon"></a>
                                <a href="https://www.midjourney.com/explore?user_id=dulce303" class="button1" target="_blank"><img src="../textures/SVG/mj.svg" alt="Midjourney icon"></a>
                                <a href="https://open.spotify.com/user/dulce303" class="button1" target="_blank"><img src="../textures/SVG/sp.svg" alt="Spotify icon"></a>
                                <a href="https://www.tiktok.com/@dulcedotcom" class="button1" target="_blank"><img src="../textures/SVG/tt.svg" alt="TikTok icon"></a>
                                <a href="https://linkedin.com/in/dulce303" class="button1" target="_blank"><img src="../textures/SVG/in.svg" alt="LinkedIn icon"></a>
                            </div>
                            <br>
        <div class="footer__copyright">©2025 Dulce Dotcom, LLC.</div>
    </footer>

<!-- partial -->
    <canvas id="canvas1" style="display: block;"></canvas>
    <canvas id="canvas2" style="display: none;"></canvas>
    <canvas id="canvas3" style="display: none;"></canvas>
    
<script>
/*
 * Babylon.js Multi-Canvas Scene Manager
 * This script manages two independent Babylon.js scenes, each with its own engine and canvas.
 * Only the active canvas/scene is rendered at a time.
 * Use switchCanvases() to toggle between them.
 */

let babylonScenes = {
    canvas1: {
        canvas: null,
        engine: null,
        scene: null,
        renderLoop: null,
        initialized: false
    },
    canvas2: {
        canvas: null,
        engine: null,
        scene: null,
        renderLoop: null,
        initialized: false
    },
    canvas3: {
        canvas: null,
        engine: null,
        scene: null,
        renderLoop: null,
        initialized: false
    },
};
let currentCanvasId = "canvas1";

// --- Scene 1: Original "canvas1" code ---
function createScene1(engine, canvas) {
    var scene = new BABYLON.Scene(engine);

    // Lights
    var light = new BABYLON.HemisphericLight("HemiLight", new BABYLON.Vector3(0, 1, 0), scene);
    light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene);

    // Camera
    var camera = new BABYLON.ArcRotateCamera("Camera", 5, -2, 10, BABYLON.Vector3.Zero(), scene);
    camera.setPosition(new BABYLON.Vector3(6, -5, -10));
    camera.attachControl(canvas, true);

    // Model
    BABYLON.SceneLoader.ImportMesh("", "scenes/models/", "dulcedotcomHB2.glb", scene, function (newMeshes) {
        camera.target = newMeshes[0];
        newMeshes[0].material = new BABYLON.StandardMaterial("dulcedotcomHB2", scene);
        newMeshes[0].material.emissiveColor = new BABYLON.Color3(0.5, .2, .2);
        const gl = new BABYLON.GlowLayer("glow", scene);
    });

    // God Rays
    var godrays = new BABYLON.VolumetricLightScatteringPostProcess('godrays', 1.0, camera, null, 100, BABYLON.Texture.BILINEAR_SAMPLINGMODE, engine, false);
    godrays.mesh.material.diffuseTexture = new BABYLON.Texture('textures/sun.png', scene, true, false, BABYLON.Texture.BILINEAR_SAMPLINGMODE);
    godrays.mesh.material.diffuseTexture.hasAlpha = true;
    godrays.mesh.position = new BABYLON.Vector3(-150, 150, 150);
    godrays.mesh.scaling = new BABYLON.Vector3(350, 350, 350);
    light.position = godrays.mesh.position;

    // Skybox
    var skybox = BABYLON.Mesh.CreateBox("skyBox", 800.0, scene);
    var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
    skyboxMaterial.backFaceCulling = false;
    skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/TropicalSunnyDay", scene);
    skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
    skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
    skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
    skyboxMaterial.disableLighting = true;
    skybox.material = skyboxMaterial;

    // Hidden fountain mesh for particles
    var fountain = BABYLON.Mesh.CreateBox("foutain", 1, scene);
    fountain.visibility = 0;

    // Particle system
    var particleSystem;
    var useGPUVersion = false;
    var fogTexture = new BABYLON.Texture("https://raw.githubusercontent.com/aWeirdo/Babylon.js/master/smoke_15.png", scene);

    var createNewSystem = function() {
        if (particleSystem) particleSystem.dispose();

        if (useGPUVersion && BABYLON.GPUParticleSystem.IsSupported) {
            particleSystem = new BABYLON.GPUParticleSystem("particles", { capacity: 50000 }, scene);
            particleSystem.activeParticleCount = 15000;
            particleSystem.manualEmitCount = particleSystem.activeParticleCount;
            particleSystem.minEmitBox = new BABYLON.Vector3(-100, 2, -100);
            particleSystem.maxEmitBox = new BABYLON.Vector3(100, 2, 100);
        } else {
            particleSystem = new BABYLON.ParticleSystem("particles", 2500 , scene);
            particleSystem.manualEmitCount = particleSystem.getCapacity();
            particleSystem.minEmitBox = new BABYLON.Vector3(-100, 2, -100);
            particleSystem.maxEmitBox = new BABYLON.Vector3(100, 2, 100);
        }

        particleSystem.particleTexture = fogTexture.clone();
        particleSystem.emitter = fountain;
        particleSystem.color1 = new BABYLON.Color4(0.8, 0.8, 0.8, 0.1);
        particleSystem.color2 = new BABYLON.Color4(.95, .95, .95, 0.15);
        particleSystem.colorDead = new BABYLON.Color4(0.9, 0.9, 0.9, 0.1);
        particleSystem.minSize = 3.5;
        particleSystem.maxSize = 5.0;
        particleSystem.minLifeTime = Number.MAX_SAFE_INTEGER;
        particleSystem.emitRate = 50000;
        particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_STANDARD;
        particleSystem.gravity = new BABYLON.Vector3(0, 0, 0);
        particleSystem.direction1 = new BABYLON.Vector3(0, 0, 0);
        particleSystem.direction2 = new BABYLON.Vector3(0, 0, 0);
        particleSystem.minAngularSpeed = -2;
        particleSystem.maxAngularSpeed = 2;
        particleSystem.minEmitPower = .5;
        particleSystem.maxEmitPower = 1;
        particleSystem.updateSpeed = 0.005;
        particleSystem.start();
    }
    createNewSystem();

    // GUI
    var advancedTexture;
    var buildUI = function() {
        if (advancedTexture) advancedTexture.dispose();
        advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");

        var bottomPanel = new BABYLON.GUI.StackPanel();
        bottomPanel.height = "100px";
        bottomPanel.paddingBottom = "20px";
        bottomPanel.isVertical = true;
        bottomPanel.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_STRETCH;
        bottomPanel.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_BOTTOM;
        bottomPanel.fontSize = 16;
        advancedTexture.addControl(bottomPanel);

        var leftPanel = new BABYLON.GUI.StackPanel();
        leftPanel.width = "300px";
        leftPanel.isVertical = true;
        leftPanel.paddingLeft = "20px";
        leftPanel.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
        leftPanel.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
        leftPanel.fontSize = 16;
        advancedTexture.addControl(leftPanel);

        var addCheckbox = function(text, initial, onCheck, panel) {
            var checkbox = new BABYLON.GUI.Checkbox();
            checkbox.width = "20px";
            checkbox.height = "20px";
            checkbox.color = "green";
            checkbox.isChecked = initial;
            checkbox.onIsCheckedChangedObservable.add(function(value) {
                onCheck(value);
            });

            var header = BABYLON.GUI.Control.AddHeader(checkbox, text, "180px", { isHorizontal: true, controlFirst: true});
            header.height = "30px";
            header.color = "white";
            header.outlineWidth = "4px";
            header.outlineColor = "black";
            header.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
            panel.addControl(header);
        }

        var addHeader = function(text, panel) {
            var header = new BABYLON.GUI.TextBlock();
            header.text = text;
            header.height = "30px";
            header.color = "white";
            header.outlineWidth = "4px";
            header.outlineColor = "black";
            header.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
            panel.addControl(header);
        }

        // if (particleSystem.activeParticleCount) {
        //     addHeader("dulce" + particleSystem.activeParticleCount, bottomPanel);
        // } else {
        //     addHeader("dulce" + particleSystem.getCapacity(), bottomPanel);
        // }

        // if (BABYLON.GPUParticleSystem.IsSupported) {
        //     addCheckbox("more clouds", useGPUVersion, function(value){
        //         useGPUVersion = value;
        //         createNewSystem();
        //         buildUI();
        //     }, leftPanel);
        // } else {
        //     addHeader("Browser does not support WebGL2", leftPanel);
        //     addHeader("less clouds...", leftPanel);
        // }
    }
    buildUI();

    return scene;
}

// --- Scene 2: Original "canvas2" code ---
function createLight2(position, rotation, color, name, scene){
    const box = BABYLON.MeshBuilder.CreateBox("box" + name, {width: 3, height: 6, depth: 0.01});
    const lightMaterial = new BABYLON.StandardMaterial();
    lightMaterial.disableLighting = true;
    lightMaterial.emissiveColor = color;
    box.material =  lightMaterial;

    box.position = position
    box.rotation = rotation;
    box.scaling.set(1,2,0.5);

    var light = new BABYLON.RectAreaLight("light" + name, new BABYLON.Vector3(0, 0, 0), 3, 6, scene);
    light.parent = box;
    light.specular = color;
    light.diffuse = color;
    light.intensity = 0.7;
    return box;
}

async function createScene2(engine, canvas) {
    var scene = new BABYLON.Scene(engine);
    scene.clearColor = BABYLON.Color3.Black();

    var camera = new BABYLON.ArcRotateCamera("camera", 4.1398, 1.3330, 47, new BABYLON.Vector3(17, 1, 0), scene);
    camera.attachControl(canvas, true);

    let boxes = [];
    for (let i = 0; i < 9; i++) {
        boxes.push(createLight2(new BABYLON.Vector3(i * 5, 7, 0), new BABYLON.Vector3(0,0, 0), new BABYLON.Color3(0.9,0.8,0.8), "light1", scene));
    }

    const standardMaterial = new BABYLON.StandardMaterial("StandardMaterial", scene);
    standardMaterial.roughness = 0.1;
    standardMaterial.metallic = 0.1;
    standardMaterial.albedoColor = BABYLON.Color3.White();

    const standardMaterial2 = new BABYLON.StandardMaterial("StandardMaterial2", scene);
    standardMaterial2.roughness = 0.2;
    standardMaterial2.metallic = 0.3;
    standardMaterial2.albedoColor = BABYLON.Color3.White();

    standardMaterial.maxSimultaneousLights = 9;
    standardMaterial2.maxSimultaneousLights = 9;

    // materials for spheres
    const standardMaterialSph = new BABYLON.StandardMaterial("StandardMaterial", scene);
    standardMaterialSph.roughness = 0.2;
    standardMaterialSph.metallic = 0.2;
    standardMaterialSph.albedoColor = BABYLON.Color3.White();

    const standardMaterialSph2 = new BABYLON.StandardMaterial("StandardMaterial2", scene);
    standardMaterialSph2.roughness = 0.5;
    standardMaterialSph2.metallic = 0.5;
    standardMaterialSph2.albedoColor = BABYLON.Color3.White();

    standardMaterialSph.maxSimultaneousLights = 9;
    standardMaterialSph2.maxSimultaneousLights = 9;

    // Ground
    for (let y = -100; y < 100; y += 5) {
        for (let x = -100; x < 100; x += 5) {
            const batchIndex = ((x + y) & 1) ? 1 : 0;
            var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 5, height: 5}, scene);
            ground.position.set(x,0,y);
            ground.material = batchIndex ? standardMaterial : standardMaterial2;
        }
    }
    let spheres = [];
    for (let i = 0; i < 10; i++) {
        var sphere = BABYLON.MeshBuilder.CreateSphere("sphere2", {diameter: 3, segments: 32}, scene);
        sphere.position.y = 3;
        sphere.position.x = 20;
        sphere.position.z = -15;
        sphere.material = (i & 1) ? standardMaterialSph : standardMaterialSph2;
        spheres.push(sphere);
    }

    var time = 0;
    var localTime = 1;
    scene.onBeforeRenderObservable.add(()=>{
        if (localTime >= 1) {
            for (let i = 0; i < 10; i++) {
                spheres[i].position.set(Math.random() * 12 + 8, Math.random() * 4 + 2, Math.random() * 4 - 14);
                const sc = Math.random() * 0.8 + 0.5;
                spheres[i].scaling.set(sc,sc,sc);
            }
            localTime = 0;
        }
        for (let i = 0; i < 9; i++) {
            const sc = Math.max(Math.cos(time * Math.PI - Math.abs(i - 4)*0.2) - 0.8, 0) * 4 + 1.5;
            boxes[i].scaling.y = sc;
            boxes[i].material.emissiveColor.r = 0.6 + sc * 0.3;
        }
        camera.alpha += Math.cos(time* 0.1) * 0.0003;
        camera.beta += Math.cos(time * 0.16) * 0.00035;
        var dt = engine.getDeltaTime() * 0.0016;
        localTime += dt;
        time += dt;
    });

    await scene.whenReadyAsync();
    return scene;
}

// --- Scene 3: Sun Scene (from the second script) ---
function createScene3(engine, canvas) {
    var scene = new BABYLON.Scene(engine);
    scene.clearColor = new BABYLON.Color3(0.0, 0.0, 0.0);

    // Emitter object
    var stars = BABYLON.Mesh.CreateBox("emitter", 0.01, scene);

    // Create a particle system
    var surfaceParticles = new BABYLON.ParticleSystem("surfaceParticles", 1600, scene);
    var flareParticles = new BABYLON.ParticleSystem("flareParticles", 20, scene);
    var coronaParticles = new BABYLON.ParticleSystem("coronaParticles", 600, scene);
    var starsParticles = new BABYLON.ParticleSystem("starsParticles", 500, scene);

    // Texture of each particle
    surfaceParticles.particleTexture = new BABYLON.Texture("https://raw.githubusercontent.com/PatrickRyanMS/BabylonJStextures/master/ParticleSystems/Sun/T_SunSurface.png", scene);
    flareParticles.particleTexture = new BABYLON.Texture("https://raw.githubusercontent.com/PatrickRyanMS/BabylonJStextures/master/ParticleSystems/Sun/T_SunFlare.png", scene);
    coronaParticles.particleTexture = new BABYLON.Texture("https://raw.githubusercontent.com/PatrickRyanMS/BabylonJStextures/master/ParticleSystems/Sun/T_Star.png", scene);
    starsParticles.particleTexture = new BABYLON.Texture("https://raw.githubusercontent.com/PatrickRyanMS/BabylonJStextures/master/ParticleSystems/Sun/T_Star.png", scene);

    // Create core sphere
    var coreSphere = BABYLON.MeshBuilder.CreateSphere("coreSphere", {diameter: 2.01, segments: 64}, scene);

    // Create core material
    var coreMat = new BABYLON.StandardMaterial("coreMat", scene)
    coreMat.emissiveColor = new BABYLON.Color3(0.3773, 0.0930, 0.0266); 

    // Assign core material to sphere
    coreSphere.material = coreMat;

    // Pre-warm
    surfaceParticles.preWarmStepOffset = 10;
    surfaceParticles.preWarmCycles = 100;

    flareParticles.preWarmStepOffset = 10;
    flareParticles.preWarmCycles = 100;

    coronaParticles.preWarmStepOffset = 10;
    coronaParticles.preWarmCycles = 100;

    // Initial rotation
    surfaceParticles.minInitialRotation = -2 * Math.PI;
    surfaceParticles.maxInitialRotation = 2 * Math.PI;

    flareParticles.minInitialRotation = -2 * Math.PI;
    flareParticles.maxInitialRotation = 2 * Math.PI;

    coronaParticles.minInitialRotation = -2 * Math.PI;
    coronaParticles.maxInitialRotation = 2 * Math.PI;

    // Where the sun particles come from
    var sunEmitter = new BABYLON.SphereParticleEmitter();
    sunEmitter.radius = 1;
    sunEmitter.radiusRange = 0; // emit only from shape surface

    // Where the stars particles come from
    var starsEmitter = new BABYLON.SphereParticleEmitter();
    starsEmitter.radius = 20;
    starsEmitter.radiusRange = 0; // emit only from shape surface

    // Assign particles to emitters
    surfaceParticles.emitter = coreSphere; // the starting object, the emitter
    surfaceParticles.particleEmitterType = sunEmitter;

    flareParticles.emitter = coreSphere; // the starting object, the emitter
    flareParticles.particleEmitterType = sunEmitter;

    coronaParticles.emitter = coreSphere; // the starting object, the emitter
    coronaParticles.particleEmitterType = sunEmitter;

    starsParticles.emitter = stars; // the starting object, the emitter
    starsParticles.particleEmitterType = starsEmitter;

    // Random starting color
    starsParticles.color1 = new BABYLON.Color4(0.898, 0.737, 0.718, 1.0);
    starsParticles.color2 = new BABYLON.Color4(0.584, 0.831, 0.894, 1.0);

    // Color gradient over time
    surfaceParticles.addColorGradient(0, new BABYLON.Color4(0.8509, 0.4784, 0.1019, 0.0));
    surfaceParticles.addColorGradient(0.4, new BABYLON.Color4(0.6259, 0.3056, 0.0619, 0.5));
    surfaceParticles.addColorGradient(0.5, new BABYLON.Color4(0.6039, 0.2887, 0.0579, 0.5));
    surfaceParticles.addColorGradient(1.0, new BABYLON.Color4(0.3207, 0.0713, 0.0075, 0.0));

    flareParticles.addColorGradient(0, new BABYLON.Color4(1, 0.9612, 0.5141, 0.0));
    flareParticles.addColorGradient(0.25, new BABYLON.Color4(0.9058, 0.7152, 0.3825, 1.0));
    flareParticles.addColorGradient(1.0, new BABYLON.Color4(0.6320, 0.0, 0.0, 0.0));

    coronaParticles.addColorGradient(0, new BABYLON.Color4(0.8509, 0.4784, 0.1019, 0.0));
    coronaParticles.addColorGradient(0.5, new BABYLON.Color4(0.6039, 0.2887, 0.0579, 0.12));
    coronaParticles.addColorGradient(1.0, new BABYLON.Color4(0.3207, 0.0713, 0.0075, 0.0));

    // Size of each particle (random between...
    surfaceParticles.minSize = 0.4;
    surfaceParticles.maxSize = 0.7;

    flareParticles.minScaleX = 0.5;
    flareParticles.minScaleY = 0.5;
    flareParticles.maxScaleX= 1.0;
    flareParticles.maxScaleY = 1.0;

    coronaParticles.minScaleX = 0.5;
    coronaParticles.minScaleY = 0.75;
    coronaParticles.maxScaleX = 1.2;
    coronaParticles.maxScaleY = 3.0;

    starsParticles.minSize = 0.15;
    starsParticles.maxSize = 0.3;

    // Size over lifetime
    flareParticles.addSizeGradient(0, 0);
    flareParticles.addSizeGradient(1, 1);

    // Life time of each particle (random between...
    surfaceParticles.minLifeTime = 8.0;
    surfaceParticles.maxLifeTime = 8.0;

    flareParticles.minLifeTime = 10.0;
    flareParticles.maxLifeTime = 10.0;

    coronaParticles.minLifeTime = 2.0;
    coronaParticles.maxLifeTime= 2.0;

    starsParticles.minLifeTime = 999999;
    starsParticles.maxLifeTime = 999999;

    // Emission rate
    surfaceParticles.emitRate = 200;
    flareParticles.emitRate = 1;
    coronaParticles.emitRate = 300;

    // Burst rate
    starsParticles.manualEmitCount = 500;
    starsParticles.maxEmitPower = 0.0;

    // Blend mode : BLENDMODE_ONEONE, BLENDMODE_STANDARD, or BLENDMODE_ADD
    surfaceParticles.blendMode = BABYLON.ParticleSystem.BLENDMODE_ADD;
    flareParticles.blendMode = BABYLON.ParticleSystem.BLENDMODE_ADD;
    coronaParticles.blendMode = BABYLON.ParticleSystem.BLENDMODE_ADD;
    starsParticles.blendMode = BABYLON.ParticleSystem.BLENDMODE_STANDARD;

    // Set the gravity of all particles
    surfaceParticles.gravity = new BABYLON.Vector3(0, 0, 0);
    flareParticles.gravity = new BABYLON.Vector3(0, 0, 0);
    coronaParticles.gravity = new BABYLON.Vector3(0, 0, 0);
    starsParticles.gravity = new BABYLON.Vector3(0, 0, 0);

    // Angular speed, in radians
    surfaceParticles.minAngularSpeed = -0.4;
    surfaceParticles.maxAngularSpeed = 0.4;

    flareParticles.minAngularSpeed = 0.0;
    flareParticles.maxAngularSpeed = 0.0;

    coronaParticles.minAngularSpeed = 0.0;
    coronaParticles.maxAngularSpeed = 0.0;

    starsParticles.minAngularSpeed = 0.0;
    starsParticles.maxAngularSpeed = 0.0;

    // Speed
    surfaceParticles.minEmitPower = 0;
    surfaceParticles.maxEmitPower = 0;
    surfaceParticles.updateSpeed = 0.005;

    flareParticles.minEmitPower = 0.001;
    flareParticles.maxEmitPower = 0.01;

    coronaParticles.minEmitPower = 0.0;
    coronaParticles.maxEmitPower = 0.0;

    starsParticles.minEmitPower = 0.0;
    starsParticles.maxAngularSpeed = 0.0;

    // No billboard
    surfaceParticles.isBillboardBased = false;
    flareParticles.isBillboardBased = true;
    coronaParticles.isBillboardBased = true;
    starsParticles.isBillboardBased = true;

    // Render Order
    starsParticles.renderingGroupId = 0;
    coronaParticles.renderingGroupId = 1;
    flareParticles.renderingGroupId = 2;
    surfaceParticles.renderingGroupId = 3;
    coreSphere.renderingGroupId = 3;

    // Start the particle system
    surfaceParticles.start();
    flareParticles.start();
    coronaParticles.start();
    starsParticles.start();

    scene.createDefaultCamera(true, undefined, true);
    scene.activeCamera.lowerRadiusLimit = 2;

    return scene;
}

// --- Engine/Scene Initialization ---
function initBabylonScene(canvasId) {
    if (babylonScenes[canvasId].initialized) return; // Already initialized

    let canvas = document.getElementById(canvasId);
    if (!canvas) {
        console.error("Canvas not found:", canvasId);
        return;
    }
    let engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
    babylonScenes[canvasId].canvas = canvas;
    babylonScenes[canvasId].engine = engine;

    if (canvasId === "canvas1") {
        babylonScenes[canvasId].scene = createScene1(engine, canvas);
        babylonScenes[canvasId].initialized = true;
    } else if (canvasId === "canvas2") {
        // createScene2 is async
        babylonScenes[canvasId].scene = null;
        createScene2(engine, canvas).then(scene => {
            babylonScenes[canvasId].scene = scene;
            babylonScenes[canvasId].initialized = true;
        });
    } else if (canvasId === "canvas3") {
        babylonScenes[canvasId].scene = createScene3(engine, canvas);
        babylonScenes[canvasId].initialized = true;
    }
}

// --- Render Loop Management ---
function startRenderLoopFor(canvasId) {
    // Stop all render loops
    Object.keys(babylonScenes).forEach(id => {
        if (babylonScenes[id].engine && babylonScenes[id].renderLoop) {
            babylonScenes[id].engine.stopRenderLoop(babylonScenes[id].renderLoop);
        }
        // Ensure proper display state
        if (babylonScenes[id].canvas) {
            babylonScenes[id].canvas.style.display = (id === canvasId) ? "block" : "none";
        }
    });

    let sceneObj = babylonScenes[canvasId];
    if (!sceneObj.initialized) {
        initBabylonScene(canvasId);
    }

    // Wait for async scene creation if needed
    function tryStartLoop() {
        let scene = sceneObj.scene;
        if (!scene) {
            setTimeout(tryStartLoop, 50);
            return;
        }
        sceneObj.renderLoop = function() {
            if (scene.activeCamera) scene.render();
        };
        sceneObj.engine.runRenderLoop(sceneObj.renderLoop);
    }
    tryStartLoop();
}

// --- Resize Handler ---
window.addEventListener("resize", function () {
    Object.values(babylonScenes).forEach(obj => {
        if (obj.engine) obj.engine.resize();
    });
});

// --- Initial Scene ---
window.addEventListener("DOMContentLoaded", function() {
    // Hide all canvases, show only the first
    document.getElementById("canvas1").style.display = "block";
    document.getElementById("canvas2").style.display = "none";
    document.getElementById("canvas3").style.display = "none";
    startRenderLoopFor("canvas1");
    currentCanvasId = "canvas1";
});

// --- Canvas Switcher (used by button) ---
function switchCanvases() {
    // Cycle through all three canvases
    if (currentCanvasId === "canvas1") {
        currentCanvasId = "canvas2";
    } else if (currentCanvasId === "canvas2") {
        currentCanvasId = "canvas3";
    } else {
        currentCanvasId = "canvas1";
    }
    
    // Force display update for all canvases
    document.getElementById("canvas1").style.display = (currentCanvasId === "canvas1") ? "block" : "none";
    document.getElementById("canvas2").style.display = (currentCanvasId === "canvas2") ? "block" : "none";
    document.getElementById("canvas3").style.display = (currentCanvasId === "canvas3") ? "block" : "none";
    
    startRenderLoopFor(currentCanvasId);
}
window.switchCanvases = switchCanvases;
</script>

<script>
    var canvas = document.getElementById("canvas3");

    var startRenderLoop = function (engine, canvas) {
        engine.runRenderLoop(function () {
            if (sceneToRender && sceneToRender.activeCamera) {
                sceneToRender.render();
            }
        });
    }

    var engine = null;
var scene = null;
var sceneToRender = null;
var createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true,  disableWebGL2Support: false}); };
var createScene = function () {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(0.0, 0.0, 0.0);

// Emitter object
var stars = BABYLON.Mesh.CreateBox("emitter", 0.01, scene);

// Create a particle system
var surfaceParticles = new BABYLON.ParticleSystem("surfaceParticles", 1600, scene);
var flareParticles = new BABYLON.ParticleSystem("flareParticles", 20, scene);
var coronaParticles = new BABYLON.ParticleSystem("coronaParticles", 600, scene);
var starsParticles = new BABYLON.ParticleSystem("starsParticles", 500, scene);

// Texture of each particle
surfaceParticles.particleTexture = new BABYLON.Texture("https://raw.githubusercontent.com/PatrickRyanMS/BabylonJStextures/master/ParticleSystems/Sun/T_SunSurface.png", scene);
flareParticles.particleTexture = new BABYLON.Texture("https://raw.githubusercontent.com/PatrickRyanMS/BabylonJStextures/master/ParticleSystems/Sun/T_SunFlare.png", scene);
coronaParticles.particleTexture = new BABYLON.Texture("https://raw.githubusercontent.com/PatrickRyanMS/BabylonJStextures/master/ParticleSystems/Sun/T_Star.png", scene);
starsParticles.particleTexture = new BABYLON.Texture("https://raw.githubusercontent.com/PatrickRyanMS/BabylonJStextures/master/ParticleSystems/Sun/T_Star.png", scene);

// Create core sphere
var coreSphere = BABYLON.MeshBuilder.CreateSphere("coreSphere", {diameter: 2.01, segments: 64}, scene);

// Create core material
var coreMat = new BABYLON.StandardMaterial("coreMat", scene)
coreMat.emissiveColor = new BABYLON.Color3(0.3773, 0.0930, 0.0266); 

// Assign core material to sphere
coreSphere.material = coreMat;

// Pre-warm
surfaceParticles.preWarmStepOffset = 10;
surfaceParticles.preWarmCycles = 100;

flareParticles.preWarmStepOffset = 10;
flareParticles.preWarmCycles = 100;

coronaParticles.preWarmStepOffset = 10;
coronaParticles.preWarmCycles = 100;

// Initial rotation
surfaceParticles.minInitialRotation = -2 * Math.PI;
surfaceParticles.maxInitialRotation = 2 * Math.PI;

flareParticles.minInitialRotation = -2 * Math.PI;
flareParticles.maxInitialRotation = 2 * Math.PI;

coronaParticles.minInitialRotation = -2 * Math.PI;
coronaParticles.maxInitialRotation = 2 * Math.PI;

// Where the sun particles come from
var sunEmitter = new BABYLON.SphereParticleEmitter();
sunEmitter.radius = 1;
sunEmitter.radiusRange = 0; // emit only from shape surface

// Where the stars particles come from
var starsEmitter = new BABYLON.SphereParticleEmitter();
starsEmitter.radius = 20;
starsEmitter.radiusRange = 0; // emit only from shape surface

// Assign particles to emitters
surfaceParticles.emitter = coreSphere; // the starting object, the emitter
surfaceParticles.particleEmitterType = sunEmitter;

flareParticles.emitter = coreSphere; // the starting object, the emitter
flareParticles.particleEmitterType = sunEmitter;

coronaParticles.emitter = coreSphere; // the starting object, the emitter
coronaParticles.particleEmitterType = sunEmitter;

starsParticles.emitter = stars; // the starting object, the emitter
starsParticles.particleEmitterType = starsEmitter;

// Random starting color
starsParticles.color1 = new BABYLON.Color4(0.898, 0.737, 0.718, 1.0);
starsParticles.color2 = new BABYLON.Color4(0.584, 0.831, 0.894, 1.0);

// Color gradient over time
surfaceParticles.addColorGradient(0, new BABYLON.Color4(0.8509, 0.4784, 0.1019, 0.0));
surfaceParticles.addColorGradient(0.4, new BABYLON.Color4(0.6259, 0.3056, 0.0619, 0.5));
surfaceParticles.addColorGradient(0.5, new BABYLON.Color4(0.6039, 0.2887, 0.0579, 0.5));
surfaceParticles.addColorGradient(1.0, new BABYLON.Color4(0.3207, 0.0713, 0.0075, 0.0));

flareParticles.addColorGradient(0, new BABYLON.Color4(1, 0.9612, 0.5141, 0.0));
flareParticles.addColorGradient(0.25, new BABYLON.Color4(0.9058, 0.7152, 0.3825, 1.0));
flareParticles.addColorGradient(1.0, new BABYLON.Color4(0.6320, 0.0, 0.0, 0.0));

coronaParticles.addColorGradient(0, new BABYLON.Color4(0.8509, 0.4784, 0.1019, 0.0));
coronaParticles.addColorGradient(0.5, new BABYLON.Color4(0.6039, 0.2887, 0.0579, 0.12));
coronaParticles.addColorGradient(1.0, new BABYLON.Color4(0.3207, 0.0713, 0.0075, 0.0));

    // Size of each particle (random between...
    surfaceParticles.minSize = 0.4;
    surfaceParticles.maxSize = 0.7;

    flareParticles.minScaleX = 0.5;
    flareParticles.minScaleY = 0.5;
    flareParticles.maxScaleX= 1.0;
    flareParticles.maxScaleY = 1.0;

    coronaParticles.minScaleX = 0.5;
    coronaParticles.minScaleY = 0.75;
    coronaParticles.maxScaleX = 1.2;
    coronaParticles.maxScaleY = 3.0;

    starsParticles.minSize = 0.15;
    starsParticles.maxSize = 0.3;

    // Size over lifetime
    flareParticles.addSizeGradient(0, 0);
    flareParticles.addSizeGradient(1, 1);

    // Life time of each particle (random between...
    surfaceParticles.minLifeTime = 8.0;
    surfaceParticles.maxLifeTime = 8.0;

    flareParticles.minLifeTime = 10.0;
    flareParticles.maxLifeTime = 10.0;

    coronaParticles.minLifeTime = 2.0;
    coronaParticles.maxLifeTime= 2.0;

    starsParticles.minLifeTime = 999999;
    starsParticles.maxLifeTime = 999999;

    // Emission rate
    surfaceParticles.emitRate = 200;
    flareParticles.emitRate = 1;
    coronaParticles.emitRate = 300;

    // Burst rate
    starsParticles.manualEmitCount = 500;
    starsParticles.maxEmitPower = 0.0;

    // Blend mode : BLENDMODE_ONEONE, BLENDMODE_STANDARD, or BLENDMODE_ADD
    surfaceParticles.blendMode = BABYLON.ParticleSystem.BLENDMODE_ADD;
    flareParticles.blendMode = BABYLON.ParticleSystem.BLENDMODE_ADD;
    coronaParticles.blendMode = BABYLON.ParticleSystem.BLENDMODE_ADD;
    starsParticles.blendMode = BABYLON.ParticleSystem.BLENDMODE_STANDARD;

    // Set the gravity of all particles
    surfaceParticles.gravity = new BABYLON.Vector3(0, 0, 0);
    flareParticles.gravity = new BABYLON.Vector3(0, 0, 0);
    coronaParticles.gravity = new BABYLON.Vector3(0, 0, 0);
    starsParticles.gravity = new BABYLON.Vector3(0, 0, 0);

    // Angular speed, in radians
    surfaceParticles.minAngularSpeed = -0.4;
    surfaceParticles.maxAngularSpeed = 0.4;

    flareParticles.minAngularSpeed = 0.0;
    flareParticles.maxAngularSpeed = 0.0;

    coronaParticles.minAngularSpeed = 0.0;
    coronaParticles.maxAngularSpeed = 0.0;

    starsParticles.minAngularSpeed = 0.0;
    starsParticles.maxAngularSpeed = 0.0;

    // Speed
    surfaceParticles.minEmitPower = 0;
    surfaceParticles.maxEmitPower = 0;
    surfaceParticles.updateSpeed = 0.005;

    flareParticles.minEmitPower = 0.001;
    flareParticles.maxEmitPower = 0.01;

    coronaParticles.minEmitPower = 0.0;
    coronaParticles.maxEmitPower = 0.0;

    starsParticles.minEmitPower = 0.0;
    starsParticles.maxAngularSpeed = 0.0;

    // No billboard
    surfaceParticles.isBillboardBased = false;
    flareParticles.isBillboardBased = true;
    coronaParticles.isBillboardBased = true;
    starsParticles.isBillboardBased = true;

    // Render Order
    starsParticles.renderingGroupId = 0;
    coronaParticles.renderingGroupId = 1;
    flareParticles.renderingGroupId = 2;
    surfaceParticles.renderingGroupId = 3;
    coreSphere.renderingGroupId = 3;

    // Start the particle system
    surfaceParticles.start();
    flareParticles.start();
    coronaParticles.start();
    starsParticles.start();

    scene.createDefaultCamera(true, undefined, true);
    scene.activeCamera.lowerRadiusLimit = 2;

    return scene;
}
window.initFunction = async function() {
    
    
    
    var asyncEngineCreation = async function() {
        try {
        return createDefaultEngine();
        } catch(e) {
        console.log("the available createEngine function failed. Creating the default engine instead");
        return createDefaultEngine();
        }
    }

    window.engine = await asyncEngineCreation();
    
    const engineOptions = window.engine.getCreationOptions?.();
    if (!engineOptions || engineOptions.audioEngine !== false) {
        
    }
if (!engine) throw 'engine should not be null.';
startRenderLoop(engine, canvas);
window.scene = createScene();};
initFunction().then(() => {sceneToRender = scene
    });

    // Resize
    window.addEventListener("resize", function () {
        engine.resize();
    });
</script>
<button onclick="switchCanvases()" class="switchCanvases">Switch Scenes</button>

<!-- GoFundMe Embed Script -->
<script defer src="https://www.gofundme.com/static/js/embed.js"></script>

</body>
</html>
