@needle-tools/gltf-progressive 3.4.0-next.dbcee85 → 4.0.0-alpha

package/lib/lods.promise.d.ts

@@ -1,68 +0,0 @@
-type PromiseType = "texture" | "mesh";
-export type PromiseGroupOptions = {
-    /** Name for debugging purposes */
-    name?: string;
-    /** Define how many frames new LOD promises will at least be captured and awaited. The group will resolve after all promises captured during this time have resolved (or when the abort signal is triggered).
-     * @default 2 frames, which means the group will capture promises for 2 frames before resolving.
-    */
-    frames?: number;
-    /** If set to true at least one LOD loading promise must be captured before this promise will resolve.
-     *  After the first promise has been captured the group will wait for the amount of frames specified in the `frames` option.
-     */
-    waitForFirstCapture?: boolean;
-    /** An optional signal to abort the promise */
-    signal?: AbortSignal;
-    /**
-     * If set to true, the group will only await one promise per object.
-     * @default 1
-     */
-    maxPromisesPerObject?: number;
-};
-type PromiseGroupResolveResult = {
-    /**
-     * `true` if the group was cancelled, `false` if it was resolved normally.
-     */
-    cancelled: boolean;
-    /**
-     * The number of promises that started to being awaited
-     */
-    awaited_count: number;
-    /**
-     * The number of promises that were resolved
-    */
-    resolved_count: number;
-};
-/**
- * A group of promises that can be awaited together.
- * This is used for awaiting LOD
- */
-export declare class PromiseGroup {
-    static readonly addPromise: (type: PromiseType, object: object, promise: Promise<any>, groups: PromiseGroup[]) => void;
-    readonly ready: Promise<PromiseGroupResolveResult>;
-    /** The number of promises that have been added to this group so far */
-    get awaitedCount(): number;
-    /** The number of promises that have been resolved */
-    get resolvedCount(): number;
-    /** The number of promises that are in-flight */
-    get currentlyAwaiting(): number;
-    private _resolve;
-    private readonly _signal?;
-    /** start frame can be undefined if the user configured this group to wait for the first promise.
-     * Then the start frame will be set when the first promise has been added to the group */
-    private _frame_start;
-    /** How many frames to capture since the start frame */
-    private _frames_to_capture;
-    private _resolved;
-    private _addedCount;
-    private _resolvedCount;
-    /** These promises are currently being awaited */
-    private readonly _awaiting;
-    private _maxPromisesPerObject;
-    constructor(frame: number, options: PromiseGroupOptions);
-    private _currentFrame;
-    update(frame: number): void;
-    private readonly _seen;
-    private add;
-    private resolveNow;
-}
-export {};

package/lib/lods.promise.js

