Spaces:

daydreamer-json
/

babylonjs_test

Running

App Files Files Community

daydreamer-json commited on Apr 6, 2024

Commit

021c011

verified ·

1 Parent(s): 82aaa47

upd

Browse files

Files changed (22) hide show

index.html +3 -209
res/model/Alicia.bpmx +3 -0
res/model/Alicia/Alicia_blade.pmx +3 -0
res/model/Alicia/Alicia_body.png +3 -0
res/model/Alicia/Alicia_eye.png +3 -0
res/model/Alicia/Alicia_face.png +3 -0
res/model/Alicia/Alicia_hair.png +3 -0
res/model/Alicia/Alicia_other.png +3 -0
res/model/Alicia/Alicia_rod.png +3 -0
res/model/Alicia/Alicia_solid.pmx +3 -0
res/model/Alicia/Alicia_wear.png +3 -0
res/model/Alicia/blade_s.bmp +3 -0
res/model/Alicia/eye_s.bmp +3 -0
res/model/Alicia/face_s.bmp +3 -0
res/model/Alicia/hair_s.bmp +3 -0
res/model/Alicia/ramp_s.bmp +3 -0
res/model/Alicia/rod_s.bmp +3 -0
res/model/Alicia/shoes_s.bmp +3 -0
res/model/Alicia/skin_s.bmp +3 -0
res/model/Alicia/tongue_s.bmp +3 -0
res/track/conqueror/merged.bvmd +3 -0
script.js +304 -0

index.html CHANGED Viewed

@@ -5,7 +5,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Babylon.js sample code</title>
     <!-- Babylon.js -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
@@ -33,21 +33,18 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap">
     <style>
-      html,
-      body {
         overflow: hidden;
         width: 100%;
         height: 100%;
         margin: 0;
         padding: 0;
       }
       #renderCanvas {
         width: 100%;
         height: 100%;
         touch-action: none;
       }
       #canvasZone {
         width: 100%;
         height: 100%;
@@ -56,209 +53,6 @@
   </head>
   <body>
     <div id="canvasZone"><canvas id="renderCanvas"></canvas></div>
