bg2e-js 2.1.2 → 2.2.0

package/src/shaders/webgl/pbr.glsl

@@ -0,0 +1,173 @@
+
+#include "lib/constants.glsl"
+
+vec3 fresnelSchlick(float cosTheta, vec3 F0)
+{
+    return F0 + (1.0 - F0) * pow(clamp(1.0 - cosTheta, 0.0, 1.0), 5.0);
+}
+
+vec3 fresnelSchlickRoughness(float cosTheta, vec3 F0, float roughness)
+{
+    // Use the Schlick approximation for fresnel with roughness
+    return F0 + (max(vec3(1.0 - roughness), F0) - F0) * pow(clamp(1.0 - cosTheta, 0.0, 1.0), 5.0);
+}
+
+float distributionGGX(vec3 normal, vec3 halfVector, float roughness)
+{
+    float a = roughness * roughness;
+    float a2 = a * a;
+
+    float NdotH = max(dot(normal, halfVector), 0.0);
+    float NdotH2 = NdotH * NdotH;
+
+    float denom = NdotH2 * (a2 - 1.0) + 1.0;
+
+    return a2 / (PI * denom * denom);
+}
+
+float geometrySchlickGGX(float NdotV, float roughness)
+{
+    float r = (roughness + 1.0);
+    float k = (r * r) / 8.0;
+
+    float num = NdotV;
+    float denom = NdotV * (1.0 - k) + k;
+
+    return num / denom;
+}
+
+float geometrySmith(vec3 normal, vec3 viewDir, vec3 lightDir, float roughness)
+{
+    float NdotV = max(dot(normal, viewDir), 0.0);
+    float NdotL = max(dot(normal, lightDir), 0.0);
+    float ggx2 = geometrySchlickGGX(NdotV, roughness);
+    float ggx1 = geometrySchlickGGX(NdotL, roughness);
+    return ggx1 * ggx2;
+}
+
+float calcAttenuation(vec3 lightPosition, vec3 fragPosition)
+{
+    float distance = length(lightPosition - fragPosition);
+    return 1.0 / (distance * distance);
+}
+
+vec3 calcRadiancePoint( Light light, vec3 viewDir, vec3 fragPos, float metallic, float roughness, vec3 F0, vec3 normal, vec3 albedo, float sheenIntensity, vec3 sheenColor, float ambientOcclussion) {
+    // calculate per-light radiance
+    vec3 L = normalize(light.position - fragPos);
+    vec3 H = normalize(viewDir + L);
+    float attenuation    = calcAttenuation(light.position, fragPos);
+    vec3 radiance     = light.color.rgb * light.intensity * attenuation;
+    
+    // cook-torrance brdf
+    float NDF = distributionGGX(normal, H, roughness);
+    float G   = geometrySmith(normal, viewDir, L, roughness);
+    vec3 F    = fresnelSchlick(max(dot(H, viewDir), 0.0), F0);
+    
+    vec3 kS = F;
+    vec3 kD = vec3(1.0) - kS;
+    kD *= 1.0 - metallic;
+    
+    vec3 numerator    = NDF * G * F;
+    float denominator = 4.0 * max(dot(normal, viewDir), 0.0) * max(dot(normal, L), 0.0) + 0.0001;
+    vec3 specular     = numerator / denominator;
+        
+    // add to outgoing radiance Lo
+    float NdotL = max(dot(normal, L), 0.0);
+    vec3 base = (kD * albedo / PI + specular) * radiance * NdotL;
+    vec3 sheen = calcSheen(normal, viewDir, sheenColor, sheenIntensity) * ambientOcclussion;
+    return base + sheen;
+}
+
+vec3 calcRadianceDirectional(Light light, vec3 viewDir, vec3 fragPos, float metallic, float roughness, vec3 F0, vec3 normal, vec3 albedo, float sheenIntensity, vec3 sheenColor, float ambientOcclussion)
+{
+    vec3 L = normalize(-light.direction);
+    vec3 H = normalize(viewDir + L);
+    vec3 radiance     = light.color.rgb * light.intensity;
+    
+    // cook-torrance brdf
+    float NDF = distributionGGX(normal, H, roughness);
+    float G   = geometrySmith(normal, viewDir, L, roughness);
+    vec3 F    = fresnelSchlick(max(dot(H, viewDir), 0.0), F0);
+    
+    vec3 kS = F;
+    vec3 kD = vec3(1.0) - kS;
+    kD *= 1.0 - metallic;
+    
+    vec3 numerator    = NDF * G * F;
+    float denominator = 4.0 * max(dot(normal, viewDir), 0.0) * max(dot(normal, L), 0.0) + 0.0001;
+    vec3 specular     = numerator / denominator;
+        
+    // add to outgoing radiance Lo
+    float NdotL = max(dot(normal, L), 0.0);
+    vec3 base = (kD * albedo / PI + specular) * radiance * NdotL;
+    vec3 sheen = calcSheen(normal, viewDir, sheenColor, sheenIntensity) * ambientOcclussion;
+    return base + sheen;
+}
+
+vec3 calcRadiance( Light light, vec3 viewDir, vec3 fragPos, float metallic, float roughness, vec3 F0, vec3 normal, vec3 albedo, float sheenIntensity, vec3 sheenColor, float ambientOcclussion) {
+    if (light.type == LIGHT_TYPE_POINT)
+    {
+        return calcRadiancePoint(light, viewDir, fragPos, metallic, roughness, F0, normal, albedo, sheenIntensity, sheenColor, ambientOcclussion);
+    }
+    else if (light.type == LIGHT_TYPE_DIRECTIONAL)
+    {
+        return calcRadianceDirectional(light, viewDir, fragPos, metallic, roughness, F0, normal, albedo, sheenIntensity, sheenColor, ambientOcclussion);
+    }
+    return vec3(0.0);
+}
+
+vec3 getPrefilteredColor(float roughness,vec3 refVec,samplerCube irrMap,samplerCube specMap,samplerCube envMap) {
+    vec3 specMap0 = textureCube(envMap, refVec).rgb;
+    vec3 specMap1 = textureCube(specMap, refVec).rgb;
+    vec3 specMap2 = textureCube(irrMap, refVec).rgb;
+
+    if (roughness < 0.4) {
+        return mix(specMap0, specMap1, roughness / 0.4);
+    }
+    return mix(specMap1, specMap2, (roughness - 0.4) / 0.6);
+}
+
+vec3 calcAmbientLight( vec3 viewDir, vec3 normal, vec3 F0, vec3 albedo, float metallic, float roughness, samplerCube irradianceMap, samplerCube prefilteredEnvMap, samplerCube envMap, sampler2D brdfLUT, float ambientOcclussion, float sheenIntensity, vec3 sheenColor, vec3 shadowColor, float ambientIntensity) {
+    vec3 R = reflect(-viewDir, normal);
+
+    vec3 F = fresnelSchlickRoughness(max(dot(normal, viewDir), 0.0), F0, roughness)  * max(shadowColor, vec3(0.8));
+    
+    vec3 Ks = F;
+    vec3 Kd = 1.0 - Ks;
+    Kd *= 1.0 - metallic;
+
+    vec3 irradiance = textureCube(irradianceMap, normal).rgb * ambientIntensity;
+    vec3 diffuse = irradiance * albedo;
+
+    vec3 prefilteredColor = getPrefilteredColor(roughness, R, irradianceMap, prefilteredEnvMap, envMap);
+
+    vec2 brdfUV = vec2(clamp(max(dot(normal, viewDir), 0.0), 0.01, 0.99), roughness);
+    vec2 envBRDF = texture2D(brdfLUT, brdfUV).rg;
+    vec3 specular = prefilteredColor * (F * envBRDF.x + envBRDF.y);
+
+    vec3 base = (Kd * diffuse + specular) * ambientOcclussion;
+    vec3 sheen = calcSheen(normal, viewDir, sheenColor, sheenIntensity) * ambientOcclussion * shadowColor;
+    return base + sheen;
+}
+
+// TODO: Extract this function to a shadow map shader function
+vec3 getShadowColor(vec4 positionFromLightPov, sampler2D shadowMap, float shadowBias, float shadowStrength) {
+    // The vertex location rendered from the light source is almost in
+    // normalized device coordinates (NDC), but the perspective division
+    // has not been performed yet. We need to divide by w to get the
+    // vertex location in range [-1, +1]
+    vec3 shadowCoord = positionFromLightPov.xyz / positionFromLightPov.w;
+
+    // Convert from NDC to texture coordinates
+    shadowCoord = shadowCoord * 0.5 + 0.5;
+    
+    if (shadowCoord.x >= 0.0 && shadowCoord.x <= 1.0 &&
+        shadowCoord.y >= 0.0 && shadowCoord.y <= 1.0)
+    {
+        float shadowDepth = texture2D(shadowMap, shadowCoord.xy).r;
+        if (shadowCoord.z > shadowDepth + shadowBias) {
+            return vec3(1.0 - shadowStrength);
+        }
+    }
+    return vec3(1.0);
+}