@@ -1,108 +0,0 @@
-import { debug } from "./lods.debug.js";
-/**
- * A group of promises that can be awaited together.
- * This is used for awaiting LOD
- */
-export class PromiseGroup {
-    static addPromise = (type, object, promise, groups) => {
-        groups.forEach(group => {
-            group.add(type, object, promise);
-        });
-    };
-    ready;
-    /** The number of promises that have been added to this group so far */
-    get awaitedCount() {
-        return this._addedCount;
-    }
-    /** The number of promises that have been resolved */
-    get resolvedCount() {
-        return this._resolvedCount;
-    }
-    /** The number of promises that are in-flight */
-    get currentlyAwaiting() {
-        return this._awaiting.length;
-    }
-    _resolve;
-    _signal;
-    /** start frame can be undefined if the user configured this group to wait for the first promise.
-     * Then the start frame will be set when the first promise has been added to the group */
-    _frame_start;
-    /** How many frames to capture since the start frame */
-    _frames_to_capture;
-    _resolved = false;
-    _addedCount = 0;
-    _resolvedCount = 0;
-    /** These promises are currently being awaited */
-    _awaiting = [];
-    _maxPromisesPerObject = 1;
-    constructor(frame, options) {
-        const minFrames = 2; // wait at least 2 frames to capture promises
-        const framesToCapture = Math.max(options.frames ?? minFrames, minFrames); // default to 2 frames and make sure it's at least 2 frames
-        this._frame_start = options.waitForFirstCapture ? undefined : frame;
-        this._frames_to_capture = framesToCapture;
-        this.ready = new Promise((resolve) => {
-            this._resolve = resolve;
-        });
-        this.ready.finally(() => {
-            this._resolved = true;
-            this._awaiting.length = 0;
-        });
-        this._signal = options.signal;
-        this._signal?.addEventListener("abort", () => {
-            this.resolveNow();
-        });
-        this._maxPromisesPerObject = Math.max(1, options.maxPromisesPerObject ?? 1);
-    }
-    _currentFrame = 0;
-    update(frame) {
-        this._currentFrame = frame;
-        // Check if start frame is not defined yet but we have added objects since the last update
-        if (this._frame_start === undefined && this._addedCount > 0) {
-            this._frame_start = frame;
-        }
-        // If we've passes the frame capture end frame and didn't add any promises, we resolve immediately
-        if (this._signal?.aborted || (this._awaiting.length === 0 && (this._frame_start !== undefined && (frame > this._frame_start + this._frames_to_capture)))) {
-            this.resolveNow();
-        }
-    }
-    _seen = new WeakMap();
-    add(_type, object, promise) {
-        if (this._resolved) {
-            if (debug)
-                console.warn("PromiseGroup: Trying to add a promise to a resolved group, ignoring.");
-            return;
-        }
-        if (this._frame_start !== undefined && this._currentFrame > this._frame_start + this._frames_to_capture) {
-            return; // we are not capturing any more promises
-        }
-        if (this._maxPromisesPerObject >= 1) {
-            if (this._seen.has(object)) {
-                let count = this._seen.get(object);
-                if (count >= this._maxPromisesPerObject) {
-                    if (debug)
-                        console.warn(`PromiseGroup: Already awaiting object ignoring new promise for it.`);
-                    return;
-                }
-                this._seen.set(object, count + 1);
-            }
-            else {
-                this._seen.set(object, 1);
-            }
-        }
-        this._awaiting.push(promise);
-        this._addedCount++;
-        promise.finally(() => {
-            this._resolvedCount++;
-            this._awaiting.splice(this._awaiting.indexOf(promise), 1);
-        });
-    }
-    resolveNow() {
-        if (this._resolved)
-            return;
-        this._resolve?.({
-            awaited_count: this._addedCount,
-            resolved_count: this._resolvedCount,
-            cancelled: this._signal?.aborted ?? false,
-        });
-    }
-}

package/lib/plugins/index.d.ts

@@ -1,2 +0,0 @@
-export { patchModelViewer } from "./modelviewer.js";
-export { type NEEDLE_progressive_plugin } from "./plugin.js";

package/lib/plugins/index.js

@@ -1 +0,0 @@
-export { patchModelViewer } from "./modelviewer.js";

package/lib/plugins/modelviewer.d.ts

@@ -1 +0,0 @@
-export declare function patchModelViewer(): void;

package/lib/plugins/modelviewer.js