-    <script>
-      const resourcePaths = {
-        'mainModel': './res/model/yyb_hatsune_miku_10th_v1.02.bpmx',
-        'mainMotion': './res/track/melancholy_night/motion.bvmd',
-        'audio': './res/track/melancholy_night/melancholy_night.m4a'
-      }
-      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 });
-      };
-      class Playground {
-        static async CreateScene(engine, canvas) {
-          await new Promise((resolve) => {
-            const babylonMmdScript = document.createElement("script");
-            babylonMmdScript.src = "https://www.unpkg.com/babylon-mmd@0.37.2/umd/babylon.mmd.min.js";
-            document.head.appendChild(babylonMmdScript);
-            babylonMmdScript.onload = resolve;
-          });
-          if (engine.hostInformation.isMobile) {engine.setHardwareScalingLevel(0.85)} else {engine.setHardwareScalingLevel(0.75)};
-          const pmxLoader = BABYLON.SceneLoader.GetPluginForExtension(".pmx");
-          const materialBuilder = pmxLoader.materialBuilder;
-          materialBuilder.useAlphaEvaluation = false;
-          materialBuilder.loadOutlineRenderingProperties = () => {};
-          // const alphaBlendMaterials = ["face02", "Facial02", "HL", "Hairshadow", "q302"];
-          // const alphaTestMaterials = ["q301"];
-          // materialBuilder.afterBuildSingleMaterial = (material) => {
-          //   if (!alphaBlendMaterials.includes(material.name) && !alphaTestMaterials.includes(material.name)) return;
-          //   material.transparencyMode = alphaBlendMaterials.includes(material.name) ? BABYLON.Material.MATERIAL_ALPHABLEND : BABYLON.Material.MATERIAL_ALPHATEST;
-          //   material.useAlphaFromDiffuseTexture = true;
-          //   material.diffuseTexture.hasAlpha = true;
-          // };
-          const scene = new BABYLON.Scene(engine);
-          // BABYLON.SceneOptimizer.OptimizeAsync(scene);
-          // scene.clearColor = new BABYLON.Color4(0.95, 0.95, 0.95, 1.0);
-          scene.clearColor = new BABYLON.Color4(0, 0, 0, 1.0);
-          const mmdCamera = new BABYLONMMD.MmdCamera("MmdCamera", new BABYLON.Vector3(0, 10, 0), scene);
-          mmdCamera.maxZ = 5000;
-          const camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 0, 0, 45, new BABYLON.Vector3(0, 10, 0), scene);
-          camera.maxZ = 5000;
-          camera.setPosition(new BABYLON.Vector3(0, 10, -45));
-          camera.attachControl(canvas, false);
-          camera.inertia = 0.8;
-          camera.speed = 10;
-          const hemisphericLight = new BABYLON.HemisphericLight("HemisphericLight", new BABYLON.Vector3(0, 1, 0), scene);
-          hemisphericLight.intensity = 0.4;
-          hemisphericLight.specular = new BABYLON.Color3(0, 0, 0);
-          hemisphericLight.groundColor = new BABYLON.Color3(1, 0.9, 0.9);
-          const directionalLight = new BABYLON.DirectionalLight("DirectionalLight", new BABYLON.Vector3(0.5, -1, 1), scene);
-          directionalLight.intensity = 0.8;
-          directionalLight.autoCalcShadowZBounds = false;
-          directionalLight.autoUpdateExtends = false;
-          directionalLight.shadowMaxZ = 20;
-          directionalLight.shadowMinZ = -15;
-          directionalLight.orthoTop = 18;
-          directionalLight.orthoBottom = -1;
-          directionalLight.orthoLeft = -10;
-          directionalLight.orthoRight = 10;
-          directionalLight.shadowOrthoScale = 0;
-          const shadowGenerator = new BABYLON.ShadowGenerator(1024, directionalLight, true);
-          shadowGenerator.usePercentageCloserFiltering = true;
-          shadowGenerator.forceBackFacesOnly = true;
-          shadowGenerator.filteringQuality = BABYLON.ShadowGenerator.QUALITY_MEDIUM;
-          shadowGenerator.frustumEdgeFalloff = 0.1;
-          const mmdRuntime = new BABYLONMMD.MmdRuntime(scene, new BABYLONMMD.MmdPhysics(scene));
-          mmdRuntime.register(scene);
-          const audioPlayer = new BABYLONMMD.StreamAudioPlayer(scene);
-          audioPlayer.preservesPitch = false;
-          audioPlayer.source = resourcePaths.audio;
-          mmdRuntime.setAudioPlayer(audioPlayer);
-          const mmdPlayerControl = new BABYLONMMD.MmdPlayerControl(scene, mmdRuntime, audioPlayer);
-          mmdPlayerControl.showPlayerControl();
-          engine.displayLoadingUI();
-          let loadingTexts = [];
-          const updateLoadingText = (updateIndex, text) => {
-            loadingTexts[updateIndex] = text;
-            engine.loadingUIText = "<br/><br/><br/><br/>" + loadingTexts.join("<br/><br/>");
-          };
-          const promises = [];
-          const bvmdLoader = new BABYLONMMD.BvmdLoader(scene);
-          promises.push(bvmdLoader.loadAsync("motion", resourcePaths.mainMotion, (event) => updateLoadingText(0, `Loading motion... ${event.loaded}/${event.total} (${Math.floor((event.loaded * 100) / event.total)}%)`)));
-          promises.push(BABYLON.SceneLoader.ImportMeshAsync(undefined, resourcePaths.mainModel, undefined, scene, (event) => updateLoadingText(1, `Loading model... ${event.loaded}/${event.total} (${Math.floor((event.loaded * 100) / event.total)}%)`)));
-          promises.push(
-            (async () => {
-              updateLoadingText(2, "Loading physics engine...");
-              const havokPlugin = new BABYLON.HavokPlugin();
-              // scene.enablePhysics(new BABYLON.Vector3(0, -9.8, 0), havokPlugin);
-              scene.enablePhysics(new BABYLON.Vector3(0, -1, 0), havokPlugin);
-              updateLoadingText(2, "Loading physics engine... Done");
-            })()
-          );
-          loadingTexts = new Array(promises.length).fill("");
-          const loadResults = await Promise.all(promises);
-          scene.onAfterRenderObservable.addOnce(() => engine.hideLoadingUI());
-          mmdRuntime.setCamera(mmdCamera);
-          mmdCamera.addAnimation(loadResults[0]);
-          mmdCamera.setAnimation("motion");
-          const modelMesh = loadResults[1].meshes[0];
-          modelMesh.receiveShadows = true;
-          shadowGenerator.addShadowCaster(modelMesh);
-          const mmdModel = mmdRuntime.createMmdModel(modelMesh);
-          mmdModel.addAnimation(loadResults[0]);
-          mmdModel.setAnimation("motion");
-          const bodyBone = loadResults[1].skeletons[0].bones.find((bone) => bone.name === "センター");
-          scene.onBeforeRenderObservable.add(() => {
-            bodyBone.getFinalMatrix().getTranslationToRef(directionalLight.position);
-            directionalLight.position.y -= 10;
-          });
-          const ground = BABYLON.MeshBuilder.CreateGround("Ground", { width: 100, height: 100, subdivisions: 2, updatable: false }, scene);
-          ground.receiveShadows = true;
-          const groundMaterial = (ground.material = new BABYLON.StandardMaterial("GroundMaterial", scene));
-          groundMaterial.diffuseColor = new BABYLON.Color3(0.25, 0.25, 0.25);
-          groundMaterial.specularPower = 128;
-          const groundReflectionTexture = (groundMaterial.reflectionTexture = new BABYLON.MirrorTexture("MirrorTexture", 1024, scene, true));
-          groundReflectionTexture.mirrorPlane = BABYLON.Plane.FromPositionAndNormal(ground.position, ground.getFacetNormal(0).scale(-1));
-          groundReflectionTexture.renderList = [modelMesh];
-          groundReflectionTexture.level = 0.45;
-          const defaultPipeline = new BABYLON.DefaultRenderingPipeline("default", true, scene, [mmdCamera, camera]);
-          defaultPipeline.samples = 4;
-          defaultPipeline.bloomEnabled = true;
-          defaultPipeline.chromaticAberrationEnabled = true;
-          defaultPipeline.chromaticAberration.aberrationAmount = 1;
-          defaultPipeline.fxaaEnabled = true;
-          defaultPipeline.imageProcessingEnabled = true;
-          defaultPipeline.imageProcessing.toneMappingEnabled = false;
-          defaultPipeline.imageProcessing.toneMappingType = BABYLON.ImageProcessingConfiguration.TONEMAPPING_ACES;
-          defaultPipeline.imageProcessing.vignetteWeight = 0.5;
-          defaultPipeline.imageProcessing.vignetteStretch = 0.5;
-          defaultPipeline.imageProcessing.vignetteColor = new BABYLON.Color4(0, 0, 0, 0);
-          defaultPipeline.imageProcessing.vignetteEnabled = true;
-          const guiCamera = new BABYLON.ArcRotateCamera("GUICamera", Math.PI / 2 + Math.PI / 7, Math.PI / 2, 100, new BABYLON.Vector3(0, 20, 0), scene);
-          guiCamera.layerMask = 0x10000000;
-          scene.activeCameras = [mmdCamera, guiCamera];
-          let lastClickTime = -Infinity;
-          canvas.onclick = () => {
-            const currentTime = performance.now();
-            if (500 < currentTime - lastClickTime) {
-              lastClickTime = currentTime;
-              return;
-            }
-            lastClickTime = -Infinity;
-            if (scene.activeCameras[0] === mmdCamera) scene.activeCameras = [camera, guiCamera];
-            else scene.activeCameras = [mmdCamera, guiCamera];
-          };
-          const advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
-          advancedTexture.layer.layerMask = 0x10000000;
-          advancedTexture.renderScale = 1.5;
-          const textblock = new BABYLON.GUI.TextBlock();
-          // textblock.widthInPixels = 800;
-          // textblock.left = 10;
-          textblock.text = `${engine._glRenderer}\n${engine._glVersion}`;
-          textblock.fontSize = 32;
-          textblock.fontFamily = "system-ui";
-          textblock.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
-          textblock.textVerticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
-          textblock.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
-          textblock.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
-          textblock.color = "#ffffff";
-          advancedTexture.addControl(textblock);
-          const textBlockUpdateDisp = setInterval(() => {textblock.text = `${engine._glRenderer}\n${engine._glVersion}\n\n${engine.frameId} frame\n${Math.floor(engine.getFps())} fps\n${Math.floor(engine.performanceMonitor.averageFrameTime)} ms`;}, 10);
-          mmdRuntime.playAnimation();
-          return scene;
-        }
-      }
-      createScene = function () {
-        return Playground.CreateScene(engine, engine.getRenderingCanvas());
-      };
-      window.initFunction = async function () {
-        globalThis.HK = await HavokPhysics();
-        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(() => {
-        scene.then((returnedScene) => {
-          sceneToRender = returnedScene;
-        });
-      });
-      // Resize
-      window.addEventListener("resize", function () {
-        engine.resize();
-      });
-    </script>
   </body>
 </html>

     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Babylon.js MMD Test</title>
     <!-- Babylon.js -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap">
     <style>
+      html, body {
         overflow: hidden;
         width: 100%;
         height: 100%;
         margin: 0;
         padding: 0;
       }
       #renderCanvas {
         width: 100%;
         height: 100%;
         touch-action: none;
       }
       #canvasZone {
         width: 100%;
         height: 100%;
   </head>
   <body>
     <div id="canvasZone"><canvas id="renderCanvas"></canvas></div>
