@needle-tools/gltf-progressive 1.0.0-alpha → 1.0.0-alpha.10

package/lib/plugins/index.d.ts

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

package/lib/plugins/index.js

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

package/lib/plugins/modelviewer.d.ts

@@ -0,0 +1,4 @@
+/** Patch modelviewer to support NEEDLE progressive system
+ * @returns a function to remove the patch
+ */
+export declare function patchModelViewer(modelviewer: HTMLElement): (() => void) | null;

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/lib/plugins/plugin.d.ts

@@ -0,0 +1,24 @@
+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/lib/utils.d.ts

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

package/{src/utils.ts → lib/utils.js}

@@ -1,41 +1,36 @@
-
-
-
-
-
-
-
-export function getParam(name: string): boolean | string {
-    const url = new URL(window.location.href);
-    let param = url.searchParams.get(name);
-    if (param == null || param === "0" || param === "false") return false;
-    if (param === "") return true;
-    return param;
-}
-
-export function resolveUrl(source: string | undefined, uri: string): string {
-    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;
-}
+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,17 +1,31 @@
 {
   "name": "@needle-tools/gltf-progressive",
-  "version": "1.0.0-alpha",
-  "description": "",
-  "type": "module",
-  "main": "src/index.ts",
+  "version": "1.0.0-alpha.10",
+  "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/"
   },
-  "scripts": {
-    "build:dist": "vite build"
+  "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"
@@ -19,10 +33,16 @@
   "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"
   },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org"
-  }
+  "types": "./lib/index.d.ts"
 }

package/examples/@needle-tools-gltf-progressive.min.js

