@luma.gl/gltf 9.2.6 → 9.3.0-alpha.10

package/dist/parsers/parse-pbr-material.js

@@ -1,8 +1,8 @@
 // luma.gl
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
-import { GL } from '@luma.gl/constants';
-import { log } from '@luma.gl/core';
+import { Texture, log, textureFormatDecoder } from '@luma.gl/core';
+import { GLEnum } from "../webgl-to-webgpu/gltf-webgl-constants.js";
 import { convertSampler } from "../webgl-to-webgpu/convert-webgl-sampler.js";
 /**
  * Parses a GLTF material definition into uniforms and parameters for the PBR shader module
@@ -32,7 +32,8 @@ export function parsePBRMaterial(device, material, attributes, options) {
             imageBasedLightingEnvironment.diffuseEnvSampler.texture;
         parsedMaterial.bindings.pbr_specularEnvSampler =
             imageBasedLightingEnvironment.specularEnvSampler.texture;
-        parsedMaterial.bindings.pbr_BrdfLUT = imageBasedLightingEnvironment.brdfLutTexture.texture;
+        parsedMaterial.bindings.pbr_brdfLUT = imageBasedLightingEnvironment.brdfLutTexture.texture;
+        parsedMaterial.uniforms.IBLenabled = true;
         parsedMaterial.uniforms.scaleIBLAmbient = [1, 1];
     }
     if (options?.pbrDebug) {
@@ -47,102 +48,610 @@ export function parsePBRMaterial(device, material, attributes, options) {
         parsedMaterial.defines['HAS_TANGENTS'] = true;
     if (attributes['TEXCOORD_0'])
         parsedMaterial.defines['HAS_UV'] = true;
+    if (attributes['JOINTS_0'] && attributes['WEIGHTS_0'])
+        parsedMaterial.defines['HAS_SKIN'] = true;
+    if (attributes['COLOR_0'])
+        parsedMaterial.defines['HAS_COLORS'] = true;
     if (options?.imageBasedLightingEnvironment)
         parsedMaterial.defines['USE_IBL'] = true;
     if (options?.lights)
         parsedMaterial.defines['USE_LIGHTS'] = true;
     if (material) {
-        parseMaterial(device, material, parsedMaterial);
+        if (options.validateAttributes !== false) {
+            warnOnMissingExpectedAttributes(material, attributes);
+        }
+        parseMaterial(device, material, parsedMaterial, options.gltf);
     }
     return parsedMaterial;
 }
+function warnOnMissingExpectedAttributes(material, attributes) {
+    const uvDependentTextureSlots = getUvDependentTextureSlots(material);
+    if (uvDependentTextureSlots.length > 0 && !attributes['TEXCOORD_0']) {
+        log.warn(`glTF material uses ${uvDependentTextureSlots.join(', ')} but primitive is missing TEXCOORD_0; textured shading will sample the default UV coordinates`)();
+    }
+    const isUnlitMaterial = Boolean(material.unlit || material.extensions?.KHR_materials_unlit);
+    if (isUnlitMaterial || attributes['NORMAL']) {
+        return;
+    }
+    const missingNormalReason = material.normalTexture
+        ? 'lit PBR shading with normalTexture'
+        : 'lit PBR shading';
+    log.warn(`glTF primitive is missing NORMAL while using ${missingNormalReason}; shading will fall back to geometric normals`)();
+}
+function getUvDependentTextureSlots(material) {
+    const uvDependentTextureSlots = [];
+    if (material.pbrMetallicRoughness?.baseColorTexture) {
+        uvDependentTextureSlots.push('baseColorTexture');
+    }
+    if (material.pbrMetallicRoughness?.metallicRoughnessTexture) {
+        uvDependentTextureSlots.push('metallicRoughnessTexture');
+    }
+    if (material.normalTexture) {
+        uvDependentTextureSlots.push('normalTexture');
+    }
+    if (material.occlusionTexture) {
+        uvDependentTextureSlots.push('occlusionTexture');
+    }
+    if (material.emissiveTexture) {
+        uvDependentTextureSlots.push('emissiveTexture');
+    }
+    if (material.extensions?.KHR_materials_specular?.specularTexture) {
+        uvDependentTextureSlots.push('KHR_materials_specular.specularTexture');
+    }
+    if (material.extensions?.KHR_materials_specular?.specularColorTexture) {
+        uvDependentTextureSlots.push('KHR_materials_specular.specularColorTexture');
+    }
+    if (material.extensions?.KHR_materials_transmission?.transmissionTexture) {
+        uvDependentTextureSlots.push('KHR_materials_transmission.transmissionTexture');
+    }
+    if (material.extensions?.KHR_materials_clearcoat?.clearcoatTexture) {
+        uvDependentTextureSlots.push('KHR_materials_clearcoat.clearcoatTexture');
+    }
+    if (material.extensions?.KHR_materials_clearcoat?.clearcoatRoughnessTexture) {
+        uvDependentTextureSlots.push('KHR_materials_clearcoat.clearcoatRoughnessTexture');
+    }
+    if (material.extensions?.KHR_materials_sheen?.sheenColorTexture) {
+        uvDependentTextureSlots.push('KHR_materials_sheen.sheenColorTexture');
+    }
+    if (material.extensions?.KHR_materials_sheen?.sheenRoughnessTexture) {
+        uvDependentTextureSlots.push('KHR_materials_sheen.sheenRoughnessTexture');
+    }
+    if (material.extensions?.KHR_materials_iridescence?.iridescenceTexture) {
+        uvDependentTextureSlots.push('KHR_materials_iridescence.iridescenceTexture');
+    }
+    if (material.extensions?.KHR_materials_anisotropy?.anisotropyTexture) {
+        uvDependentTextureSlots.push('KHR_materials_anisotropy.anisotropyTexture');
+    }
+    return uvDependentTextureSlots;
+}
 /** Parse GLTF material record */