+    <script src="script.js"></script>
   </body>
 </html>

res/model/Alicia.bpmx ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:33062a79d4f338610c77924598bbbd38c4cd17d1f204a277591e4e0e5dde96c6
+size 8109215

res/model/Alicia/Alicia_blade.pmx ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:90fe040b70cead1f0c73d9c304f6d61f5c1e8189a2643e88b9170b435b9c77d5
+size 319682

res/model/Alicia/Alicia_body.png ADDED Viewed

Git LFS Details

SHA256: c270a0ce8465f5264af209132e7a2417af897b63c8e49ae541bccad955403d97
Pointer size: 131 Bytes
Size of remote file: 530 kB

res/model/Alicia/Alicia_eye.png ADDED Viewed

Git LFS Details

SHA256: aafac9f1e664d2718b64a8eec22d5a5b0f2197907d26b0b21d3dbbe49bbfa6d9
Pointer size: 131 Bytes
Size of remote file: 179 kB

res/model/Alicia/Alicia_face.png ADDED Viewed

Git LFS Details

SHA256: e483e694109d437e0bff5718d20a905a7d40fac3cefa9bb457bb4ce6aee68a6d
Pointer size: 131 Bytes
Size of remote file: 514 kB

res/model/Alicia/Alicia_hair.png ADDED Viewed

