@needle-tools/gltf-progressive 4.0.0-alpha → 4.0.0-alpha.1

package/lib/utils.internal.js

@@ -0,0 +1,239 @@
+import { RedFormat, RedIntegerFormat, RGFormat, RGIntegerFormat, RGBFormat, RGBAFormat, RGBAIntegerFormat } from "three";
+/** Check if a value has image-like dimensions (width/height) */
+export function hasImageDimensions(value) {
+    return value != null && typeof value.width === 'number' && typeof value.height === 'number';
+}
+/** Check if a value has pixel data (e.g. typed array from a DataTexture) */
+export function hasPixelData(value) {
+    return value != null && value.data != null;
+}
+/** Get the source data of a texture, typed for dimension/data access */
+export function getSourceData(tex) {
+    const data = tex.source?.data;
+    return data != null && typeof data === 'object' ? data : null;
+}
+/** Get the image of a texture, typed for dimension/data access.
+ * In r183, Texture.image is typed as `{}` but at runtime is an ImageBitmap, HTMLImageElement, etc. */
+export function getTextureImage(tex) {
+    const img = tex.image;
+    return img != null && typeof img === 'object' ? img : null;
+}
+/** Get width/height of a texture from image or source data */
+export function getTextureDimensions(tex) {
+    const img = getTextureImage(tex);
+    const src = getSourceData(tex);
+    return {
+        width: img?.width || src?.width || 0,
+        height: img?.height || src?.height || 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, 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)
+            });
+        }
+    }
+}
+// #region Texture Memory
+export function determineTextureMemoryInBytes(texture) {
+    const img = texture.image;
+    const width = img?.width ?? 0;
+    const height = img?.height ?? 0;
+    const depth = img?.depth ?? 1;
+    const mipLevels = Math.floor(Math.log2(Math.max(width, height, depth))) + 1;
+    const bytesPerPixel = getBytesPerPixel(texture);
+    const totalBytes = (width * height * depth * bytesPerPixel * (1 - Math.pow(0.25, mipLevels))) / (1 - 0.25);
+    return totalBytes;
+}
+function getBytesPerPixel(texture) {
+    // Determine channel count from format
+    let channels = 4; // Default RGBA
+    const format = texture.format;
+    if (format === RedFormat)
+        channels = 1;
+    else if (format === RedIntegerFormat)
+        channels = 1;
+    else if (format === RGFormat)
+        channels = 2;
+    else if (format === RGIntegerFormat)
+        channels = 2;
+    else if (format === RGBFormat)
+        channels = 3;
+    else if (format === 1029)
+        channels = 3; // RGBIntegerFormat (not exported in r183)
+    else if (format === RGBAFormat)
+        channels = 4;
+    else if (format === RGBAIntegerFormat)
+        channels = 4;
+    // Determine bytes per channel from type
+    let bytesPerChannel = 1; // UnsignedByteType default
+    const type = texture.type;
+    if (type === 1009)
+        bytesPerChannel = 1; // UnsignedByteType
+    else if (type === 1010)
+        bytesPerChannel = 1; // ByteType
+    else if (type === 1011)
+        bytesPerChannel = 2; // ShortType
+    else if (type === 1012)
+        bytesPerChannel = 2; // UnsignedShortType
+    else if (type === 1013)
+        bytesPerChannel = 4; // IntType
+    else if (type === 1014)
+        bytesPerChannel = 4; // UnsignedIntType
+    else if (type === 1015)
+        bytesPerChannel = 4; // FloatType
+    else if (type === 1016)
+        bytesPerChannel = 2; // HalfFloatType
+    const bytesPerPixel = channels * bytesPerChannel;
+    return bytesPerPixel;
+}
+// #region GPU
+let rendererInfo;
+/**
+ * Detect the GPU memory of the current device. This is a very rough estimate based on the renderer information, and may not be accurate. It returns the estimated memory in MB, or `undefined` if it cannot be detected.
+ */
+export function detectGPUMemory() {
+    if (rendererInfo !== undefined) {
+        return rendererInfo?.estimatedMemory;
+    }
+    const canvas = document.createElement('canvas');
+    const powerPreference = "high-performance";
+    const gl = canvas.getContext('webgl', { powerPreference }) || canvas.getContext('experimental-webgl', { powerPreference });
+    if (!gl) {
+        return undefined;
+    }
+    if ("getExtension" in gl) {
+        const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
+        if (debugInfo) {
+            const vendor = gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL);
+            const renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
+            // Estimate memory based on renderer information (this is a very rough estimate)
+            let estimatedMemory = 512;
+            if (/NVIDIA/i.test(renderer)) {
+                estimatedMemory = 2048;
+            }
+            else if (/AMD/i.test(renderer)) {
+                estimatedMemory = 1024;
+            }
+            else if (/Intel/i.test(renderer)) {
+                estimatedMemory = 512;
+            }
+            rendererInfo = { vendor, renderer, estimatedMemory };
+            return estimatedMemory;
+        }
+    }
+    else {
+        rendererInfo = null;
+    }
+    return undefined;
+}