package/src/shaders/webgl/uniforms.glsl

@@ -0,0 +1,91 @@
+
+struct PBRMaterialData
+{
+    vec4 albedo;
+
+    vec2 albedoScale;
+    vec2 normalScale;
+    vec2 metalnessScale;
+    vec2 roughnessScale;
+    vec2 lightEmissionScale;
+
+    float metalness;
+    float roughness;
+    float lightEmission;
+
+    int albedoUVSet;
+    int normalUVSet;
+    int metalnessUVSet;
+    int roughnessUVSet;
+    int lightEmissionUVSet;
+    int aoUVSet;
+
+    vec4 fresnelTint;
+    vec4 sheenColor;
+    float sheenIntensity;
+};
+
+struct Light
+{
+    vec3 position;
+    float intensity;
+    vec4 color;
+    vec3 direction;
+    int type;
+};
+
+vec4 sampleAlbedo(sampler2D tex, vec2 uv0, vec2 uv1, PBRMaterialData mat, float gamma)
+{
+    vec2 uv = mat.albedoUVSet == 0 ? uv0 : uv1;
+    vec4 texColor = texture2D(tex, uv * mat.albedoScale);
+    return vec4(SRGB2Lineal(texColor, gamma).rgb * mat.albedo.rgb, texColor.a * mat.albedo.a);
+}
+
+float sampleMetallic(sampler2D tex, vec2 uv0, vec2 uv1, PBRMaterialData mat)
+{
+    vec2 uv = mat.metalnessUVSet == 0 ? uv0 : uv1;
+    return texture2D(tex, uv * mat.metalnessScale).r * mat.metalness;
+}
+
+float sampleRoughness(sampler2D tex, vec2 uv0, vec2 uv1, PBRMaterialData mat)
+{
+    const float minRoughness = 0.05; // Minimum roughness value: even a mirror have some roughness
+    const float maxRoughness = 0.98; // Maximum roughness value: avoid completely diffuse surfaces
+    vec2 uv = mat.roughnessUVSet == 0 ? uv0 : uv1;
+    return min(max(texture2D(tex, uv * mat.roughnessScale).g  * mat.roughness, minRoughness), maxRoughness);
+}
+
+
+float sampleLightEmission(sampler2D tex, vec2 uv0, vec2 uv1, PBRMaterialData mat)
+{
+    vec2 uv = mat.lightEmissionUVSet == 0 ? uv0 : uv1;
+    return texture2D(tex, uv * mat.lightEmissionScale).b  * mat.lightEmission;
+}
+
+vec3 sampleNormal(sampler2D tex, vec2 uv0, vec2 uv1, PBRMaterialData mat, mat3 TBN)
+{
+    vec2 uv = mat.normalUVSet == 0 ? uv0 : uv1;
+    vec3 normal = texture2D(tex, uv).xyz * 2.0 - 1.0;
+    return normalize(TBN * normal);
+}
+
+float sampleAmbientOcclussion(sampler2D tex, vec2 uv0, vec2 uv1, PBRMaterialData mat)
+{
+    vec2 uv = mat.aoUVSet == 0 ? uv0 : uv1;
+    return texture2D(tex, uv).a;
+}
+
+vec3 calcF0(vec3 albedo, PBRMaterialData mat)
+{
+    return mix(vec3(0.04), albedo, mat.metalness) * mat.fresnelTint.rgb;
+}
+
+vec3 calcSheen(vec3 normal, vec3 viewDir, vec3 sheenColor, float sheenIntensity)
+{
+    float NdotV = max(dot(normal, viewDir), 0.0);
+    float facing = 1.0 - NdotV;
+    
+    // Adjustable power: controls how concentrated the brightness is
+    float falloff = pow(facing, 5.0);
+    return sheenColor * falloff * sheenIntensity;
+}