Git LFS Details

SHA256: 2116eb48af8e2c9ff1c065633ba39dc92dfa35cbe3e6454054a55427362272ab
Pointer size: 131 Bytes
Size of remote file: 712 kB

res/model/Alicia/Alicia_other.png ADDED Viewed

Git LFS Details

SHA256: b5fcda8db5709e73fe6935f27e59fb0c69feba22221545260758ef980f683841
Pointer size: 131 Bytes
Size of remote file: 333 kB

res/model/Alicia/Alicia_rod.png ADDED Viewed

Git LFS Details

SHA256: e7b90ad145880701abf5dfbf97c3321dcf37783368068a8f0e786cff56f5c65f
Pointer size: 131 Bytes
Size of remote file: 473 kB

res/model/Alicia/Alicia_solid.pmx ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:62f04b066f0d2a28fb09126bc82d94fa24c0d8f2cd8d7e78b5a0a2d3989d280b
+size 1482421

res/model/Alicia/Alicia_wear.png ADDED Viewed

Git LFS Details

SHA256: 5a77cca424c2338d8d78135c00726247a423025fe7f27662f86dd48f2efbf406
Pointer size: 132 Bytes
Size of remote file: 2.62 MB

res/model/Alicia/blade_s.bmp ADDED Viewed

Git LFS Details

SHA256: 1c5598f0c1c15b4b14645e8d9a5126bdcbfc9a7456f67d8908cee42c05de5df0
Pointer size: 131 Bytes
Size of remote file: 197 kB

res/model/Alicia/eye_s.bmp ADDED Viewed

Git LFS Details

SHA256: ce397a04d8327cb88b0c5d4c85c523c1e7fc788ac8ec22a561f8c50b78888d94
Pointer size: 131 Bytes
Size of remote file: 197 kB

res/model/Alicia/face_s.bmp ADDED Viewed

Git LFS Details

SHA256: 6b508c18135ad5c2e14b8df7faa480e7f83c74487f247d35c7669118538582f6
Pointer size: 131 Bytes
Size of remote file: 197 kB

res/model/Alicia/hair_s.bmp ADDED Viewed

Git LFS Details

SHA256: 3714e1815680265a21f5d1ae4d114bda4dbf8e99e39755d3f0cd1fc3cc1066f5
Pointer size: 131 Bytes
Size of remote file: 197 kB

