Added souce map analyzer and added tree shaking to Babylon to reduce bundle size

src/dice/Dice.js

@@ -1,4 +1,7 @@
-import * as BABYLON from "babylonjs";
+import { Vector3 } from "@babylonjs/core/Maths/math";
+import { SceneLoader } from "@babylonjs/core/Loading/sceneLoader";
+import { PBRMaterial } from "@babylonjs/core/Materials/PBR/pbrMaterial";
+import { PhysicsImpostor } from "@babylonjs/core/Physics/physicsImpostor";
 
 import d4Source from "./shared/d4.glb";
 import d6Source from "./shared/d6.glb";
@@ -35,9 +38,8 @@ class Dice {
   }
 
   static async loadMesh(source, material, scene) {
-    let mesh = (
-      await BABYLON.SceneLoader.ImportMeshAsync("", source, "", scene)
-    ).meshes[1];
+    let mesh = (await SceneLoader.ImportMeshAsync("", source, "", scene))
+      .meshes[1];
     mesh.setParent(null);
 
     mesh.material = material;
@@ -48,7 +50,7 @@ class Dice {
   }
 
   static async loadMaterial(materialName, textures, scene) {
-    let pbr = new BABYLON.PBRMaterial(materialName, scene);
+    let pbr = new PBRMaterial(materialName, scene);
     pbr.albedoTexture = await importTextureAsync(textures.albedo);
     pbr.normalTexture = await importTextureAsync(textures.normal);
     pbr.metallicTexture = await importTextureAsync(textures.metalRoughness);
@@ -68,9 +70,9 @@ class Dice {
       instance.addChild(locator);
     }
 
-    instance.physicsImpostor = new BABYLON.PhysicsImpostor(
+    instance.physicsImpostor = new PhysicsImpostor(
       instance,
-      BABYLON.PhysicsImpostor.ConvexHullImpostor,
+      PhysicsImpostor.ConvexHullImpostor,
       physicalProperties,
       scene
     );
@@ -99,8 +101,8 @@ class Dice {
   }
 
   static roll(instance) {
-    instance.physicsImpostor.setLinearVelocity(BABYLON.Vector3.Zero());
-    instance.physicsImpostor.setAngularVelocity(BABYLON.Vector3.Zero());
+    instance.physicsImpostor.setLinearVelocity(Vector3.Zero());
+    instance.physicsImpostor.setAngularVelocity(Vector3.Zero());
 
     const scene = instance.getScene();
     const diceTraySingle = scene.getNodeByID("dice_tray_single");
@@ -110,7 +112,7 @@ class Dice {
       : diceTrayDouble;
     const trayBounds = visibleDiceTray.getBoundingInfo().boundingBox;
 
-    const position = new BABYLON.Vector3(
+    const position = new Vector3(
       trayBounds.center.x + (Math.random() * 2 - 1),
       8,
       trayBounds.center.z + (Math.random() * 2 - 1)
@@ -122,13 +124,13 @@ class Dice {
       Math.random() * Math.PI * 2
     );
 
-    const throwTarget = new BABYLON.Vector3(
+    const throwTarget = new Vector3(
       lerp(trayBounds.minimumWorld.x, trayBounds.maximumWorld.x, Math.random()),
       5,
       lerp(trayBounds.minimumWorld.z, trayBounds.maximumWorld.z, Math.random())
     );
 
-    const impulse = new BABYLON.Vector3(0, 0, 0)
+    const impulse = new Vector3(0, 0, 0)
       .subtract(throwTarget)
       .normalizeToNew()
       .scale(lerp(minDiceRollSpeed, maxDiceRollSpeed, Math.random()));

src/dice/diceTray/DiceTray.js

@@ -1,4 +1,7 @@
-import * as BABYLON from "babylonjs";
+import { SceneLoader } from "@babylonjs/core/Loading/sceneLoader";
+import { PBRMaterial } from "@babylonjs/core/Materials/PBR/pbrMaterial";
+import { PhysicsImpostor } from "@babylonjs/core/Physics/physicsImpostor";
+import { Mesh } from "@babylonjs/core/Meshes/mesh";
 
 import singleMeshSource from "./single.glb";
 import doubleMeshSource from "./double.glb";
@@ -55,19 +58,19 @@ class DiceTray {
   }
 
   createCollision(name, x, y, z, friction) {
-    let collision = BABYLON.Mesh.CreateBox(
+    let collision = Mesh.CreateBox(
       name,
       this.collisionSize,
       this.scene,
       true,
-      BABYLON.Mesh.DOUBLESIDE
+      Mesh.DOUBLESIDE
     );
     collision.position.x = x;
     collision.position.y = y;
     collision.position.z = z;
-    collision.physicsImpostor = new BABYLON.PhysicsImpostor(
+    collision.physicsImpostor = new PhysicsImpostor(
       collision,
-      BABYLON.PhysicsImpostor.BoxImpostor,
+      PhysicsImpostor.BoxImpostor,
       { mass: 0, friction: friction },
       this.scene
     );
@@ -115,19 +118,11 @@ class DiceTray {
 
   async loadMeshes() {
     this.singleMesh = (
-      await BABYLON.SceneLoader.ImportMeshAsync(
-        "",
-        singleMeshSource,
-        "",
-        this.scene
-      )
+      await SceneLoader.ImportMeshAsync("", singleMeshSource, "", this.scene)
     ).meshes[1];
     this.singleMesh.id = "dice_tray_single";
     this.singleMesh.name = "dice_tray";
-    let singleMaterial = new BABYLON.PBRMaterial(
-      "dice_tray_mat_single",
-      this.scene
-    );
+    let singleMaterial = new PBRMaterial("dice_tray_mat_single", this.scene);
     singleMaterial.albedoTexture = await importTextureAsync(singleAlbedo);
     singleMaterial.normalTexture = await importTextureAsync(singleNormal);
     singleMaterial.metallicTexture = await importTextureAsync(
@@ -143,19 +138,11 @@ class DiceTray {
     this.singleMesh.isVisible = this.size === "single";
 
     this.doubleMesh = (
-      await BABYLON.SceneLoader.ImportMeshAsync(
-        "",
-        doubleMeshSource,
-        "",
-        this.scene
-      )
+      await SceneLoader.ImportMeshAsync("", doubleMeshSource, "", this.scene)
     ).meshes[1];
     this.doubleMesh.id = "dice_tray_double";
     this.doubleMesh.name = "dice_tray";
-    let doubleMaterial = new BABYLON.PBRMaterial(
-      "dice_tray_mat_double",
-      this.scene
-    );
+    let doubleMaterial = new PBRMaterial("dice_tray_mat_double", this.scene);
     doubleMaterial.albedoTexture = await importTextureAsync(doubleAlbedo);
     doubleMaterial.normalTexture = await importTextureAsync(doubleNormal);
     doubleMaterial.metallicTexture = await importTextureAsync(

src/dice/gemstone/GemstoneDice.js

@@ -1,4 +1,5 @@
-import * as BABYLON from "babylonjs";
+import { PBRMaterial } from "@babylonjs/core/Materials/PBR/pbrMaterial";
+import { Color3 } from "@babylonjs/core/Maths/math";
 
 import Dice from "../Dice";
 
@@ -18,7 +19,7 @@ class GemstoneDice extends Dice {
   }
 
   static async loadMaterial(materialName, textures, scene) {
-    let pbr = new BABYLON.PBRMaterial(materialName, scene);
+    let pbr = new PBRMaterial(materialName, scene);
     pbr.albedoTexture = await importTextureAsync(textures.albedo);
     pbr.normalTexture = await importTextureAsync(textures.normal);
     pbr.metallicTexture = await importTextureAsync(textures.metalRoughness);
@@ -30,7 +31,7 @@ class GemstoneDice extends Dice {
     pbr.subSurface.translucencyIntensity = 1.0;
     pbr.subSurface.minimumThickness = 5;
     pbr.subSurface.maximumThickness = 10;
-    pbr.subSurface.tintColor = new BABYLON.Color3(190 / 255, 0, 220 / 255);
+    pbr.subSurface.tintColor = new Color3(190 / 255, 0, 220 / 255);
 
     return pbr;
   }

src/dice/glass/GlassDice.js

@@ -1,4 +1,5 @@
-import * as BABYLON from "babylonjs";
+import { PBRMaterial } from "@babylonjs/core/Materials/PBR/pbrMaterial";
+import { Color3 } from "@babylonjs/core/Maths/math";
 
 import Dice from "../Dice";
 
@@ -18,7 +19,7 @@ class GlassDice extends Dice {
   }
 
   static async loadMaterial(materialName, textures, scene) {
-    let pbr = new BABYLON.PBRMaterial(materialName, scene);
+    let pbr = new PBRMaterial(materialName, scene);
     pbr.albedoTexture = await importTextureAsync(textures.albedo);
     pbr.normalTexture = await importTextureAsync(textures.normal);
     pbr.roughness = 0.25;
@@ -30,7 +31,7 @@ class GlassDice extends Dice {
     pbr.subSurface.translucencyIntensity = 2.5;
     pbr.subSurface.minimumThickness = 10;
     pbr.subSurface.maximumThickness = 10;
-    pbr.subSurface.tintColor = new BABYLON.Color3(43 / 255, 1, 115 / 255);
+    pbr.subSurface.tintColor = new Color3(43 / 255, 1, 115 / 255);
     pbr.subSurface.thicknessTexture = await importTextureAsync(textures.mask);
     pbr.subSurface.useMaskFromThicknessTexture = true;