CodeMirror: HTML5 preview

Run

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Babylon.js sample code</title>

<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://rahmankhan.dk/babylon/dist/preview release/ammo.js"></script>
    <script src="https://rahmankhan.dk/babylon/dist/preview release/cannon.js"></script>
       <script src="https://rahmankhan.dk/babylon/dist/preview release/Oimo.js"></script>
      <script src="https://rahmankhan.dk/babylon/dist/preview release/gltf_validator.js"></script>
       <script src="https://rahmankhan.dk/babylon/dist/preview release/earcut.min.js"></script>
        <script src="https://rahmankhan.dk/babylon/dist/preview release/babylon.js"></script>
      <script src="https://rahmankhan.dk/babylon/dist/preview release/inspector/babylon.inspector.bundle.js"></script>
      <script src="https://rahmankhan.dk/babylon/dist/preview release/materialsLibrary/babylonjs.materials.min.js"></script>
        <script src="https://rahmankhan.dk/babylon/dist/preview release/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
       <script src="https://rahmankhan.dk/babylon/dist/preview release/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
       <script src="https://rahmankhan.dk/babylon/dist/preview release/loaders/babylonjs.loaders.js"></script>
       <script src="https://rahmankhan.dk/babylon/dist/preview release/serializers/babylonjs.serializers.min.js"></script>
       <script src="https://rahmankhan.dk/babylon/dist/preview release/gui/babylon.gui.min.js"></script>
    
        <style>
            html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

#renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
            }
        </style>
    </head>
<body>
    <canvas id="renderCanvas"></canvas>
    <script>
        var canvas = document.getElementById("renderCanvas");

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);
        
            // Lights
            var light0 = new BABYLON.DirectionalLight("Omni", new BABYLON.Vector3(-2, -5, 2), scene);
            var light1 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(2, -5, -2), scene);
        
            // Need a free camera for collisions
            var camera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(15, -8, -40), scene);
            camera.attachControl(canvas, true);
        
            //Ground
            var ground = BABYLON.Mesh.CreatePlane("ground", 400.0, scene);
            ground.material = new BABYLON.StandardMaterial("groundMat", scene);
            ground.material.diffuseColor = new BABYLON.Color3(1, 1, 1);
            ground.material.backFaceCulling = false;
            ground.position = new BABYLON.Vector3(5, -10, -15);
            ground.rotation = new BABYLON.Vector3(Math.PI / 2, 0, 0);
        
            // Create and load the sound async
            var music = new BABYLON.Sound("Violons", "khaab.mp3", scene, null, { loop: true, autoplay: true });
        
        	var myAnalyser = new BABYLON.Analyser(scene);
        	BABYLON.Engine.audioEngine.connectToAnalyser(myAnalyser);
        	myAnalyser.FFT_SIZE = 32;
        	myAnalyser.SMOOTHING = 0.9;
        	
        	var spatialBoxArray = [];
        	var spatialBox;
        	var color;
        	
        	for (var index = 0; index < myAnalyser.FFT_SIZE / 2; index++) {
        	    spatialBox = BABYLON.Mesh.CreateBox("sb" + index, 2, scene);
        	    spatialBox.position = new BABYLON.Vector3(index * 2, 0, 0);
        	    spatialBox.material = new BABYLON.StandardMaterial("sbm" + index, scene);
        	    color = hsvToRgb(index / (myAnalyser.FFT_SIZE) / 2 * 360, 100, 50),
        	    spatialBox.material.diffuseColor = new BABYLON.Color3(color.r, color.g, color.b);
        	    spatialBoxArray.push(spatialBox);
        	}
        	
        	scene.registerBeforeRender(function () {
        	    var workingArray = myAnalyser.getByteFrequencyData();
        	
        	    for (var i = 0; i < myAnalyser.getFrequencyBinCount() ; i++) {
        	        spatialBoxArray[i].scaling.y =  workingArray[i] / 32;
        	    }
        	});
        
            //Set gravity for the scene (G force like, on Y-axis)
            scene.gravity = new BABYLON.Vector3(0, -0.9, 0);
        
            // Enable Collisions
            scene.collisionsEnabled = true;
        
            //Then apply collisions and gravity to the active camera
            camera.checkCollisions = true;
            camera.applyGravity = true;
        
            //Set the ellipsoid around the camera (e.g. your player's size)
            camera.ellipsoid = new BABYLON.Vector3(1, 1, 1);
        
            //finally, say which mesh will be collisionable
            ground.checkCollisions = true;
        	
        	function hsvToRgb(h, s, v) {
            	var r, g, b;
            	var i;
            	var f, p, q, t;
        
            	h = Math.max(0, Math.min(360, h));
            	s = Math.max(0, Math.min(100, s));
            	v = Math.max(0, Math.min(100, v));
        
            	s /= 100;
            	v /= 100;
        
            	if(s == 0) {
                		r = g = b = v;
                		return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
                	}
        
            	h /= 60; // sector 0 to 5
            	i = Math.floor(h);
            	f = h - i; // factorial part of h
            	p = v * (1 - s);
            	q = v * (1 - s * f);
            	t = v * (1 - s * (1 - f));
        
            	switch(i) {
            		case 0:
            			r = v;
            			g = t;
            			b = p;
            			break;
            		case 1:
            			r = q;
            			g = v;
            			b = p;
            			break;
            		case 2:
            			r = p;
            			g = v;
            			b = t;
            			break;
            		case 3:
            			r = p;
            			g = q;
            			b = v;
            			break;
            		case 4:
            			r = t;
            			g = p;
            			b = v;
            			break;
            		default: // case 5:
            			r = v;
            			g = p;
            			b = q;
            	}
            	return {r: r, g: g, b: b};
        	}
        
            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();
        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>
</body>
</html>