-function parseMaterial(device, material, parsedMaterial) {
-    parsedMaterial.uniforms.unlit = Boolean(material.unlit);
+function parseMaterial(device, material, parsedMaterial, gltf) {
+    parsedMaterial.uniforms.unlit = Boolean(material.unlit || material.extensions?.KHR_materials_unlit);
     if (material.pbrMetallicRoughness) {
-        parsePbrMetallicRoughness(device, material.pbrMetallicRoughness, parsedMaterial);
+        parsePbrMetallicRoughness(device, material.pbrMetallicRoughness, parsedMaterial, gltf);
     }
     if (material.normalTexture) {
-        addTexture(device, material.normalTexture, 'pbr_normalSampler', 'HAS_NORMALMAP', parsedMaterial);
+        addTexture(device, material.normalTexture, 'pbr_normalSampler', parsedMaterial, {
+            featureOptions: {
+                define: 'HAS_NORMALMAP',
+                enabledUniformName: 'normalMapEnabled'
+            },
+            gltf
+        });
         const { scale = 1 } = material.normalTexture;
         parsedMaterial.uniforms.normalScale = scale;
     }
     if (material.occlusionTexture) {
-        addTexture(device, material.occlusionTexture, 'pbr_occlusionSampler', 'HAS_OCCLUSIONMAP', parsedMaterial);
+        addTexture(device, material.occlusionTexture, 'pbr_occlusionSampler', parsedMaterial, {
+            featureOptions: {
+                define: 'HAS_OCCLUSIONMAP',
+                enabledUniformName: 'occlusionMapEnabled'
+            },
+            gltf
+        });
         const { strength = 1 } = material.occlusionTexture;
         parsedMaterial.uniforms.occlusionStrength = strength;
     }
+    parsedMaterial.uniforms.emissiveFactor = material.emissiveFactor || [0, 0, 0];
     if (material.emissiveTexture) {
-        addTexture(device, material.emissiveTexture, 'pbr_emissiveSampler', 'HAS_EMISSIVEMAP', parsedMaterial);
-        parsedMaterial.uniforms.emissiveFactor = material.emissiveFactor || [0, 0, 0];
+        addTexture(device, material.emissiveTexture, 'pbr_emissiveSampler', parsedMaterial, {
+            featureOptions: {
+                define: 'HAS_EMISSIVEMAP',
+                enabledUniformName: 'emissiveMapEnabled'
+            },
+            gltf
+        });
     }
-    switch (material.alphaMode || 'MASK') {
-        case 'MASK':
+    parseMaterialExtensions(device, material.extensions, parsedMaterial, gltf);
+    switch (material.alphaMode || 'OPAQUE') {
+        case 'OPAQUE':
+            break;
+        case 'MASK': {
             const { alphaCutoff = 0.5 } = material;
             parsedMaterial.defines['ALPHA_CUTOFF'] = true;
+            parsedMaterial.uniforms.alphaCutoffEnabled = true;
             parsedMaterial.uniforms.alphaCutoff = alphaCutoff;
             break;
+        }
         case 'BLEND':
             log.warn('glTF BLEND alphaMode might not work well because it requires mesh sorting')();
-            // WebGPU style parameters
-            parsedMaterial.parameters.blend = true;
-            parsedMaterial.parameters.blendColorOperation = 'add';
-            parsedMaterial.parameters.blendColorSrcFactor = 'src-alpha';
-            parsedMaterial.parameters.blendColorDstFactor = 'one-minus-src-alpha';
-            parsedMaterial.parameters.blendAlphaOperation = 'add';
-            parsedMaterial.parameters.blendAlphaSrcFactor = 'one';
-            parsedMaterial.parameters.blendAlphaDstFactor = 'one-minus-src-alpha';
-            // GL parameters
-            // TODO - remove in favor of parameters
-            parsedMaterial.glParameters['blend'] = true;
-            parsedMaterial.glParameters['blendEquation'] = 32774;
-            parsedMaterial.glParameters['blendFunc'] = [
-                770,
-                771,
-                1,
-                771
-            ];
+            applyAlphaBlendParameters(parsedMaterial);
             break;
     }
 }
+function applyAlphaBlendParameters(parsedMaterial) {
+    parsedMaterial.parameters.blend = true;
+    parsedMaterial.parameters.blendColorOperation = 'add';
+    parsedMaterial.parameters.blendColorSrcFactor = 'src-alpha';
+    parsedMaterial.parameters.blendColorDstFactor = 'one-minus-src-alpha';
+    parsedMaterial.parameters.blendAlphaOperation = 'add';
+    parsedMaterial.parameters.blendAlphaSrcFactor = 'one';
+    parsedMaterial.parameters.blendAlphaDstFactor = 'one-minus-src-alpha';
+    parsedMaterial.glParameters['blend'] = true;
+    parsedMaterial.glParameters['blendEquation'] = GLEnum.FUNC_ADD;
+    parsedMaterial.glParameters['blendFunc'] = [
+        GLEnum.SRC_ALPHA,
+        GLEnum.ONE_MINUS_SRC_ALPHA,
+        GLEnum.ONE,
+        GLEnum.ONE_MINUS_SRC_ALPHA
+    ];
+}
+function applyTransmissionBlendApproximation(parsedMaterial) {
+    parsedMaterial.parameters.blend = true;
+    parsedMaterial.parameters.depthWriteEnabled = false;
+    parsedMaterial.parameters.blendColorOperation = 'add';
+    parsedMaterial.parameters.blendColorSrcFactor = 'one';
+    parsedMaterial.parameters.blendColorDstFactor = 'one-minus-src-alpha';
+    parsedMaterial.parameters.blendAlphaOperation = 'add';
+    parsedMaterial.parameters.blendAlphaSrcFactor = 'one';
+    parsedMaterial.parameters.blendAlphaDstFactor = 'one-minus-src-alpha';
+    parsedMaterial.glParameters['blend'] = true;
+    parsedMaterial.glParameters['depthMask'] = false;
+    parsedMaterial.glParameters['blendEquation'] = GLEnum.FUNC_ADD;
+    parsedMaterial.glParameters['blendFunc'] = [
+        GLEnum.ONE,
+        GLEnum.ONE_MINUS_SRC_ALPHA,
+        GLEnum.ONE,
+        GLEnum.ONE_MINUS_SRC_ALPHA
+    ];
+}
 /** Parse GLTF material sub record */
-function parsePbrMetallicRoughness(device, pbrMetallicRoughness, parsedMaterial) {
+function parsePbrMetallicRoughness(device, pbrMetallicRoughness, parsedMaterial, gltf) {
     if (pbrMetallicRoughness.baseColorTexture) {
-        addTexture(device, pbrMetallicRoughness.baseColorTexture, 'pbr_baseColorSampler', 'HAS_BASECOLORMAP', parsedMaterial);
+        addTexture(device, pbrMetallicRoughness.baseColorTexture, 'pbr_baseColorSampler', parsedMaterial, {
+            featureOptions: {
+                define: 'HAS_BASECOLORMAP',
+                enabledUniformName: 'baseColorMapEnabled'
+            },
+            gltf
+        });
     }
     parsedMaterial.uniforms.baseColorFactor = pbrMetallicRoughness.baseColorFactor || [1, 1, 1, 1];
     if (pbrMetallicRoughness.metallicRoughnessTexture) {
-        addTexture(device, pbrMetallicRoughness.metallicRoughnessTexture, 'pbr_metallicRoughnessSampler', 'HAS_METALROUGHNESSMAP', parsedMaterial);
+        addTexture(device, pbrMetallicRoughness.metallicRoughnessTexture, 'pbr_metallicRoughnessSampler', parsedMaterial, {
+            featureOptions: {
+                define: 'HAS_METALROUGHNESSMAP',
+                enabledUniformName: 'metallicRoughnessMapEnabled'
+            },
+            gltf
+        });
     }
     const { metallicFactor = 1, roughnessFactor = 1 } = pbrMetallicRoughness;
     parsedMaterial.uniforms.metallicRoughnessValues = [metallicFactor, roughnessFactor];
 }
-/** Create a texture from a glTF texture/sampler/image combo and add it to bindings */
-function addTexture(device, gltfTexture, uniformName, define, parsedMaterial) {
-    const image = gltfTexture.texture.source.image;
-    let textureOptions;
-    if (image.compressed) {
-        textureOptions = image;
+function parseMaterialExtensions(device, extensions, parsedMaterial, gltf) {
+    if (!extensions) {
+        return;
     }
-    else {
-        // Texture2D accepts a promise that returns an image as data (Async Textures)
-        textureOptions = { data: image };
+    if (hasMaterialExtensionShading(extensions)) {
+        parsedMaterial.defines['USE_MATERIAL_EXTENSIONS'] = true;
+    }
+    parseSpecularExtension(device, extensions.KHR_materials_specular, parsedMaterial, gltf);
+    parseIorExtension(extensions.KHR_materials_ior, parsedMaterial);
+    parseTransmissionExtension(device, extensions.KHR_materials_transmission, parsedMaterial, gltf);
+    parseVolumeExtension(device, extensions.KHR_materials_volume, parsedMaterial, gltf);
+    parseClearcoatExtension(device, extensions.KHR_materials_clearcoat, parsedMaterial, gltf);
+    parseSheenExtension(device, extensions.KHR_materials_sheen, parsedMaterial, gltf);
+    parseIridescenceExtension(device, extensions.KHR_materials_iridescence, parsedMaterial, gltf);
+    parseAnisotropyExtension(device, extensions.KHR_materials_anisotropy, parsedMaterial, gltf);
+    parseEmissiveStrengthExtension(extensions.KHR_materials_emissive_strength, parsedMaterial);
+}
+function hasMaterialExtensionShading(extensions) {
+    return Boolean(extensions.KHR_materials_specular ||
+        extensions.KHR_materials_ior ||
+        extensions.KHR_materials_transmission ||
+        extensions.KHR_materials_volume ||
+        extensions.KHR_materials_clearcoat ||
+        extensions.KHR_materials_sheen ||
+        extensions.KHR_materials_iridescence ||
+        extensions.KHR_materials_anisotropy);
+}
+function parseSpecularExtension(device, extension, parsedMaterial, gltf) {
+    if (!extension) {
+        return;
+    }
+    if (extension.specularColorFactor) {
+        parsedMaterial.uniforms.specularColorFactor = extension.specularColorFactor;
+    }
+    if (extension.specularFactor !== undefined) {
+        parsedMaterial.uniforms.specularIntensityFactor = extension.specularFactor;
+    }
+    if (extension.specularColorTexture) {
+        addTexture(device, extension.specularColorTexture, 'pbr_specularColorSampler', parsedMaterial, {
+            featureOptions: {
+                define: 'HAS_SPECULARCOLORMAP',
+                enabledUniformName: 'specularColorMapEnabled'
+            },
+            gltf
+        });
+    }
+    if (extension.specularTexture) {
+        addTexture(device, extension.specularTexture, 'pbr_specularIntensitySampler', parsedMaterial, {
+            featureOptions: {
+                define: 'HAS_SPECULARINTENSITYMAP',
+                enabledUniformName: 'specularIntensityMapEnabled'
+            },
+            gltf
+        });
+    }
+}
+function parseIorExtension(extension, parsedMaterial) {
+    if (extension?.ior !== undefined) {
+        parsedMaterial.uniforms.ior = extension.ior;
+    }
+}
+function parseTransmissionExtension(device, extension, parsedMaterial, gltf) {
+    if (!extension) {
+        return;
+    }
+    if (extension.transmissionFactor !== undefined) {
+        parsedMaterial.uniforms.transmissionFactor = extension.transmissionFactor;
+    }
+    if (extension.transmissionTexture) {
+        addTexture(device, extension.transmissionTexture, 'pbr_transmissionSampler', parsedMaterial, {
+            featureOptions: {
+                define: 'HAS_TRANSMISSIONMAP',
+                enabledUniformName: 'transmissionMapEnabled'
+            },
+            gltf
+        });
+    }
+    if ((extension.transmissionFactor ?? 0) > 0 || extension.transmissionTexture) {
+        log.warn('KHR_materials_transmission uses a premultiplied-alpha blending approximation and may require mesh sorting')();
+        applyTransmissionBlendApproximation(parsedMaterial);
+    }
+}
+function parseVolumeExtension(device, extension, parsedMaterial, gltf) {
+    if (!extension) {
+        return;
+    }
+    if (extension.thicknessFactor !== undefined) {
+        parsedMaterial.uniforms.thicknessFactor = extension.thicknessFactor;
+    }
+    if (extension.thicknessTexture) {
+        addTexture(device, extension.thicknessTexture, 'pbr_thicknessSampler', parsedMaterial, {
+            featureOptions: {
+                define: 'HAS_THICKNESSMAP'
+            },
+            gltf
+        });
+    }
+    if (extension.attenuationDistance !== undefined) {
+        parsedMaterial.uniforms.attenuationDistance = extension.attenuationDistance;
+    }
+    if (extension.attenuationColor) {
+        parsedMaterial.uniforms.attenuationColor = extension.attenuationColor;
+    }
+}
+function parseClearcoatExtension(device, extension, parsedMaterial, gltf) {
+    if (!extension) {
+        return;
+    }
+    if (extension.clearcoatFactor !== undefined) {
+        parsedMaterial.uniforms.clearcoatFactor = extension.clearcoatFactor;
+    }
+    if (extension.clearcoatRoughnessFactor !== undefined) {
+        parsedMaterial.uniforms.clearcoatRoughnessFactor = extension.clearcoatRoughnessFactor;
+    }
+    if (extension.clearcoatTexture) {
+        addTexture(device, extension.clearcoatTexture, 'pbr_clearcoatSampler', parsedMaterial, {
+            featureOptions: {
+                define: 'HAS_CLEARCOATMAP',
+                enabledUniformName: 'clearcoatMapEnabled'
+            },
+            gltf
+        });
+    }
+    if (extension.clearcoatRoughnessTexture) {
+        addTexture(device, extension.clearcoatRoughnessTexture, 'pbr_clearcoatRoughnessSampler', parsedMaterial, {
+            featureOptions: {
+                define: 'HAS_CLEARCOATROUGHNESSMAP',
+                enabledUniformName: 'clearcoatRoughnessMapEnabled'
+            },
+            gltf
+        });
+    }
+    if (extension.clearcoatNormalTexture) {
+        addTexture(device, extension.clearcoatNormalTexture, 'pbr_clearcoatNormalSampler', parsedMaterial, {
+            featureOptions: {
+                define: 'HAS_CLEARCOATNORMALMAP'
+            },
+            gltf
+        });
+    }
+}
+function parseSheenExtension(device, extension, parsedMaterial, gltf) {
+    if (!extension) {
+        return;
+    }
+    if (extension.sheenColorFactor) {
+        parsedMaterial.uniforms.sheenColorFactor = extension.sheenColorFactor;
+    }
+    if (extension.sheenRoughnessFactor !== undefined) {
+        parsedMaterial.uniforms.sheenRoughnessFactor = extension.sheenRoughnessFactor;
+    }
+    if (extension.sheenColorTexture) {
+        addTexture(device, extension.sheenColorTexture, 'pbr_sheenColorSampler', parsedMaterial, {
+            featureOptions: {
+                define: 'HAS_SHEENCOLORMAP',
+                enabledUniformName: 'sheenColorMapEnabled'
+            },
+            gltf
+        });
+    }
+    if (extension.sheenRoughnessTexture) {
+        addTexture(device, extension.sheenRoughnessTexture, 'pbr_sheenRoughnessSampler', parsedMaterial, {
+            featureOptions: {
+                define: 'HAS_SHEENROUGHNESSMAP',
+                enabledUniformName: 'sheenRoughnessMapEnabled'
+            },
+            gltf
+        });
+    }
+}
+function parseIridescenceExtension(device, extension, parsedMaterial, gltf) {
+    if (!extension) {
+        return;
+    }
+    if (extension.iridescenceFactor !== undefined) {
+        parsedMaterial.uniforms.iridescenceFactor = extension.iridescenceFactor;
+    }
+    if (extension.iridescenceIor !== undefined) {
+        parsedMaterial.uniforms.iridescenceIor = extension.iridescenceIor;
+    }
+    if (extension.iridescenceThicknessMinimum !== undefined ||
+        extension.iridescenceThicknessMaximum !== undefined) {
+        parsedMaterial.uniforms.iridescenceThicknessRange = [
+            extension.iridescenceThicknessMinimum ?? 100,
+            extension.iridescenceThicknessMaximum ?? 400
+        ];
+    }
+    if (extension.iridescenceTexture) {
+        addTexture(device, extension.iridescenceTexture, 'pbr_iridescenceSampler', parsedMaterial, {
+            featureOptions: {
+                define: 'HAS_IRIDESCENCEMAP',
+                enabledUniformName: 'iridescenceMapEnabled'
+            },
+            gltf
+        });
+    }
+    if (extension.iridescenceThicknessTexture) {
+        addTexture(device, extension.iridescenceThicknessTexture, 'pbr_iridescenceThicknessSampler', parsedMaterial, {
+            featureOptions: {
+                define: 'HAS_IRIDESCENCETHICKNESSMAP'
+            },
+            gltf
+        });
+    }
+}
+function parseAnisotropyExtension(device, extension, parsedMaterial, gltf) {
+    if (!extension) {
+        return;
+    }
+    if (extension.anisotropyStrength !== undefined) {
+        parsedMaterial.uniforms.anisotropyStrength = extension.anisotropyStrength;
+    }
+    if (extension.anisotropyRotation !== undefined) {
+        parsedMaterial.uniforms.anisotropyRotation = extension.anisotropyRotation;
+    }
+    if (extension.anisotropyTexture) {
+        addTexture(device, extension.anisotropyTexture, 'pbr_anisotropySampler', parsedMaterial, {
+            featureOptions: {
+                define: 'HAS_ANISOTROPYMAP',
+                enabledUniformName: 'anisotropyMapEnabled'
+            },
+            gltf
+        });
+    }
+}
+function parseEmissiveStrengthExtension(extension, parsedMaterial) {
+    if (extension?.emissiveStrength !== undefined) {
+        parsedMaterial.uniforms.emissiveStrength = extension.emissiveStrength;
+    }
+}
+/** Create a texture from a glTF texture/sampler/image combo and add it to bindings */
+function addTexture(device, gltfTexture, uniformName, parsedMaterial, textureParseOptions = {}) {
+    const { featureOptions = {}, gltf } = textureParseOptions;
+    const { define, enabledUniformName } = featureOptions;
+    const resolvedTextureInfo = resolveTextureInfo(gltfTexture, gltf);
+    const image = resolvedTextureInfo.texture?.source?.image;
+    if (!image) {
+        log.warn(`Skipping unresolved glTF texture for ${String(uniformName)}`)();
+        return;
     }
     const gltfSampler = {
         wrapS: 10497, // default REPEAT S (U) wrapping mode.
         wrapT: 10497, // default REPEAT T (V) wrapping mode.
-        ...gltfTexture?.texture?.sampler
+        minFilter: 9729, // default LINEAR filtering
+        magFilter: 9729, // default LINEAR filtering
+        ...resolvedTextureInfo?.texture?.sampler
     };
-    const texture = device.createTexture({
-        id: gltfTexture.uniformName || gltfTexture.id,
-        sampler: convertSampler(gltfSampler),
-        ...textureOptions
-    });
+    const baseOptions = {
+        id: resolvedTextureInfo.uniformName || resolvedTextureInfo.id,
+        sampler: convertSampler(gltfSampler)
+    };
+    let texture;
+    if (image.compressed) {
+        texture = createCompressedTexture(device, image, baseOptions);
+    }
+    else {
+        const { width, height } = device.getExternalImageSize(image);
+        texture = device.createTexture({
+            ...baseOptions,
+            width,
+            height,
+            data: image
+        });
+    }
     parsedMaterial.bindings[uniformName] = texture;
     if (define)
         parsedMaterial.defines[define] = true;
+    if (enabledUniformName) {
+        parsedMaterial.uniforms[enabledUniformName] = true;
+    }
     parsedMaterial.generatedTextures.push(texture);
 }
+function resolveTextureInfo(gltfTexture, gltf) {
+    if (gltfTexture.texture || gltfTexture.index === undefined || !gltf?.textures) {
+        return gltfTexture;
+    }
+    const resolvedTextureEntry = gltf.textures[gltfTexture.index];
+    if (!resolvedTextureEntry) {
+        return gltfTexture;
+    }
+    if ('texture' in resolvedTextureEntry && resolvedTextureEntry.texture) {
+        return {
+            ...resolvedTextureEntry,
+            ...gltfTexture,
+            texture: resolvedTextureEntry.texture
+        };
+    }
+    if (!('source' in resolvedTextureEntry)) {
+        return gltfTexture;
+    }
+    return {
+        ...gltfTexture,
+        texture: resolvedTextureEntry
+    };
+}
+function createCompressedTextureFallback(device, baseOptions) {
+    return device.createTexture({
+        ...baseOptions,
+        format: 'rgba8unorm',
+        width: 1,
+        height: 1,
+        mipLevels: 1
+    });
+}
+function resolveCompressedTextureFormat(level) {
+    return level.textureFormat;
+}
+/**
+ * Maximum mip levels that can be filled for a compressed texture.
+ * texStorage2D allocates level i at (baseW >> i) × (baseH >> i).
+ * Compressed formats can't upload data for levels smaller than one block,
+ * so we stop before either dimension drops below the block size.
+ */
+function getMaxCompressedMipLevels(baseWidth, baseHeight, format) {
+    const { blockWidth = 1, blockHeight = 1 } = textureFormatDecoder.getInfo(format);
+    let count = 1;
+    for (let i = 1;; i++) {
+        const w = Math.max(1, baseWidth >> i);
+        const h = Math.max(1, baseHeight >> i);
+        if (w < blockWidth || h < blockHeight)
+            break;
+        count++;
+    }
+    return count;
+}
+/**
+ * Create a texture from compressed image data produced by loaders.gl.
+ * Handles current loaders.gl compressed image layouts:
+ *
+ *   current:      {compressed, mipmaps: true, data: [{data, width, height, textureFormat}, ...]}
+ *   forward:      {compressed, mipmaps: [{data, width, height, textureFormat}, ...]}
+ */
+export function createCompressedTexture(device, image, baseOptions) {
+    // Normalize mip levels from all known loaders.gl formats
+    let levels;
+    if (Array.isArray(image.data) && image.data[0]?.data) {
+        // loaders.gl current format: image.data is Array of mip-level objects
+        levels = image.data;
+    }
+    else if ('mipmaps' in image && Array.isArray(image.mipmaps)) {
+        // Hypothetical future format: image.mipmaps is an Array
+        levels = image.mipmaps;
+    }
+    else {
+        levels = [];
+    }
+    if (levels.length === 0 || !levels[0]?.data) {
+        log.warn('createCompressedTexture: compressed image has no valid mip levels, creating fallback')();
+        return createCompressedTextureFallback(device, baseOptions);
+    }
+    const baseLevel = levels[0];
+    const baseWidth = baseLevel.width ?? image.width ?? 0;
+    const baseHeight = baseLevel.height ?? image.height ?? 0;
+    if (baseWidth <= 0 || baseHeight <= 0) {
+        log.warn('createCompressedTexture: base level has invalid dimensions, creating fallback')();
+        return createCompressedTextureFallback(device, baseOptions);
+    }
+    const format = resolveCompressedTextureFormat(baseLevel);
+    if (!format) {
+        log.warn('createCompressedTexture: compressed image has no textureFormat, creating fallback')();
+        return createCompressedTextureFallback(device, baseOptions);
+    }
+    // Validate mip levels: truncate chain at first invalid level.
+    // Levels must be contiguous, so we stop at the first level that has
+    // a format mismatch, missing data, non-positive dimensions, or
+    // dimensions that don't match what texStorage2D will allocate.
+    //
+    // For block-compressed formats (ASTC, BC, ETC2), texStorage2D allocates
+    // mip levels down to 1×1 texels, but compressed data can't be smaller
+    // than one block (e.g. 4×4 for ASTC-4x4). Cap the chain so we never
+    // try to upload data whose block-aligned size exceeds the allocated level.
+    const maxMipLevels = getMaxCompressedMipLevels(baseWidth, baseHeight, format);
+    const levelLimit = Math.min(levels.length, maxMipLevels);
+    let validLevelCount = 1;
+    for (let i = 1; i < levelLimit; i++) {
+        const level = levels[i];
+        if (!level.data || level.width <= 0 || level.height <= 0) {
+            log.warn(`createCompressedTexture: mip level ${i} has invalid data/dimensions, truncating`)();
+            break;
+        }
+        const levelFormat = resolveCompressedTextureFormat(level);
+        if (levelFormat && levelFormat !== format) {
+            log.warn(`createCompressedTexture: mip level ${i} format '${levelFormat}' differs from base '${format}', truncating`)();
+            break;
+        }
+        const expectedW = Math.max(1, baseWidth >> i);
+        const expectedH = Math.max(1, baseHeight >> i);
+        if (level.width !== expectedW || level.height !== expectedH) {
+            log.warn(`createCompressedTexture: mip level ${i} dimensions ${level.width}x${level.height} ` +
+                `don't match expected ${expectedW}x${expectedH}, truncating`)();
+            break;
+        }
+        validLevelCount++;
+    }
+    const texture = device.createTexture({
+        ...baseOptions,
+        format,
+        usage: Texture.TEXTURE | Texture.COPY_DST,
+        width: baseWidth,
+        height: baseHeight,
+        mipLevels: validLevelCount,
+        data: baseLevel.data
+    });
+    // Upload additional validated mip levels
+    for (let i = 1; i < validLevelCount; i++) {
+        texture.writeData(levels[i].data, {
+            width: levels[i].width,
+            height: levels[i].height,
+            mipLevel: i
+        });
+    }
+    return texture;
+}
 /*
 /**
  * Parses a GLTF material definition into uniforms and parameters for the PBR shader module
@@ -188,7 +697,7 @@ export class PBRMaterialParser {
     if (imageBasedLightingEnvironment) {
       this.bindings.pbr_diffuseEnvSampler = imageBasedLightingEnvironment.getDiffuseEnvSampler();
       this.bindings.pbr_specularEnvSampler = imageBasedLightingEnvironment.getSpecularEnvSampler();
-      this.bindings.pbr_BrdfLUT = imageBasedLightingEnvironment.getBrdfTexture();
+      this.bindings.pbr_brdfLUT = imageBasedLightingEnvironment.getBrdfTexture();
       this.uniforms.scaleIBLAmbient = [1, 1];
     }
 
@@ -202,6 +711,7 @@ export class PBRMaterialParser {
     this.defineIfPresent(attributes.NORMAL, 'HAS_NORMALS');
     this.defineIfPresent(attributes.TANGENT && useTangents, 'HAS_TANGENTS');
     this.defineIfPresent(attributes.TEXCOORD_0, 'HAS_UV');
+    this.defineIfPresent(attributes.COLOR_0, 'HAS_COLORS');
 
     this.defineIfPresent(imageBasedLightingEnvironment, 'USE_IBL');
     this.defineIfPresent(lights, 'USE_LIGHTS');
@@ -257,8 +767,13 @@ export class PBRMaterialParser {
       log.warn('BLEND alphaMode might not work well because it requires mesh sorting')();
       Object.assign(this.parameters, {
         blend: true,
-        blendEquation: GL.FUNC_ADD,
-        blendFunc: [GL.SRC_ALPHA, GL.ONE_MINUS_SRC_ALPHA, GL.ONE, GL.ONE_MINUS_SRC_ALPHA]
+        blendEquation: GLEnum.FUNC_ADD,
+        blendFunc: [
+          GLEnum.SRC_ALPHA,
+          GLEnum.ONE_MINUS_SRC_ALPHA,
+          GLEnum.ONE,
+          GLEnum.ONE_MINUS_SRC_ALPHA
+        ]
       });
     }
   }
@@ -295,7 +810,8 @@ export class PBRMaterialParser {
     if (image.compressed) {
       textureOptions = image;
       specialTextureParameters = {
-        [GL.TEXTURE_MIN_FILTER]: image.data.length > 1 ? GL.LINEAR_MIPMAP_NEAREST : GL.LINEAR
+        [GLEnum.TEXTURE_MIN_FILTER]:
+          image.data.length > 1 ? GLEnum.LINEAR_MIPMAP_NEAREST : GLEnum.LINEAR
       };
     } else {
       // Texture2D accepts a promise that returns an image as data (Async Textures)
@@ -309,7 +825,7 @@ export class PBRMaterialParser {
         ...specialTextureParameters
       },
       pixelStore: {
-        [GL.UNPACK_FLIP_Y_WEBGL]: false
+        [GLEnum.UNPACK_FLIP_Y_WEBGL]: false
       },
       ...textureOptions
     });