diff --git a/src/components/dice/DiceTrayOverlay.js b/src/components/dice/DiceTrayOverlay.js index 09cdd3f..da38cc5 100644 --- a/src/components/dice/DiceTrayOverlay.js +++ b/src/components/dice/DiceTrayOverlay.js @@ -36,27 +36,13 @@ function DiceTrayOverlay({ isOpen }) { function handleAssetLoadStart() { assetLoadStart(); - sceneKeepAwakeRef.current++; } function handleAssetLoadFinish() { assetLoadFinish(); - sceneKeepAwakeRef.current--; + forceRender(); } - // Force render when loading assets - useEffect(() => { - if (isLoading) { - sceneKeepAwakeRef.current++; - } - return () => { - if (isLoading) { - // eslint-disable-next-line react-hooks/exhaustive-deps - sceneKeepAwakeRef.current--; - } - }; - }, [isLoading]); - // Forces rendering for 1 second function forceRender() { // Force rerender diff --git a/src/dice/Dice.js b/src/dice/Dice.js index 831c604..e40e352 100644 --- a/src/dice/Dice.js +++ b/src/dice/Dice.js @@ -9,6 +9,7 @@ import d20Source from "./shared/d20.glb"; import d100Source from "./shared/d100.glb"; import { lerp } from "../helpers/shared"; +import { importTextureAsync } from "../helpers/babylon"; const minDiceRollSpeed = 600; const maxDiceRollSpeed = 800; @@ -46,11 +47,11 @@ class Dice { return mesh; } - static loadMaterial(materialName, textures, scene) { + static async loadMaterial(materialName, textures, scene) { let pbr = new BABYLON.PBRMaterial(materialName, scene); - pbr.albedoTexture = new BABYLON.Texture(textures.albedo); - pbr.normalTexture = new BABYLON.Texture(textures.normal); - pbr.metallicTexture = new BABYLON.Texture(textures.metalRoughness); + pbr.albedoTexture = await importTextureAsync(textures.albedo); + pbr.normalTexture = await importTextureAsync(textures.normal); + pbr.metallicTexture = await importTextureAsync(textures.metalRoughness); pbr.useRoughnessFromMetallicTextureAlpha = false; pbr.useRoughnessFromMetallicTextureGreen = true; pbr.useMetallnessFromMetallicTextureBlue = true; diff --git a/src/dice/diceTray/DiceTray.js b/src/dice/diceTray/DiceTray.js index d38d648..0e32e8b 100644 --- a/src/dice/diceTray/DiceTray.js +++ b/src/dice/diceTray/DiceTray.js @@ -11,6 +11,8 @@ import doubleAlbedo from "./doubleAlbedo.jpg"; import doubleMetalRoughness from "./doubleMetalRoughness.jpg"; import doubleNormal from "./doubleNormal.jpg"; +import { importTextureAsync } from "../../helpers/babylon"; + class DiceTray { _size; get size() { @@ -126,9 +128,11 @@ class DiceTray { "dice_tray_mat_single", this.scene ); - singleMaterial.albedoTexture = new BABYLON.Texture(singleAlbedo); - singleMaterial.normalTexture = new BABYLON.Texture(singleNormal); - singleMaterial.metallicTexture = new BABYLON.Texture(singleMetalRoughness); + singleMaterial.albedoTexture = await importTextureAsync(singleAlbedo); + singleMaterial.normalTexture = await importTextureAsync(singleNormal); + singleMaterial.metallicTexture = await importTextureAsync( + singleMetalRoughness + ); singleMaterial.useRoughnessFromMetallicTextureAlpha = false; singleMaterial.useRoughnessFromMetallicTextureGreen = true; singleMaterial.useMetallnessFromMetallicTextureBlue = true; @@ -152,9 +156,11 @@ class DiceTray { "dice_tray_mat_double", this.scene ); - doubleMaterial.albedoTexture = new BABYLON.Texture(doubleAlbedo); - doubleMaterial.normalTexture = new BABYLON.Texture(doubleNormal); - doubleMaterial.metallicTexture = new BABYLON.Texture(doubleMetalRoughness); + doubleMaterial.albedoTexture = await importTextureAsync(doubleAlbedo); + doubleMaterial.normalTexture = await importTextureAsync(doubleNormal); + doubleMaterial.metallicTexture = await importTextureAsync( + doubleMetalRoughness + ); doubleMaterial.useRoughnessFromMetallicTextureAlpha = false; doubleMaterial.useRoughnessFromMetallicTextureGreen = true; doubleMaterial.useMetallnessFromMetallicTextureBlue = true; diff --git a/src/dice/diceTray/doubleAlbedo.jpg b/src/dice/diceTray/doubleAlbedo.jpg index 1df822b..c38282b 100644 Binary files a/src/dice/diceTray/doubleAlbedo.jpg and b/src/dice/diceTray/doubleAlbedo.jpg differ diff --git a/src/dice/diceTray/doubleMetalRoughness.jpg b/src/dice/diceTray/doubleMetalRoughness.jpg index efa575d..94eb5d2 100644 Binary files a/src/dice/diceTray/doubleMetalRoughness.jpg and b/src/dice/diceTray/doubleMetalRoughness.jpg differ diff --git a/src/dice/diceTray/doubleNormal.jpg b/src/dice/diceTray/doubleNormal.jpg index 00ea0a0..3f2a266 100644 Binary files a/src/dice/diceTray/doubleNormal.jpg and b/src/dice/diceTray/doubleNormal.jpg differ diff --git a/src/dice/diceTray/singleAlbedo.jpg b/src/dice/diceTray/singleAlbedo.jpg index 3943299..0e3bffe 100644 Binary files a/src/dice/diceTray/singleAlbedo.jpg and b/src/dice/diceTray/singleAlbedo.jpg differ diff --git a/src/dice/diceTray/singleMetalRoughness.jpg b/src/dice/diceTray/singleMetalRoughness.jpg index 2b371c4..20246f2 100644 Binary files a/src/dice/diceTray/singleMetalRoughness.jpg and b/src/dice/diceTray/singleMetalRoughness.jpg differ diff --git a/src/dice/diceTray/singleNormal.jpg b/src/dice/diceTray/singleNormal.jpg index f335632..4d469f9 100644 Binary files a/src/dice/diceTray/singleNormal.jpg and b/src/dice/diceTray/singleNormal.jpg differ diff --git a/src/dice/galaxy/GalaxyDice.js b/src/dice/galaxy/GalaxyDice.js index 4c8f38e..ebe8548 100644 --- a/src/dice/galaxy/GalaxyDice.js +++ b/src/dice/galaxy/GalaxyDice.js @@ -10,7 +10,7 @@ class GalaxyDice extends Dice { static async load(scene) { if (!this.material) { - this.material = this.loadMaterial( + this.material = await this.loadMaterial( "galaxy_pbr", { albedo, metalRoughness, normal }, scene diff --git a/src/dice/galaxy/albedo.jpg b/src/dice/galaxy/albedo.jpg index 1856475..4f5cd33 100755 Binary files a/src/dice/galaxy/albedo.jpg and b/src/dice/galaxy/albedo.jpg differ diff --git a/src/dice/galaxy/metalRoughness.jpg b/src/dice/galaxy/metalRoughness.jpg index dd819e3..2883f3e 100755 Binary files a/src/dice/galaxy/metalRoughness.jpg and b/src/dice/galaxy/metalRoughness.jpg differ diff --git a/src/dice/galaxy/normal.jpg b/src/dice/galaxy/normal.jpg index 7c803af..ca1c7f2 100755 Binary files a/src/dice/galaxy/normal.jpg and b/src/dice/galaxy/normal.jpg differ diff --git a/src/dice/gemstone/GemstoneDice.js b/src/dice/gemstone/GemstoneDice.js index 3ef7253..347c489 100644 --- a/src/dice/gemstone/GemstoneDice.js +++ b/src/dice/gemstone/GemstoneDice.js @@ -6,6 +6,8 @@ import albedo from "./albedo.jpg"; import metalRoughness from "./metalRoughness.jpg"; import normal from "./normal.jpg"; +import { importTextureAsync } from "../../helpers/babylon"; + class GemstoneDice extends Dice { static meshes; static material; @@ -15,11 +17,11 @@ class GemstoneDice extends Dice { return { mass: properties.mass * 1.5, friction: properties.friction }; } - static loadMaterial(materialName, textures, scene) { + static async loadMaterial(materialName, textures, scene) { let pbr = new BABYLON.PBRMaterial(materialName, scene); - pbr.albedoTexture = new BABYLON.Texture(textures.albedo); - pbr.normalTexture = new BABYLON.Texture(textures.normal); - pbr.metallicTexture = new BABYLON.Texture(textures.metalRoughness); + pbr.albedoTexture = await importTextureAsync(textures.albedo); + pbr.normalTexture = await importTextureAsync(textures.normal); + pbr.metallicTexture = await importTextureAsync(textures.metalRoughness); pbr.useRoughnessFromMetallicTextureAlpha = false; pbr.useRoughnessFromMetallicTextureGreen = true; pbr.useMetallnessFromMetallicTextureBlue = true; @@ -35,7 +37,7 @@ class GemstoneDice extends Dice { static async load(scene) { if (!this.material) { - this.material = this.loadMaterial( + this.material = await this.loadMaterial( "gemstone_pbr", { albedo, metalRoughness, normal }, scene diff --git a/src/dice/gemstone/albedo.jpg b/src/dice/gemstone/albedo.jpg index bd507af..afcc39d 100755 Binary files a/src/dice/gemstone/albedo.jpg and b/src/dice/gemstone/albedo.jpg differ diff --git a/src/dice/gemstone/metalRoughness.jpg b/src/dice/gemstone/metalRoughness.jpg index e5107c9..ba996da 100755 Binary files a/src/dice/gemstone/metalRoughness.jpg and b/src/dice/gemstone/metalRoughness.jpg differ diff --git a/src/dice/gemstone/normal.jpg b/src/dice/gemstone/normal.jpg index 4739fa6..a764626 100755 Binary files a/src/dice/gemstone/normal.jpg and b/src/dice/gemstone/normal.jpg differ diff --git a/src/dice/glass/GlassDice.js b/src/dice/glass/GlassDice.js index 386e6ce..50de8f3 100644 --- a/src/dice/glass/GlassDice.js +++ b/src/dice/glass/GlassDice.js @@ -6,6 +6,8 @@ import albedo from "./albedo.jpg"; import mask from "./mask.png"; import normal from "./normal.jpg"; +import { importTextureAsync } from "../../helpers/babylon"; + class GlassDice extends Dice { static meshes; static material; @@ -15,10 +17,10 @@ class GlassDice extends Dice { return { mass: properties.mass * 1.5, friction: properties.friction }; } - static loadMaterial(materialName, textures, scene) { + static async loadMaterial(materialName, textures, scene) { let pbr = new BABYLON.PBRMaterial(materialName, scene); - pbr.albedoTexture = new BABYLON.Texture(textures.albedo); - pbr.normalTexture = new BABYLON.Texture(textures.normal); + pbr.albedoTexture = await importTextureAsync(textures.albedo); + pbr.normalTexture = await importTextureAsync(textures.normal); pbr.roughness = 0.25; pbr.metallic = 0; pbr.subSurface.isRefractionEnabled = true; @@ -29,7 +31,7 @@ class GlassDice extends Dice { pbr.subSurface.minimumThickness = 10; pbr.subSurface.maximumThickness = 10; pbr.subSurface.tintColor = new BABYLON.Color3(43 / 255, 1, 115 / 255); - pbr.subSurface.thicknessTexture = new BABYLON.Texture(textures.mask); + pbr.subSurface.thicknessTexture = await importTextureAsync(textures.mask); pbr.subSurface.useMaskFromThicknessTexture = true; return pbr; @@ -37,7 +39,7 @@ class GlassDice extends Dice { static async load(scene) { if (!this.material) { - this.material = this.loadMaterial( + this.material = await this.loadMaterial( "glass_pbr", { albedo, mask, normal }, scene diff --git a/src/dice/glass/albedo.jpg b/src/dice/glass/albedo.jpg index 7aa1702..34dee44 100755 Binary files a/src/dice/glass/albedo.jpg and b/src/dice/glass/albedo.jpg differ diff --git a/src/dice/glass/mask.png b/src/dice/glass/mask.png index 20e8e81..cbd2286 100644 Binary files a/src/dice/glass/mask.png and b/src/dice/glass/mask.png differ diff --git a/src/dice/glass/normal.jpg b/src/dice/glass/normal.jpg index de3f0e7..c7bdb61 100755 Binary files a/src/dice/glass/normal.jpg and b/src/dice/glass/normal.jpg differ diff --git a/src/dice/iron/IronDice.js b/src/dice/iron/IronDice.js index fef1983..917ab6c 100644 --- a/src/dice/iron/IronDice.js +++ b/src/dice/iron/IronDice.js @@ -15,7 +15,7 @@ class IronDice extends Dice { static async load(scene) { if (!this.material) { - this.material = this.loadMaterial( + this.material = await this.loadMaterial( "iron_pbr", { albedo, metalRoughness, normal }, scene diff --git a/src/dice/iron/albedo.jpg b/src/dice/iron/albedo.jpg index 36db6b3..c3da36e 100755 Binary files a/src/dice/iron/albedo.jpg and b/src/dice/iron/albedo.jpg differ diff --git a/src/dice/iron/metalRoughness.jpg b/src/dice/iron/metalRoughness.jpg index 3f0aad3..b68015a 100755 Binary files a/src/dice/iron/metalRoughness.jpg and b/src/dice/iron/metalRoughness.jpg differ diff --git a/src/dice/iron/normal.jpg b/src/dice/iron/normal.jpg index 4485d7e..1770d3f 100755 Binary files a/src/dice/iron/normal.jpg and b/src/dice/iron/normal.jpg differ diff --git a/src/dice/nebula/NebulaDice.js b/src/dice/nebula/NebulaDice.js index 897afc3..fe687f1 100644 --- a/src/dice/nebula/NebulaDice.js +++ b/src/dice/nebula/NebulaDice.js @@ -10,7 +10,7 @@ class NebulaDice extends Dice { static async load(scene) { if (!this.material) { - this.material = this.loadMaterial( + this.material = await this.loadMaterial( "neubula_pbr", { albedo, metalRoughness, normal }, scene diff --git a/src/dice/nebula/albedo.jpg b/src/dice/nebula/albedo.jpg index ae2dac9..b767726 100755 Binary files a/src/dice/nebula/albedo.jpg and b/src/dice/nebula/albedo.jpg differ diff --git a/src/dice/nebula/metalRoughness.jpg b/src/dice/nebula/metalRoughness.jpg index 26c6920..0843c12 100755 Binary files a/src/dice/nebula/metalRoughness.jpg and b/src/dice/nebula/metalRoughness.jpg differ diff --git a/src/dice/nebula/normal.jpg b/src/dice/nebula/normal.jpg index 739b72b..c86a993 100755 Binary files a/src/dice/nebula/normal.jpg and b/src/dice/nebula/normal.jpg differ diff --git a/src/dice/sunrise/SunriseDice.js b/src/dice/sunrise/SunriseDice.js index 85a760e..d92f6f0 100644 --- a/src/dice/sunrise/SunriseDice.js +++ b/src/dice/sunrise/SunriseDice.js @@ -10,7 +10,7 @@ class SunriseDice extends Dice { static async load(scene) { if (!this.material) { - this.material = this.loadMaterial( + this.material = await this.loadMaterial( "sunrise_pbr", { albedo, metalRoughness, normal }, scene diff --git a/src/dice/sunrise/albedo.jpg b/src/dice/sunrise/albedo.jpg index ea5d433..3010bb5 100755 Binary files a/src/dice/sunrise/albedo.jpg and b/src/dice/sunrise/albedo.jpg differ diff --git a/src/dice/sunrise/metalRoughness.jpg b/src/dice/sunrise/metalRoughness.jpg index e3eb7ed..face52a 100755 Binary files a/src/dice/sunrise/metalRoughness.jpg and b/src/dice/sunrise/metalRoughness.jpg differ diff --git a/src/dice/sunrise/normal.jpg b/src/dice/sunrise/normal.jpg index 42ca77e..c6cd269 100755 Binary files a/src/dice/sunrise/normal.jpg and b/src/dice/sunrise/normal.jpg differ diff --git a/src/dice/sunset/SunsetDice.js b/src/dice/sunset/SunsetDice.js index 3c6badc..c0e6884 100644 --- a/src/dice/sunset/SunsetDice.js +++ b/src/dice/sunset/SunsetDice.js @@ -10,7 +10,7 @@ class SunsetDice extends Dice { static async load(scene) { if (!this.material) { - this.material = this.loadMaterial( + this.material = await this.loadMaterial( "sunset_pbr", { albedo, metalRoughness, normal }, scene diff --git a/src/dice/sunset/albedo.jpg b/src/dice/sunset/albedo.jpg index 062e45d..d44c2c7 100755 Binary files a/src/dice/sunset/albedo.jpg and b/src/dice/sunset/albedo.jpg differ diff --git a/src/dice/walnut/WalnutDice.js b/src/dice/walnut/WalnutDice.js index fbcc931..b5e5755 100644 --- a/src/dice/walnut/WalnutDice.js +++ b/src/dice/walnut/WalnutDice.js @@ -33,7 +33,7 @@ class WalnutDice extends Dice { static async load(scene) { if (!this.material) { - this.material = this.loadMaterial( + this.material = await this.loadMaterial( "walnut_pbr", { albedo, metalRoughness, normal }, scene diff --git a/src/dice/walnut/albedo.jpg b/src/dice/walnut/albedo.jpg index c9621bc..798d3cd 100755 Binary files a/src/dice/walnut/albedo.jpg and b/src/dice/walnut/albedo.jpg differ diff --git a/src/dice/walnut/metalRoughness.jpg b/src/dice/walnut/metalRoughness.jpg index 4491ce2..6d29a56 100755 Binary files a/src/dice/walnut/metalRoughness.jpg and b/src/dice/walnut/metalRoughness.jpg differ diff --git a/src/dice/walnut/normal.jpg b/src/dice/walnut/normal.jpg index a40bba6..c67888e 100755 Binary files a/src/dice/walnut/normal.jpg and b/src/dice/walnut/normal.jpg differ diff --git a/src/helpers/babylon.js b/src/helpers/babylon.js new file mode 100644 index 0000000..82d735b --- /dev/null +++ b/src/helpers/babylon.js @@ -0,0 +1,20 @@ +import * as BABYLON from "babylonjs"; + +// 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( + url, + null, + undefined, + false, + undefined, + () => { + resolve(texture); + }, + () => { + reject("Unable to load texture"); + } + ); + }); +}