@@ -1,3 +0,0 @@
-var oe=Object.defineProperty,ne=(r,e,t)=>e in r?oe(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,c=(r,e,t)=>(ne(r,typeof e!="symbol"?e+"":e,t),t);import{Material as Y,Texture as T,Group as ie,Mesh as I,BufferGeometry as W,RawShaderMaterial as ae,TextureLoader as le,Matrix4 as J,Frustum as ue,Sphere as ce,Box3 as Q,Vector3 as j,PerspectiveCamera as de}from"three";import{GLTFLoader as he}from"three/examples/jsm/loaders/GLTFLoader.js";import{MeshoptDecoder as fe}from"three/examples/jsm/libs/meshopt_decoder.module.js";import{DRACOLoader as ge}from"three/examples/jsm/loaders/DRACOLoader.js";import{KTX2Loader as pe}from"three/examples/jsm/loaders/KTX2Loader.js";let N="https://www.gstatic.com/draco/versioned/decoders/1.4.1/",Z="https://www.gstatic.com/basis-universal/versioned/2021-04-15-ba1c3e4/";const me=fetch(N+"draco_decoder.js",{method:"head"}).catch(r=>{console.log("Use local loaders"),N="./include/draco/",Z="./include/ktx2/"});let R,$,F;async function ye(r){await me,R||(R=new ge,R.setDecoderPath(N),R.setDecoderConfig({type:"js"})),F||(F=new pe,F.setTranscoderPath(Z)),$||($=fe),r?F.detectSupport(r):console.warn("No renderer provided to detect ktx2 support - loading KTX2 textures will probably fail")}async function xe(r){r.setDRACOLoader(R),r.setKTX2Loader(F),r.setMeshoptDecoder($)}function q(r){let e=new URL(window.location.href).searchParams.get(r);return e==null||e==="0"||e==="false"?!1:e===""?!0:e}function ve(r,e){if(e===void 0||e.startsWith("./")||e.startsWith("http")||r===void 0)return e;const t=r.lastIndexOf("/");if(t>=0){const o=r.substring(0,t+1);for(;o.endsWith("/")&&e.startsWith("/");)e=e.substring(1);return o+e}return e}const K=new Array;function De(r){K.push(r)}const A="NEEDLE_progressive",L=q("debugprogressive"),V=Symbol("needle-progressive-texture"),G=new Map,X=new Set;if(L){let r=function(){e+=1,console.log("Toggle LOD level",e,G),G.forEach((n,s)=>{for(const i of n.keys){const a=s[i];if(a.isBufferGeometry===!0){const l=w.getMeshLODInformation(a),d=l?Math.min(e,l.lods.length):0;s["DEBUG:LOD"]=d,w.assignMeshLOD(s,d),l&&(t=Math.max(t,l.lods.length-1))}else if(s.isMaterial===!0){s["DEBUG:LOD"]=e,w.assignTextureLOD(s,e);break}}}),e>=t&&(e=-1)},e=-1,t=2,o=!1;window.addEventListener("keyup",n=>{n.key==="p"&&r(),n.key==="w"&&(o=!o,X&&X.forEach(s=>{"wireframe"in s&&(s.wireframe=o)}))})}function ee(r,e,t){var o;if(!L)return;G.has(r)||G.set(r,{keys:[],sourceId:t});const n=G.get(r);((o=n?.keys)==null?void 0:o.includes(e))==!1&&n.keys.push(e)}const O=class{constructor(r,e){c(this,"parser"),c(this,"url"),this.parser=r,this.url=e}get name(){return A}static getMeshLODInformation(r){const e=this.getAssignedLODInformation(r);return e!=null&&e.key?this.lodInfos.get(e.key):null}static hasLODLevelAvailable(r,e){var t;if(r instanceof Y){for(const s of Object.keys(r)){const i=r[s];if(i instanceof T&&this.hasLODLevelAvailable(i,e))return!0}return!1}else if(r instanceof ie){for(const s of r.children)if(s instanceof I&&this.hasLODLevelAvailable(s,e))return!0}let o,n;if(r instanceof I?o=r.geometry:r instanceof T&&(o=r),o&&(t=o?.userData)!=null&&t.LODS){const s=o.userData.LODS;if(n=this.lodInfos.get(s.key),e===void 0)return n!=null;if(n)return Array.isArray(n.lods)?e<n.lods.length:e===0}return!1}static assignMeshLOD(r,e){var t;if(!r)return Promise.resolve(null);if(r instanceof I||r.isMesh===!0){const o=r.geometry,n=this.getAssignedLODInformation(o);if(!n)return Promise.resolve(null);for(const s of K)(t=s.onBeforeGetLODMesh)==null||t.call(s,r,e);return r["LOD:requested level"]=e,O.getOrLoadLOD(o,e).then(s=>{if(r["LOD:requested level"]===e){if(delete r["LOD:requested level"],Array.isArray(s)){const i=n.index||0;s=s[i]}s&&o!=s&&s instanceof W&&(r.geometry=s,L&&ee(r,"geometry",n.url))}return s}).catch(s=>(console.error("Error loading mesh LOD",r,s),null))}else L&&console.error("Invalid call to assignMeshLOD: Request mesh LOD but the object is not a mesh",r);return Promise.resolve(null)}static assignTextureLOD(r,e=0){if(!r)return Promise.resolve(null);if(r instanceof Y||r.isMaterial===!0){const t=r,o=[],n=new Array;if(L&&X.add(t),t instanceof ae)for(const s of Object.keys(t.uniforms)){const i=t.uniforms[s].value;if(i?.isTexture===!0){const a=this.assignTextureLODForSlot(i,e,t,s);o.push(a),n.push(s)}}else for(const s of Object.keys(t)){const i=t[s];if(i?.isTexture===!0){const a=this.assignTextureLODForSlot(i,e,t,s);o.push(a),n.push(s)}}return Promise.all(o).then(s=>{const i=new Array;for(let a=0;a<s.length;a++){const l=s[a],d=n[a];l instanceof T?i.push({material:t,slot:d,texture:l,level:e}):i.push({material:t,slot:d,texture:null,level:e})}return i})}if(r instanceof T||r.isTexture===!0){const t=r;return this.assignTextureLODForSlot(t,e,null,null)}return Promise.resolve(null)}static assignTextureLODForSlot(r,e,t,o){return r?.isTexture!==!0?Promise.resolve(null):O.getOrLoadLOD(r,e).then(n=>{if(Array.isArray(n))return null;if(n?.isTexture===!0){if(n!=r&&(t&&o&&(t[o]=n),L&&o&&t)){const s=this.getAssignedLODInformation(r);s&&ee(t,o,s.url)}return n}else L=="verbose"&&console.warn("No LOD found for",r,e);return null}).catch(n=>(console.error("Error loading LOD",r,n),null))}afterRoot(r){var e,t;return L&&console.log("AFTER",this.url,r),(e=this.parser.json.textures)==null||e.forEach((o,n)=>{if(o!=null&&o.extensions){const s=o?.extensions[A];if(s)for(const i of this.parser.associations.keys())i instanceof T&&this.parser.associations.get(i).textures===n&&O.registerTexture(this.url,i,n,s)}}),(t=this.parser.json.meshes)==null||t.forEach((o,n)=>{if(o!=null&&o.extensions){const s=o?.extensions[A];if(s&&s.lods){for(const i of this.parser.associations.keys())if(i instanceof I){const a=this.parser.associations.get(i);a.meshes===n&&i instanceof I&&O.registerMesh(this.url,i.uuid,i,s.lods.length,a.primitives,s)}}}}),null}static async getOrLoadLOD(r,e){var t,o,n;const s=L=="verbose",i=r.userData.LODS;if(!i)return null;const a=i?.key;let l;if(r instanceof T&&r.source&&r.source[V]&&(l=r.source[V]),l||(l=O.lodInfos.get(a)),l){if(e>0){let f=!1;const v=Array.isArray(l.lods);if(v&&e>=l.lods.length?f=!0:v||(f=!0),f)return this.lowresCache.get(a)}const d=Array.isArray(l.lods)?l.lods[e].path:l.lods;if(!d)return L&&!l["missing:uri"]&&(l["missing:uri"]=!0,console.warn("Missing uri for progressive asset for LOD "+e,l)),null;const m=ve(i.url,d);if(m.endsWith(".glb")||m.endsWith(".gltf")){if(!l.guid)return console.warn("missing pointer for glb/gltf texture",l),null;const f=m+"_"+l.guid,v=this.previouslyLoaded.get(f);if(v!==void 0){s&&console.log(`LOD ${e} was already loading/loaded: ${f}`);let u=await v.catch(p=>(console.error(`Error loading LOD ${e} from ${m}
-`,p),null)),g=!1;if(u==null||(u instanceof T&&r instanceof T?(t=u.image)!=null&&t.data||(o=u.source)!=null&&o.data?u=this.copySettings(r,u):(g=!0,this.previouslyLoaded.delete(f)):u instanceof W&&r instanceof W&&((n=u.attributes.position)!=null&&n.array||(g=!0,this.previouslyLoaded.delete(f)))),!g)return u}const _=l,S=new Promise(async(u,g)=>{const p=new he;xe(p),L&&(await new Promise(x=>setTimeout(x,1e3)),s&&console.warn("Start loading (delayed) "+m,_.guid));let b=m;if(Array.isArray(l.lods)){const x=l.lods[e];x.hash&&(b+="?v="+x.hash)}const y=await p.loadAsync(b).catch(x=>(console.error(`Error loading LOD ${e} from ${m}
-`,x),null));if(!y)return null;const E=y.parser;s&&console.log("Loading finished "+m,_.guid);let M=0;if(y.parser.json.textures){let x=!1;for(const h of y.parser.json.textures){if(h!=null&&h.extensions){const D=h?.extensions[A];if(D!=null&&D.guid&&D.guid===_.guid){x=!0;break}}M++}if(x){let h=await E.getDependency("texture",M);return s&&console.log('change "'+r.name+'" \u2192 "'+h.name+'"',m,M,h,f),r instanceof T&&(h=this.copySettings(r,h)),h&&(h.guid=_.guid),u(h)}}if(M=0,y.parser.json.meshes){let x=!1;for(const h of y.parser.json.meshes){if(h!=null&&h.extensions){const D=h?.extensions[A];if(D!=null&&D.guid&&D.guid===_.guid){x=!0;break}}M++}if(x){const h=await E.getDependency("mesh",M),D=_;if(s&&console.log(`Loaded Mesh "${h.name}"`,m,M,h,f),h instanceof I){const k=h.geometry;return O.assignLODInformation(i.url,k,a,e,void 0,D.density),u(k)}else{const k=new Array;for(let z=0;z<h.children.length;z++){const B=h.children[z];if(B instanceof I){const H=B.geometry;O.assignLODInformation(i.url,H,a,e,z,D.density),k.push(H)}}return u(k)}}}return u(null)});return this.previouslyLoaded.set(f,S),await S}else if(r instanceof T){s&&console.log("Load texture from uri: "+m);const f=await new le().loadAsync(m);return f?(f.guid=l.guid,f.flipY=!1,f.needsUpdate=!0,f.colorSpace=r.colorSpace,s&&console.log(l,f)):L&&console.warn("failed loading",m),f}}else L&&console.warn(`Can not load LOD ${e}: no LOD info found for "${a}" ${r.name}`,r.type);return null}static assignLODInformation(r,e,t,o,n,s){if(!e)return;e.userData||(e.userData={});const i=new Le(r,t,o,n,s);e.userData.LODS=i,e.userData.LOD=o}static getAssignedLODInformation(r){var e;return((e=r?.userData)==null?void 0:e.LODS)||null}static copySettings(r,e){return this._copiedTextures.get(r)||(e=e.clone(),this._copiedTextures.set(r,e),e.offset=r.offset,e.repeat=r.repeat,e.colorSpace=r.colorSpace,e)}};let w=O;c(w,"registerTexture",(r,e,t,o)=>{L&&console.log("> Progressive: register texture",t,e.name,e.uuid,e,o),e.source&&(e.source[V]=o);const n=e.uuid;O.assignLODInformation(r,e,n,0,0,void 0),O.lodInfos.set(n,o),O.lowresCache.set(n,e)}),c(w,"registerMesh",(r,e,t,o,n,s)=>{var i;L&&console.log("> Progressive: register mesh",n,t.name,s,t.uuid,t);const a=t.geometry;a.userData||(a.userData={}),O.assignLODInformation(r,a,e,o,n,s.density),O.lodInfos.set(e,s);let l=O.lowresCache.get(e);l?l.push(t.geometry):l=[t.geometry],O.lowresCache.set(e,l);for(const d of K)(i=d.onRegisteredMesh)==null||i.call(d,t,s)}),c(w,"lodInfos",new Map),c(w,"previouslyLoaded",new Map),c(w,"lowresCache",new Map),c(w,"_copiedTextures",new Map);class Le{constructor(e,t,o,n,s){c(this,"url"),c(this,"key"),c(this,"level"),c(this,"index"),c(this,"density"),this.url=e,this.key=t,this.level=o,n!=null&&(this.index=n),s!=null&&(this.density=s)}}let re=q("debugprogressive");const Oe=q("noprogressive"),P=class{constructor(r){c(this,"renderer"),c(this,"projectionScreenMatrix",new J),c(this,"cameraFrustrum",new ue),c(this,"updateInterval",0),c(this,"pause",!1),c(this,"plugins",[]),c(this,"_originalRender"),c(this,"_sphere",new ce),c(this,"_box",new Q),c(this,"tempMatrix",new J),c(this,"_tempWorldPosition",new j),c(this,"_tempBoxSize",new j),c(this,"_tempBox2Size",new j),this.renderer=r}enable(){if(this._originalRender)return;let r=0;this._originalRender=this.renderer.render;const e=this;let t=0;ye(this.renderer),this.renderer.render=function(o,n){const s=t++,i=r++;e._originalRender.call(this,o,n),e.onUpdateLODs(o,n,i,s),r--}}disable(){this._originalRender&&(this.renderer.render=this._originalRender,this._originalRender=void 0)}onUpdateLODs(r,e,t,o){var n;if(Oe||this.pause||this.updateInterval>0&&o%this.updateInterval!=0)return;this.projectionScreenMatrix.multiplyMatrices(e.projectionMatrix,e.matrixWorldInverse),this.cameraFrustrum.setFromProjectionMatrix(this.projectionScreenMatrix,this.renderer.coordinateSystem);const s=1e5,i=this.renderer.renderLists.get(r,t).opaque;for(const a of i){const l=a.object;for(const d of this.plugins)(n=d.onBeforeUpdateLOD)==null||n.call(d,this.renderer,r,e,l);(l instanceof I||l.isMesh)&&this.updateLODs(e,l,s)}}updateLODs(r,e,t){let o=e.userData.LOD_state;o||(o=new we,e.userData.LOD_state=o);let n=this.calculateLodLevel(r,e,o,t);n=Math.round(n),o.lastLodLevel=n,n>=0&&this.loadProgressiveMeshes(e,n);let s=0;if(e.material){const i=e["DEBUG:LOD"];if(i!=null&&(s=i),Array.isArray(e.material))for(const a of e.material)this.loadProgressiveTextures(a,s);else this.loadProgressiveTextures(e.material,s)}}loadProgressiveTextures(r,e){return r&&r.userData&&r.userData.LOD!==e?(r.userData.LOD=e,w.assignTextureLOD(r,e)):Promise.resolve(null)}loadProgressiveMeshes(r,e){if(e=0,!r)return Promise.resolve(null);if(r.userData||(r.userData={}),r.userData.LOD!==e){r.userData.LOD=e;const t=r.geometry;return w.assignMeshLOD(r,e).then(o=>(o&&r.userData.LOD==e&&t!=r.geometry,o))}return Promise.resolve(null)}calculateLodLevel(r,e,t,o){var n;if(!e)return-1;let s=10+1;if(r){if(re&&e["DEBUG:LOD"]!=null)return e["DEBUG:LOD"];const i=w.getMeshLODInformation(e.geometry),a=i?.lods;if(!a||a.length<=0)return 99;if(!((n=this.cameraFrustrum)!=null&&n.intersectsObject(e)))return console.log("Mesh not visible"),99;const l=e.geometry.boundingBox;if(l&&r instanceof de){if(e.geometry.attributes.color&&e.geometry.attributes.color.count<100&&e.geometry.boundingSphere){this._sphere.copy(e.geometry.boundingSphere),this._sphere.applyMatrix4(e.matrixWorld);const u=r.getWorldPosition(this._tempWorldPosition);if(this._sphere.containsPoint(u))return 0}if(this._box.copy(l),this._box.applyMatrix4(e.matrixWorld),this._box.applyMatrix4(this.projectionScreenMatrix),this.renderer.xr.enabled&&r.fov>70){const u=this._box.min,g=this._box.max;let p=u.x,b=u.y,y=g.x,E=g.y;const M=2,x=1.5,h=(u.x+g.x)*.5,D=(u.y+g.y)*.5;p=(p-h)*M+h,b=(b-D)*M+D,y=(y-h)*M+h,E=(E-D)*M+D;const k=p<0&&y>0?0:Math.min(Math.abs(u.x),Math.abs(g.x)),z=b<0&&E>0?0:Math.min(Math.abs(u.y),Math.abs(g.y)),B=Math.max(k,z);t.lastCentrality=(x-B)*(x-B)*(x-B)}else t.lastCentrality=1;const d=this._box.getSize(this._tempBoxSize);d.multiplyScalar(.5),screen.availHeight>0&&d.multiplyScalar(this.renderer.domElement.clientHeight/screen.availHeight),d.x*=r.aspect;const m=r.matrixWorldInverse,f=new Q;f.copy(l),f.applyMatrix4(e.matrixWorld),f.applyMatrix4(m);const v=f.getSize(this._tempBox2Size),_=Math.max(v.x,v.y);if(Math.max(d.x,d.y)!=0&&_!=0&&(d.z=v.z/Math.max(v.x,v.y)*Math.max(d.x,d.y)),t.lastScreenCoverage=Math.max(d.x,d.y,d.z),t.lastScreenspaceVolume.copy(d),t.lastScreenCoverage*=t.lastCentrality,re&&P.debugDrawLine){const u=this.tempMatrix.copy(this.projectionScreenMatrix);u.invert();const g=P.corner0,p=P.corner1,b=P.corner2,y=P.corner3;g.copy(this._box.min),p.copy(this._box.max),p.x=g.x,b.copy(this._box.max),b.y=g.y,y.copy(this._box.max);const E=(g.z+y.z)*.5;g.z=p.z=b.z=y.z=E,g.applyMatrix4(u),p.applyMatrix4(u),b.applyMatrix4(u),y.applyMatrix4(u),P.debugDrawLine(g,p,255),P.debugDrawLine(g,b,255),P.debugDrawLine(p,y,255),P.debugDrawLine(b,y,255)}let S=999;if(a&&t.lastScreenCoverage>0){for(let u=0;u<a.length;u++)if(a[u].density/t.lastScreenCoverage<o){S=u;break}}S<s&&(s=S)}}return s}};let C=P;c(C,"corner0",new j),c(C,"corner1",new j),c(C,"corner2",new j),c(C,"corner3",new j),c(C,"debugDrawLine");class we{constructor(){c(this,"lastLodLevel",0),c(this,"lastScreenCoverage",0),c(this,"lastScreenspaceVolume",new j),c(this,"lastCentrality",0)}}const te=Symbol("NEEDLE_mesh_lod"),U=Symbol("NEEDLE_texture_lod");function se(){const r=document.querySelector("model-viewer");if(!r)return;let e=null;for(let t=r;t!=null;t=Object.getPrototypeOf(t)){const o=Object.getOwnPropertySymbols(t).find(n=>n.toString()=="Symbol(renderer)");!e&&o!=null&&(e=r[o].threeRenderer)}if(e){console.log("Adding Needle LODs to modelviewer");const t=new C(e);t.plugins.push(new be(r)),t.enable()}}class be{constructor(e){c(this,"modelviewer"),this.modelviewer=e}onBeforeUpdateLOD(e,t,o,n){this.tryParseMeshLOD(t,n),this.tryParseTextureLOD(t,n)}getUrl(){return this.modelviewer.getAttribute("src")}tryGetCurrentGLTF(e){return e._currentGLTF}tryParseTextureLOD(e,t){if(t[U]==!0)return;t[U]=!0;const o=this.tryGetCurrentGLTF(e),n=this.getUrl();if(!n){console.error("No url found in modelviewer");return}if(o&&t.material){let s=function(a){var l,d,m;if(a[U]==!0)return;a[U]=!0,a.userData&&(a.userData.LOD=-1);const f=Object.keys(a);for(let v=0;v<f.length;v++){const _=f[v],S=a[_];if(S?.isTexture===!0){const u=(d=(l=S.userData)==null?void 0:l.associations)==null?void 0:d.textures,g=o.parser.json.textures[u];if((m=g.extensions)!=null&&m[A]){const p=g.extensions[A];p&&n&&w.registerTexture(n,S,p.lods.length,p)}}}};const i=t.material;if(Array.isArray(i))for(const a of i)s(a);else s(i)}}tryParseMeshLOD(e,t){var o,n;if(t[te]==!0)return;t[te]=!0;const s=this.getUrl();if(!s){console.error("No url found in modelviewer");return}const i=(n=(o=t.userData)==null?void 0:o.gltfExtensions)==null?void 0:n[A];if(i&&s){const a=t.uuid;w.registerMesh(s,a,t,0,i.lods.length,i)}}}document.addEventListener("DOMContentLoaded",()=>{Me()});function Me(){se()}export{A as EXTENSION_NAME,C as LODsManager,w as NEEDLE_progressive,se as patchModelViewer,De as registerPlugin};

package/examples/modelviewer.html

@@ -1,27 +0,0 @@
-<html>
-
-<head>
-    <title>Minimal Example</title>
-    <script type="importmap">
-        {
-            "imports": {
-                "three": "https://unpkg.com/three/build/three.module.js",
-                "three/": "https://unpkg.com/three/"
-            }
-        }
-    </script>
-    <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>
-    <script type="module" src="./@needle-tools-gltf-progressive.min.js"></script>
-</head>
-
-<model-viewer src="https://engine.needle.tools/demos/lods/assets/ganesha.glb" ar
-    shadow-intensity="1" camera-controls touch-action="pan-y"></model-viewer>
-
-<style>
-    model-viewer {
-        width: 100%;
-        height: 100vh;
-    }
-</style>
-
-</html>

package/src/index.ts

@@ -1,14 +0,0 @@
-import { patchModelViewer } from "./plugins/modelviewer.js";
-
-export * from "./extension.js"
-export { LODsManager } from "./lods_manager.js"
-export * from "./plugins/index.js"
-
-
-document.addEventListener("DOMContentLoaded", () => {
-    applyPatches();
-});
-
-function applyPatches(){
-    patchModelViewer();
-}

package/src/loaders.ts

@@ -1,49 +0,0 @@
-
-import { WebGLRenderer } from 'three';
-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 DEFAULT_DRACO_DECODER_LOCATION = 'https://www.gstatic.com/draco/versioned/decoders/1.4.1/';
-let DEFAULT_KTX2_TRANSCODER_LOCATION = 'https://www.gstatic.com/basis-universal/versioned/2021-04-15-ba1c3e4/';
-
-const check = fetch(DEFAULT_DRACO_DECODER_LOCATION + "draco_decoder.js", { method: "head" })
-    .catch(_ => {
-        console.log("Use local loaders");
-        DEFAULT_DRACO_DECODER_LOCATION = "./include/draco/";
-        DEFAULT_KTX2_TRANSCODER_LOCATION = "./include/ktx2/";
-    });
-
-let dracoLoader: DRACOLoader;
-let meshoptDecoder: typeof MeshoptDecoder;
-let ktx2Loader: KTX2Loader;
-
-export async function createLoaders(renderer: WebGLRenderer) {
-    await check;
-    
-    if (!dracoLoader) {
-        dracoLoader = new DRACOLoader();
-        dracoLoader.setDecoderPath(DEFAULT_DRACO_DECODER_LOCATION);
-        dracoLoader.setDecoderConfig({ type: 'js' });
-    }
-    if (!ktx2Loader) {
-        ktx2Loader = new KTX2Loader();
-        ktx2Loader.setTranscoderPath(DEFAULT_KTX2_TRANSCODER_LOCATION);
-    }
-    if (!meshoptDecoder) {
-        meshoptDecoder = MeshoptDecoder;
-    }
-    if (renderer) {
-        ktx2Loader.detectSupport(renderer);
-    }
-    else
-        console.warn("No renderer provided to detect ktx2 support - loading KTX2 textures will probably fail");
-
-}
-
-export async function addDracoAndKTX2Loaders(loader: GLTFLoader) {
-    loader.setDRACOLoader(dracoLoader);
-    loader.setKTX2Loader(ktx2Loader);
-    loader.setMeshoptDecoder(meshoptDecoder);
-}

package/src/plugins/index.ts

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

package/src/plugins/modelviewer.ts

@@ -1,113 +0,0 @@
-import { Scene, Camera, Object3D, Object3DEventMap, WebGLRenderer, Mesh, Texture, Material } from "three";
-import { LODsManager } from "../lods_manager.js";
-import { NEEDLE_progressive_plugin } from "./plugin.js";
-import { EXTENSION_NAME, NEEDLE_progressive, NEEDLE_progressive_mesh_model } from "../extension.js";
-import { GLTF } from "three/examples/jsm/loaders/GLTFLoader.js";
-
-const $meshLODSymbol = Symbol("NEEDLE_mesh_lod");
-const $textureLODSymbol = Symbol("NEEDLE_texture_lod");
-
-export function patchModelViewer() {
-    const modelviewer = document.querySelector("model-viewer") as HTMLElement;
-    if (!modelviewer)
-        return;
-    let renderer: WebGLRenderer | null = 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)');
-        if (!renderer && rendererSymbol != null) {
-            renderer = modelviewer[rendererSymbol].threeRenderer;
-        }
-    }
-    if (renderer) {
-        console.log("Adding Needle LODs to modelviewer");
-        const lod = new LODsManager(renderer);
-        lod.plugins.push(new RegisterModelviewerDataPlugin(modelviewer))
-        lod.enable();
-    }
-}
-
-
-/**
- * LODs manager plugin that registers LOD data to the NEEDLE progressive system
- */
-export class RegisterModelviewerDataPlugin implements NEEDLE_progressive_plugin {
-    readonly modelviewer: HTMLElement;
-
-    constructor(modelviewer: HTMLElement) {
-        this.modelviewer = modelviewer;
-    }
-
-    onBeforeUpdateLOD(_renderer: WebGLRenderer, scene: Scene, _camera: Camera, object: Object3D<Object3DEventMap>): void {
-        this.tryParseMeshLOD(scene, object);
-        this.tryParseTextureLOD(scene, object);
-    }
-
-    private getUrl() {
-        return this.modelviewer.getAttribute("src");
-    }
-
-    private tryGetCurrentGLTF(scene: Scene): GLTF | undefined {
-        return (scene as any)._currentGLTF;
-    }
-
-    private tryParseTextureLOD(scene: Scene, object: Object3D<Object3DEventMap>) {
-        if (object[$textureLODSymbol] == true) return;
-        object[$textureLODSymbol] = true;
-        const currentGLTF = this.tryGetCurrentGLTF(scene);
-        const url = this.getUrl();
-        if (!url) {
-            console.error("No url found in modelviewer");
-            return;
-        }
-        if (currentGLTF) {
-            if ((object as Mesh).material) {
-                const mat = (object as Mesh).material;
-                if (Array.isArray(mat)) for (const m of mat) handleMaterial(m);
-                else handleMaterial(mat);
-
-                function handleMaterial(mat: Material) {
-                    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] as Texture & { userData: { associations: { textures: number } } };
-                        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] as NEEDLE_progressive_mesh_model;
-                                if (ext && url) {
-                                    NEEDLE_progressive.registerTexture(url, value, ext.lods.length, ext);
-                                }
-                            }
-                        }
-                    }
-                }
-
-            }
-        }
-    }
-
-    private tryParseMeshLOD(_scene: Scene, object: Object3D<Object3DEventMap>) {
-        if (object[$meshLODSymbol] == true) return;
-        object[$meshLODSymbol] = true;
-        const url = this.getUrl();
-        if (!url) {
-            console.error("No url found in modelviewer");
-            return;
-        }
-        // modelviewer has all the information we need in the userData (associations + gltfExtensions)
-        const ext = object.userData?.["gltfExtensions"]?.[EXTENSION_NAME] as NEEDLE_progressive_mesh_model;
-        if (ext && url) {
-            const lodKey = object.uuid;
-            NEEDLE_progressive.registerMesh(url, lodKey, object as Mesh, 0, ext.lods.length, ext);
-        }
-    }
-}