res/model/Alicia/ramp_s.bmp ADDED Viewed

Git LFS Details

SHA256: 3dd161d7f3bce407b58ab8fb998295109ed52cf9695008c7cf4c1d3dba77ed19
Pointer size: 131 Bytes
Size of remote file: 197 kB

res/model/Alicia/rod_s.bmp ADDED Viewed

Git LFS Details

SHA256: 9f3eae57f42cb13d5b5175729acde386fa3238a0100ed7125f1fae5e25351760
Pointer size: 131 Bytes
Size of remote file: 197 kB

res/model/Alicia/shoes_s.bmp ADDED Viewed

Git LFS Details

SHA256: e2f34da0d8268317de947f9bd4e2bad241d3f26dd867f5737f822509f79ae7b6
Pointer size: 131 Bytes
Size of remote file: 197 kB

res/model/Alicia/skin_s.bmp ADDED Viewed

Git LFS Details

SHA256: 3714e1815680265a21f5d1ae4d114bda4dbf8e99e39755d3f0cd1fc3cc1066f5
Pointer size: 131 Bytes
Size of remote file: 197 kB

res/model/Alicia/tongue_s.bmp ADDED Viewed

Git LFS Details

SHA256: d9e725ae7119c387a1b48662af1c1602d462bfea8820a57d8c3bd1eafe2d5bd6
Pointer size: 131 Bytes
Size of remote file: 197 kB

res/track/conqueror/merged.bvmd ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:c768d7723c2b7f5e2c07da63d802bd13f763a98fdde6479069831dfe5e11ef13
+size 3738836

script.js ADDED Viewed

	@@ -0,0 +1,304 @@

