Atlas48/grungnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Mitchell McCaffrey
2020-08-11 20:22:10 +10:00
parent 690f35de55
commit b94e06b5a7
10 changed files with 216 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/dice/DiceInteraction.js
View File

@@ -1,7 +1,19 @@
import React, { useRef, useEffect } from "react";
import * as BABYLON from "babylonjs";
import { Engine } from "@babylonjs/core/Engines/engine";
import { Scene } from "@babylonjs/core/scene";
import { Vector3, Color4, Matrix } from "@babylonjs/core/Maths/math";
import { AmmoJSPlugin } from "@babylonjs/core/Physics/Plugins/ammoJSPlugin";
import { TargetCamera } from "@babylonjs/core/Cameras/targetCamera";
import * as AMMO from "ammo.js";
import "babylonjs-loaders";
import "@babylonjs/core/Physics/physicsEngineComponent";
import "@babylonjs/core/Lights/Shadows/shadowGeneratorSceneComponent";
import "@babylonjs/core/Materials/Textures/Loaders/ddsTextureLoader";
import "@babylonjs/core/Meshes/Builders/boxBuilder";
import "@babylonjs/core/Actions/actionManager";
import "@babylonjs/core/Culling/ray";
import "@babylonjs/loaders/glTF";
import ReactResizeDetector from "react-resize-detector";
import usePreventTouch from "../../helpers/usePreventTouch";
@@ -16,25 +28,18 @@ function DiceInteraction({ onSceneMount, onPointerDown, onPointerUp }) {
useEffect(() => {
const canvas = canvasRef.current;
const engine = new BABYLON.Engine(canvas, true, {
const engine = new Engine(canvas, true, {
preserveDrawingBuffer: true,
stencil: true,
});
const scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
const scene = new Scene(engine);
scene.clearColor = new Color4(0, 0, 0, 0);
// Enable physics
scene.enablePhysics(
new BABYLON.Vector3(0, -98, 0),
new BABYLON.AmmoJSPlugin(true, AMMO)
);
scene.enablePhysics(new Vector3(0, -98, 0), new AmmoJSPlugin(true, AMMO));
let camera = new BABYLON.TargetCamera(
"camera",
new BABYLON.Vector3(0, 33.5, 0),
scene
);
let camera = new TargetCamera("camera", new Vector3(0, 33.5, 0), scene);
camera.fov = 0.65;
camera.setTarget(BABYLON.Vector3.Zero());
camera.setTarget(Vector3.Zero());
onSceneMount && onSceneMount({ scene, engine, canvas });
@@ -48,7 +53,7 @@ function DiceInteraction({ onSceneMount, onPointerDown, onPointerUp }) {
const ray = scene.createPickingRay(
scene.pointerX,
scene.pointerY,
BABYLON.Matrix.Identity(),
Matrix.Identity(),
camera
);
const currentPosition = selectedMesh.getAbsolutePosition();
@@ -79,12 +84,8 @@ function DiceInteraction({ onSceneMount, onPointerDown, onPointerUp }) {
if (scene) {
const pickInfo = scene.pick(scene.pointerX, scene.pointerY);
if (pickInfo.hit && pickInfo.pickedMesh.name !== "dice_tray") {
pickInfo.pickedMesh.physicsImpostor.setLinearVelocity(
BABYLON.Vector3.Zero()
);
pickInfo.pickedMesh.physicsImpostor.setAngularVelocity(
BABYLON.Vector3.Zero()
);
pickInfo.pickedMesh.physicsImpostor.setLinearVelocity(Vector3.Zero());
pickInfo.pickedMesh.physicsImpostor.setAngularVelocity(Vector3.Zero());
selectedMeshRef.current = pickInfo.pickedMesh;
}
}
@@ -97,7 +98,7 @@ function DiceInteraction({ onSceneMount, onPointerDown, onPointerUp }) {
const scene = sceneRef.current;
if (selectedMesh && scene) {
// Average velocity window
let velocity = BABYLON.Vector3.Zero();
let velocity = Vector3.Zero();
for (let v of velocityWindow) {
velocity.addInPlace(v);
}

15
src/components/dice/DiceTrayOverlay.js
View File

@@ -5,7 +5,10 @@ import React, {
useContext,
useState,
} from "react";
import * as BABYLON from "babylonjs";
import { Vector3 } from "@babylonjs/core/Maths/math";
import { DirectionalLight } from "@babylonjs/core/Lights/directionalLight";
import { ShadowGenerator } from "@babylonjs/core/Lights/Shadows/shadowGenerator";
import { CubeTexture } from "@babylonjs/core/Materials/Textures/cubeTexture";
import { Box } from "theme-ui";
import environment from "../../dice/environment.dds";
@@ -102,20 +105,20 @@ function DiceTrayOverlay({
async function initializeScene(scene) {
handleAssetLoadStart();
let light = new BABYLON.DirectionalLight(
let light = new DirectionalLight(
"DirectionalLight",
new BABYLON.Vector3(-0.5, -1, -0.5),
new Vector3(-0.5, -1, -0.5),
scene
);
light.position = new BABYLON.Vector3(5, 10, 5);
light.position = new Vector3(5, 10, 5);
light.shadowMinZ = 1;
light.shadowMaxZ = 50;
let shadowGenerator = new BABYLON.ShadowGenerator(1024, light);
let shadowGenerator = new ShadowGenerator(1024, light);
shadowGenerator.useCloseExponentialShadowMap = true;
shadowGenerator.darkness = 0.7;
shadowGeneratorRef.current = shadowGenerator;
scene.environmentTexture = BABYLON.CubeTexture.CreateFromPrefilteredData(
scene.environmentTexture = CubeTexture.CreateFromPrefilteredData(
environment,
scene
);

26
src/dice/Dice.js
View File

@@ -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()));

37
src/dice/diceTray/DiceTray.js
View File

@@ -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(

7
src/dice/gemstone/GemstoneDice.js
View File

@@ -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;
}

7
src/dice/glass/GlassDice.js
View File

@@ -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;

4
src/helpers/babylon.js
View File

@@ -1,9 +1,9 @@
import * as BABYLON from "babylonjs";
import { Texture } from "@babylonjs/core/Materials/Textures/texture";
// Turn texture load into an async function so it can be awaited
export async function importTextureAsync(url) {
return new Promise((resolve, reject) => {
let texture = new BABYLON.Texture(
let texture = new Texture(
url,
null,
undefined,

4
src/helpers/dice.js
View File

@@ -1,4 +1,4 @@
import * as BABYLON from "babylonjs";
import { Vector3 } from "@babylonjs/core/Maths/math";
/**
* Find the number facing up on a mesh instance of a dice
@@ -12,7 +12,7 @@ export function getDiceInstanceRoll(instance) {
.getAbsolutePosition()
.subtract(instance.getAbsolutePosition());
let direction = dif.normalize();
const dot = BABYLON.Vector3.Dot(direction, BABYLON.Vector3.Up());
const dot = Vector3.Dot(direction, Vector3.Up());
if (dot > highestDot) {
highestDot = dot;
highestLocator = locator;