<?php 

    //** THIS IS A SIMPLE OPEN WORLD

?>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
		<!-- NO CSP -->
		<meta http-equiv="Content-Security-Policy" content="default-src * ws: wss: gap: data: blob: file: http: https:; style-src 'self' 'unsafe-inline' *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *" />
	
		<!-- NO CACHE -->
		<meta http-equiv="Pragma" content="no-cache">
		<meta http-equiv="Expires" content="-1">
		<meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
        <title>TEMPLATE | VISUALSBROWSER</title>

        <!-- PAGE META -->
        <meta content="TEMPLATE | VISUALSBROWSER" name="description">
        <meta content="TEMPLATE | VISUALSBROWSER" property="og:title">
        <meta content="TEMPLATE | VISUALSBROWSER" property="og:description">
        <meta content="https://visualsbrowser.com/assets/og-image.jpg" property="og:image">
        <meta content="TEMPLATE | VISUALSBROWSER" property="twitter:title">
        <meta content="TEMPLATE | VISUALSBROWSER" property="twitter:description">
        <meta content="https://visualsbrowser.com/assets/og-image.jpg" property="twitter:image">
        <meta property="og:type" content="website">
        <meta content="summary_large_image" name="twitter:card">
        <meta content="width=device-width, initial-scale=1" name="viewport">
		
		<!-- This is needed for Mobile Responsive CSS -->
		<meta charset="utf-8">
		<meta http-equiv="content-type" content="text/html" charset="utf-8">
		<meta name="edge" content="IE=edge" http-equiv="X-UA-Compatible">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, shrink-to-fit=no, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="mobile-web-app-capable" content="yes">
		<meta name="msapplication-tap-highlight" content="no">
		<meta name="format-detection" content="telephone=no">
		
		<!-- FAVICONS -->
		<link rel="apple-touch-icon" sizes="180x180" href="https://visualsbrowser.com/assets/favicons/apple-touch-icon.png">
        <link rel="icon" type="image/png" sizes="32x32" href="https://visualsbrowser.com/assets/favicons/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="https://visualsbrowser.com/assets/favicons/favicon-16x16.png">
        <link rel="manifest" href="https://visualsbrowser.com/assets/favicons/site.webmanifest">
        <link rel="mask-icon" href="https://visualsbrowser.com/assets/favicons/safari-pinned-tab.svg" color="#5bbad5">
        <meta name="msapplication-TileColor" content="#da532c">
        <meta name="theme-color" content="#ffffff">

        <!-- Swiper.js -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

        <!-- Babylon.js -->
        <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.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>
		
		<!-- CSS Stylesheets -->
		<link rel="stylesheet" href="https://www.visualsbrowser.com/CONTENT/REPO/css/angular-material.css">
		<link rel="stylesheet" href ="https://fonts.googleapis.com/icon?family=Material+Icons">
		<link rel="stylesheet" href="index.css">
        <link rel="stylesheet" href="ran3oek.css">
	
        <!-- JavaScript -->
	    <script src="https://d3js.org/d3.v7.min.js"></script>

		
    </head>

    <body touch-action="none">

        <!-- RENDER CANVAS -->
	    <canvas id="renderCanvas"></canvas> <!-- touch-action="none" for best results from PEP -->

        <script>
            
            //Basic Variables 
            var loginCookie = "0";

            const canvas = document.getElementById("renderCanvas"); // Get the canvas element
            const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

            //Set Starter Events:
            //var exhibit = document.getElementById("exhibit");
            //exhibit.addEventListener("click", startExperience);

            //var userInterface = document.getElementById("userInterface");
            //userInterface.setAttribute("style", "display:none");

            
            //GLOBAL VARS
            var loadFlag = 0;
		
            //GLOBAL VARS
            var resultPromise = 0;
            var d;
            var hotSpotRing;
            var defaultRing;
            var inHotspot;
            var hotspotClicked;
            var hotspotFired;

            //GLOBAL VARS
            var mainCounter = 0;
            var subtaskCounter = 0;
            var rayCasterFlag = 0;
            var isInside = false;
            var isInsideInteraction = 0;

            //FireFlag: Prevent Duplicates
		    var fireFlag2 = 0;
		    var fireFlag3 = 0;
		    var fireFlag4 = 0;
		    var fireFlag5 = 0;
		    var fireFlag6 = 0;
		    var fireFlag7 = 0;
		    var fireFlag8 = 0;
		    var fireFlag9 = 0;
		    var fireFlag10 = 0;
		    var fireFlag11 = 0;
		    var fireFlag12 = 0;
		    var fireFlag13 = 0;
		    var fireFlag14 = 0;
		    var fireFlag15 = 0;
		    var fireFlag16 = 0;
		    var fireFlag17 = 0;
		    var fireFlag18 = 0;
		    var fireFlag19 = 0;
		    var fireFlag20 = 0;
		    var fireFlag21 = 0;
		    var fireFlag22 = 0;
		    var fireFlag23 = 0;
		    var fireFlag24 = 0;
		    var fireFlag25 = 0;
		    var fireFlag26 = 0;
		    var fireFlag27 = 0;
		    var fireFlag28 = 0;
		    var fireFlag29 = 0;
		    var fireFlag30 = 0;
		    var fireFlag31 = 0;
		    var fireFlag32 = 0;
		    var fireFlag33 = 0;
		    var fireFlag34 = 0;
		    var fireFlag35 = 0;
		    var fireFlag36 = 0;
		    var fireFlag37 = 0;
		    var fireFlag38 = 0;
		    var fireFlag39 = 0;
		    var fireFlag40 = 0;
		    var fireFlag41 = 0;
		    var fireFlag42 = 0;
		    var fireFlag43 = 0;
		    var fireFlag44 = 0;
		    var fireFlag45 = 0;
		    var fireFlag46 = 0;


            //GLOBAL USER AGENT
            var isMobile = {
                Android: function() {
                    return navigator.userAgent.match(/Android/i);
                },
                BlackBerry: function() {
                    return navigator.userAgent.match(/BlackBerry/i);
                },
                iOS: function() {
                    return navigator.userAgent.match(/iPhone|iPad|iPod/i);
                },
                //detect iPad (Post IOS 13)
                iPad: function() {
                    var iPad = navigator.userAgent.match(/Macintosh/i);
                    var touchEnabled = navigator.maxTouchPoints;
                    
                    if ( (iPad != null) && (touchEnabled > 1) )
                    {
                        return navigator.userAgent.match(/Macintosh/i);
                    }
                },
                Opera: function() {
                    return navigator.userAgent.match(/Opera Mini/i);
                },
                Windows: function() {
                    return navigator.userAgent.match(/IEMobile/i) || navigator.userAgent.match(/WPDesktop/i);
                },
                any: function() {
                    return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.iPad() || isMobile.Opera() || isMobile.Windows());
                }
            };
            
            
            const createScene = function () {
                
                // Creates a basic Babylon Scene object
                const scene = new BABYLON.Scene(engine);
                
                // Camera Settings
                //var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 1.8, -1.5), scene);
                var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 1.8, 0), scene);
                camera.setTarget(BABYLON.Vector3.Zero());
                camera.attachControl(canvas, true);
                
                //Global Event Variables
                var intervalIRight;
                var intervalIGuide;

                //Add Camera Settings
                camera.speed = 0.05; //2
                camera.angularSpeed = 0.02; //0.05
                camera.angle = Math.PI/2;
                camera.rotation.x = 0; //put the camera horizontal
                camera.rotation.y = 3.141592653589793;
                camera.rotation.z = 0;

                //Additional Camera Settings
                camera.minZ = 0.1;

                //Add Collisons
                camera.checkCollisions = true;
        
                //Add Camera Controls (*CustomDesktopControlsHere)
                // Let's remove default keyboard:
                //camera.inputs.removeByType("FreeCameraKeyboardMoveInput");
                //camera.inputs.removeByType("FreeCameraMouseInput");

                let adt = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
                let xAddPos = 0;
                let yAddPos = 0;
                let xAddRot = 0;
                let yAddRot = 0;
                let sideJoystickOffset = -33;
                let bottomJoystickOffset = -30; //the lower the negative number the more it shifts down
                let translateTransform; 

                let leftThumbContainer = makeThumbArea("leftThumb", 0, "blue", null);
                leftThumbContainer.height = "200px";
                leftThumbContainer.width = "200px";
                leftThumbContainer.isPointerBlocker = true;
                leftThumbContainer.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
                leftThumbContainer.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_BOTTOM;
                //leftThumbContainer.alpha = 0.4;
                leftThumbContainer.left = sideJoystickOffset;
                leftThumbContainer.top = bottomJoystickOffset;

                let leftInnerThumbContainer = makeThumbArea("leftInnterThumb", 0, "white", "white");
                leftInnerThumbContainer.height = "40px";
                leftInnerThumbContainer.width = "40px";
                leftInnerThumbContainer.isPointerBlocker = false;
                leftInnerThumbContainer.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
                leftInnerThumbContainer.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
                leftInnerThumbContainer.shadowColor = "#000";

                let leftInnerThumbContainerA = makeThumbArea("leftInnterThumbA", 0, "white", "#000000");
                leftInnerThumbContainerA.height = "80px";
                leftInnerThumbContainerA.width = "80px";
                leftInnerThumbContainerA.isPointerBlocker = false;
                leftInnerThumbContainerA.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
                leftInnerThumbContainerA.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
                leftInnerThumbContainerA.alpha = 0.5;
                leftInnerThumbContainerA.shadowColor = "#000";


                let leftPuck = makeThumbArea("leftPuck", 0, "white", "white");
                leftPuck.height = "40px";
                leftPuck.width = "40px";
                leftPuck.isPointerBlocker = true;
                leftPuck.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
                leftPuck.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
                leftPuck.shadowColor = "#000";


                leftThumbContainer.onPointerDownObservable.add(function(coordinates) {
                    leftPuck.isVisible = true;
                    leftInnerThumbContainer.isVisible = false;
                    leftPuck.floatLeft = coordinates.x-(leftThumbContainer._currentMeasure.width*.5)-sideJoystickOffset;
                    leftPuck.left = leftPuck.floatLeft;
                    leftPuck.floatTop = adt._canvas.height - coordinates.y-(leftThumbContainer._currentMeasure.height*.5)+bottomJoystickOffset;
                    leftPuck.top = leftPuck.floatTop*-1;
                    leftPuck.isDown = true;
                    //leftThumbContainer.alpha = 0.9;
                });

                leftThumbContainer.onPointerUpObservable.add(function(coordinates) {
                    xAddPos = 0;
                    yAddPos = 0;
                    leftPuck.isDown = false;
                    leftPuck.isVisible = false;
                    leftInnerThumbContainer.isVisible = true;
                    //leftThumbContainer.alpha = 0.4;
                });


                leftThumbContainer.onPointerMoveObservable.add(function(coordinates) {
                    if (leftPuck.isDown) {
                        xAddPos = coordinates.x-(leftThumbContainer._currentMeasure.width*.5)-sideJoystickOffset;
                        yAddPos = adt._canvas.height - coordinates.y-(leftThumbContainer._currentMeasure.height*.5)+bottomJoystickOffset;
                        leftPuck.floatLeft = xAddPos;
                        leftPuck.floatTop = yAddPos*-1;
                        leftPuck.left = leftPuck.floatLeft;
                        leftPuck.top = leftPuck.floatTop;
                    }
                });

                adt.addControl(leftThumbContainer);
                leftThumbContainer.addControl(leftInnerThumbContainerA);
                leftThumbContainer.addControl(leftInnerThumbContainer);
                leftThumbContainer.addControl(leftPuck);
                leftPuck.isVisible = false;
                //Hide the UI but still use joystick set both to false
                leftInnerThumbContainer.isVisible = true;
                leftInnerThumbContainerA.isVisible = true;
        
                camera.attachControl(canvas, true);

                scene.registerBeforeRender(function() {
                    //JOYSTICK SENSITIVITY
                    translateTransform = BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(xAddPos/12000, 0, yAddPos/12000), BABYLON.Matrix.RotationY(camera.rotation.y));
                    camera.cameraDirection.addInPlace(translateTransform);
                    camera.cameraRotation.y += xAddRot/15000*-1;
                    camera.cameraRotation.x += yAddRot/15000*-1;
                }); 

                function makeThumbArea(name, thickness, color, background, curves){

                    let rect = new BABYLON.GUI.Ellipse();
                    rect.name = name;
                    rect.thickness = thickness;
                    rect.color = color;
                    rect.background = background;
                    rect.paddingLeft = "0px";
                    rect.paddingRight = "0px";
                    rect.paddingTop = "0px";
                    rect.paddingBottom = "0px";
                    return rect;
                }
        
                // Skybox
                //var skybox = BABYLON.MeshBuilder.CreateBox("skyBox", {size:1000.0}, scene);
                //var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
                //skyboxMaterial.backFaceCulling = false;
                //skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("assets/skybox", scene);
                //skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
                //skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
                //skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
                //skybox.material = skyboxMaterial;

                //Set an Environment Texture (HDR Texture)
                //var hdrTexture = new BABYLON.CubeTexture("./environment.env", scene);
                //scene.createDefaultSkybox(hdrTexture, true, 10000);

                // Scene Settings (Color)
                scene.clearColor.b = 0;
                scene.clearColor.g = 0;
                scene.clearColor.r = 0;
                //scene.clearColor = {r: 0.8745098039215686, g: 0.8627450980392157, b: 0.8392156862745098};

                // Scene Settings (Image Processing)
                scene.imageProcessingConfiguration._contrast = 1.8;
                scene.imageProcessingConfiguration._exposure = 1.4;

                // Scene Settings (Fog)
                //scene.fogEnabled = true;
                //scene.fogColor.r = 0.8745098039215686;
                //scene.fogColor.g = 0.8627450980392157;
                //scene.fogColor.b = 0.8392156862745098;
                //scene.fogColor = {r: 0.8745098039215686, g: 0.8627450980392157, b: 0.8392156862745098};
                //scene.fogMode = 3;
                //scene.fogStart = 7;
                //scene.fogEnd = 50;


                resultPromise = BABYLON.SceneLoader.ImportMeshAsync("", "Model/", "Model.glb", scene);
                resultPromise.then((result) => { 

                    loadFlag = 1;
                    console.log("loaded asynchronously");
                
                    updateTextures(scene);
                    updateMaterials(scene);

                    //Hide Load Screen
				    //document.getElementById('loading').style.display='none';

                    //Hide Joystick
                    scene.textures[0]._rootContainer.children[0].isVisible = true

                    //COLLIDERS
                    //scene.getMeshById('Collider').checkCollisions = true;

                    //GAZE INPUT SYSTEM 
                    defaultRing = true;
                    d = BABYLON.MeshBuilder.CreateDisc("disc", { radius: .01 }, scene);
                    d.parent = camera;
                    d.position.z = 2;
                    d.renderingGroup = 3;
                    d.material = new BABYLON.StandardMaterial("texture", scene);
                    d.material.emissiveColor = new BABYLON.Color3(1, 1, 1);
                
                    //hotspot status
                    hotspotClicked = false;
                    hotspotFired = false;
                
                    //hotspot click event
                    scene.onPointerObservable.add((pointerInfo) => {
                        if (pointerInfo.type === BABYLON.PointerEventTypes.POINTERDOWN) {
                            if(inHotspot = true) {
                                hotspotClicked = true;
                            }
                        }
                    });

                });

                return scene;
            };
            
            const scene = createScene(); //Call the createScene function
            
            // ENGINE LOOP: Register a render loop to repeatedly render the scene
            engine.runRenderLoop(function () {
                    scene.render();

                    checkPosition(scene);

                    if(rayCasterFlag == 1) {
                        //WHERE IS CAMERA POINTING AT?
				        var meshPicked = castRay(scene);

                        //INTERACTION LOGIC
				        analyzeInteractions(scene, meshPicked);
                    }
            });
            
            function updateTextures(scene) {
                
                //Set all texture samples
                tex_count = scene.textures.length;
                for(i=0; i < tex_count; i++)
                {
                    //set texture sampling mode
                    scene.textures[i]._initialSamplingMode = 2;
                    scene.textures[i]._texture.samplingMode = 2;
                    
                }

                //Disable colliders
                //disable color write on colliders + make it transparent
				var mat = scene.getMaterialByName('interactable');
                if(mat != null) { 
                    mat.disableColorWrite = true;
				    mat.transparencyMode = 2
				    mat.alpha = 0
                }

                var mat = scene.getMaterialByName('interactable2');
                if(mat != null) { 
                    mat.disableColorWrite = true;
				    mat.transparencyMode = 2
				    mat.alpha = 0
                }

                var mat2 = scene.getMaterialByName('glass');
                if(mat2 != null) { 
                    mat2.disableColorWrite = true;
				    mat2.transparencyMode = 2
				    mat2.alpha = 0
                }
                
            }

            function updateMaterials(scene) {
                //Set all texture samples
                mat_count = scene.materials.length;
                for(i=0; i < mat_count; i++)
                {
                    //set all materials to unlit 
                    scene.materials[i].unlit = true;

                    //set material to to debug mode to view normals rendering [WHEN TESTING UNTEXTURED CITY MODELS]
                    //scene.materials[i].debugMode = 2

                    //Set Skybox to Lit 
                    if(scene.materials[i].id == 'skyBox') {
                        scene.materials[i].unlit = false;
                    }
                    
                }
            }

            
            // Watch for browser/canvas resize events
            window.addEventListener("resize", function () {
                    engine.resize();
            });
                

        function castRay(scene) {
			var canvas = engine.getRenderingCanvas();

			var pickResult = scene.pick(canvas.offsetWidth / 2, canvas.offsetHeight / 2, (mesh) => {
				return (mesh.name !== d.name);
			});
			
			if (pickResult.hit) {
				//alert(pickResult.pickedMesh.name);
				return pickResult.pickedMesh.name;
			}
		}
		
		//INTERACTIONS LOGIC: CLICKACTIONS (CUSTOM TO EACH LEVEL)
        function analyzeInteractions(scene, meshPicked) {

            //Interact01 Pick Up Box
			if(isInsideInteraction == 1 && (meshPicked == 'cube')  ) {
				
				inHotspot = true;
				
				if( scene.getMeshByName("disc") == null) {
					defaultRing == false
				}
				
				//Camera Ray just entered Hotspot Area
				if( (inHotspot == true) && (defaultRing == true) ) {
					
					
					//delete default ring
					scene.getMeshByName("disc").dispose();
					scene.getMaterialByName("texture").dispose();
					
					//console.log('deleted');
					
					//*************************************
				
					var camera = scene.activeCamera;
					
					var sphereOut = BABYLON.MeshBuilder.CreateSphere("sphere", { diameterX: 3, diameterY: 0.01, diameterZ: 3, segments: 16 });
					sphereOut.position.z = 2;
					var sphereIn = BABYLON.MeshBuilder.CreateSphere("sphere", { diameterX: 2, diameterY: 0.02, diameterZ: 2, segments: 16 });
					sphereIn.position.z = 2;
					
					const outerCSG = BABYLON.CSG.FromMesh(sphereOut);
					const innerCSG = BABYLON.CSG.FromMesh(sphereIn);
					
					const pipeCSG = outerCSG.subtract(innerCSG);
					const mPipe = pipeCSG.toMesh("mPipe", null, scene);
					mPipe.parent = camera;
					mPipe.rotation.x = 90;
					mPipe.scaling.x = 0.02;
					mPipe.scaling.y = 0.02;
					mPipe.scaling.z = 0.02;
					mPipe.material = new BABYLON.StandardMaterial("texture", scene);
					mPipe.material.emissiveColor = new BABYLON.Color3(1, 1, 1);
					
					var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("GUI");
					var rect1 = new BABYLON.GUI.Rectangle("hotspotLabel");
					rect1.width = 0.5;
					rect1.height = "40px";
					rect1.color = "white";
					rect1.thickness = 0;
					//rect1.background = "black";
					advancedTexture.addControl(rect1);

					var label = new BABYLON.GUI.TextBlock();
					label.text = "Pick Up";
					rect1.addControl(label);

					//var hotspot = scene.getMeshByName("Hotspot");
					rect1.linkWithMesh(mPipe);   
					rect1.linkOffsetY = 30; 
					
					//delete spheres
					scene.getMeshByName("sphere").dispose();
					scene.getMeshByName("sphere").dispose();
					
					hotSpotRing = true; 
					defaultRing = false; 
					
				}

				//console.log('Switch From DefaultRing to Hotspot Ring');
				if( (hotspotClicked == true) && (hotspotFired == false) ) {
                    
                    //Change Actions Based on Mesh Picked 
                    console.log('Cube?')
				}
			}

            //*****************************END INTERACTION ACTIONS ********************************************************* */

            //Camera Ray Left Hostpot Area
			if( (inHotspot == false) && (hotSpotRing == true) ) {
				
				//bonus: remove only the hotspotLabel from the UI
				//scene.textures[3]._linkedControls[0].dispose()
				
				scene.getTextureByName('GUI').dispose();
				scene.getMeshByName("mPipe").dispose();
				//scene.getMeshByName("but1").dispose();
				
				var camera = scene.activeCamera;
				d = BABYLON.MeshBuilder.CreateDisc("disc", { radius: .01 }, scene);
				d.parent = camera;
				d.position.z = 2;
				d.renderingGroup = 3;
				d.material = new BABYLON.StandardMaterial("texture", scene);
				d.material.emissiveColor = new BABYLON.Color3(1, 1, 1);
				
				hotspotFired = false;
				hotSpotRing = false; 
				defaultRing = true;
				
			}

			hotspotClicked = false;
			inHotspot = false;

        }


		function checkPosition(scene) {

            z_pos = scene.activeCamera.position.z;
			
			//console.log(loadFlag);
			
            if(loadFlag == 1)  {
				
				if(fireFlag2 == 0) {
					resultPromise = BABYLON.SceneLoader.ImportMeshAsync("", "Model/", "Model2.glb", scene); 
					fireFlag2 = 1;					
				}
				else {
					resultPromise.then((result) => {
						loadFlag = 2;
                        //updateTextures(scene);
                        //updateMaterials(scene);

                        //Set Collisions 
                        //scene.getMeshById('Collider').checkCollisions = true;

                        //Load Shaders 
                        //var pulseRingMat = scene.getMaterialByName('ringPulse');
                        //var pulse_anim = scene.getMeshByName('pulse_animation');
                        //fix scaling
                        //pulse_anim.scaling.x = 0.5;
                        //pulse_anim.scaling.y = 0.5;
                        //pulse_anim.scaling.z = 0.5;
                        //pulse_anim.material = pulseRingMat;
                        //pulse_anim.visibility = 0;

						console.log("2 done");
						//alert("loaded 2 tile"); 
					});
				}
			}

			if(loadFlag == 2)  {
				
				if(fireFlag3 == 0) {
					resultPromise = BABYLON.SceneLoader.ImportMeshAsync("", "Model/", "Model3.glb", scene); 
					fireFlag3 = 1;					
				}
				else {
					resultPromise.then((result) => {
						loadFlag = 3;
	
                        //updateTextures(scene);
                        //updateMaterials(scene);
                        console.log("3 done");
						//alert("loaded 2 tile"); 
					});
				}
			}

            if(loadFlag == 3)  {
				
				if(fireFlag4 == 0) {
					resultPromise = BABYLON.SceneLoader.ImportMeshAsync("", "Model/", "Model4.glb", scene); 
					fireFlag4 = 1;					
				}
				else {
					resultPromise.then((result) => {
						loadFlag = 99999;
	
                        updateTextures(scene);
                        updateMaterials(scene);
                        console.log("4 done");

                        //Hide Loading Screen
                        //document.getElementById('loading').style.display='none';

						//alert("loaded 2 tile"); 
					});
				}
			}

            if(loadFlag == 4)  {
				
				if(fireFlag5 == 0) {
					resultPromise = BABYLON.SceneLoader.ImportMeshAsync("", "Model/", "Model5.glb", scene); 
					fireFlag5 = 1;					
				}
				else {
					resultPromise.then((result) => {
						loadFlag = 999999;
	
                        updateTextures(scene);
                        updateMaterials(scene);

                        console.log("5 done");

                        //Colliders
                        scene.getMeshById('main_collider').checkCollisions = true;

                        document.getElementById('loading').style.display='none';
					});
				}
			}

            if(loadFlag == 5)  {
				
				if(fireFlag6 == 0) {
					resultPromise = BABYLON.SceneLoader.ImportMeshAsync("", "Model/", "Model6.glb", scene); 
					fireFlag6 = 1;					
				}
				else {
					resultPromise.then((result) => {
						loadFlag = 6;
	
                        updateTextures(scene);
                        //updateMaterials(scene);
                        console.log("6 done");
						//alert("loaded 2 tile"); 
					});
				}
			}

        }

        </script>
   </body>
   <!-- 2024 VISUALBROWSER *ALL RIGHTS RESERVED -->
</html>