@zephyr3d/scene 0.1.0

package/dist/asset/loaders/gltf/gltf_loader.js

@@ -0,0 +1,981 @@
+import { Matrix4x4, Vector3, Quaternion, Interpolator, Vector4 } from '@zephyr3d/base';
+import { AssetScene, AssetSkeleton, SharedModel } from '../../model.js';
+import { BoundingBox } from '../../../utility/bounding_volume.js';
+import { Primitive } from '../../../render/primitive.js';
+import '../../../material/material.js';
+import '@zephyr3d/device';
+import '../../../shaders/framework.js';
+import { Application } from '../../../app.js';
+import '../../../render/scatteringlut.js';
+import '../../../material/lambert.js';
+import '../../../material/blinn.js';
+import { UnlitMaterial } from '../../../material/unlit.js';
+import { PBRSpecularGlossinessMaterial, PBRMetallicRoughnessMaterial } from '../../../material/pbr.js';
+import '../../../material/lightmodel.js';
+import { GLTFAccessor, ComponentType } from './helpers.js';
+import { AbstractModelLoader } from '../loader.js';
+
+/**
+ * The GLTF/GLB model loader
+ * @internal
+ */ class GLTFLoader extends AbstractModelLoader {
+    supportExtension(ext) {
+        return ext === '.gltf' || ext === '.glb';
+    }
+    supportMIMEType(mimeType) {
+        return mimeType === 'model/gltf+json' || mimeType === 'model/gltf-binary';
+    }
+    async load(assetManager, url, mimeType, data) {
+        const buffer = await data.arrayBuffer();
+        if (this.isGLB(buffer)) {
+            return this.loadBinary(assetManager, url, buffer);
+        }
+        const gltf = await new Response(data).json();
+        gltf._manager = assetManager;
+        gltf._loadedBuffers = null;
+        return this.loadJson(url, gltf);
+    }
+    async loadBinary(assetManager, url, buffer) {
+        const jsonChunkType = 0x4e4f534a;
+        const binaryChunkType = 0x004e4942;
+        let gltf = null;
+        const buffers = [];
+        const chunkInfos = this.getGLBChunkInfos(buffer);
+        for (const info of chunkInfos){
+            if (info.type === jsonChunkType && !gltf) {
+                const jsonSlice = new Uint8Array(buffer, 20, info.length);
+                const stringBuffer = new TextDecoder('utf-8').decode(jsonSlice);
+                gltf = JSON.parse(stringBuffer);
+            } else if (info.type === binaryChunkType) {
+                buffers.push(buffer.slice(info.start, info.start + info.length));
+            }
+        }
+        if (gltf) {
+            gltf._manager = assetManager;
+            gltf._loadedBuffers = buffers;
+            return this.loadJson(url, gltf);
+        }
+        return null;
+    }
+    async loadJson(url, gltf) {
+        console.log(`GLTF extensions used: ${gltf.extensionsUsed || []}`);
+        gltf._accessors = [];
+        gltf._bufferCache = {};
+        gltf._textureCache = {};
+        gltf._primitiveCache = {};
+        gltf._materialCache = {};
+        gltf._nodes = [];
+        gltf._meshes = [];
+        // check asset property
+        const asset = gltf.asset;
+        if (asset) {
+            const gltfVersion = asset.version;
+            if (gltfVersion !== '2.0') {
+                console.error(`Invalid GLTF version: ${gltfVersion}`);
+                return null;
+            }
+        }
+        gltf._baseURI = url.substring(0, url.lastIndexOf('/') + 1);
+        if (!gltf._loadedBuffers) {
+            gltf._loadedBuffers = [];
+            const buffers = gltf.buffers;
+            if (buffers) {
+                for (const buffer of buffers){
+                    const uri = this._normalizeURI(gltf._baseURI, buffer.uri);
+                    const buf = await gltf._manager.fetchBinaryData(uri);
+                    // const buf = (await new FileLoader(null, 'arraybuffer').load(uri)) as ArrayBuffer;
+                    if (buffer.byteLength !== buf.byteLength) {
+                        console.error(`Invalid GLTF: buffer byte length error.`);
+                        return null;
+                    }
+                    gltf._loadedBuffers.push(buf);
+                }
+            }
+        }
+        const accessors = gltf.accessors;
+        if (accessors) {
+            for (const accessor of gltf.accessors){
+                gltf._accessors.push(new GLTFAccessor(accessor));
+            }
+        }
+        const scenes = gltf.scenes;
+        if (scenes) {
+            const sharedModel = new SharedModel();
+            await this._loadMeshes(gltf, sharedModel);
+            this._loadNodes(gltf, sharedModel);
+            this._loadSkins(gltf, sharedModel);
+            for(let i = 0; i < gltf.nodes?.length; i++){
+                if (typeof gltf.nodes[i].skin === 'number' && gltf.nodes[i].skin >= 0) {
+                    gltf._nodes[i].skeleton = sharedModel.skeletons[gltf.nodes[i].skin];
+                }
+            }
+            this._loadAnimations(gltf, sharedModel);
+            for (const scene of scenes){
+                const assetScene = new AssetScene(scene.name);
+                for (const node of scene.nodes){
+                    assetScene.rootNodes.push(gltf._nodes[node]);
+                }
+                sharedModel.scenes.push(assetScene);
+            }
+            if (typeof gltf.scene === 'number') {
+                sharedModel.activeScene = gltf.scene;
+            }
+            return sharedModel;
+        }
+        return null;
+    }
+    /** @internal */ _normalizeURI(baseURI, uri) {
+        const s = uri.toLowerCase();
+        if (s.startsWith('http://') || s.startsWith('https://') || s.startsWith('blob:') || s.startsWith('data:')) {
+            // absolute path
+            return encodeURI(uri);
+        }
+        uri = uri.replace(/\.\//g, '');
+        uri = decodeURIComponent(uri);
+        if (uri[0] === '/') {
+            uri = uri.slice(1);
+        }
+        uri = uri.split('/').map((val)=>encodeURIComponent(val)).join('/');
+        return baseURI + uri;
+    }
+    /** @internal */ _loadNodes(gltf, model) {
+        if (gltf.nodes) {
+            for(let i = 0; i < gltf.nodes.length; i++){
+                this._loadNode(gltf, i, null, model);
+            }
+            for (const node of gltf._nodes){
+                if (!node.parent) {
+                    node.computeTransforms(null);
+                }
+            }
+        }
+    }
+    /** @internal */ _loadSkins(gltf, model) {
+        if (gltf.skins) {
+            for(let i = 0; i < gltf.skins.length; i++){
+                const skinInfo = gltf.skins[i];
+                const skeleton = new AssetSkeleton(skinInfo.name);
+                if (typeof skinInfo.skeleton === 'number') {
+                    skeleton.pivot = gltf._nodes[skinInfo.skeleton];
+                }
+                const accessor = gltf._accessors[skinInfo.inverseBindMatrices];
+                if (!accessor || accessor.type !== 'MAT4' || accessor.componentType !== ComponentType.FLOAT) {
+                    throw new Error('Invalid GLTF inverse bind matricies accessor');
+                }
+                const matrices = typeof skinInfo.inverseBindMatrices === 'number' ? accessor.getDeinterlacedView(gltf) : null;
+                skinInfo.joints.forEach((joint, index)=>{
+                    const m = index * 16;
+                    skeleton.addJoint(gltf._nodes[joint], matrices ? new Matrix4x4(matrices.subarray(m, m + 16)) : Matrix4x4.identity());
+                });
+                model.addSkeleton(skeleton);
+            }
+        }
+    }
+    /** @internal */ _loadAnimations(gltf, model) {
+        if (gltf.animations) {
+            for(let i = 0; i < gltf.animations.length; i++){
+                const animation = this._loadAnimation(gltf, i, model);
+                model.addAnimation(animation);
+            }
+        }
+    }
+    /** @internal */ collectNodes(gltf) {
+        const collect = new Map();
+        for (const node of gltf._nodes){
+            collect.set(node, {
+                translate: node.position || Vector3.zero(),
+                rotation: node.rotation || Quaternion.identity(),
+                scale: node.scaling || Vector3.one(),
+                worldTransform: null
+            });
+        }
+        return collect;
+    }
+    /** @internal */ updateNodeTransform(nodeTransforms, node) {
+        const transform = nodeTransforms.get(node);
+        if (!transform.worldTransform) {
+            transform.worldTransform = Matrix4x4.scaling(transform.scale).rotateLeft(transform.rotation).translateLeft(transform.translate);
+            if (node.parent) {
+                this.updateNodeTransform(nodeTransforms, node.parent);
+                transform.worldTransform.multiplyLeft(nodeTransforms.get(node.parent).worldTransform);
+            }
+        }
+    }
+    /** @internal */ getAnimationInfo(gltf, index) {
+        const animationInfo = gltf.animations[index];
+        const name = animationInfo.name || null;
+        const channels = animationInfo.channels;
+        const samplers = animationInfo.samplers;
+        const interpolators = [];
+        const interpolatorTypes = [];
+        const nodes = this.collectNodes(gltf);
+        let maxTime = 0;
+        for(let i = 0; i < channels.length; i++){
+            const channel = channels[i];
+            const sampler = samplers[channel.sampler];
+            const input = gltf._accessors[sampler.input].getNormalizedDeinterlacedView(gltf);
+            const output = gltf._accessors[sampler.output].getNormalizedDeinterlacedView(gltf);
+            const mode = sampler.interpolation === 'STEP' ? 'step' : sampler.interpolation === 'CUBICSPLINE' ? 'cubicspline' : 'linear';
+            if (channel.target.path === 'rotation') {
+                interpolators.push(new Interpolator(mode, 'quat', input, output));
+                interpolatorTypes.push('rotation');
+            } else if (channel.target.path === 'translation') {
+                interpolators.push(new Interpolator(mode, 'vec3', input, output));
+                interpolatorTypes.push('translation');
+            } else if (channel.target.path === 'scale') {
+                interpolators.push(new Interpolator(mode, 'vec3', input, output));
+                interpolatorTypes.push('scale');
+            } else {
+                continue;
+            }
+            const max = input[input.length - 1];
+            if (max > maxTime) {
+                maxTime = max;
+            }
+        }
+        return {
+            name,
+            channels,
+            samplers,
+            interpolators,
+            interpolatorTypes,
+            maxTime,
+            nodes
+        };
+    }
+    /** @internal */ _loadAnimation(gltf, index, model) {
+        const animationInfo = this.getAnimationInfo(gltf, index);
+        const animationData = {
+            name: animationInfo.name,
+            tracks: [],
+            skeletons: [],
+            nodes: []
+        };
+        for(let i = 0; i < animationInfo.channels.length; i++){
+            const targetNode = gltf._nodes[animationInfo.channels[i].target.node];
+            animationData.tracks.push({
+                node: targetNode,
+                type: animationInfo.interpolatorTypes[i],
+                interpolator: animationInfo.interpolators[i]
+            });
+            if (animationData.nodes.indexOf(targetNode) < 0) {
+                animationData.nodes.push(targetNode);
+            }
+            if (targetNode.skeletonAttached && animationData.skeletons.indexOf(targetNode.skeletonAttached) < 0) {
+                animationData.skeletons.push(targetNode.skeletonAttached);
+            }
+        }
+        return animationData;
+    }
+    /** @internal */ _loadNode(gltf, nodeIndex, parent, model) {
+        let node = gltf._nodes[nodeIndex];
+        if (node) {
+            if (parent) {
+                if (node.parent) {
+                    throw new Error('invalid node hierarchy');
+                }
+                parent.addChild(node);
+            }
+            return node;
+        }
+        const nodeInfo = gltf.nodes?.[nodeIndex];
+        if (nodeInfo) {
+            node = model.addNode(parent, nodeIndex, nodeInfo.name);
+            if (typeof nodeInfo.mesh === 'number') {
+                node.mesh = gltf._meshes[nodeInfo.mesh];
+            }
+            if (!(typeof nodeInfo.skin === 'number') || nodeInfo.skin < 0) {
+                // GLTF spec: Only the joint transforms are applied to the skinned mesh; the transform of the skinned mesh node MUST be ignored.
+                if (nodeInfo.matrix) {
+                    const matrix = new Matrix4x4(nodeInfo.matrix);
+                    matrix.decompose(node.scaling, node.rotation, node.position);
+                } else {
+                    if (nodeInfo.rotation) {
+                        node.rotation.set(nodeInfo.rotation);
+                    }
+                    if (nodeInfo.scale) {
+                        node.scaling.set(nodeInfo.scale);
+                    }
+                    if (nodeInfo.translation) {
+                        node.position.set(nodeInfo.translation);
+                    }
+                }
+            }
+            gltf._nodes[nodeIndex] = node;
+            if (nodeInfo.children) {
+                for (const childIndex of nodeInfo.children){
+                    this._loadNode(gltf, childIndex, node, model);
+                }
+            }
+        } else {
+            throw new Error(`invalid GLTF node: ${nodeIndex}`);
+        }
+        return node;
+    }
+    /** @internal */ async _loadMeshes(gltf, model) {
+        if (gltf.meshes) {
+            for(let i = 0; i < gltf.meshes.length; i++){
+                gltf._meshes[i] = await this._loadMesh(gltf, i);
+            }
+        }
+    }
+    /** @internal */ async _loadMesh(gltf, meshIndex) {
+        const meshInfo = gltf.meshes && gltf.meshes[meshIndex];
+        let mesh = null;
+        if (meshInfo) {
+            mesh = {
+                subMeshes: []
+            };
+            const primitives = meshInfo.primitives;
+            const meshName = meshInfo.name || null;
+            if (primitives) {
+                for(let i = 0; i < primitives.length; i++){
+                    const p = primitives[i];
+                    const subMeshData = {
+                        name: `${meshName}-${i}`,
+                        primitive: null,
+                        material: null,
+                        rawPositions: null,
+                        rawBlendIndices: null,
+                        rawJointWeights: null
+                    };
+                    const hash = `(${Object.getOwnPropertyNames(p.attributes).sort().map((k)=>`${k}:${p.attributes[k]}`).join(',')})-(${p.indices})-(${p.mode})`;
+                    let primitive = p.targets ? null : gltf._primitiveCache[hash];
+                    if (!primitive) {
+                        primitive = new Primitive();
+                        const attributes = p.attributes;
+                        for(const attrib in attributes){
+                            this._loadVertexBuffer(gltf, attrib, attributes[attrib], primitive, subMeshData);
+                        }
+                        const indices = p.indices;
+                        if (typeof indices === 'number') {
+                            this._loadIndexBuffer(gltf, indices, primitive, subMeshData);
+                        }
+                        let primitiveType = p.mode;
+                        if (typeof primitiveType !== 'number') {
+                            primitiveType = 4;
+                        }
+                        primitive.primitiveType = this._primitiveType(primitiveType);
+                        gltf._primitiveCache[hash] = primitive;
+                    }
+                    const hasVertexNormal = !!primitive.getVertexBuffer('normal');
+                    const hasVertexColor = !!primitive.getVertexBuffer('diffuse');
+                    const hasVertexTangent = !!primitive.getVertexBuffer('tangent');
+                    const materialHash = `${p.material}.${Number(hasVertexNormal)}.${Number(hasVertexColor)}.${Number(hasVertexTangent)}`;
+                    let material = gltf._materialCache[materialHash];
+                    if (!material) {
+                        const materialInfo = p.material !== undefined ? gltf.materials[p.material] : null;
+                        material = await this._loadMaterial(gltf, materialInfo, hasVertexColor, hasVertexNormal, hasVertexTangent);
+                        gltf._materialCache[materialHash] = material;
+                    }
+                    subMeshData.primitive = primitive;
+                    subMeshData.material = material;
+                    mesh.subMeshes.push(subMeshData);
+                }
+            }
+        }
+        return mesh;
+    }
+    async _createMaterial(assetManager, assetMaterial) {
+        if (assetMaterial.type === 'unlit') {
+            const unlitAssetMaterial = assetMaterial;
+            const unlitMaterial = new UnlitMaterial; //new NewLambertMaterial();// new TestLitMaterial();// new UnlitMaterial();
+            unlitMaterial.albedoColor = unlitAssetMaterial.diffuse ?? Vector4.one();
+            if (unlitAssetMaterial.diffuseMap) {
+                unlitMaterial.albedoTexture = unlitAssetMaterial.diffuseMap.texture;
+                unlitMaterial.albedoTextureSampler = unlitAssetMaterial.diffuseMap.sampler;
+                unlitMaterial.albedoTexCoordIndex = unlitAssetMaterial.diffuseMap.texCoord;
+                unlitMaterial.albedoTexMatrix = unlitAssetMaterial.diffuseMap.transform;
+            }
+            unlitMaterial.vertexColor = unlitAssetMaterial.common.vertexColor;
+            if (assetMaterial.common.alphaMode === 'blend') {
+                unlitMaterial.blendMode = 'blend';
+            } else if (assetMaterial.common.alphaMode === 'mask') {
+                unlitMaterial.alphaCutoff = assetMaterial.common.alphaCutoff;
+            }
+            if (assetMaterial.common.doubleSided) {
+                const rasterizerState = unlitMaterial.stateSet.useRasterizerState();
+                rasterizerState.setCullMode('none');
+            }
+            return unlitMaterial;
+        } else if (assetMaterial.type === 'pbrSpecularGlossiness') {
+            const assetPBRMaterial = assetMaterial;
+            const pbrMaterial = new PBRSpecularGlossinessMaterial();
+            pbrMaterial.lightModel.ior = assetPBRMaterial.ior;
+            pbrMaterial.lightModel.albedo = assetPBRMaterial.diffuse;
+            pbrMaterial.lightModel.specularFactor = new Vector4(assetPBRMaterial.specular.x, assetPBRMaterial.specular.y, assetPBRMaterial.specular.z, 1);
+            pbrMaterial.lightModel.glossinessFactor = assetPBRMaterial.glossness;
+            if (assetPBRMaterial.diffuseMap) {
+                pbrMaterial.lightModel.setAlbedoMap(assetPBRMaterial.diffuseMap.texture, assetPBRMaterial.diffuseMap.sampler, assetPBRMaterial.diffuseMap.texCoord, assetPBRMaterial.diffuseMap.transform);
+            }
+            if (assetPBRMaterial.common.normalMap) {
+                pbrMaterial.lightModel.setNormalMap(assetPBRMaterial.common.normalMap.texture, assetPBRMaterial.common.normalMap.sampler, assetPBRMaterial.common.normalMap.texCoord, assetPBRMaterial.common.normalMap.transform);
+            }
+            pbrMaterial.lightModel.normalScale = assetPBRMaterial.common.bumpScale;
+            if (assetPBRMaterial.common.emissiveMap) {
+                pbrMaterial.lightModel.setEmissiveMap(assetPBRMaterial.common.emissiveMap.texture, assetPBRMaterial.common.emissiveMap.sampler, assetPBRMaterial.common.emissiveMap.texCoord, assetPBRMaterial.common.emissiveMap.transform);
+            }
+            pbrMaterial.lightModel.emissiveColor = assetPBRMaterial.common.emissiveColor;
+            pbrMaterial.lightModel.emissiveStrength = assetPBRMaterial.common.emissiveStrength;
+            if (assetPBRMaterial.common.occlusionMap) {
+                pbrMaterial.lightModel.setOcclusionMap(assetPBRMaterial.common.occlusionMap.texture, assetPBRMaterial.common.occlusionMap.sampler, assetPBRMaterial.common.occlusionMap.texCoord, assetPBRMaterial.common.occlusionMap.transform);
+            }
+            pbrMaterial.lightModel.occlusionStrength = assetPBRMaterial.common.occlusionStrength;
+            if (assetPBRMaterial.specularGlossnessMap) {
+                pbrMaterial.lightModel.setSpecularMap(assetPBRMaterial.specularGlossnessMap.texture, assetPBRMaterial.specularGlossnessMap.sampler, assetPBRMaterial.specularGlossnessMap.texCoord, assetPBRMaterial.specularGlossnessMap.transform);
+            }
+            pbrMaterial.vertexTangent = assetPBRMaterial.common.useTangent;
+            pbrMaterial.vertexColor = assetPBRMaterial.common.vertexColor;
+            if (assetPBRMaterial.common.alphaMode === 'blend') {
+                pbrMaterial.alphaBlend = true;
+            } else if (assetPBRMaterial.common.alphaMode === 'mask') {
+                pbrMaterial.alphaCutoff = assetPBRMaterial.common.alphaCutoff;
+            }
+            if (assetPBRMaterial.common.doubleSided) {
+                const rasterizerState = pbrMaterial.stateSet.useRasterizerState();
+                rasterizerState.setCullMode('none');
+            }
+            pbrMaterial.vertexNormal = !!assetMaterial.common.vertexNormal;
+            return pbrMaterial;
+        } else if (assetMaterial.type === 'pbrMetallicRoughness') {
+            const assetPBRMaterial = assetMaterial;
+            const pbrMaterial = new PBRMetallicRoughnessMaterial();
+            pbrMaterial.lightModel.ior = assetPBRMaterial.ior;
+            pbrMaterial.lightModel.albedo = assetPBRMaterial.diffuse;
+            pbrMaterial.lightModel.metallic = assetPBRMaterial.metallic;
+            pbrMaterial.lightModel.roughness = assetPBRMaterial.roughness;
+            if (assetPBRMaterial.diffuseMap) {
+                pbrMaterial.lightModel.setAlbedoMap(assetPBRMaterial.diffuseMap.texture, assetPBRMaterial.diffuseMap.sampler, assetPBRMaterial.diffuseMap.texCoord, assetPBRMaterial.diffuseMap.transform);
+            }
+            if (assetPBRMaterial.common.normalMap) {
+                pbrMaterial.lightModel.setNormalMap(assetPBRMaterial.common.normalMap.texture, assetPBRMaterial.common.normalMap.sampler, assetPBRMaterial.common.normalMap.texCoord, assetPBRMaterial.common.normalMap.transform);
+            }
+            pbrMaterial.lightModel.normalScale = assetPBRMaterial.common.bumpScale;
+            if (assetPBRMaterial.common.emissiveMap) {
+                pbrMaterial.lightModel.setEmissiveMap(assetPBRMaterial.common.emissiveMap.texture, assetPBRMaterial.common.emissiveMap.sampler, assetPBRMaterial.common.emissiveMap.texCoord, assetPBRMaterial.common.emissiveMap.transform);
+            }
+            pbrMaterial.lightModel.emissiveColor = assetPBRMaterial.common.emissiveColor;
+            pbrMaterial.lightModel.emissiveStrength = assetPBRMaterial.common.emissiveStrength;
+            if (assetPBRMaterial.common.occlusionMap) {
+                pbrMaterial.lightModel.setOcclusionMap(assetPBRMaterial.common.occlusionMap.texture, assetPBRMaterial.common.occlusionMap.sampler, assetPBRMaterial.common.occlusionMap.texCoord, assetPBRMaterial.common.occlusionMap.transform);
+            }
+            pbrMaterial.lightModel.occlusionStrength = assetPBRMaterial.common.occlusionStrength;
+            if (assetPBRMaterial.metallicMap) {
+                pbrMaterial.lightModel.setMetallicMap(assetPBRMaterial.metallicMap.texture, assetPBRMaterial.metallicMap.sampler, assetPBRMaterial.metallicMap.texCoord, assetPBRMaterial.metallicMap.transform);
+            }
+            pbrMaterial.lightModel.metallicIndex = assetPBRMaterial.metallicIndex;
+            pbrMaterial.lightModel.roughnessIndex = assetPBRMaterial.roughnessIndex;
+            pbrMaterial.lightModel.specularFactor = assetPBRMaterial.specularFactor;
+            if (assetPBRMaterial.specularMap) {
+                pbrMaterial.lightModel.setSpecularMap(assetPBRMaterial.specularMap.texture, assetPBRMaterial.specularMap.sampler, assetPBRMaterial.specularMap.texCoord, assetPBRMaterial.specularMap.transform);
+            }
+            if (assetPBRMaterial.specularColorMap) {
+                pbrMaterial.lightModel.setSpecularColorMap(assetPBRMaterial.specularColorMap.texture, assetPBRMaterial.specularColorMap.sampler, assetPBRMaterial.specularColorMap.texCoord, assetPBRMaterial.specularColorMap.transform);
+            }
+            if (assetPBRMaterial.sheen) {
+                const sheen = assetPBRMaterial.sheen;
+                pbrMaterial.lightModel.useSheen = true;
+                pbrMaterial.lightModel.sheenColorFactor = sheen.sheenColorFactor;
+                pbrMaterial.lightModel.sheenRoughnessFactor = sheen.sheenRoughnessFactor;
+                /*
+        pbrMaterial.lightModel.setSheenLut(
+          await assetManager.fetchBuiltinTexture(BUILTIN_ASSET_TEXTURE_SHEEN_LUT)
+        );
+        */ if (sheen.sheenColorMap) {
+                    pbrMaterial.lightModel.setSheenColorMap(sheen.sheenColorMap.texture, sheen.sheenColorMap.sampler, sheen.sheenColorMap.texCoord, sheen.sheenColorMap.transform);
+                }
+                if (sheen.sheenRoughnessMap) {
+                    pbrMaterial.lightModel.setSheenRoughnessMap(sheen.sheenRoughnessMap.texture, sheen.sheenRoughnessMap.sampler, sheen.sheenRoughnessMap.texCoord, sheen.sheenRoughnessMap.transform);
+                }
+            }
+            if (assetPBRMaterial.clearcoat) {
+                const cc = assetPBRMaterial.clearcoat;
+                pbrMaterial.lightModel.useClearcoat = true;
+                pbrMaterial.lightModel.clearcoatIntensity = cc.clearCoatFactor;
+                pbrMaterial.lightModel.clearcoatRoughnessFactor = cc.clearCoatRoughnessFactor;
+                if (cc.clearCoatIntensityMap) {
+                    pbrMaterial.lightModel.setClearcoatIntensityMap(cc.clearCoatIntensityMap.texture, cc.clearCoatIntensityMap.sampler, cc.clearCoatIntensityMap.texCoord, cc.clearCoatIntensityMap.transform);
+                }
+                if (cc.clearCoatRoughnessMap) {
+                    pbrMaterial.lightModel.setClearcoatRoughnessMap(cc.clearCoatRoughnessMap.texture, cc.clearCoatRoughnessMap.sampler, cc.clearCoatRoughnessMap.texCoord, cc.clearCoatRoughnessMap.transform);
+                }
+                if (cc.clearCoatNormalMap) {
+                    pbrMaterial.lightModel.setClearcoatNormalMap(cc.clearCoatNormalMap.texture, cc.clearCoatNormalMap.sampler, cc.clearCoatNormalMap.texCoord, cc.clearCoatNormalMap.transform);
+                }
+            }
+            pbrMaterial.vertexTangent = assetPBRMaterial.common.useTangent;
+            pbrMaterial.vertexColor = assetPBRMaterial.common.vertexColor;
+            if (assetPBRMaterial.common.alphaMode === 'blend') {
+                pbrMaterial.alphaBlend = true;
+            } else if (assetPBRMaterial.common.alphaMode === 'mask') {
+                pbrMaterial.alphaCutoff = assetPBRMaterial.common.alphaCutoff;
+            }
+            if (assetPBRMaterial.common.doubleSided) {
+                const rasterizerState = pbrMaterial.stateSet.useRasterizerState();
+                rasterizerState.setCullMode('none');
+            }
+            pbrMaterial.vertexNormal = !!assetMaterial.common.vertexNormal;
+            return pbrMaterial;
+        }
+    }
+    /** @internal */ async _loadMaterial(gltf, materialInfo, vertexColor, vertexNormal, useTangent) {
+        let assetMaterial = null;
+        let pbrMetallicRoughness = null;
+        let pbrSpecularGlossness = null;
+        const pbrCommon = {
+            useTangent,
+            vertexColor,
+            vertexNormal,
+            bumpScale: 1,
+            emissiveColor: Vector3.zero(),
+            emissiveStrength: 1,
+            occlusionStrength: 1
+        };
+        switch(materialInfo?.alphaMode){
+            case 'BLEND':
+                {
+                    pbrCommon.alphaMode = 'blend';
+                    break;
+                }
+            case 'MASK':
+                {
+                    pbrCommon.alphaMode = 'mask';
+                    pbrCommon.alphaCutoff = materialInfo.alphaCutoff ?? 0.5;
+                    break;
+                }
+        }
+        if (materialInfo?.doubleSided) {
+            pbrCommon.doubleSided = true;
+        }
+        if (materialInfo?.pbrMetallicRoughness || materialInfo?.extensions?.KHR_materials_pbrSpecularGlossiness) {
+            pbrCommon.normalMap = materialInfo.normalTexture ? await this._loadTexture(gltf, materialInfo.normalTexture, false) : null;
+            pbrCommon.bumpScale = materialInfo.normalTexture?.scale ?? 1;
+            pbrCommon.occlusionMap = materialInfo.occlusionTexture ? await this._loadTexture(gltf, materialInfo.occlusionTexture, false) : null;
+            pbrCommon.occlusionStrength = materialInfo.occlusionTexture?.strength ?? 1;
+            pbrCommon.emissiveMap = materialInfo.emissiveTexture ? await this._loadTexture(gltf, materialInfo.emissiveTexture, false) : null;
+            pbrCommon.emissiveStrength = materialInfo?.extensions?.KHR_materials_emissive_strength?.emissiveStrength ?? 1;
+            pbrCommon.emissiveColor = materialInfo.emissiveFactor ? new Vector3(materialInfo.emissiveFactor) : Vector3.zero();
+        }
+        if (materialInfo?.pbrMetallicRoughness) {
+            pbrMetallicRoughness = {
+                type: 'pbrMetallicRoughness',
+                ior: 1.5,
+                common: pbrCommon
+            };
+            pbrMetallicRoughness.diffuse = new Vector4(materialInfo.pbrMetallicRoughness.baseColorFactor ?? [
+                1,
+                1,
+                1,
+                1
+            ]);
+            pbrMetallicRoughness.metallic = materialInfo.pbrMetallicRoughness.metallicFactor ?? 1;
+            pbrMetallicRoughness.roughness = materialInfo.pbrMetallicRoughness.roughnessFactor ?? 1;
+            pbrMetallicRoughness.diffuseMap = materialInfo.pbrMetallicRoughness.baseColorTexture ? await this._loadTexture(gltf, materialInfo.pbrMetallicRoughness.baseColorTexture, true) : null;
+            pbrMetallicRoughness.metallicMap = materialInfo.pbrMetallicRoughness.metallicRoughnessTexture ? await this._loadTexture(gltf, materialInfo.pbrMetallicRoughness.metallicRoughnessTexture, false) : null;
+            pbrMetallicRoughness.metallicIndex = 2;
+            pbrMetallicRoughness.roughnessIndex = 1;
+        }
+        if (materialInfo?.extensions?.KHR_materials_pbrSpecularGlossiness) {
+            const sg = materialInfo.extensions?.KHR_materials_pbrSpecularGlossiness;
+            pbrSpecularGlossness = {
+                type: 'pbrSpecularGlossiness',
+                ior: 1.5,
+                common: pbrCommon
+            };
+            pbrSpecularGlossness.diffuse = new Vector4(sg.diffuseFactor ?? [
+                1,
+                1,
+                1,
+                1
+            ]);
+            pbrSpecularGlossness.specular = new Vector3(sg.specularFactor ?? [
+                1,
+                1,
+                1
+            ]);
+            pbrSpecularGlossness.glossness = sg.glossnessFactor ?? 1;
+            pbrSpecularGlossness.diffuseMap = sg.diffuseTexture ? await this._loadTexture(gltf, sg.diffuseTexture, true) : null;
+            pbrSpecularGlossness.specularGlossnessMap = sg.specularGlossinessTexture ? await this._loadTexture(gltf, sg.specularGlossinessTexture, true) : null;
+        }
+        assetMaterial = pbrSpecularGlossness || pbrMetallicRoughness;
+        if (!assetMaterial || materialInfo?.extensions?.KHR_materials_unlit) {
+            if (materialInfo?.extensions?.KHR_materials_unlit) {
+                assetMaterial = {
+                    type: 'unlit',
+                    common: pbrCommon,
+                    diffuse: pbrMetallicRoughness?.diffuse ?? Vector4.one(),
+                    diffuseMap: pbrMetallicRoughness?.diffuseMap ?? null
+                };
+            } else {
+                assetMaterial = {
+                    type: 'pbrMetallicRoughness',
+                    common: pbrCommon,
+                    diffuse: Vector4.one(),
+                    metallic: 1,
+                    roughness: 1,
+                    diffuseMap: null,
+                    metallicMap: null,
+                    metallicIndex: 2,
+                    roughnessIndex: 1
+                };
+            }
+        }
+        if (assetMaterial.type !== 'unlit' && materialInfo?.extensions?.KHR_materials_ior) {
+            assetMaterial.ior = materialInfo.extensions.KHR_materials_ior.ior ?? 1.5;
+        }
+        if (assetMaterial.type === 'pbrMetallicRoughness') {
+            pbrMetallicRoughness = assetMaterial;
+            // KHR_materials_specular extension
+            const specularColorFactor = materialInfo?.extensions?.KHR_materials_specular?.specularColorFactor ?? [
+                1,
+                1,
+                1
+            ];
+            pbrMetallicRoughness.specularFactor = new Vector4(...specularColorFactor, materialInfo?.extensions?.KHR_materials_specular?.specularFactor ?? 1);
+            pbrMetallicRoughness.specularMap = materialInfo?.extensions?.KHR_materials_specular?.specularTexture ? await this._loadTexture(gltf, materialInfo.extensions.KHR_materials_specular.specularTexture, false) : null;
+            pbrMetallicRoughness.specularColorMap = materialInfo?.extensions?.KHR_materials_specular?.specularColorTexture ? await this._loadTexture(gltf, materialInfo.extensions.KHR_materials_specular.specularColorTexture, true) : null;
+            // KHR_materials_sheen
+            const sheen = materialInfo?.extensions?.KHR_materials_sheen;
+            if (sheen) {
+                pbrMetallicRoughness.sheen = {
+                    sheenColorFactor: new Vector3(sheen.sheenColorFactor ?? [
+                        0,
+                        0,
+                        0
+                    ]),
+                    sheenColorMap: sheen.sheenColorTexture ? await this._loadTexture(gltf, sheen.sheenColorTexture, true) : null,
+                    sheenRoughnessFactor: sheen.sheenRoughnessFactor ?? 0,
+                    sheenRoughnessMap: sheen.sheenRoughnessTexture ? await this._loadTexture(gltf, sheen.sheenRoughnessTexture, true) : null
+                };
+            }
+            // KHR_materials_clearcoat
+            const cc = materialInfo?.extensions?.KHR_materials_clearcoat;
+            if (cc) {
+                pbrMetallicRoughness.clearcoat = {
+                    clearCoatFactor: cc.clearcoatFactor ?? 0,
+                    clearCoatIntensityMap: cc.clearcoatTexture ? await this._loadTexture(gltf, cc.clearcoatTexture, false) : null,
+                    clearCoatRoughnessFactor: cc.clearcoatRoughnessFactor ?? 0,
+                    clearCoatRoughnessMap: cc.clearcoatRoughnessTexture ? await this._loadTexture(gltf, cc.clearcoatRoughnessTexture, false) : null,
+                    clearCoatNormalMap: cc.clearcoatNormalTexture ? await this._loadTexture(gltf, cc.clearcoatNormalTexture, false) : null
+                };
+            }
+        }
+        return await this._createMaterial(gltf._manager, assetMaterial);
+    }
+    /** @internal */ async _loadTexture(gltf, info, sRGB) {
+        const mt = {
+            texture: null,
+            sampler: null,
+            texCoord: info.texCoord ?? 0,
+            transform: null
+        };
+        const textureInfo = gltf.textures[info.index];
+        if (textureInfo) {
+            if (info.extensions?.KHR_texture_transform) {
+                const uvTransform = info.extensions.KHR_texture_transform;
+                if (uvTransform.texCoord !== undefined) {
+                    mt.texCoord = uvTransform.texCoord;
+                }
+                const rotation = uvTransform.rotation !== undefined ? Matrix4x4.rotationZ(-uvTransform.rotation) : Matrix4x4.identity();
+                const scale = uvTransform.scale !== undefined ? new Vector3(uvTransform.scale[0], uvTransform.scale[1], 1) : Vector3.one();
+                const translation = uvTransform.offset !== undefined ? new Vector3(uvTransform.offset[0], uvTransform.offset[1], 0) : Vector3.zero();
+                mt.transform = Matrix4x4.scaling(scale).multiplyLeft(rotation).translateLeft(translation);
+            }
+            let wrapS = 'repeat';
+            let wrapT = 'repeat';
+            let magFilter = 'linear';
+            let minFilter = 'linear';
+            let mipFilter = 'linear';
+            const samplerIndex = textureInfo.sampler;
+            const sampler = gltf.samplers && gltf.samplers[samplerIndex];
+            if (sampler) {
+                switch(sampler.wrapS){
+                    case 0x2901:
+                        wrapS = 'repeat';
+                        break;
+                    case 0x8370:
+                        wrapS = 'mirrored-repeat';
+                        break;
+                    case 0x812f:
+                        wrapS = 'clamp';
+                        break;
+                }
+                switch(sampler.wrapT){
+                    case 0x2901:
+                        wrapT = 'repeat';
+                        break;
+                    case 0x8370:
+                        wrapT = 'mirrored-repeat';
+                        break;
+                    case 0x812f:
+                        wrapT = 'clamp';
+                        break;
+                }
+                switch(sampler.magFilter){
+                    case 0x2600:
+                        magFilter = 'nearest';
+                        break;
+                    case 0x2601:
+                        magFilter = 'linear';
+                        break;
+                }
+                switch(sampler.minFilter){
+                    case 0x2600:
+                        minFilter = 'nearest';
+                        mipFilter = 'none';
+                        break;
+                    case 0x2601:
+                        minFilter = 'linear';
+                        mipFilter = 'none';
+                        break;
+                    case 0x2700:
+                        minFilter = 'nearest';
+                        mipFilter = 'nearest';
+                        break;
+                    case 0x2701:
+                        minFilter = 'linear';
+                        mipFilter = 'nearest';
+                        break;
+                    case 0x2702:
+                        minFilter = 'nearest';
+                        mipFilter = 'linear';
+                        break;
+                    case 0x2703:
+                        minFilter = 'linear';
+                        mipFilter = 'linear';
+                        break;
+                }
+            }
+            const imageIndex = textureInfo.source;
+            const hash = `${imageIndex}:${!!sRGB}:${wrapS}:${wrapT}:${minFilter}:${magFilter}:${mipFilter}`;
+            mt.texture = gltf._textureCache[hash];
+            if (!mt.texture) {
+                const image = gltf.images[imageIndex];
+                if (image) {
+                    if (image.uri) {
+                        const imageUrl = this._normalizeURI(gltf._baseURI, image.uri);
+                        mt.texture = await gltf._manager.fetchTexture(imageUrl, {
+                            linearColorSpace: !sRGB
+                        });
+                        mt.texture.name = imageUrl;
+                    } else if (typeof image.bufferView === 'number' && image.mimeType) {
+                        const bufferView = gltf.bufferViews && gltf.bufferViews[image.bufferView];
+                        if (bufferView) {
+                            const arrayBuffer = gltf._loadedBuffers && gltf._loadedBuffers[bufferView.buffer];
+                            if (arrayBuffer) {
+                                const view = new Uint8Array(arrayBuffer, bufferView.byteOffset || 0, bufferView.byteLength);
+                                const mimeType = image.mimeType;
+                                const blob = new Blob([
+                                    view
+                                ], {
+                                    type: mimeType
+                                });
+                                const sourceURI = URL.createObjectURL(blob);
+                                mt.texture = await gltf._manager.fetchTexture(sourceURI, {
+                                    mimeType,
+                                    linearColorSpace: !sRGB
+                                });
+                                URL.revokeObjectURL(sourceURI);
+                            }
+                        }
+                    }
+                }
+                if (mt.texture) {
+                    gltf._textureCache[hash] = mt.texture;
+                }
+            }
+            if (mt.texture) {
+                mt.sampler = Application.instance.device.createSampler({
+                    addressU: wrapS,
+                    addressV: wrapT,
+                    magFilter: magFilter,
+                    minFilter: minFilter,
+                    mipFilter: mipFilter
+                });
+            }
+        }
+        return mt;
+    }
+    /** @internal */ _primitiveType(type) {
+        switch(type){
+            case 0:
+                return 'point-list';
+            case 1:
+                return 'line-list';
+            /* FIXME:
+      case 2: // GL_LINE_LOOP
+        return PrimitiveType.LineLoop;
+      */ case 3:
+                return 'line-strip';
+            case 4:
+                return 'triangle-list';
+            case 5:
+                return 'triangle-strip';
+            case 6:
+                return 'triangle-fan';
+            default:
+                return null;
+        }
+    }
+    /** @internal */ _loadIndexBuffer(gltf, accessorIndex, primitive, meshData) {
+        this._setBuffer(gltf, accessorIndex, primitive, null, meshData);
+    }
+    /** @internal */ _loadVertexBuffer(gltf, attribName, accessorIndex, primitive, subMeshData) {
+        let semantic = null;
+        switch(attribName){
+            case 'POSITION':
+                semantic = 'position';
+                break;
+            case 'NORMAL':
+                semantic = 'normal';
+                break;
+            case 'TANGENT':
+                semantic = 'tangent';
+                break;
+            case 'TEXCOORD_0':
+                semantic = 'texCoord0';
+                break;
+            case 'TEXCOORD_1':
+                semantic = 'texCoord1';
+                break;
+            case 'TEXCOORD_2':
+                semantic = 'texCoord2';
+                break;
+            case 'TEXCOORD_3':
+                semantic = 'texCoord3';
+                break;
+            case 'TEXCOORD_4':
+                semantic = 'texCoord4';
+                break;
+            case 'TEXCOORD_5':
+                semantic = 'texCoord5';
+                break;
+            case 'TEXCOORD_6':
+                semantic = 'texCoord6';
+                break;
+            case 'TEXCOORD_7':
+                semantic = 'texCoord7';
+                break;
+            case 'COLOR_0':
+                semantic = 'diffuse';
+                break;
+            case 'JOINTS_0':
+                semantic = 'blendIndices';
+                break;
+            case 'WEIGHTS_0':
+                semantic = 'blendWeights';
+                break;
+            default:
+                return;
+        }
+        this._setBuffer(gltf, accessorIndex, primitive, semantic, subMeshData);
+    }
+    /** @internal */ _setBuffer(gltf, accessorIndex, primitive, semantic, subMeshData) {
+        const device = Application.instance.device;
+        const accessor = gltf._accessors[accessorIndex];
+        const componentCount = accessor.getComponentCount(accessor.type);
+        const normalized = !!accessor.normalized;
+        const hash = `${accessorIndex}:${!!semantic}:${Number(normalized)}`;
+        let buffer = gltf._bufferCache[hash];
+        if (!buffer) {
+            let data = accessor.getNormalizedDeinterlacedView(gltf);
+            if (semantic && !(data instanceof Float32Array)) {
+                const floatData = new Float32Array(data.length);
+                floatData.set(data);
+                data = floatData;
+            }
+            if (!semantic) {
+                if (!(data instanceof Uint8Array) && !(data instanceof Uint16Array) && !(data instanceof Uint32Array)) {
+                    console.error('Invalid index buffer component type');
+                    return;
+                }
+                if (data instanceof Uint32Array && !device.getDeviceCaps().miscCaps.support32BitIndex) {
+                    console.error('Device does not support 32bit vertex index');
+                    return;
+                }
+                if (data instanceof Uint8Array) {
+                    const uint16Data = new Uint16Array(data.length);
+                    uint16Data.set(data);
+                    data = uint16Data;
+                }
+            }
+            if (!semantic) {
+                buffer = device.createIndexBuffer(data, {
+                    managed: true
+                });
+            } else {
+                const attribFormat = device.getVertexAttribFormat(semantic, 'f32', componentCount);
+                buffer = device.createVertexBuffer(attribFormat, data);
+            }
+            gltf._bufferCache[hash] = buffer;
+        }
+        if (buffer) {
+            if (!semantic) {
+                primitive.setIndexBuffer(buffer);
+                primitive.indexCount = buffer.length;
+            } else {
+                primitive.setVertexBuffer(buffer);
+                if (semantic === 'position') {
+                    if (!primitive.getIndexBuffer()) {
+                        primitive.indexCount = Math.floor(buffer.byteLength / 12);
+                    }
+                    const data = accessor.getNormalizedDeinterlacedView(gltf);
+                    subMeshData.rawPositions = data;
+                    const min = accessor.min;
+                    const max = accessor.max;
+                    if (min && max) {
+                        primitive.setBoundingVolume(new BoundingBox(new Vector3(min), new Vector3(max)));
+                    } else {
+                        const bbox = new BoundingBox();
+                        bbox.beginExtend();
+                        for(let i = 0; i < data.length; i++){
+                            const v = new Vector3(data[i * componentCount], data[i * componentCount + 1], data[i * componentCount + 2]);
+                            bbox.extend(v);
+                        }
+                        if (bbox.isValid()) {
+                            primitive.setBoundingVolume(bbox);
+                        }
+                    }
+                } else if (semantic === 'blendIndices') {
+                    subMeshData.rawBlendIndices = accessor.getNormalizedDeinterlacedView(gltf);
+                } else if (semantic === 'blendWeights') {
+                    subMeshData.rawJointWeights = accessor.getNormalizedDeinterlacedView(gltf);
+                }
+            }
+        }
+        return buffer;
+    }
+    /** @internal */ isGLB(data) {
+        if (data.byteLength > 12) {
+            const p = new Uint32Array(data, 0, 3);
+            if (p[0] === 0x46546c67 && p[1] === 2 && p[2] === data.byteLength) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /** @internal */ getGLBChunkInfo(data, offset) {
+        const header = new Uint32Array(data, offset, 2);
+        const start = offset + 8;
+        const length = header[0];
+        const type = header[1];
+        return {
+            start,
+            length,
+            type
+        };
+    }
+    /** @internal */ getGLBChunkInfos(data) {
+        const infos = [];
+        let offset = 12;
+        while(offset < data.byteLength){
+            const info = this.getGLBChunkInfo(data, offset);
+            infos.push(info);
+            offset += info.length + 8;
+        }
+        return infos;
+    }
+}
+
+export { GLTFLoader };
+//# sourceMappingURL=gltf_loader.js.map