+const mathFunc = {
+  'arrayMax': (array) => {
+    const maxfct = (a, b) => {return Math.max(a, b)};
+    return array.reduce(maxfct);
+  },
+  'arrayMin': (array) => {
+    const minfct = (a, b) => {return Math.min(a, b)};
+    return array.reduce(minfct);
+  },
+  'arrayTotal': (array) => {
+    return array.reduce((acc, f) => acc + f, 0);
+  },
+  'arrayAvg': (array) => {
+    return array.reduce((acc, f) => acc + f, 0) / array.length;
+  },
+  'rounder': (method, num, n, zeroPadding = false) => {
+    const pow = Math.pow(10, n);
+    let result;
+    switch (method) {
+      case 'floor':
+        result = Math.floor(num * pow) / pow;
+        break;
+      case 'ceil':
+        result = Math.ceil(num * pow) / pow;
+        break;
+      case 'round':
+        result = Math.round(num * pow) / pow;
+        break;
+      default:
+        throw new Error('Invalid rounding method specified.');
+    }
+    if (zeroPadding) {
+      return result.toFixed(n);
+    } else {
+      return result;
+    }
+  },
+  'formatFileSize': (bytes, decimals = 2) => {
+    if (bytes === 0) return '0 byte';
+    const k = 1024;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ['bytes', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+  }
+};
+const resourcePathSetsDefault = {
+  'track': 'melancholy_night',
+  'mainModel': 'alicia'
+};
+const resourcePathSets = {
+  'track': {
+    'conqueror': {
+      'mainMotion': './res/track/conqueror/merged.bvmd',
+      'audio': './res/track/conqueror/audio.m4a'
+    },
+    'melancholy_night': {
+      'mainMotion': './res/track/melancholy_night/motion.bvmd',
+      'audio': './res/track/melancholy_night/melancholy_night.m4a'
+    }
+  },
+  'mainModel': {
+    'alicia': './res/model/Alicia.bpmx',
+    'raidenShogun': './res/model/RaidenShogun.bpmx',
+    'yyb_miku_10th': './res/model/yyb_hatsune_miku_10th_v1.02.bpmx'
+  }
+};
+const resourcePaths = {
+  'mainModel': resourcePathSets.mainModel[resourcePathSetsDefault.mainModel],
+  'mainMotion': resourcePathSets.track[resourcePathSetsDefault.track].mainMotion,
+  'audio': resourcePathSets.track[resourcePathSetsDefault.track].audio,
+};
+const urlQueryObject = Object.fromEntries(new URLSearchParams(window.location.search));
+if (Object.keys(urlQueryObject).some(el => el === 'track')) {
+  for (let i = 0; i < Object.keys(resourcePathSets.track).length; i++) {
+    if (urlQueryObject.track === Object.keys(resourcePathSets.track)[i]) {
+      resourcePaths.mainMotion = resourcePathSets.track[Object.keys(resourcePathSets.track)[i]].mainMotion;
+      resourcePaths.audio = resourcePathSets.track[Object.keys(resourcePathSets.track)[i]].audio;
+    }
+  }
+}
+if (Object.keys(urlQueryObject).some(el => el === 'mainModel')) {
+  for (let i = 0; i < Object.keys(resourcePathSets.mainModel).length; i++) {
+    if (urlQueryObject.mainModel === Object.keys(resourcePathSets.mainModel)[i]) {
+      resourcePaths.mainModel = resourcePathSets.mainModel[Object.keys(resourcePathSets.mainModel)[i]];
+    }
+  }
+}
+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 });
+};
+class Playground {
+  static async CreateScene(engine, canvas) {
+    await new Promise((resolve) => {
+      const babylonMmdScript = document.createElement("script");
+      babylonMmdScript.src = "https://www.unpkg.com/babylon-mmd@0.37.2/umd/babylon.mmd.min.js";
+      document.head.appendChild(babylonMmdScript);
+      babylonMmdScript.onload = resolve;
+    });
+    if (engine.hostInformation.isMobile) {engine.setHardwareScalingLevel(0.85)} else {engine.setHardwareScalingLevel(0.75)}
+    const pmxLoader = BABYLON.SceneLoader.GetPluginForExtension(".pmx");
+    const materialBuilder = pmxLoader.materialBuilder;
+    materialBuilder.useAlphaEvaluation = false;
+    materialBuilder.loadOutlineRenderingProperties = () => {};
+    // const alphaBlendMaterials = ["face02", "Facial02", "HL", "Hairshadow", "q302"];
+    // const alphaTestMaterials = ["q301"];
+    // materialBuilder.afterBuildSingleMaterial = (material) => {
+    //   if (!alphaBlendMaterials.includes(material.name) && !alphaTestMaterials.includes(material.name)) return;
+    //   material.transparencyMode = alphaBlendMaterials.includes(material.name) ? BABYLON.Material.MATERIAL_ALPHABLEND : BABYLON.Material.MATERIAL_ALPHATEST;
+    //   material.useAlphaFromDiffuseTexture = true;
+    //   material.diffuseTexture.hasAlpha = true;
+    // };
+    const scene = new BABYLON.Scene(engine);
+    // BABYLON.SceneOptimizer.OptimizeAsync(scene);
+    // scene.clearColor = new BABYLON.Color4(0.95, 0.95, 0.95, 1.0);
+    scene.clearColor = new BABYLON.Color4(0, 0, 0, 1.0);
+    const mmdCamera = new BABYLONMMD.MmdCamera("MmdCamera", new BABYLON.Vector3(0, 10, 0), scene);
+    mmdCamera.maxZ = 5000;
+    const camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 0, 0, 45, new BABYLON.Vector3(0, 10, 0), scene);
+    camera.maxZ = 5000;
+    camera.setPosition(new BABYLON.Vector3(0, 10, -45));
+    camera.attachControl(canvas, false);
+    camera.inertia = 0.8;
+    camera.speed = 10;
+    const hemisphericLight = new BABYLON.HemisphericLight("HemisphericLight", new BABYLON.Vector3(0, 1, 0), scene);
+    hemisphericLight.intensity = 0.4;
+    hemisphericLight.specular = new BABYLON.Color3(0, 0, 0);
+    hemisphericLight.groundColor = new BABYLON.Color3(1, 0.9, 0.9);
+    const directionalLight = new BABYLON.DirectionalLight("DirectionalLight", new BABYLON.Vector3(0.5, -1, 1), scene);
+    directionalLight.intensity = 0.8;
+    directionalLight.autoCalcShadowZBounds = false;
+    directionalLight.autoUpdateExtends = false;
+    directionalLight.shadowMaxZ = 20;
+    directionalLight.shadowMinZ = -15;
+    directionalLight.orthoTop = 18;
+    directionalLight.orthoBottom = -1;
+    directionalLight.orthoLeft = -10;
+    directionalLight.orthoRight = 10;
+    directionalLight.shadowOrthoScale = 0;
+    const shadowGenerator = new BABYLON.ShadowGenerator(1024, directionalLight, true);
+    shadowGenerator.usePercentageCloserFiltering = true;
+    shadowGenerator.forceBackFacesOnly = true;
+    shadowGenerator.filteringQuality = BABYLON.ShadowGenerator.QUALITY_MEDIUM;
+    shadowGenerator.frustumEdgeFalloff = 0.1;
+    const mmdRuntime = new BABYLONMMD.MmdRuntime(scene, new BABYLONMMD.MmdPhysics(scene));
+    mmdRuntime.register(scene);
+    const audioPlayer = new BABYLONMMD.StreamAudioPlayer(scene);
+    audioPlayer.preservesPitch = false;
+    audioPlayer.source = resourcePaths.audio;
+    mmdRuntime.setAudioPlayer(audioPlayer);
+    const mmdPlayerControl = new BABYLONMMD.MmdPlayerControl(scene, mmdRuntime, audioPlayer);
+    mmdPlayerControl.showPlayerControl();
+    engine.displayLoadingUI();
+    let loadingTexts = [];
+    const updateLoadingText = (updateIndex, text) => {
+      loadingTexts[updateIndex] = text;
+      engine.loadingUIText = "<br/><br/><br/><br/>" + loadingTexts.join("<br/><br/>");
+    };
+    const promises = [];
+    const bvmdLoader = new BABYLONMMD.BvmdLoader(scene);
+    promises.push(bvmdLoader.loadAsync("motion", resourcePaths.mainMotion, (event) => updateLoadingText(0, `Loading motion... ${event.loaded}/${event.total} (${Math.floor((event.loaded * 100) / event.total)}%)`)));
+    promises.push(BABYLON.SceneLoader.ImportMeshAsync(undefined, resourcePaths.mainModel, undefined, scene, (event) => updateLoadingText(1, `Loading model... ${event.loaded}/${event.total} (${Math.floor((event.loaded * 100) / event.total)}%)`)));
+    promises.push(
+      (async () => {
+        updateLoadingText(2, "Loading physics engine...");
+        const havokPlugin = new BABYLON.HavokPlugin();
+        // scene.enablePhysics(new BABYLON.Vector3(0, -9.8, 0), havokPlugin);
+        scene.enablePhysics(new BABYLON.Vector3(0, -9.8, 0), havokPlugin);
+        updateLoadingText(2, "Loading physics engine... Done");
+      })()
+    );
+    loadingTexts = new Array(promises.length).fill("");
+    const loadResults = await Promise.all(promises);
+    scene.onAfterRenderObservable.addOnce(() => engine.hideLoadingUI());
+    mmdRuntime.setCamera(mmdCamera);
+    mmdCamera.addAnimation(loadResults[0]);
+    mmdCamera.setAnimation("motion");
+    const modelMesh = loadResults[1].meshes[0];
+    modelMesh.receiveShadows = true;
+    shadowGenerator.addShadowCaster(modelMesh);
+    const mmdModel = mmdRuntime.createMmdModel(modelMesh);
+    mmdModel.addAnimation(loadResults[0]);
+    mmdModel.setAnimation("motion");
+    mmdModel.mesh.edgesColor = new BABYLON.Color4(0.152, 0.062, 0.035, 1.0);
+    mmdModel.mesh.edgesWidth = 100;
+    const bodyBone = loadResults[1].skeletons[0].bones.find((bone) => bone.name === "センター");
+    scene.onBeforeRenderObservable.add(() => {
+      bodyBone.getFinalMatrix().getTranslationToRef(directionalLight.position);
+      directionalLight.position.y -= 10;
+    });
+    const ground = BABYLON.MeshBuilder.CreateGround("Ground", { width: 100, height: 100, subdivisions: 2, updatable: false }, scene);
+    ground.receiveShadows = true;
+    const groundMaterial = (ground.material = new BABYLON.StandardMaterial("GroundMaterial", scene));
+    groundMaterial.diffuseColor = new BABYLON.Color3(0.25, 0.25, 0.25);
+    groundMaterial.specularPower = 128;
+    const groundReflectionTexture = (groundMaterial.reflectionTexture = new BABYLON.MirrorTexture("MirrorTexture", 1024, scene, true));
+    groundReflectionTexture.mirrorPlane = BABYLON.Plane.FromPositionAndNormal(ground.position, ground.getFacetNormal(0).scale(-1));
+    groundReflectionTexture.renderList = [modelMesh];
+    groundReflectionTexture.level = 0.25;
+    const defaultPipeline = new BABYLON.DefaultRenderingPipeline("default", true, scene, [mmdCamera, camera]);
+    defaultPipeline.samples = 4;
+    defaultPipeline.bloomEnabled = true;
+    defaultPipeline.bloomThreshold = 0;
+    defaultPipeline.bloomWeight = 0.1;
+    defaultPipeline.bloomKernel = 38;
+    defaultPipeline.bloomScale = 0.5;
+    defaultPipeline.chromaticAberrationEnabled = true;
+    defaultPipeline.chromaticAberration.aberrationAmount = 0;
+    defaultPipeline.fxaaEnabled = true;
+    defaultPipeline.imageProcessingEnabled = true;
+    defaultPipeline.imageProcessing.toneMappingEnabled = false;
+    defaultPipeline.imageProcessing.toneMappingType = BABYLON.ImageProcessingConfiguration.TONEMAPPING_ACES;
+    defaultPipeline.imageProcessing.vignetteWeight = 0.5;
+    defaultPipeline.imageProcessing.vignetteStretch = 0.5;
+    defaultPipeline.imageProcessing.vignetteColor = new BABYLON.Color4(0, 0, 0, 0);
+    defaultPipeline.imageProcessing.vignetteEnabled = true;
+    const lensEffect = new BABYLON.LensRenderingPipeline('lensEffects', {edge_blur: engine.hostInformation.isMobile ? 0.0 : 1.0, chromatic_aberration: 1.0, distortion: 0.125}, scene, 1.0);
+    scene.postProcessRenderPipelineManager.attachCamerasToRenderPipeline('lensEffects', camera);
+    scene.postProcessRenderPipelineManager.attachCamerasToRenderPipeline('lensEffects', mmdCamera);
+    // BABYLON.ParticleHelper.CreateAsync("rain", scene, false).then((set) => {set.start()});
+    const guiCamera = new BABYLON.ArcRotateCamera("GUICamera", Math.PI / 2 + Math.PI / 7, Math.PI / 2, 100, new BABYLON.Vector3(0, 20, 0), scene);
+    guiCamera.layerMask = 0x10000000;
+    scene.activeCameras = [mmdCamera, guiCamera];
+    let lastClickTime = -Infinity;
+    canvas.onclick = () => {
+      const currentTime = performance.now();
+      if (500 < currentTime - lastClickTime) {
+        lastClickTime = currentTime;
+        return;
+      }
+      lastClickTime = -Infinity;
+      if (scene.activeCameras[0] === mmdCamera) scene.activeCameras = [camera, guiCamera];
+      else scene.activeCameras = [mmdCamera, guiCamera];
+    };
+    const advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
+    advancedTexture.layer.layerMask = 0x10000000;
+    advancedTexture.renderScale = 1.5;
+    const textblock = new BABYLON.GUI.TextBlock();
+    // textblock.widthInPixels = 800;
+    // textblock.left = 10;
+    textblock.text = `${engine._glRenderer}\n${engine._glVersion}`;
+    textblock.fontSize = 32;
+    textblock.fontFamily = "system-ui";
+    textblock.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
+    textblock.textVerticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
+    textblock.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
+    textblock.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
+    textblock.color = "#ffffff";
+    advancedTexture.addControl(textblock);
+    const textBlockUpdateDisp = setInterval(() => {
+      if (engine.hostInformation.isMobile) {
+        textblock.text = `${engine._glRenderer}\n${engine._glVersion}\n\n${engine.frameId} f\n${mathFunc.rounder('floor', engine.getFps(), 2)} fps\n${mathFunc.rounder('floor', engine.performanceMonitor.averageFrameTime, 2)} ms`;
+      } else {
+        textblock.text = `${engine._glRenderer}\n${engine._glVersion}\n\n${resourcePaths.mainModel}\n${resourcePaths.mainMotion}\n${resourcePaths.audio}\n\n${engine.frameId} frame\n${Math.floor(engine.getFps())} fps\n${Math.floor(engine.performanceMonitor.averageFrameTime)} ms`;
+      }
+    }, 10);
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    mmdRuntime.playAnimation();
+    return scene;
+  }
+}
+createScene = function () {
+  return Playground.CreateScene(engine, engine.getRenderingCanvas());
+};
+window.initFunction = async function () {
+  globalThis.HK = await HavokPhysics();
+  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(() => {
+  scene.then((returnedScene) => {
+    sceneToRender = returnedScene;
+  });
+});
+// Resize
+window.addEventListener("resize", function () {
+  engine.resize();
+});