package/lib/utils.js

@@ -0,0 +1,82 @@
+import { BufferGeometry, Mesh } from "three";
+export const isSSR = typeof window === "undefined" && typeof document === "undefined";
+const $raycastmesh = Symbol("needle:raycast-mesh");
+/**
+ * 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 function getRaycastMesh(obj) {
+    if (obj?.[$raycastmesh] instanceof BufferGeometry) {
+        return obj[$raycastmesh];
+    }
+    return 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 function registerRaycastMesh(obj, geom) {
+    if (obj.type === "Mesh" || obj.type === "SkinnedMesh") {
+        const existing = getRaycastMesh(obj);
+        if (!existing) {
+            const clone = shallowCloneGeometry(geom);
+            // remove LODs userdata to not update the geometry if the raycast mesh is rendered in the scene
+            clone.userData = { isRaycastMesh: true };
+            obj[$raycastmesh] = clone;
+        }
+    }
+}
+/**
+ * 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 function useRaycastMeshes(enabled = true) {
+    if (enabled) {
+        // if the method is already patched we don't need to do it again
+        if (_originalRaycastMethod)
+            return;
+        const originalMethod = _originalRaycastMethod = Mesh.prototype.raycast;
+        Mesh.prototype.raycast = function (raycaster, intersects) {
+            const self = this;
+            const raycastMesh = getRaycastMesh(self);
+            let prevGeomtry;
+            if (raycastMesh && self.isMesh) {
+                prevGeomtry = self.geometry;
+                self.geometry = raycastMesh;
+            }
+            originalMethod.call(this, raycaster, intersects);
+            if (prevGeomtry) {
+                self.geometry = prevGeomtry;
+            }
+        };
+    }
+    else {
+        if (!_originalRaycastMethod)
+            return;
+        Mesh.prototype.raycast = _originalRaycastMethod;
+        _originalRaycastMethod = null;
+    }
+}
+let _originalRaycastMethod = null;
+/** Creates a clone without copying the data */
+function shallowCloneGeometry(geom) {
+    const clone = new BufferGeometry();
+    for (const key in geom.attributes) {
+        clone.setAttribute(key, geom.getAttribute(key));
+    }
+    clone.setIndex(geom.getIndex());
+    return clone;
+}

package/lib/version.d.ts

@@ -0,0 +1 @@
+export declare const version = "";

package/lib/version.js

@@ -0,0 +1,4 @@
+// replaced at build time
+export const version = "4.0.0-alpha";
+globalThis["GLTF_PROGRESSIVE_VERSION"] = version;
+console.debug(`[gltf-progressive] version ${version || "-"}`);

package/lib/worker/gltf-progressive.worker.js