package/src/shaders/webgl_shader_lib.ts

@@ -0,0 +1,213 @@
+// TODO: Deprecated. Use webgl/index.ts instead.
+
+import ShaderFunction from "./ShaderFunction";
+
+export const fresnelSchlick = new ShaderFunction('vec3', 'fresnelSchlick', 'float cosTheta, vec3 F0', `{
+    return F0 + (1.0 - F0) * pow(clamp(1.0 - cosTheta, 0.0, 1.0), 5.0);
+}`);
+
+export const fresnelSchlickRoughness = new ShaderFunction('vec3', 'fresnelSchlickRoughness', 'float cosTheta, vec3 F0, float roughness', `{
+    return F0 + (max(vec3(1.0 - roughness), F0) - F0) * pow(clamp(1.0 - cosTheta, 0.0, 1.0), 5.0);
+}`);
+
+export const distributionGGX = new ShaderFunction('float', 'distributionGGX', 'vec3 N, vec3 H, float roughness', `{
+    float a = roughness * roughness;
+    float a2 = a * a;
+    float NdotH = max(dot(N, H), 0.0);
+    float NdotH2 = NdotH * NdotH;
+
+    float num = a2;
+    float denom = NdotH2 * (a2 - 1.0) + 1.0;
+    denom = ${Math.PI} * denom * denom;
+
+    return num / denom;
+}`);
+
+export const geometrySchlickGGX = new ShaderFunction('float', 'geometrySchlickGGX', 'float NdotV, float roughness', `{
+    float r = (roughness + 1.0);
+    float k = (r * r) / 8.0;
+
+    float num = NdotV;
+    float denom = NdotV * (1.0 - k) + k;
+
+    return num / denom;
+}`)
+
+export const geometrySmith = new ShaderFunction('float', 'geometrySmith', 'vec3 N, vec3 V, vec3 L, float roughness', `{
+    float NdotV = max(dot(N,V), 0.0);
+    float NdotL = max(dot(N,L), 0.0);
+    float ggx2 = geometrySchlickGGX(NdotV, roughness);
+    float ggx1 = geometrySchlickGGX(NdotL, roughness);
+
+    return ggx1 * ggx2;
+}`, [geometrySchlickGGX]);
+
+export const pbrPointLight = new ShaderFunction('vec3', 'pbrPointLight',
+    'vec3 lightPos, vec3 lightColor, vec3 fragPos, vec3 fragNorm, vec3 viewPos, vec3 albedo, float roughness, float metallic, vec3 fresnel',
+    `{
+    vec3 F0 = vec3(0.04);
+    F0 = mix(F0, albedo, metallic);
+
+    vec3 L = normalize(lightPos - fragPos);
+    vec3 H = normalize(viewPos + L);
+
+    float distance = length(lightPos - fragPos);
+    float attenuation = 1.0 / (distance * distance);
+    vec3 radiance = lightColor * attenuation;
+
+    vec3 F = fresnelSchlick(max(dot(H, viewPos), 0.0), F0) * fresnel;
+
+    float NDF = distributionGGX(fragNorm, H, roughness);
+    float G = geometrySmith(fragNorm, viewPos, L, roughness);
+
+    vec3 numerator = NDF * G * F;
+    float denom = 4.0 * max(dot(fragNorm,viewPos), 0.0) * max(dot(fragNorm,L), 0.0) + 0.0001;
+    vec3 specular = numerator / denom;
+
+    vec3 kS = F;
+    vec3 kD = vec3(1.0) - kS;
+
+    kD *= 1.0 - metallic;
+
+    float NdotL = max(dot(fragNorm,L), 0.0);
+    return (kD * albedo / ${Math.PI} + specular) * radiance * NdotL;
+}`, [fresnelSchlick, distributionGGX, geometrySmith]);
+
+export const pbrDirectionalLight = new ShaderFunction('vec3', 'pbrDirectionalLight',
+    'vec3 lightDir, vec3 lightColor, vec3 fragPos, vec3 fragNorm, vec3 viewPos, vec3 albedo, float roughness, float metallic, vec3 fresnel, vec3 shadowColor',
+    `{
+    vec3 F0 = vec3(0.04);
+    F0 = mix(F0, albedo, metallic);
+
+    vec3 L = normalize(lightDir);
+    vec3 H = normalize(viewPos + L);
+
+    vec3 F = fresnelSchlickRoughness(max(dot(H, viewPos), 0.0), F0, roughness);
+
+    float NDF = distributionGGX(fragNorm, H, roughness);
+    float G = geometrySmith(fragNorm, viewPos, L, roughness);
+
+    vec3 numerator = NDF * G * F;
+    float denom = 4.0 * max(dot(fragNorm,viewPos), 0.4) * max(dot(fragNorm,L), 0.4);
+    vec3 specular = numerator / max(denom, 0.0001);
+
+    vec3 kS = F;
+    vec3 kD = vec3(1.0) - kS;
+
+    kD *= 1.0 - metallic;
+
+    float NdotL = max(dot(fragNorm,L), 0.0);
+    return (kD * albedo / ${Math.PI} + specular * fresnel * shadowColor) * lightColor * shadowColor * NdotL;
+}`, [fresnelSchlick, distributionGGX, geometrySmith, fresnelSchlickRoughness]);
+
+export const getPrefilteredColor = new ShaderFunction('vec3', 'getPrefilteredColor', 'float roughness, vec3 refVec, samplerCube irrMap, samplerCube specMap, samplerCube envMap',
+    `{
+    vec3 specMap0 = textureCube(envMap, refVec).rgb;
+    vec3 specMap1 = textureCube(specMap, refVec).rgb;
+    vec3 specMap2 = textureCube(irrMap, refVec).rgb;
+
+    if (roughness<0.7) {
+        return mix(specMap0, specMap1, (log(roughness) + 5.0) / 5.0);
+    }
+    else {
+        return mix(specMap1, specMap2, roughness);
+    }
+}`);
+
+export const pbrAmbientLight = new ShaderFunction('vec3', 'pbrAmbientLight', 'vec3 fragPos, vec3 N, vec3 V, vec3 albedo, float metallic, float roughness, samplerCube irradianceMap, samplerCube specularMap, samplerCube envMap, sampler2D brdfMap, vec3 fresnel, vec3 shadowColor',
+    `{
+    vec3 F0 = vec3(0.04);
+    F0 = mix(F0, albedo, metallic);
+    vec3 kS = fresnelSchlickRoughness(max(dot(N,V), 0.0), F0, roughness) * fresnel;
+    vec3 kD = 1.0 - kS;
+    vec3 irradiance = textureCube(irradianceMap, N).rgb;
+    vec3 diffuse = irradiance * albedo;
+
+    vec3 R = reflect(-V, N);
+    vec3 prefilteredColor = getPrefilteredColor(roughness, R, irradianceMap, specularMap, envMap);
+    float NdotV = min(max(dot(N,V), 0.0),  0.95);
+    vec2 brdfUV = vec2(NdotV, clamp(roughness, 0.01, 0.94));
+    vec2 envBRDF = texture2D(brdfMap, brdfUV).xy;
+    vec3 indirectSpecular = prefilteredColor * (kS * envBRDF.x + envBRDF.y);
+
+    return kD * diffuse + indirectSpecular;
+}`, [fresnelSchlickRoughness, getPrefilteredColor]);
+
+export const applyConvolution = new ShaderFunction('vec4', 'applyConvolution', 'sampler2D texture, vec2 texCoord, vec2 texSize, float[9] convMatrix, float radius',
+    `
+{
+    vec2 onePixel = vec2(1.0,1.0) / texSize * radius;
+    vec4 colorSum = 
+        texture2D(texture, texCoord + onePixel * vec2(-1, -1)) * convMatrix[0] +
+        texture2D(texture, texCoord + onePixel * vec2( 0, -1)) * convMatrix[1] +
+        texture2D(texture, texCoord + onePixel * vec2( 1, -1)) * convMatrix[2] +
+        texture2D(texture, texCoord + onePixel * vec2(-1,  0)) * convMatrix[3] +
+        texture2D(texture, texCoord + onePixel * vec2( 0,  0)) * convMatrix[4] +
+        texture2D(texture, texCoord + onePixel * vec2( 1,  0)) * convMatrix[5] +
+        texture2D(texture, texCoord + onePixel * vec2(-1,  1)) * convMatrix[6] +
+        texture2D(texture, texCoord + onePixel * vec2( 0,  1)) * convMatrix[7] +
+        texture2D(texture, texCoord + onePixel * vec2( 1,  1)) * convMatrix[8];
+    float kernelWeight =
+        convMatrix[0] +
+        convMatrix[1] +
+        convMatrix[2] +
+        convMatrix[3] +
+        convMatrix[4] +
+        convMatrix[5] +
+        convMatrix[6] +
+        convMatrix[7] +
+        convMatrix[8];
+    if (kernelWeight <= 0.0) {
+        kernelWeight = 1.0;
+    }
+    return vec4((colorSum / kernelWeight).rgb, 1.0);
+}
+`, []);
+
+export const getShadowColor = new ShaderFunction('vec3', 'getShadowColor', 'vec4 positionFromLightPov, sampler2D shadowMap, float shadowBias, float shadowStrength',
+`
+{
+    // The vertex location rendered from the light source is almost in
+    // normalized device coordinates (NDC), but the perspective division
+    // has not been performed yet. We need to divide by w to get the
+    // vertex location in range [-1, +1]
+    vec3 shadowCoord = positionFromLightPov.xyz / positionFromLightPov.w;
+
+    // Convert from NDC to texture coordinates
+    shadowCoord = shadowCoord * 0.5 + 0.5;
+    
+    if (shadowCoord.x >= 0.0 && shadowCoord.x <= 1.0 &&
+        shadowCoord.y >= 0.0 && shadowCoord.y <= 1.0)
+    {
+        float shadowDepth = texture2D(shadowMap, shadowCoord.xy).r;
+        if (shadowCoord.z > shadowDepth + shadowBias) {
+            return vec3(1.0 - shadowStrength);
+        }
+    }
+    return vec3(1.0);
+}
+`, []);
+
+export const lineal2SRGB = new ShaderFunction('vec4', 'lineal2SRGB', 'vec4 color, float gamma', `{
+    color.rgb = color.rgb / (color.rgb + vec3(1.0));
+    return pow(color, vec4(1.0 / gamma));
+}
+`, []);
+
+export const SRGB2Lineal = new ShaderFunction('vec4', 'SRGB2Lineal', 'vec4 color, float gamma', `{
+    return pow(color, vec4(gamma));
+}
+`, []);
+
+export const brightnessContrast = new ShaderFunction('vec4', 'brightnessContrast', 'vec4 color, float brightness, float contrast', `{
+    mat4 brightnessMat = mat4(1, 0, 0, 0,
+                              0, 1, 0, 0,
+                              0, 0, 1, 0,
+                              brightness, brightness, brightness, 1);
+    float t = (1.0 - contrast) / 2.0;
+    mat4 contrastMat = mat4(contrast, 0, 0, 0,
+                            0, contrast, 0, 0,
+                            0, 0, contrast, 0,
+                            t, t, t, 1);
+    return contrastMat * brightnessMat * color;
+}`, []);

