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
@ -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
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
Before Width: | Height: | Size: 1.9 MiB After Width: | Height: | Size: 1.9 MiB |
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.2 MiB |
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.2 MiB |
Before Width: | Height: | Size: 1.8 MiB After Width: | Height: | Size: 1.8 MiB |
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
@ -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
|
||||
|
Before Width: | Height: | Size: 2.4 MiB After Width: | Height: | Size: 2.4 MiB |
Before Width: | Height: | Size: 1.8 MiB After Width: | Height: | Size: 1.7 MiB |
Before Width: | Height: | Size: 285 KiB After Width: | Height: | Size: 292 KiB |
@ -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
|
||||
|
Before Width: | Height: | Size: 2.1 MiB After Width: | Height: | Size: 2.1 MiB |
Before Width: | Height: | Size: 2.0 MiB After Width: | Height: | Size: 1.9 MiB |
Before Width: | Height: | Size: 285 KiB After Width: | Height: | Size: 291 KiB |
@ -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
|
||||
|
Before Width: | Height: | Size: 583 KiB After Width: | Height: | Size: 585 KiB |
Before Width: | Height: | Size: 217 KiB After Width: | Height: | Size: 217 KiB |
Before Width: | Height: | Size: 283 KiB After Width: | Height: | Size: 292 KiB |
@ -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
|
||||
|
Before Width: | Height: | Size: 1.0 MiB After Width: | Height: | Size: 1.1 MiB |
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
Before Width: | Height: | Size: 309 KiB After Width: | Height: | Size: 316 KiB |
@ -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
|
||||
|
Before Width: | Height: | Size: 1.9 MiB After Width: | Height: | Size: 1.9 MiB |
Before Width: | Height: | Size: 1.5 MiB After Width: | Height: | Size: 1.5 MiB |
Before Width: | Height: | Size: 580 KiB After Width: | Height: | Size: 613 KiB |
@ -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
|
||||
|
Before Width: | Height: | Size: 1.5 MiB After Width: | Height: | Size: 1.5 MiB |
Before Width: | Height: | Size: 939 KiB After Width: | Height: | Size: 972 KiB |
Before Width: | Height: | Size: 283 KiB After Width: | Height: | Size: 292 KiB |
@ -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
|
||||
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.4 MiB |
@ -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
|
||||
|
Before Width: | Height: | Size: 2.1 MiB After Width: | Height: | Size: 2.1 MiB |
Before Width: | Height: | Size: 879 KiB After Width: | Height: | Size: 911 KiB |
Before Width: | Height: | Size: 1.5 MiB After Width: | Height: | Size: 1.5 MiB |
20
src/helpers/babylon.js
Normal file
@ -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");
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|