package/src/plugins/plugin.ts

@@ -1,21 +0,0 @@
-import { WebGLRenderer, Scene, Camera, Object3D, Mesh } from 'three';
-import { NEEDLE_progressive_mesh_model } from '../extension';
-
-export interface NEEDLE_progressive_plugin {
-    /**
-     * Called by the LODs manager before the LODs are updated
-     */
-    onBeforeUpdateLOD?(renderer: WebGLRenderer, scene: Scene, camera: Camera, object: Object3D): void;
-
-    /** Called when a new mesh is registered */
-    onRegisteredMesh?(mesh: Mesh, ext: NEEDLE_progressive_mesh_model): void;
-
-    /** Called before the LOD mesh is fetched */
-    onBeforeGetLODMesh?(mesh: Mesh, level: number): void;
-}
-
-export const plugins = new Array<NEEDLE_progressive_plugin>();
-
-export function registerPlugin(plugin: NEEDLE_progressive_plugin) {
-    plugins.push(plugin);
-}

package/tsconfig.json

@@ -1,33 +0,0 @@
-{
-  "compilerOptions": {   
-    "target": "ESNext", 
-    "module": "ESNext",
-    "outDir": "dist",
-    "useDefineForClassFields": true,
-    "lib": ["ESNext", "DOM"],
-    "moduleResolution": "Node",
-    "strict": true,
-    "sourceMap": true,
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
-    "noEmit": true,
-    "noUnusedLocals": false,
-    "noUnusedParameters": true,
-    "noImplicitReturns": true,
-    "noImplicitAny": false,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "experimentalDecorators": true,
-    "skipLibCheck": true,
-    "allowJs": true,
-    "types": [
-      "three",
-      "vite/client"
-    ]
-  },
-  "include": [
-    "src/*.ts"
-, "src/plugins/modelviewer.ts"  ],
-  "exclude": ["node_modules", "dist", "lib", "vite.config.ts", "tests"]
-}