@needle-tools/gltf-progressive 1.0.0-alpha.1 → 1.0.0-alpha.11

package/lib/plugins/modelviewer.js

@@ -0,0 +1,134 @@
+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");
+/** Patch modelviewer to support NEEDLE progressive system
+ * @returns a function to remove the patch
+ */
+export function patchModelViewer(modelviewer) {
+    if (!modelviewer)
+        return null;
+    let renderer = null;
+    let scene = null;
+    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)');
+        if (!renderer && rendererSymbol != null) {
+            renderer = modelviewer[rendererSymbol].threeRenderer;
+        }
+        if (!scene && sceneSymbol != null) {
+            scene = modelviewer[sceneSymbol];
+        }
+    }
+    if (renderer) {
+        console.log("Adding Needle LODs to modelviewer");
+        const lod = new LODsManager(renderer);
+        lod.plugins.push(new RegisterModelviewerDataPlugin(modelviewer));
+        lod.enable();
+        if (scene) {
+            const camera = scene["camera"] || scene.traverse((o) => o.type == "PerspectiveCamera")[0];
+            if (camera) {
+                renderer.render(scene, camera);
+                // setTimeout(() => {
+                //     renderer.render(scene, camera);
+                // }, 100)
+                // setTimeout(() => {
+                //     renderer.render(scene, camera);
+                // }, 1200)
+            }
+        }
+        return () => {
+            lod.disable();
+        };
+    }
+    return null;
+}
+/**
+ * LODs manager plugin that registers LOD data to the NEEDLE progressive system
+ */
+class RegisterModelviewerDataPlugin {
+    modelviewer;
+    _didWarnAboutMissingUrl = false;
+    constructor(modelviewer) {
+        this.modelviewer = modelviewer;
+    }
+    onBeforeUpdateLOD(_renderer, scene, _camera, object) {
+        this.tryParseMeshLOD(scene, object);
+        this.tryParseTextureLOD(scene, object);
+    }
+    getUrl() {
+        let url = this.modelviewer.getAttribute("src");
+        // fallback in case the attribute is not set but the src property is
+        if (!url) {
+            url = this.modelviewer["src"];
+        }
+        if (!url) {
+            if (!this._didWarnAboutMissingUrl)
+                console.warn("No url found in modelviewer", this.modelviewer);
+            this._didWarnAboutMissingUrl = true;
+        }
+        return url;
+    }
+    tryGetCurrentGLTF(scene) {
+        return scene._currentGLTF;
+    }
+    tryParseTextureLOD(scene, object) {
+        if (object[$textureLODSymbol] == true)
+            return;
+        object[$textureLODSymbol] = true;
+        const currentGLTF = this.tryGetCurrentGLTF(scene);
+        const url = this.getUrl();
+        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;
+                            const textureData = currentGLTF.parser.json.textures[textureIndex];
+                            if (textureData.extensions?.[EXTENSION_NAME]) {
+                                const ext = textureData.extensions[EXTENSION_NAME];
+                                if (ext && url) {
+                                    NEEDLE_progressive.registerTexture(url, value, ext.lods.length, ext);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    tryParseMeshLOD(_scene, object) {
+        if (object[$meshLODSymbol] == true)
+            return;
+        object[$meshLODSymbol] = true;
+        const url = this.getUrl();
+        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/{types → lib}/plugins/plugin.d.ts

@@ -1,14 +1,24 @@
-import { WebGLRenderer, Scene, Camera, Mesh } from 'three';
-import { NEEDLE_progressive_mesh_model } from '../extension.js';
-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: number): void;
-    /** Called when a new mesh is registered */
-    onRegisteredNewMesh?(mesh: Mesh, ext: NEEDLE_progressive_mesh_model): void;
-    /** Called before the LOD mesh is fetched */
-    onBeforeGetLODMesh?(mesh: Mesh, level: number): void;
-}
-export declare const plugins: NEEDLE_progressive_plugin[];
-export declare function registerPlugin(plugin: NEEDLE_progressive_plugin): void;
+import { WebGLRenderer, Scene, Camera, Mesh } from 'three';
+import { NEEDLE_progressive_mesh_model } from '../extension.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: number): void;
+    /** Called when a new mesh is registered */
+    onRegisteredNewMesh?(mesh: Mesh, ext: NEEDLE_progressive_mesh_model): 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[];
+/**
+ * Register a plugin for the progressive extension. The plugin callbacks will be called at different stages of the progressive extension.
+ */
+export declare function registerPlugin(plugin: NEEDLE_progressive_plugin): void;

package/lib/plugins/plugin.js

@@ -0,0 +1,11 @@
+/**
+ * List of registered plugins for the progressive extension. Please use the `registerPlugin` function to add a plugin.
+ * @internal
+ */
+export const plugins = new Array();
+/**
+ * Register a plugin for the progressive extension. The plugin callbacks will be called at different stages of the progressive extension.
+ */
+export function registerPlugin(plugin) {
+    plugins.push(plugin);
+}

package/{types → lib}/utils.d.ts

@@ -1,2 +1,2 @@
-export declare function getParam(name: string): boolean | string;
-export declare function resolveUrl(source: string | undefined, uri: string): string;
+export declare function getParam(name: string): boolean | string;
+export declare function resolveUrl(source: string | undefined, uri: string): string;

package/lib/utils.js

@@ -0,0 +1,36 @@
+export function getParam(name) {
+    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) {
+        return uri;
+    }
+    if (uri.startsWith("./")) {
+        return uri;
+    }
+    if (uri.startsWith("http")) {
+        return uri;
+    }
+    if (source === undefined) {
+        return uri;
+    }
+    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;
+}

package/package.json

@@ -1,20 +1,48 @@
 {
   "name": "@needle-tools/gltf-progressive",
-  "version": "1.0.0-alpha.1",
-  "description": "",
+  "version": "1.0.0-alpha.11",
+  "description": "three.js support for loading glTF or GLB files that contain progressive loading data",
   "homepage": "https://needle.tools",
   "author": {
     "name": "Needle",
     "email": "hi@needle.tools",
     "url": "https://needle.tools/"
   },
+  "readme": "README.md",
+  "keywords": [
+    "three.js",
+    "gltf",
+    "glb",
+    "progressive",
+    "loading",
+    "needle",
+    "engine",
+    "webgl",
+    "optimization"
+  ],
+  "main": "./lib/index.js",
+  "exports": {
+    ".": {
+      "import": "./lib/index.js",
+      "require": "./gltf-progressive.js"
+    }
+  },
   "peerDependencies": {
     "three": ">= 0.160.0"
   },
   "devDependencies": {
     "@types/three": "0.162.0",
     "three": ">= 0.160.0",
-    "vite": "<= 4.3.9"
+    "vite": "<= 4.3.9",
+    "@stylistic/eslint-plugin-ts": "^1.5.4",
+    "@typescript-eslint/eslint-plugin": "^6.2.0",
+    "@typescript-eslint/parser": "^6.2.0",
+    "eslint": "^8.56.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-no-secrets": "^0.8.9",
+    "eslint-plugin-no-unsanitized": "^4.0.2",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-xss": "^0.1.12"
   },
-  "types": "./types/index.d.ts"
+  "types": "./lib/index.d.ts"
 }