UNPKG

lingo3d

Version:

Lingo3D is a React/Vue 3d game development framework that ships with a complete visual editor

1,204 lines (1,203 loc) 121 kB
import { AnimationClip, Bone, Box3, BufferAttribute, BufferGeometry, ClampToEdgeWrapping, Color, DirectionalLight, DoubleSide, FileLoader, FrontSide, Group, ImageBitmapLoader, InstancedMesh, InterleavedBuffer, InterleavedBufferAttribute, Interpolant, InterpolateDiscrete, InterpolateLinear, Line, LineBasicMaterial, LineLoop, LineSegments, LinearFilter, LinearMipmapLinearFilter, LinearMipmapNearestFilter, Loader, LoaderUtils, Material, MathUtils, Matrix4, Mesh, MeshBasicMaterial, MeshPhysicalMaterial, MeshStandardMaterial, MirroredRepeatWrapping, NearestFilter, NearestMipmapLinearFilter, NearestMipmapNearestFilter, NumberKeyframeTrack, Object3D, OrthographicCamera, PerspectiveCamera, PointLight, Points, PointsMaterial, PropertyBinding, Quaternion, QuaternionKeyframeTrack, RepeatWrapping, Skeleton, SkinnedMesh, Sphere, SpotLight, Texture, TextureLoader, TriangleFanDrawMode, TriangleStripDrawMode, Vector2, Vector3, VectorKeyframeTrack, LinearEncoding } from "three"; import { toTrianglesDrawMode } from "three/examples/jsm/utils/BufferGeometryUtils.js"; import { decreaseLoadingAssetsCount, increaseLoadingAssetsCount } from "../../../../states/useLoadingAssetsCount"; let increased = false; const increaseOnce = () => { if (increased) return; increased = true; increaseLoadingAssetsCount(); }; let decreased = false; const decreaseOnce = () => { if (decreased) return; decreased = true; decreaseLoadingAssetsCount(); }; class GLTFLoader extends Loader { constructor(manager) { super(manager); this.dracoLoader = null; this.ktx2Loader = null; this.meshoptDecoder = null; this.pluginCallbacks = []; this.register(function (parser) { return new GLTFMaterialsClearcoatExtension(parser); }); this.register(function (parser) { return new GLTFTextureBasisUExtension(parser); }); this.register(function (parser) { return new GLTFTextureWebPExtension(parser); }); this.register(function (parser) { return new GLTFTextureAVIFExtension(parser); }); this.register(function (parser) { return new GLTFMaterialsSheenExtension(parser); }); this.register(function (parser) { return new GLTFMaterialsTransmissionExtension(parser); }); this.register(function (parser) { return new GLTFMaterialsVolumeExtension(parser); }); this.register(function (parser) { return new GLTFMaterialsIorExtension(parser); }); this.register(function (parser) { return new GLTFMaterialsEmissiveStrengthExtension(parser); }); this.register(function (parser) { return new GLTFMaterialsSpecularExtension(parser); }); this.register(function (parser) { return new GLTFMaterialsIridescenceExtension(parser); }); this.register(function (parser) { return new GLTFLightsExtension(parser); }); this.register(function (parser) { return new GLTFMeshoptCompression(parser); }); this.register(function (parser) { return new GLTFMeshGpuInstancing(parser); }); } load(url, onLoad, onProgress, onError) { const scope = this; let resourcePath; if (this.resourcePath !== "") { resourcePath = this.resourcePath; } else if (this.path !== "") { resourcePath = this.path; } else { resourcePath = LoaderUtils.extractUrlBase(url); } // Tells the LoadingManager to track an extra item, which resolves after // the model is fully loaded. This means the count of items loaded will // be incorrect, but ensures manager.onLoad() does not fire early. this.manager.itemStart(url); const _onError = function (e) { if (onError) { onError(e); } else { console.error(e); } scope.manager.itemError(url); scope.manager.itemEnd(url); }; const loader = new FileLoader(this.manager); loader.setPath(this.path); loader.setResponseType("arraybuffer"); loader.setRequestHeader(this.requestHeader); loader.setWithCredentials(this.withCredentials); loader.load(url, function (data) { try { scope.parse(data, resourcePath, function (gltf) { onLoad(gltf); scope.manager.itemEnd(url); }, _onError); } catch (e) { _onError(e); } }, onProgress, _onError); } setDRACOLoader(dracoLoader) { this.dracoLoader = dracoLoader; return this; } setDDSLoader() { throw new Error('GLTFLoader: "MSFT_texture_dds" no longer supported. Please update to "KHR_texture_basisu".'); } setKTX2Loader(ktx2Loader) { this.ktx2Loader = ktx2Loader; return this; } setMeshoptDecoder(meshoptDecoder) { this.meshoptDecoder = meshoptDecoder; return this; } register(callback) { if (this.pluginCallbacks.indexOf(callback) === -1) { this.pluginCallbacks.push(callback); } return this; } unregister(callback) { if (this.pluginCallbacks.indexOf(callback) !== -1) { this.pluginCallbacks.splice(this.pluginCallbacks.indexOf(callback), 1); } return this; } parse(data, path, onLoad, onError) { let json; const extensions = {}; const plugins = {}; const textDecoder = new TextDecoder(); if (typeof data === "string") { json = JSON.parse(data); } else if (data instanceof ArrayBuffer) { const magic = textDecoder.decode(new Uint8Array(data, 0, 4)); if (magic === BINARY_EXTENSION_HEADER_MAGIC) { try { extensions[EXTENSIONS.KHR_BINARY_GLTF] = new GLTFBinaryExtension(data); } catch (error) { if (onError) onError(error); return; } json = JSON.parse(extensions[EXTENSIONS.KHR_BINARY_GLTF].content); } else { json = JSON.parse(textDecoder.decode(data)); } } else { json = data; } if (json.asset === undefined || json.asset.version[0] < 2) { if (onError) onError(new Error("GLTFLoader: Unsupported asset. glTF versions >=2.0 are supported.")); return; } const parser = new GLTFParser(json, { path: path || this.resourcePath || "", crossOrigin: this.crossOrigin, requestHeader: this.requestHeader, manager: this.manager, ktx2Loader: this.ktx2Loader, meshoptDecoder: this.meshoptDecoder }); parser.fileLoader.setRequestHeader(this.requestHeader); for (let i = 0; i < this.pluginCallbacks.length; i++) { const plugin = this.pluginCallbacks[i](parser); plugins[plugin.name] = plugin; // Workaround to avoid determining as unknown extension // in addUnknownExtensionsToUserData(). // Remove this workaround if we move all the existing // extension handlers to plugin system extensions[plugin.name] = true; } if (json.extensionsUsed) { for (let i = 0; i < json.extensionsUsed.length; ++i) { const extensionName = json.extensionsUsed[i]; const extensionsRequired = json.extensionsRequired || []; switch (extensionName) { case EXTENSIONS.KHR_MATERIALS_UNLIT: extensions[extensionName] = new GLTFMaterialsUnlitExtension(); break; case EXTENSIONS.KHR_DRACO_MESH_COMPRESSION: extensions[extensionName] = new GLTFDracoMeshCompressionExtension(json, this.dracoLoader); break; case EXTENSIONS.KHR_TEXTURE_TRANSFORM: extensions[extensionName] = new GLTFTextureTransformExtension(); break; case EXTENSIONS.KHR_MESH_QUANTIZATION: extensions[extensionName] = new GLTFMeshQuantizationExtension(); break; default: if (extensionsRequired.indexOf(extensionName) >= 0 && plugins[extensionName] === undefined) { console.warn('GLTFLoader: Unknown extension "' + extensionName + '".'); } } } } parser.setExtensions(extensions); parser.setPlugins(plugins); parser.parse(onLoad, onError); } parseAsync(data, path) { const scope = this; return new Promise(function (resolve, reject) { scope.parse(data, path, resolve, reject); }); } } /* GLTFREGISTRY */ function GLTFRegistry() { let objects = {}; return { get: function (key) { return objects[key]; }, add: function (key, object) { objects[key] = object; }, remove: function (key) { delete objects[key]; }, removeAll: function () { objects = {}; } }; } /*********************************/ /********** EXTENSIONS ***********/ /*********************************/ const EXTENSIONS = { KHR_BINARY_GLTF: "KHR_binary_glTF", KHR_DRACO_MESH_COMPRESSION: "KHR_draco_mesh_compression", KHR_LIGHTS_PUNCTUAL: "KHR_lights_punctual", KHR_MATERIALS_CLEARCOAT: "KHR_materials_clearcoat", KHR_MATERIALS_IOR: "KHR_materials_ior", KHR_MATERIALS_SHEEN: "KHR_materials_sheen", KHR_MATERIALS_SPECULAR: "KHR_materials_specular", KHR_MATERIALS_TRANSMISSION: "KHR_materials_transmission", KHR_MATERIALS_IRIDESCENCE: "KHR_materials_iridescence", KHR_MATERIALS_UNLIT: "KHR_materials_unlit", KHR_MATERIALS_VOLUME: "KHR_materials_volume", KHR_TEXTURE_BASISU: "KHR_texture_basisu", KHR_TEXTURE_TRANSFORM: "KHR_texture_transform", KHR_MESH_QUANTIZATION: "KHR_mesh_quantization", KHR_MATERIALS_EMISSIVE_STRENGTH: "KHR_materials_emissive_strength", EXT_TEXTURE_WEBP: "EXT_texture_webp", EXT_TEXTURE_AVIF: "EXT_texture_avif", EXT_MESHOPT_COMPRESSION: "EXT_meshopt_compression", EXT_MESH_GPU_INSTANCING: "EXT_mesh_gpu_instancing" }; /** * Punctual Lights Extension * * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_lights_punctual */ class GLTFLightsExtension { constructor(parser) { this.parser = parser; this.name = EXTENSIONS.KHR_LIGHTS_PUNCTUAL; // Object3D instance caches this.cache = { refs: {}, uses: {} }; } _markDefs() { const parser = this.parser; const nodeDefs = this.parser.json.nodes || []; for (let nodeIndex = 0, nodeLength = nodeDefs.length; nodeIndex < nodeLength; nodeIndex++) { const nodeDef = nodeDefs[nodeIndex]; if (nodeDef.extensions && nodeDef.extensions[this.name] && nodeDef.extensions[this.name].light !== undefined) { parser._addNodeRef(this.cache, nodeDef.extensions[this.name].light); } } } _loadLight(lightIndex) { const parser = this.parser; const cacheKey = "light:" + lightIndex; let dependency = parser.cache.get(cacheKey); if (dependency) return dependency; const json = parser.json; const extensions = (json.extensions && json.extensions[this.name]) || {}; const lightDefs = extensions.lights || []; const lightDef = lightDefs[lightIndex]; let lightNode; const color = new Color(0xffffff); if (lightDef.color !== undefined) color.fromArray(lightDef.color); const range = lightDef.range !== undefined ? lightDef.range : 0; switch (lightDef.type) { case "directional": lightNode = new DirectionalLight(color); lightNode.target.position.set(0, 0, -1); lightNode.add(lightNode.target); break; case "point": lightNode = new PointLight(color); lightNode.distance = range; break; case "spot": lightNode = new SpotLight(color); lightNode.distance = range; // Handle spotlight properties. lightDef.spot = lightDef.spot || {}; lightDef.spot.innerConeAngle = lightDef.spot.innerConeAngle !== undefined ? lightDef.spot.innerConeAngle : 0; lightDef.spot.outerConeAngle = lightDef.spot.outerConeAngle !== undefined ? lightDef.spot.outerConeAngle : Math.PI / 4.0; lightNode.angle = lightDef.spot.outerConeAngle; lightNode.penumbra = 1.0 - lightDef.spot.innerConeAngle / lightDef.spot.outerConeAngle; lightNode.target.position.set(0, 0, -1); lightNode.add(lightNode.target); break; default: throw new Error("GLTFLoader: Unexpected light type: " + lightDef.type); } // Some lights (e.g. spot) default to a position other than the origin. Reset the position // here, because node-level parsing will only override position if explicitly specified. lightNode.position.set(0, 0, 0); lightNode.decay = 2; assignExtrasToUserData(lightNode, lightDef); if (lightDef.intensity !== undefined) lightNode.intensity = lightDef.intensity; lightNode.name = parser.createUniqueName(lightDef.name || "light_" + lightIndex); dependency = Promise.resolve(lightNode); parser.cache.add(cacheKey, dependency); return dependency; } getDependency(type, index) { if (type !== "light") return; return this._loadLight(index); } createNodeAttachment(nodeIndex) { const self = this; const parser = this.parser; const json = parser.json; const nodeDef = json.nodes[nodeIndex]; const lightDef = (nodeDef.extensions && nodeDef.extensions[this.name]) || {}; const lightIndex = lightDef.light; if (lightIndex === undefined) return null; return this._loadLight(lightIndex).then(function (light) { return parser._getNodeRef(self.cache, lightIndex, light); }); } } /** * Unlit Materials Extension * * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_unlit */ class GLTFMaterialsUnlitExtension { constructor() { this.name = EXTENSIONS.KHR_MATERIALS_UNLIT; } getMaterialType() { return MeshStandardMaterial; } extendParams(materialParams, materialDef, parser) { const pending = []; materialParams.color = new Color(1.0, 1.0, 1.0); materialParams.opacity = 1.0; const metallicRoughness = materialDef.pbrMetallicRoughness; if (metallicRoughness) { if (Array.isArray(metallicRoughness.baseColorFactor)) { const array = metallicRoughness.baseColorFactor; materialParams.color.fromArray(array); materialParams.opacity = array[3]; } if (metallicRoughness.baseColorTexture !== undefined) { pending.push(parser.assignTexture(materialParams, "map", metallicRoughness.baseColorTexture, LinearEncoding)); } } return Promise.all(pending); } } /** * Materials Emissive Strength Extension * * Specification: https://github.com/KhronosGroup/glTF/blob/5768b3ce0ef32bc39cdf1bef10b948586635ead3/extensions/2.0/Khronos/KHR_materials_emissive_strength/README.md */ class GLTFMaterialsEmissiveStrengthExtension { constructor(parser) { this.parser = parser; this.name = EXTENSIONS.KHR_MATERIALS_EMISSIVE_STRENGTH; } extendMaterialParams(materialIndex, materialParams) { const parser = this.parser; const materialDef = parser.json.materials[materialIndex]; if (!materialDef.extensions || !materialDef.extensions[this.name]) { return Promise.resolve(); } const emissiveStrength = materialDef.extensions[this.name].emissiveStrength; if (emissiveStrength !== undefined) { materialParams.emissiveIntensity = emissiveStrength; } return Promise.resolve(); } } /** * Clearcoat Materials Extension * * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_clearcoat */ class GLTFMaterialsClearcoatExtension { constructor(parser) { this.parser = parser; this.name = EXTENSIONS.KHR_MATERIALS_CLEARCOAT; } getMaterialType(materialIndex) { const parser = this.parser; const materialDef = parser.json.materials[materialIndex]; if (!materialDef.extensions || !materialDef.extensions[this.name]) return null; return MeshPhysicalMaterial; } extendMaterialParams(materialIndex, materialParams) { const parser = this.parser; const materialDef = parser.json.materials[materialIndex]; if (!materialDef.extensions || !materialDef.extensions[this.name]) { return Promise.resolve(); } const pending = []; const extension = materialDef.extensions[this.name]; if (extension.clearcoatFactor !== undefined) { materialParams.clearcoat = extension.clearcoatFactor; } if (extension.clearcoatTexture !== undefined) { pending.push(parser.assignTexture(materialParams, "clearcoatMap", extension.clearcoatTexture)); } if (extension.clearcoatRoughnessFactor !== undefined) { materialParams.clearcoatRoughness = extension.clearcoatRoughnessFactor; } if (extension.clearcoatRoughnessTexture !== undefined) { pending.push(parser.assignTexture(materialParams, "clearcoatRoughnessMap", extension.clearcoatRoughnessTexture)); } if (extension.clearcoatNormalTexture !== undefined) { pending.push(parser.assignTexture(materialParams, "clearcoatNormalMap", extension.clearcoatNormalTexture)); if (extension.clearcoatNormalTexture.scale !== undefined) { const scale = extension.clearcoatNormalTexture.scale; materialParams.clearcoatNormalScale = new Vector2(scale, scale); } } return Promise.all(pending); } } /** * Iridescence Materials Extension * * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_iridescence */ class GLTFMaterialsIridescenceExtension { constructor(parser) { this.parser = parser; this.name = EXTENSIONS.KHR_MATERIALS_IRIDESCENCE; } getMaterialType(materialIndex) { const parser = this.parser; const materialDef = parser.json.materials[materialIndex]; if (!materialDef.extensions || !materialDef.extensions[this.name]) return null; return MeshPhysicalMaterial; } extendMaterialParams(materialIndex, materialParams) { const parser = this.parser; const materialDef = parser.json.materials[materialIndex]; if (!materialDef.extensions || !materialDef.extensions[this.name]) { return Promise.resolve(); } const pending = []; const extension = materialDef.extensions[this.name]; if (extension.iridescenceFactor !== undefined) { materialParams.iridescence = extension.iridescenceFactor; } if (extension.iridescenceTexture !== undefined) { pending.push(parser.assignTexture(materialParams, "iridescenceMap", extension.iridescenceTexture)); } if (extension.iridescenceIor !== undefined) { materialParams.iridescenceIOR = extension.iridescenceIor; } if (materialParams.iridescenceThicknessRange === undefined) { materialParams.iridescenceThicknessRange = [100, 400]; } if (extension.iridescenceThicknessMinimum !== undefined) { materialParams.iridescenceThicknessRange[0] = extension.iridescenceThicknessMinimum; } if (extension.iridescenceThicknessMaximum !== undefined) { materialParams.iridescenceThicknessRange[1] = extension.iridescenceThicknessMaximum; } if (extension.iridescenceThicknessTexture !== undefined) { pending.push(parser.assignTexture(materialParams, "iridescenceThicknessMap", extension.iridescenceThicknessTexture)); } return Promise.all(pending); } } /** * Sheen Materials Extension * * Specification: https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_materials_sheen */ class GLTFMaterialsSheenExtension { constructor(parser) { this.parser = parser; this.name = EXTENSIONS.KHR_MATERIALS_SHEEN; } getMaterialType(materialIndex) { const parser = this.parser; const materialDef = parser.json.materials[materialIndex]; if (!materialDef.extensions || !materialDef.extensions[this.name]) return null; return MeshPhysicalMaterial; } extendMaterialParams(materialIndex, materialParams) { const parser = this.parser; const materialDef = parser.json.materials[materialIndex]; if (!materialDef.extensions || !materialDef.extensions[this.name]) { return Promise.resolve(); } const pending = []; materialParams.sheenColor = new Color(0, 0, 0); materialParams.sheenRoughness = 0; materialParams.sheen = 1; const extension = materialDef.extensions[this.name]; if (extension.sheenColorFactor !== undefined) { materialParams.sheenColor.fromArray(extension.sheenColorFactor); } if (extension.sheenRoughnessFactor !== undefined) { materialParams.sheenRoughness = extension.sheenRoughnessFactor; } if (extension.sheenColorTexture !== undefined) { pending.push(parser.assignTexture(materialParams, "sheenColorMap", extension.sheenColorTexture, LinearEncoding)); } if (extension.sheenRoughnessTexture !== undefined) { pending.push(parser.assignTexture(materialParams, "sheenRoughnessMap", extension.sheenRoughnessTexture)); } return Promise.all(pending); } } /** * Transmission Materials Extension * * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_transmission * Draft: https://github.com/KhronosGroup/glTF/pull/1698 */ class GLTFMaterialsTransmissionExtension { constructor(parser) { this.parser = parser; this.name = EXTENSIONS.KHR_MATERIALS_TRANSMISSION; } getMaterialType(materialIndex) { const parser = this.parser; const materialDef = parser.json.materials[materialIndex]; if (!materialDef.extensions || !materialDef.extensions[this.name]) return null; return MeshPhysicalMaterial; } extendMaterialParams(materialIndex, materialParams) { const parser = this.parser; const materialDef = parser.json.materials[materialIndex]; if (!materialDef.extensions || !materialDef.extensions[this.name]) { return Promise.resolve(); } const pending = []; const extension = materialDef.extensions[this.name]; if (extension.transmissionFactor !== undefined) { materialParams.transmission = extension.transmissionFactor; } if (extension.transmissionTexture !== undefined) { pending.push(parser.assignTexture(materialParams, "transmissionMap", extension.transmissionTexture)); } return Promise.all(pending); } } /** * Materials Volume Extension * * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_volume */ class GLTFMaterialsVolumeExtension { constructor(parser) { this.parser = parser; this.name = EXTENSIONS.KHR_MATERIALS_VOLUME; } getMaterialType(materialIndex) { const parser = this.parser; const materialDef = parser.json.materials[materialIndex]; if (!materialDef.extensions || !materialDef.extensions[this.name]) return null; return MeshPhysicalMaterial; } extendMaterialParams(materialIndex, materialParams) { const parser = this.parser; const materialDef = parser.json.materials[materialIndex]; if (!materialDef.extensions || !materialDef.extensions[this.name]) { return Promise.resolve(); } const pending = []; const extension = materialDef.extensions[this.name]; materialParams.thickness = extension.thicknessFactor !== undefined ? extension.thicknessFactor : 0; if (extension.thicknessTexture !== undefined) { pending.push(parser.assignTexture(materialParams, "thicknessMap", extension.thicknessTexture)); } materialParams.attenuationDistance = extension.attenuationDistance || Infinity; const colorArray = extension.attenuationColor || [1, 1, 1]; materialParams.attenuationColor = new Color(colorArray[0], colorArray[1], colorArray[2]); return Promise.all(pending); } } /** * Materials ior Extension * * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_ior */ class GLTFMaterialsIorExtension { constructor(parser) { this.parser = parser; this.name = EXTENSIONS.KHR_MATERIALS_IOR; } getMaterialType(materialIndex) { const parser = this.parser; const materialDef = parser.json.materials[materialIndex]; if (!materialDef.extensions || !materialDef.extensions[this.name]) return null; return MeshPhysicalMaterial; } extendMaterialParams(materialIndex, materialParams) { const parser = this.parser; const materialDef = parser.json.materials[materialIndex]; if (!materialDef.extensions || !materialDef.extensions[this.name]) { return Promise.resolve(); } const extension = materialDef.extensions[this.name]; materialParams.ior = extension.ior !== undefined ? extension.ior : 1.5; return Promise.resolve(); } } /** * Materials specular Extension * * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_specular */ class GLTFMaterialsSpecularExtension { constructor(parser) { this.parser = parser; this.name = EXTENSIONS.KHR_MATERIALS_SPECULAR; } getMaterialType(materialIndex) { const parser = this.parser; const materialDef = parser.json.materials[materialIndex]; if (!materialDef.extensions || !materialDef.extensions[this.name]) return null; return MeshPhysicalMaterial; } extendMaterialParams(materialIndex, materialParams) { const parser = this.parser; const materialDef = parser.json.materials[materialIndex]; if (!materialDef.extensions || !materialDef.extensions[this.name]) { return Promise.resolve(); } const pending = []; const extension = materialDef.extensions[this.name]; materialParams.specularIntensity = extension.specularFactor !== undefined ? extension.specularFactor : 1.0; if (extension.specularTexture !== undefined) { pending.push(parser.assignTexture(materialParams, "specularIntensityMap", extension.specularTexture)); } const colorArray = extension.specularColorFactor || [1, 1, 1]; materialParams.specularColor = new Color(colorArray[0], colorArray[1], colorArray[2]); if (extension.specularColorTexture !== undefined) { pending.push(parser.assignTexture(materialParams, "specularColorMap", extension.specularColorTexture, LinearEncoding)); } return Promise.all(pending); } } /** * BasisU Texture Extension * * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_texture_basisu */ class GLTFTextureBasisUExtension { constructor(parser) { this.parser = parser; this.name = EXTENSIONS.KHR_TEXTURE_BASISU; } loadTexture(textureIndex) { const parser = this.parser; const json = parser.json; const textureDef = json.textures[textureIndex]; if (!textureDef.extensions || !textureDef.extensions[this.name]) { return null; } const extension = textureDef.extensions[this.name]; const loader = parser.options.ktx2Loader; if (!loader) { if (json.extensionsRequired && json.extensionsRequired.indexOf(this.name) >= 0) { throw new Error("GLTFLoader: setKTX2Loader must be called before loading KTX2 textures"); } else { // Assumes that the extension is optional and that a fallback texture is present return null; } } return parser.loadTextureImage(textureIndex, extension.source, loader); } } /** * WebP Texture Extension * * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Vendor/EXT_texture_webp */ class GLTFTextureWebPExtension { constructor(parser) { this.parser = parser; this.name = EXTENSIONS.EXT_TEXTURE_WEBP; this.isSupported = null; } loadTexture(textureIndex) { const name = this.name; const parser = this.parser; const json = parser.json; const textureDef = json.textures[textureIndex]; if (!textureDef.extensions || !textureDef.extensions[name]) { return null; } const extension = textureDef.extensions[name]; const source = json.images[extension.source]; let loader = parser.textureLoader; if (source.uri) { const handler = parser.options.manager.getHandler(source.uri); if (handler !== null) loader = handler; } return this.detectSupport().then(function (isSupported) { if (isSupported) return parser.loadTextureImage(textureIndex, extension.source, loader); if (json.extensionsRequired && json.extensionsRequired.indexOf(name) >= 0) { throw new Error("GLTFLoader: WebP required by asset but unsupported."); } // Fall back to PNG or JPEG. return parser.loadTexture(textureIndex); }); } detectSupport() { if (!this.isSupported) { this.isSupported = new Promise(function (resolve) { const image = new Image(); // Lossy test image. Support for lossy images doesn't guarantee support for all // WebP images, unfortunately. image.src = "data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA"; image.onload = image.onerror = function () { resolve(image.height === 1); }; }); } return this.isSupported; } } /** * AVIF Texture Extension * * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Vendor/EXT_texture_avif */ class GLTFTextureAVIFExtension { constructor(parser) { this.parser = parser; this.name = EXTENSIONS.EXT_TEXTURE_AVIF; this.isSupported = null; } loadTexture(textureIndex) { const name = this.name; const parser = this.parser; const json = parser.json; const textureDef = json.textures[textureIndex]; if (!textureDef.extensions || !textureDef.extensions[name]) { return null; } const extension = textureDef.extensions[name]; const source = json.images[extension.source]; let loader = parser.textureLoader; if (source.uri) { const handler = parser.options.manager.getHandler(source.uri); if (handler !== null) loader = handler; } return this.detectSupport().then(function (isSupported) { if (isSupported) return parser.loadTextureImage(textureIndex, extension.source, loader); if (json.extensionsRequired && json.extensionsRequired.indexOf(name) >= 0) { throw new Error("GLTFLoader: AVIF required by asset but unsupported."); } // Fall back to PNG or JPEG. return parser.loadTexture(textureIndex); }); } detectSupport() { if (!this.isSupported) { this.isSupported = new Promise(function (resolve) { const image = new Image(); // Lossy test image. image.src = "data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAABcAAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAEAAAABAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQAMAAAAABNjb2xybmNseAACAAIABoAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAAB9tZGF0EgAKCBgABogQEDQgMgkQAAAAB8dSLfI="; image.onload = image.onerror = function () { resolve(image.height === 1); }; }); } return this.isSupported; } } /** * meshopt BufferView Compression Extension * * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Vendor/EXT_meshopt_compression */ class GLTFMeshoptCompression { constructor(parser) { this.name = EXTENSIONS.EXT_MESHOPT_COMPRESSION; this.parser = parser; } loadBufferView(index) { const json = this.parser.json; const bufferView = json.bufferViews[index]; if (bufferView.extensions && bufferView.extensions[this.name]) { const extensionDef = bufferView.extensions[this.name]; const buffer = this.parser.getDependency("buffer", extensionDef.buffer); const decoder = this.parser.options.meshoptDecoder; if (!decoder || !decoder.supported) { if (json.extensionsRequired && json.extensionsRequired.indexOf(this.name) >= 0) { throw new Error("GLTFLoader: setMeshoptDecoder must be called before loading compressed files"); } else { // Assumes that the extension is optional and that fallback buffer data is present return null; } } return buffer.then(function (res) { const byteOffset = extensionDef.byteOffset || 0; const byteLength = extensionDef.byteLength || 0; const count = extensionDef.count; const stride = extensionDef.byteStride; const source = new Uint8Array(res, byteOffset, byteLength); if (decoder.decodeGltfBufferAsync) { return decoder .decodeGltfBufferAsync(count, stride, source, extensionDef.mode, extensionDef.filter) .then(function (res) { return res.buffer; }); } else { // Support for MeshoptDecoder 0.18 or earlier, without decodeGltfBufferAsync return decoder.ready.then(function () { const result = new ArrayBuffer(count * stride); decoder.decodeGltfBuffer(new Uint8Array(result), count, stride, source, extensionDef.mode, extensionDef.filter); return result; }); } }); } else { return null; } } } /** * GPU Instancing Extension * * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Vendor/EXT_mesh_gpu_instancing * */ class GLTFMeshGpuInstancing { constructor(parser) { this.name = EXTENSIONS.EXT_MESH_GPU_INSTANCING; this.parser = parser; } createNodeMesh(nodeIndex) { const json = this.parser.json; const nodeDef = json.nodes[nodeIndex]; if (!nodeDef.extensions || !nodeDef.extensions[this.name] || nodeDef.mesh === undefined) { return null; } const meshDef = json.meshes[nodeDef.mesh]; // No Points or Lines + Instancing support yet for (const primitive of meshDef.primitives) { if (primitive.mode !== WEBGL_CONSTANTS.TRIANGLES && primitive.mode !== WEBGL_CONSTANTS.TRIANGLE_STRIP && primitive.mode !== WEBGL_CONSTANTS.TRIANGLE_FAN && primitive.mode !== undefined) { return null; } } const extensionDef = nodeDef.extensions[this.name]; const attributesDef = extensionDef.attributes; // @TODO: Can we support InstancedMesh + SkinnedMesh? const pending = []; const attributes = {}; for (const key in attributesDef) { pending.push(this.parser .getDependency("accessor", attributesDef[key]) .then((accessor) => { attributes[key] = accessor; return attributes[key]; })); } if (pending.length < 1) { return null; } pending.push(this.parser.createNodeMesh(nodeIndex)); return Promise.all(pending).then((results) => { const nodeObject = results.pop(); const meshes = nodeObject.isGroup ? nodeObject.children : [nodeObject]; const count = results[0].count; // All attribute counts should be same const instancedMeshes = []; for (const mesh of meshes) { // Temporal variables const m = new Matrix4(); const p = new Vector3(); const q = new Quaternion(); const s = new Vector3(1, 1, 1); const instancedMesh = new InstancedMesh(mesh.geometry, mesh.material, count); for (let i = 0; i < count; i++) { if (attributes.TRANSLATION) { p.fromBufferAttribute(attributes.TRANSLATION, i); } if (attributes.ROTATION) { q.fromBufferAttribute(attributes.ROTATION, i); } if (attributes.SCALE) { s.fromBufferAttribute(attributes.SCALE, i); } instancedMesh.setMatrixAt(i, m.compose(p, q, s)); } // Add instance attributes to the geometry, excluding TRS. for (const attributeName in attributes) { if (attributeName !== "TRANSLATION" && attributeName !== "ROTATION" && attributeName !== "SCALE") { mesh.geometry.setAttribute(attributeName, attributes[attributeName]); } } // Just in case Object3D.prototype.copy.call(instancedMesh, mesh); // https://github.com/mrdoob/three.js/issues/18334 instancedMesh.frustumCulled = false; this.parser.assignFinalMaterial(instancedMesh); instancedMeshes.push(instancedMesh); } if (nodeObject.isGroup) { nodeObject.clear(); nodeObject.add(...instancedMeshes); return nodeObject; } return instancedMeshes[0]; }); } } /* BINARY EXTENSION */ const BINARY_EXTENSION_HEADER_MAGIC = "glTF"; const BINARY_EXTENSION_HEADER_LENGTH = 12; const BINARY_EXTENSION_CHUNK_TYPES = { JSON: 0x4e4f534a, BIN: 0x004e4942 }; class GLTFBinaryExtension { constructor(data) { this.name = EXTENSIONS.KHR_BINARY_GLTF; this.content = null; this.body = null; const headerView = new DataView(data, 0, BINARY_EXTENSION_HEADER_LENGTH); const textDecoder = new TextDecoder(); this.header = { magic: textDecoder.decode(new Uint8Array(data.slice(0, 4))), version: headerView.getUint32(4, true), length: headerView.getUint32(8, true) }; if (this.header.magic !== BINARY_EXTENSION_HEADER_MAGIC) { throw new Error("GLTFLoader: Unsupported glTF-Binary header."); } else if (this.header.version < 2.0) { throw new Error("GLTFLoader: Legacy binary file detected."); } const chunkContentsLength = this.header.length - BINARY_EXTENSION_HEADER_LENGTH; const chunkView = new DataView(data, BINARY_EXTENSION_HEADER_LENGTH); let chunkIndex = 0; while (chunkIndex < chunkContentsLength) { const chunkLength = chunkView.getUint32(chunkIndex, true); chunkIndex += 4; const chunkType = chunkView.getUint32(chunkIndex, true); chunkIndex += 4; if (chunkType === BINARY_EXTENSION_CHUNK_TYPES.JSON) { const contentArray = new Uint8Array(data, BINARY_EXTENSION_HEADER_LENGTH + chunkIndex, chunkLength); this.content = textDecoder.decode(contentArray); } else if (chunkType === BINARY_EXTENSION_CHUNK_TYPES.BIN) { const byteOffset = BINARY_EXTENSION_HEADER_LENGTH + chunkIndex; this.body = data.slice(byteOffset, byteOffset + chunkLength); } // Clients must ignore chunks with unknown types. chunkIndex += chunkLength; } if (this.content === null) { throw new Error("GLTFLoader: JSON content not found."); } } } /** * DRACO Mesh Compression Extension * * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_draco_mesh_compression */ class GLTFDracoMeshCompressionExtension { constructor(json, dracoLoader) { if (!dracoLoader) { throw new Error("GLTFLoader: No DRACOLoader instance provided."); } this.name = EXTENSIONS.KHR_DRACO_MESH_COMPRESSION; this.json = json; this.dracoLoader = dracoLoader; this.dracoLoader.preload(); increaseOnce(); } decodePrimitive(primitive, parser) { const json = this.json; const dracoLoader = this.dracoLoader; const bufferViewIndex = primitive.extensions[this.name].bufferView; const gltfAttributeMap = primitive.extensions[this.name].attributes; const threeAttributeMap = {}; const attributeNormalizedMap = {}; const attributeTypeMap = {}; for (const attributeName in gltfAttributeMap) { const threeAttributeName = ATTRIBUTES[attributeName] || attributeName.toLowerCase(); threeAttributeMap[threeAttributeName] = gltfAttributeMap[attributeName]; } for (const attributeName in primitive.attributes) { const threeAttributeName = ATTRIBUTES[attributeName] || attributeName.toLowerCase(); if (gltfAttributeMap[attributeName] !== undefined) { const accessorDef = json.accessors[primitive.attributes[attributeName]]; const componentType = WEBGL_COMPONENT_TYPES[accessorDef.componentType]; attributeTypeMap[threeAttributeName] = componentType.name; attributeNormalizedMap[threeAttributeName] = accessorDef.normalized === true; } } return parser .getDependency("bufferView", bufferViewIndex) .then(function (bufferView) { return new Promise(function (resolve) { dracoLoader.decodeDracoFile(bufferView, function (geometry) { for (const attributeName in geometry.attributes) { const attribute = geometry.attributes[attributeName]; const normalized = attributeNormalizedMap[attributeName]; if (normalized !== undefined) attribute.normalized = normalized; } decreaseOnce(); resolve(geometry); }, threeAttributeMap, attributeTypeMap); }); }); } } /** * Texture Transform Extension * * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_texture_transform */ class GLTFTextureTransformExtension { constructor() { this.name = EXTENSIONS.KHR_TEXTURE_TRANSFORM; } extendTexture(texture, transform) { if (transform.texCoord !== undefined) { console.warn('GLTFLoader: Custom UV sets in "' + this.name + '" extension not yet supported.'); } if (transform.offset === undefined && transform.rotation === undefined && transform.scale === undefined) { // See https://github.com/mrdoob/three.js/issues/21819. return texture; } texture = texture.clone(); if (transform.offset !== undefined) { texture.offset.fromArray(transform.offset); } if (transform.rotation !== undefined) { texture.rotation = transform.rotation; } if (transform.scale !== undefined) { texture.repeat.fromArray(transform.scale); } texture.needsUpdate = true; return texture; } } /** * Mesh Quantization Extension * * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_mesh_quantization */ class GLTFMeshQuantizationExtension { constructor() { this.name = EXTENSIONS.KHR_MESH_QUANTIZATION; } } /*********************************/ /********** INTERPOLATION ********/ /*********************************/ // Spline Interpolation // Specification: https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md#appendix-c-spline-interpolation class GLTFCubicSplineInterpolant extends Interpolant { constructor(parameterPositions, sampleValues, sampleSize, resultBuffer) { super(parameterPositions, sampleValues, sampleSize, resultBuffer); } copySampleValue_(index) { // Copies a sample value to the result buffer. See description of glTF // CUBICSPLINE values layout in interpolate_() function below. const result = this.resultBuffer, values = this.sampleValues, valueSize = this.valueSize, offset = index * valueSize * 3 + valueSize; for (let i = 0; i !== valueSize; i++) { result[i] = values[offset + i]; } return result; } interpolate_(i1, t0, t, t1) { const result = this.resultBuffer; const values = this.sampleValues; const stride = this.valueSize; const stride2 = stride * 2; const stride3 = stride * 3; const td = t1 - t0; const p = (t - t0) / td; const pp = p * p; const ppp = pp * p; const offset1 = i1 * stride3; const offset0 = offset1 - stride3; const s2 = -2 * ppp + 3 * pp; const s3 = ppp - pp; const s0 = 1 - s2; const s1 = s3 - pp + p; // Layout of keyframe output values for CUBICSPLINE animations: // [ inTangent_1, splineVertex_1, outTangent_1, inTangent_2, splineVertex_2, ... ] for (let i = 0; i !== stride; i++) { const p0 = values[offset0 + i + stride]; // splineVertex_k const m0 = values[offset0 + i + stride2] * td; // outTangent_k * (t_k+1 - t_k) const p1 = values[offset1 + i + stride]; // splineVertex_k+1 const m1 = values[offset1 + i] * td; // inTangent_k+1 * (t_k+1 - t_k) result[i] = s0 * p0 + s1 * m0 + s2 * p1 + s3 * m1; } return result; } } const _q = new Quaternion(); class GLTFCubicSplineQuaternionInterpolant extends GLTFCubicSplineInterpolant { interpolate_(i1, t0, t, t1) { const result = super.interpolate_(i1, t0, t, t1); _q.fromArray(result).normalize().toArray(result); return result;