@@ -0,0 +1,165 @@
+// import { GLTFLoader } from "https://cdn.jsdelivr.net/npm/three@0.179.1/examples/jsm/loaders/GLTFLoader.js";
+
+import { MeshoptDecoder } from 'three/examples/jsm/libs/meshopt_decoder.module.js';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
+import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader.js';
+
+
+
+let debug = false;
+
+
+/** 
+ * @typedef {import("./loader.mainthread").GLTFLoaderWorker_Message} GLTFLoaderWorker_Message 
+ **/
+
+self.onmessage = (msg) => {
+    /** @type {GLTFLoaderWorker_Message} */
+    const request = msg.data;
+
+    switch (request.type) {
+        case "init":
+            break;
+        case "load":
+            loadGLTF(request);
+            break;
+        default:
+            console.error("[Worker] Unknown message type:", request.type);
+            break;
+    }
+};
+
+self.onerror = (error) => {
+    console.error("[Worker] Error:", error);
+};
+
+/**
+ * @param {GLTFLoaderWorker_Message} data
+ */
+function postMessage(data) {
+    self.postMessage(data);
+}
+
+/** @type {GLTFLoader | null} */
+let loader = null;
+
+/** @type {DRACOLoader | null} */
+let dracoLoader = null;
+
+/** @type {KTX2Loader | null } */
+let ktx2Loader = null;
+
+/**
+ * @param {GLTFLoaderWorker_Message & { type: "load"}} req
+ */
+async function loadGLTF(req) {
+    if(debug) console.debug("[Worker] Loading GLTF from URL:", req.dracoDecoderPath);
+
+    loader ??= new GLTFLoader();
+
+    loader.setMeshoptDecoder(MeshoptDecoder);
+
+    dracoLoader ??= new DRACOLoader();
+    dracoLoader.setDecoderConfig({ type: 'js' });
+    dracoLoader.setDecoderPath(req.dracoDecoderPath);
+    loader.setDRACOLoader(dracoLoader);
+
+    ktx2Loader ??= new KTX2Loader();
+    ktx2Loader.workerConfig = req.ktx2LoaderConfig;
+    ktx2Loader.setTranscoderPath(req.ktx2TranscoderPath);
+    loader.setKTX2Loader(ktx2Loader);
+
+
+    loader.load(req.url, gltf => {
+        if(debug) console.log("Loaded", req.url, gltf);
+
+        /** @type {GLTFLoaderWorker_Message & { type: "loaded-gltf"}} */
+        const data = {
+            type: "loaded-gltf",
+            result: {
+                url: req.url,
+                geometries: [],
+                textures: [],
+            }
+        }
+        collectData(gltf, data);
+        postMessage(data);
+    });
+}
+
+
+/** 
+ * @param {import("three/examples/jsm/loaders/GLTFLoader").GLTF} gltf 
+ * @param {GLTFLoaderWorker_Message & { type: "loaded-gltf"}} data
+ **/
+function collectData(gltf, data) {
+
+    const { result } = data;
+
+    for (const key of gltf.parser.associations.keys()) {
+        const cache = gltf.parser.associations.get(key);
+
+        if (!cache) {
+            if(debug) console.warn("[Worker] No cache found for key:", key);
+            continue;
+        }
+
+        if ("isTexture" in key && key.isTexture) {
+            const texture = /** @type {import("three").Texture} */ ( /** @type {unknown} */ (key));
+            const gltf_texture = gltf.parser.json.textures[cache.textures ?? -1];
+            result.textures.push({
+                texture: texture,
+                textureIndex: cache.textures ?? -1,
+                extensions: gltf_texture?.extensions ?? {},
+            })
+        }
+        else if ("isMesh" in key && key.isMesh) {
+            const mesh = /** @type {import("three").Mesh} */ ( /** @type {unknown} */ (key));
+            const meshIndex = cache.meshes ?? -1;
+            const primitiveIndex = cache.primitives ?? -1;
+            const gltf_mesh = gltf.parser.json.meshes[meshIndex];
+            result.geometries.push({
+                geometry: mesh.geometry,
+                meshIndex: meshIndex,
+                primitiveIndex: primitiveIndex,
+                extensions: gltf_mesh?.extensions ?? {},
+            });
+        }
+        else if ("isMaterial" in key && key.isMaterial) {
+            // Nothing we need to do here
+        }
+    }
+}
+
+// function traverseAndDeleteFunctions(gltf) {
+//     const textures = [];
+//     gltf.traverse((child) => {
+//         if (child.isMesh) {
+//             geometries.push(child.geometry);
+//             if (child.material) {
+//                 if (child.material.map) {
+//                     textures.push(child.material.map);
+//                 }
+//             }
+//         }
+//     });
+//     return {
+//         geometries: geometries,
+//         textures: textures,
+//     }
+// }
+
+// function traverseAndDeleteFunctions(obj, seen = new WeakSet()) {
+//     if (seen.has(obj)) return;
+//     seen.add(obj);
+
+//     for (const key in obj) {
+//         if (typeof obj[key] === "function") {
+//             delete obj[key];
+//         } else if (typeof obj[key] === "object" && obj[key] !== null) {
+//             traverseAndDeleteFunctions(obj[key], seen);
+//         }
+//     }
+//     return obj;
+// }

package/lib/worker/loader.mainthread.d.ts

@@ -0,0 +1,45 @@
+import { BufferGeometry, Texture, WebGLRenderer } from "three";
+import type { KTX2LoaderWorkerConfig } from "three/examples/jsm/loaders/KTX2Loader.js";
+type GLTFLoaderWorkerOptions = {
+    debug?: boolean;
+};
+type WorkerLoadResult = {
+    url: string;
+    geometries: Array<{
+        geometry: BufferGeometry;
+        meshIndex: number;
+        primitiveIndex: number;
+        extensions: Record<string, any>;
+    }>;
+    textures: Array<{
+        texture: Texture;
+        textureIndex: number;
+        extensions: Record<string, any>;
+    }>;
+};
+export declare function getWorker(opts?: GLTFLoaderWorkerOptions): Promise<GLTFLoaderWorker>;
+export type { GLTFLoaderWorker, GLTFLoaderWorkerOptions, WorkerLoadResult };
+/** @internal */
+export type GLTFLoaderWorker_Message = {
+    type: 'init';
+} | {
+    type: 'load';
+    url: string;
+    dracoDecoderPath: string;
+    ktx2TranscoderPath: string;
+    ktx2LoaderConfig: KTX2LoaderWorkerConfig;
+} | {
+    type: "loaded-gltf";
+    result: WorkerLoadResult;
+};
+declare class GLTFLoaderWorker {
+    private readonly worker;
+    static createWorker(opts: GLTFLoaderWorkerOptions): Promise<GLTFLoaderWorker>;
+    private _running;
+    private _webglRenderer;
+    load(url: string | URL, opts?: {
+        renderer?: WebGLRenderer;
+    }): Promise<WorkerLoadResult>;
+    private _debug;
+    private constructor();
+}