package/src/tools/BinaryResourceProvider.ts

@@ -0,0 +1,14 @@
+import ResourceProvider from "./ResourceProvider";
+
+export default class BinaryResourceProvider extends ResourceProvider {
+    async load(url: string): Promise<ArrayBuffer> {
+        const response = await fetch(url);
+        if (response.ok) {
+            const binaryData = await response.arrayBuffer();
+            return binaryData;
+        }
+        else {
+            throw new Error(`Resource not found at '${ url }'`);
+        }
+    }
+}

package/src/tools/ImageResourceProvider.ts

@@ -0,0 +1,66 @@
+import ResourceProvider from "./ResourceProvider";
+import { generateUUID } from "./crypto";
+
+// In this array we keep a reference to the images being loaded to
+// prevent them from being deleted from memory
+const g_preventImageDump: HTMLImageElement[] = [];
+
+const beginLoadImage = (img: HTMLImageElement): void => {
+    if (g_preventImageDump.indexOf(img) === -1) {
+        g_preventImageDump.push(img);
+    }
+};
+
+const endLoadImage = (img: HTMLImageElement): void => {
+    const i = g_preventImageDump.indexOf(img);
+    if (i !== -1) {
+        g_preventImageDump.splice(i, 1);
+    }
+}
+
+const loadImage = (url: string, preventCache: boolean = false): Promise<HTMLImageElement> => {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        beginLoadImage(img);
+        img.crossOrigin = "";
+        img.addEventListener("load", evt => {
+            endLoadImage(evt.target as HTMLImageElement);
+            resolve(evt.target as HTMLImageElement);
+        });
+        img.addEventListener("error", evt => {
+            endLoadImage(evt.target as HTMLImageElement);
+            reject(new Error(`Error loading image '${ url }'.`));
+        });
+        img.addEventListener("abort", evt => {
+            endLoadImage(evt.target as HTMLImageElement);
+            reject(new Error(`Image load aborted '${ url }'.`));
+        });
+        img.src = url + (preventCache ? `?${generateUUID()}` : "");
+    })
+}
+
+export default class ImageResourceProvider extends ResourceProvider {
+    async load(url: string): Promise<HTMLImageElement> {
+        const img = await loadImage(url, false);
+        return img;
+    }
+
+    async write(url: string, img: HTMLImageElement | string): Promise<void> {
+        let data: Uint8Array | null = null;
+        if (img instanceof Image) {
+            // TODO: convert to Uint8Array data
+            throw new Error("ImageResourceProvider.write(): write from HTMLImageElement not implemented yet.");
+        }
+        else if (typeof(img) === "string" && /base64/i.test(img)) {
+            // Convert base64 image into Uint8Array data
+            throw new Error("ImageResourceProvider.write(): write from base64 string not implemented yet.");
+        }
+        else if (typeof(img) === "string") {
+            // Path: copy image
+            throw new Error("ImageResourceProvider.write(): copy image from path not implemented yet.");
+        }
+        else {
+            throw new Error("Unsupported image type specified for write");
+        }
+    }
+}