Added async / await to dice texture loading

This should fix load issues with the dice tray being blank
Also turnned off the default texture flip so all textures are now unflipped by default

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

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.albedoTexture = await importTextureAsync(textures.albedo);
-    pbr.normalTexture = new BABYLON.Texture(textures.normal);
+    pbr.normalTexture = await importTextureAsync(textures.normal);
-    pbr.metallicTexture = new BABYLON.Texture(textures.metalRoughness);
+    pbr.metallicTexture = await importTextureAsync(textures.metalRoughness);
     pbr.useRoughnessFromMetallicTextureAlpha = false;
     pbr.useRoughnessFromMetallicTextureGreen = true;
     pbr.useMetallnessFromMetallicTextureBlue = true;

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.albedoTexture = await importTextureAsync(singleAlbedo);
-    singleMaterial.normalTexture = new BABYLON.Texture(singleNormal);
+    singleMaterial.normalTexture = await importTextureAsync(singleNormal);
-    singleMaterial.metallicTexture = new BABYLON.Texture(singleMetalRoughness);
+    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.albedoTexture = await importTextureAsync(doubleAlbedo);
-    doubleMaterial.normalTexture = new BABYLON.Texture(doubleNormal);
+    doubleMaterial.normalTexture = await importTextureAsync(doubleNormal);
-    doubleMaterial.metallicTexture = new BABYLON.Texture(doubleMetalRoughness);
+    doubleMaterial.metallicTexture = await importTextureAsync(
+      doubleMetalRoughness
+    );
     doubleMaterial.useRoughnessFromMetallicTextureAlpha = false;
     doubleMaterial.useRoughnessFromMetallicTextureGreen = true;
     doubleMaterial.useMetallnessFromMetallicTextureBlue = true;

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

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.albedoTexture = await importTextureAsync(textures.albedo);
-    pbr.normalTexture = new BABYLON.Texture(textures.normal);
+    pbr.normalTexture = await importTextureAsync(textures.normal);
-    pbr.metallicTexture = new BABYLON.Texture(textures.metalRoughness);
+    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

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.albedoTexture = await importTextureAsync(textures.albedo);
-    pbr.normalTexture = new BABYLON.Texture(textures.normal);
+    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

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

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

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

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

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

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");
+      }
+    );
+  });
+}