@@ -1,223 +0,0 @@
-import { LODsManager } from "../lods.manager.js";
-import { EXTENSION_NAME, NEEDLE_progressive, } from "../extension.js";
-const $meshLODSymbol = Symbol("NEEDLE_mesh_lod");
-const $textureLODSymbol = Symbol("NEEDLE_texture_lod");
-let documentObserver = null;
-export function patchModelViewer() {
-    const ModelViewerElement = tryGetModelViewerConstructor();
-    if (!ModelViewerElement) {
-        return;
-    }
-    ModelViewerElement.mapURLs(function (url) {
-        searchModelViewers();
-        return url;
-    });
-    searchModelViewers();
-    // observe the document for new model-viewers
-    documentObserver?.disconnect();
-    documentObserver = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-            mutation.addedNodes.forEach((node) => {
-                if (node instanceof HTMLElement && node.tagName.toLowerCase() === "model-viewer") {
-                    _patchModelViewer(node);
-                }
-            });
-        });
-    });
-    documentObserver.observe(document, { childList: true, subtree: true });
-}
-/**
- * Tries to get the mode-viewer constructor from the custom element registry. If it doesnt exist yet we will wait for it to be loaded in case it's added to the document at a later point
- */
-function tryGetModelViewerConstructor() {
-    if (typeof customElements === 'undefined')
-        return null;
-    // If model-viewer is already registered we can ignore this
-    const ModelViewerElement = customElements.get('model-viewer');
-    if (ModelViewerElement)
-        return ModelViewerElement;
-    // wait for model-viewer to be defined
-    customElements.whenDefined('model-viewer').then(() => {
-        console.debug("[gltf-progressive] model-viewer defined");
-        patchModelViewer();
-    });
-    return null;
-}
-function searchModelViewers() {
-    if (typeof document === 'undefined')
-        return;
-    // Query once for model viewer. If a user does not have model-viewer in their page, this will return null.
-    const modelviewers = document.querySelectorAll("model-viewer");
-    modelviewers.forEach((modelviewer) => {
-        _patchModelViewer(modelviewer);
-    });
-}
-const foundModelViewers = new WeakSet();
-let modelViewerCount = 0;
-/** Patch modelviewer to support NEEDLE progressive system
- * @returns a function to remove the patch
- */
-function _patchModelViewer(modelviewer) {
-    if (!modelviewer)
-        return null;
-    if (foundModelViewers.has(modelviewer))
-        return null;
-    foundModelViewers.add(modelviewer);
-    console.debug("[gltf-progressive] found new model-viewer..." + (++modelViewerCount) + "\n", modelviewer.getAttribute("src"));
-    // Find the necessary internal methods and properties. We need access to the scene, renderer
-    let renderer = null;
-    let scene = null;
-    let needsRender = null; // < used to force render updates for a few frames
-    for (let p = modelviewer; p != null; p = Object.getPrototypeOf(p)) {
-        const privateAPI = Object.getOwnPropertySymbols(p);
-        const rendererSymbol = privateAPI.find((value) => value.toString() == 'Symbol(renderer)');
-        const sceneSymbol = privateAPI.find((value) => value.toString() == 'Symbol(scene)');
-        const needsRenderSymbol = privateAPI.find((value) => value.toString() == 'Symbol(needsRender)');
-        if (!renderer && rendererSymbol != null) {
-            renderer = modelviewer[rendererSymbol].threeRenderer;
-        }
-        if (!scene && sceneSymbol != null) {
-            scene = modelviewer[sceneSymbol];
-        }
-        if (!needsRender && needsRenderSymbol != null) {
-            needsRender = modelviewer[needsRenderSymbol];
-        }
-    }
-    if (renderer && scene) {
-        console.debug("[gltf-progressive] setup model-viewer");
-        const lod = LODsManager.get(renderer, { engine: "model-viewer" });
-        LODsManager.addPlugin(new RegisterModelviewerDataPlugin());
-        lod.enable();
-        // Trigger a render when a LOD has changed
-        lod.addEventListener("changed", () => {
-            needsRender?.call(modelviewer);
-        });
-        // Trigger a render when the model viewer visibility changes
-        modelviewer.addEventListener("model-visibility", (evt) => {
-            const visible = evt.detail.visible;
-            if (visible)
-                needsRender?.call(modelviewer);
-        });
-        modelviewer.addEventListener("load", () => {
-            renderFrames();
-        });
-        /**
-         * For model viewer to immediately update without interaction we need to trigger a few renders
-         * We do this so that the LODs are loaded
-         */
-        function renderFrames() {
-            if (needsRender) {
-                let forcedFrames = 0;
-                let interval = setInterval(() => {
-                    if (forcedFrames++ > 5) {
-                        clearInterval(interval);
-                        return;
-                    }
-                    needsRender?.call(modelviewer);
-                }, 300);
-            }
-        }
-        return () => {
-            lod.disable();
-        };
-    }
-    return null;
-}
-/**
- * LODs manager plugin that registers LOD data to the NEEDLE progressive system
- */
-class RegisterModelviewerDataPlugin {
-    _didWarnAboutMissingUrl = false;
-    onBeforeUpdateLOD(_renderer, scene, _camera, object) {
-        this.tryParseMeshLOD(scene, object);
-        this.tryParseTextureLOD(scene, object);
-    }
-    getUrl(element) {
-        if (!element) {
-            return null;
-        }
-        let url = element.getAttribute("src");
-        // fallback in case the attribute is not set but the src property is
-        if (!url) {
-            url = element["src"];
-        }
-        if (!url) {
-            if (!this._didWarnAboutMissingUrl)
-                console.warn("No url found in modelviewer", element);
-            this._didWarnAboutMissingUrl = true;
-        }
-        return url;
-    }
-    tryGetCurrentGLTF(scene) {
-        return scene._currentGLTF;
-    }
-    tryGetCurrentModelViewer(scene) {
-        return scene.element;
-    }
-    tryParseTextureLOD(scene, object) {
-        if (object[$textureLODSymbol] == true)
-            return;
-        object[$textureLODSymbol] = true;
-        const currentGLTF = this.tryGetCurrentGLTF(scene);
-        const element = this.tryGetCurrentModelViewer(scene);
-        const url = this.getUrl(element);
-        if (!url) {
-            return;
-        }
-        if (currentGLTF) {
-            if (object.material) {
-                const mat = object.material;
-                if (Array.isArray(mat))
-                    for (const m of mat)
-                        handleMaterial(m);
-                else
-                    handleMaterial(mat);
-                function handleMaterial(mat) {
-                    if (mat[$textureLODSymbol] == true)
-                        return;
-                    mat[$textureLODSymbol] = true;
-                    // make sure to force the material to be updated
-                    if (mat.userData)
-                        mat.userData.LOD = -1;
-                    const keys = Object.keys(mat);
-                    for (let i = 0; i < keys.length; i++) {
-                        const key = keys[i];
-                        const value = mat[key];
-                        if (value?.isTexture === true) {
-                            const textureIndex = value.userData?.associations?.textures;
-                            if (textureIndex == null)
-                                continue;
-                            const textureData = currentGLTF.parser.json.textures[textureIndex];
-                            if (!textureData) {
-                                console.warn("Texture data not found for texture index " + textureIndex);
-                                continue;
-                            }
-                            if (textureData?.extensions?.[EXTENSION_NAME]) {
-                                const ext = textureData.extensions[EXTENSION_NAME];
-                                if (ext && url) {
-                                    NEEDLE_progressive.registerTexture(url, value, ext.lods.length, textureIndex, ext);
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-    tryParseMeshLOD(scene, object) {
-        if (object[$meshLODSymbol] == true)
-            return;
-        object[$meshLODSymbol] = true;
-        const element = this.tryGetCurrentModelViewer(scene);
-        const url = this.getUrl(element);
-        if (!url) {
-            return;
-        }
-        // modelviewer has all the information we need in the userData (associations + gltfExtensions)
-        const ext = object.userData?.["gltfExtensions"]?.[EXTENSION_NAME];
-        if (ext && url) {
-            const lodKey = object.uuid;
-            NEEDLE_progressive.registerMesh(url, lodKey, object, 0, ext.lods.length, ext);
-        }
-    }
-}

package/lib/plugins/plugin.d.ts

@@ -1,23 +0,0 @@
-import { WebGLRenderer, Scene, Camera, Mesh } from 'three';
-import { NEEDLE_ext_progressive_mesh } from '../extension.model.js';
-/**
- * This interface is used to define a plugin for the progressive extension. It can be registered using the `registerPlugin` function.
- */
-export interface NEEDLE_progressive_plugin {
-    /** Called before the LOD level will be requested/updated for a object */
-    onBeforeUpdateLOD?(renderer: WebGLRenderer, scene: Scene, camera: Camera, object: Mesh): void;
-    /** Called after the LOD level has been requested */
-    onAfterUpdatedLOD?(renderer: WebGLRenderer, scene: Scene, camera: Camera, object: Mesh, level: {
-        mesh_lod: number;
-        texture_lod: number;
-    }): void;
-    /** Called when a new mesh is registered */
-    onRegisteredNewMesh?(mesh: Mesh, ext: NEEDLE_ext_progressive_mesh): void;
-    /** Called before the LOD mesh is fetched */
-    onBeforeGetLODMesh?(mesh: Mesh, level: number): void;
-}
-/**
- * List of registered plugins for the progressive extension. Please use the `registerPlugin` function to add a plugin.
- * @internal
- */
-export declare const plugins: NEEDLE_progressive_plugin[];

package/lib/plugins/plugin.js

@@ -1,5 +0,0 @@
-/**
- * List of registered plugins for the progressive extension. Please use the `registerPlugin` function to add a plugin.
- * @internal
- */
-export const plugins = new Array();

package/lib/utils.d.ts

@@ -1,30 +0,0 @@
-import { BufferGeometry, Object3D } from "three";
-export declare const isSSR: boolean;
-/**
- * The raycast mesh is a low poly version of the mesh used for raycasting. It is set when a mesh that has LOD level with more vertices is discovered for the first time
- * @param obj the object to get the raycast mesh from
- * @returns the raycast mesh or null if not set
- */
-export declare function getRaycastMesh(obj: Object3D): BufferGeometry<any> | null;
-/**
- * Set the raycast mesh for an object.
- * The raycast mesh is a low poly version of the mesh used for raycasting. It is set when a mesh that has LOD level with more vertices is discovered for the first time
- * @param obj the object to set the raycast mesh for
- * @param geom the raycast mesh
- */
-export declare function registerRaycastMesh(obj: Object3D, geom: BufferGeometry): void;
-/**
- * Call this method to enable raycasting with the lowpoly raycast meshes (if available) for all meshes in the scene.
- * This is useful for performance optimization when the scene contains high poly meshes that are not visible to the camera.
- * @example
- * ```ts
- * // call to enable raycasting with low poly raycast meshes
- * useRaycastMeshes();
- *
- * // then use the raycaster as usual
- * const raycaster = new Raycaster();
- * raycaster.setFromCamera(mouse, camera);
- * const intersects = raycaster.intersectObjects(scene.children, true);
- * ```
- */
-export declare function useRaycastMeshes(enabled?: boolean): void;

package/lib/utils.internal.d.ts

@@ -1,35 +0,0 @@
-export declare function isDebugMode(): string | boolean;
-export declare function getParam(name: string): boolean | string;
-export declare function resolveUrl(source: string | undefined, uri: string): string;
-/** Check if the current device is a mobile device.
- * @returns `true` if it's a phone or tablet
- */
-export declare function isMobileDevice(): boolean;
-/**
- * Check if we are running in a development server (localhost or ip address).
- * @returns `true` if we are running in a development server (localhost or ip address).
- */
-export declare function isDevelopmentServer(): boolean;
-export type SlotReturnValue<T = any> = {
-    use?: ((promise: Promise<T>) => void);
-};
-/**
- * A promise queue that limits the number of concurrent promises.
- * Use the `slot` method to request a slot for a promise with a specific key. The returned promise resolves to an object with a `use` method that can be called to add the promise to the queue.
- */
-export declare class PromiseQueue<T = any> {
-    readonly maxConcurrent: number;
-    private readonly _running;
-    private readonly _queue;
-    debug: boolean;
-    constructor(maxConcurrent?: number, opts?: {
-        debug?: boolean;
-    });
-    private tick;
-    /**
-     * Request a slot for a promise with a specific key. This function returns a promise with a `use` method that can be called to add the promise to the queue.
-     */
-    slot(key: string): Promise<SlotReturnValue<T>>;
-    private add;
-    private internalUpdate;
-}

package/lib/utils.internal.js

@@ -1,117 +0,0 @@
-const debug = getParam("debugprogressive");
-export function isDebugMode() {
-    return debug;
-}
-export function getParam(name) {
-    if (typeof window === "undefined")
-        return false;
-    const url = new URL(window.location.href);
-    const param = url.searchParams.get(name);
-    if (param == null || param === "0" || param === "false")
-        return false;
-    if (param === "")
-        return true;
-    return param;
-}
-export function resolveUrl(source, uri) {
-    if (uri === undefined || source === undefined) {
-        return uri;
-    }
-    if (uri.startsWith("./") ||
-        uri.startsWith("http") ||
-        uri.startsWith("data:") ||
-        uri.startsWith("blob:")) {
-        return uri;
-    }
-    // TODO: why not just use new URL(uri, source).href ?
-    const pathIndex = source.lastIndexOf("/");
-    if (pathIndex >= 0) {
-        // Take the source uri as the base path
-        const basePath = source.substring(0, pathIndex + 1);
-        // make sure we don't have double slashes
-        while (basePath.endsWith("/") && uri.startsWith("/"))
-            uri = uri.substring(1);
-        // Append the relative uri
-        const newUri = basePath + uri;
-        // newUri = new URL(newUri, globalThis.location.href).href;
-        return newUri;
-    }
-    return uri;
-}
-/** Check if the current device is a mobile device.
- * @returns `true` if it's a phone or tablet
- */
-export function isMobileDevice() {
-    if (_ismobile !== undefined)
-        return _ismobile;
-    _ismobile = /iPhone|iPad|iPod|Android|IEMobile/i.test(navigator.userAgent);
-    if (getParam("debugprogressive"))
-        console.log("[glTF Progressive]: isMobileDevice", _ismobile);
-    return _ismobile;
-}
-let _ismobile;
-/**
- * Check if we are running in a development server (localhost or ip address).
- * @returns `true` if we are running in a development server (localhost or ip address).
- */
-export function isDevelopmentServer() {
-    if (typeof window === "undefined")
-        return false;
-    const url = new URL(window.location.href);
-    const isLocalhostOrIpAddress = url.hostname === "localhost" || /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(url.hostname);
-    const isDevelopment = url.hostname === "127.0.0.1" || isLocalhostOrIpAddress;
-    return isDevelopment;
-}
-/**
- * A promise queue that limits the number of concurrent promises.
- * Use the `slot` method to request a slot for a promise with a specific key. The returned promise resolves to an object with a `use` method that can be called to add the promise to the queue.
- */
-export class PromiseQueue {
-    maxConcurrent;
-    _running = new Map();
-    _queue = [];
-    debug = false;
-    constructor(maxConcurrent = 100, opts = {}) {
-        this.maxConcurrent = maxConcurrent;
-        this.debug = opts.debug ?? false;
-        window.requestAnimationFrame(this.tick);
-    }
-    tick = () => {
-        this.internalUpdate();
-        setTimeout(this.tick, 10);
-    };
-    /**
-     * Request a slot for a promise with a specific key. This function returns a promise with a `use` method that can be called to add the promise to the queue.
-     */
-    slot(key) {
-        if (this.debug)
-            console.debug(`[PromiseQueue]: Requesting slot for key ${key}, running: ${this._running.size}, waiting: ${this._queue.length}`);
-        return new Promise((resolve) => {
-            this._queue.push({ key, resolve });
-        });
-    }
-    add(key, promise) {
-        if (this._running.has(key))
-            return;
-        this._running.set(key, promise);
-        promise.finally(() => {
-            this._running.delete(key);
-            if (this.debug)
-                console.debug(`[PromiseQueue]: Promise finished now running: ${this._running.size}, waiting: ${this._queue.length}. (finished ${key})`);
-        });
-        if (this.debug)
-            console.debug(`[PromiseQueue]: Added new promise, now running: ${this._running.size}, waiting: ${this._queue.length}. (added ${key})`);
-    }
-    internalUpdate() {
-        // Run for as many free slots as we can
-        const diff = this.maxConcurrent - this._running.size;
-        for (let i = 0; i < diff && this._queue.length > 0; i++) {
-            if (this.debug)
-                console.debug(`[PromiseQueue]: Running ${this._running.size} promises, waiting for ${this._queue.length} more.`);
-            const { key, resolve } = this._queue.shift();
-            resolve({
-                use: (promise) => this.add(key, promise)
-            });
-        }
-    }
-}