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

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/lods_manager.ts

@@ -1,387 +0,0 @@
-import { Box3, BufferGeometry, Camera, Frustum, Material, Matrix4, Mesh, Object3D, PerspectiveCamera, Scene, Sphere, Texture, Vector3, WebGLRenderer } from "three";
-import { NEEDLE_progressive, ProgressiveMaterialTextureLoadingResult } from "./extension.js";
-import { createLoaders } from "./loaders.js"
-import { getParam } from "./utils.js"
-import { NEEDLE_progressive_plugin } from "./plugins/plugin.js";
-
-let debugProgressiveLoading = getParam("debugprogressive");
-const suppressProgressiveLoading = getParam("noprogressive");
-
-
-export class LODsManager {
-    readonly renderer: WebGLRenderer;
-    readonly projectionScreenMatrix = new Matrix4();
-    readonly cameraFrustrum = new Frustum();
-
-    updateInterval: number = 0;
-    pause: boolean = false;
-
-    readonly plugins: NEEDLE_progressive_plugin[] = [];
-
-    constructor(renderer: WebGLRenderer) {
-        this.renderer = renderer;
-    }
-
-    private _originalRender?: (scene: Scene, camera: Camera) => void;
-
-    enable() {
-        if (this._originalRender) return;
-        let stack = 0;
-        // Save the original render method
-        this._originalRender = this.renderer.render;
-        const self = this;
-        let frames = 0;
-        createLoaders(this.renderer);
-        this.renderer.render = function (scene: Scene, camera: Camera) {
-            const frame = frames++;
-            const level = stack++;
-            self._originalRender!.call(this, scene, camera);
-            self.onUpdateLODs(scene, camera, level, frame);
-            stack--;
-        };
-    }
-    disable() {
-        if (!this._originalRender) return;
-        this.renderer.render = this._originalRender;
-        this._originalRender = undefined;
-    }
-
-
-
-    private onUpdateLODs(scene: Scene, camera: Camera, stack: number, frame: number) {
-
-        if (suppressProgressiveLoading) return;
-        if (this.pause) return;
-        if (this.updateInterval > 0 && frame % this.updateInterval != 0) return;
-
-        this.projectionScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
-        this.cameraFrustrum.setFromProjectionMatrix(this.projectionScreenMatrix, this.renderer.coordinateSystem);
-        const desiredDensity = 100_000;
-
-        // const isLowPerformanceDevice = false;// isMobileDevice();
-
-        // Experiment: quick & dirty performance-adaptive LODs
-        /* 
-        if (this.context.time.smoothedFps < 59) {
-            currentAllowedDensity *= 0.5;
-        }
-        else if (this.context.time.smoothedFps >= 59) {
-            currentAllowedDensity *= 1.25;
-        }
-        */
-
-        const renderList = this.renderer.renderLists.get(scene, stack);
-        const opaque = renderList.opaque;
-        for (const entry of opaque) {
-            const object = entry.object as any;
-
-            for (const plugin of this.plugins) {
-                plugin.onBeforeUpdateLOD?.(this.renderer, scene, camera, object);
-            }
-
-            if (object instanceof Mesh || (object.isMesh)) {
-                this.updateLODs(camera, object, desiredDensity);
-            }
-        }
-    }
-
-    /** Update the LOD levels for the renderer. */
-    private updateLODs(camera: Camera, object: Mesh, desiredDensity: number) {
-
-
-        // we currently only support auto LOD changes for meshes
-        // if (this.hasMeshLODs) {
-        let state = object.userData.LOD_state as LOD_state;
-        if (!state) {
-            state = new LOD_state();
-            object.userData.LOD_state = state;
-        }
-
-        let level = this.calculateLodLevel(camera, object, state, desiredDensity);
-        level = Math.round(level);
-        state.lastLodLevel = level;
-        // }
-
-        if (level >= 0) {
-            this.loadProgressiveMeshes(object, level);
-        }
-
-        // TODO: we currently can not switch texture lods because we need better caching for the textures internally (see copySettings in progressive + NE-4431)
-        let textureLOD = 0;// Math.max(0, LODlevel - 2)
-
-        if (object.material) {
-            const debugLevel = object["DEBUG:LOD"];
-            if (debugLevel != undefined) textureLOD = debugLevel;
-
-            if (Array.isArray(object.material)) {
-                for (const mat of object.material) {
-                    this.loadProgressiveTextures(mat, textureLOD);
-                }
-            }
-            else {
-                this.loadProgressiveTextures(object.material, textureLOD);
-            }
-        }
-    }
-
-
-    /** Load progressive textures for the given material
-     * @param material the material to load the textures for
-     * @param level the LOD level to load. Level 0 is the best quality, higher levels are lower quality
-     * @returns Promise with true if the LOD was loaded, false if not
-     */
-    private loadProgressiveTextures(material: Material, level: number): Promise<ProgressiveMaterialTextureLoadingResult[] | Texture | null> {
-        if (!material) return Promise.resolve(null);
-        if (material.userData && material.userData.LOD !== level) {
-            material.userData.LOD = level;
-            return NEEDLE_progressive.assignTextureLOD(material, level);
-        }
-        return Promise.resolve(null);
-    }
-
-    /** Load progressive meshes for the given mesh
-     * @param mesh the mesh to load the LOD for
-     * @param index the index of the mesh if it's part of a group
-     * @param level the LOD level to load. Level 0 is the best quality, higher levels are lower quality
-     * @returns Promise with true if the LOD was loaded, false if not
-     */
-    private loadProgressiveMeshes(mesh: Mesh, level: number): Promise<BufferGeometry | null> {
-        level = 0;
-        if (!mesh) return Promise.resolve(null);
-        if (!mesh.userData) mesh.userData = {};
-        if (mesh.userData.LOD !== level) {
-            mesh.userData.LOD = level;
-            const originalGeometry = mesh.geometry;
-            return NEEDLE_progressive.assignMeshLOD(mesh, level).then(res => {
-                if (res && mesh.userData.LOD == level && originalGeometry != mesh.geometry) {
-                    // update the lightmap
-                    // this.applyLightmapping();
-
-                    // if (this.handles) {
-                    //     for (const inst of this.handles) {
-                    //         // if (inst["LOD"] < level) continue;
-                    //         // inst["LOD"] = level;
-                    //         inst.setGeometry(mesh.geometry);
-                    //     }
-                    // }
-                }
-                return res;
-            })
-        }
-        return Promise.resolve(null);
-    }
-
-    // private testIfLODLevelsAreAvailable() {
-
-    private readonly _sphere = new Sphere();
-    private readonly _box = new Box3();
-    private readonly tempMatrix = new Matrix4();
-    private readonly _tempWorldPosition = new Vector3();
-    private readonly _tempBoxSize = new Vector3();
-    private readonly _tempBox2Size = new Vector3();
-
-    private static corner0 = new Vector3();
-    private static corner1 = new Vector3();
-    private static corner2 = new Vector3();
-    private static corner3 = new Vector3();
-
-    static debugDrawLine: (a: Vector3, b: Vector3, color: number) => void | null;
-
-    private calculateLodLevel(camera: Camera, mesh: Mesh, state: LOD_state, desiredDensity: number): number {
-        if (!mesh) return -1;
-
-        // if this is using instancing we always load level 0
-        // if (this.isInstancingActive) return 0;
-
-        /** rough measure of "triangles on quadratic screen" – we're switching LODs based on this metric. */
-        /** highest LOD level we'd ever expect to be generated */
-        const maxLevel = 10;
-        let level = maxLevel + 1;
-
-        if (camera) {
-            if (debugProgressiveLoading && mesh["DEBUG:LOD"] != undefined) {
-                return mesh["DEBUG:LOD"];
-            }
-
-            // The mesh info contains also the density for all available LOD level so we can use this for selecting which level to show
-            const lodsInfo = NEEDLE_progressive.getMeshLODInformation(mesh.geometry);
-            const lods = lodsInfo?.lods;
-
-            // We can skip all this if we dont have any LOD information - we can ask the progressive extension for that
-            if (!lods || lods.length <= 0) {
-                return 99;
-            }
-
-            if (!this.cameraFrustrum?.intersectsObject(mesh)) {
-                console.log("Mesh not visible");
-                // if (debugProgressiveLoading && mesh.geometry.boundingSphere) {
-                //     const bounds = mesh.geometry.boundingSphere;
-                //     this._sphere.copy(bounds);
-                //     this._sphere.applyMatrix4(mesh.matrixWorld);
-                //     Gizmos.DrawWireSphere(this._sphere.center, this._sphere.radius * 1.01, 0xff5555, .5);
-                // }
-                // the object is not visible by the camera
-                return 99;
-            }
-
-            const box = mesh.geometry.boundingBox;
-            if (box && camera instanceof PerspectiveCamera) {
-
-                // hack: if the mesh has vertex colors, has less than 100 vertices we always select the highest LOD
-                if (mesh.geometry.attributes.color && mesh.geometry.attributes.color.count < 100) {
-                    if (mesh.geometry.boundingSphere) {
-                        this._sphere.copy(mesh.geometry.boundingSphere);
-                        this._sphere.applyMatrix4(mesh.matrixWorld);
-                        const worldPosition = camera.getWorldPosition(this._tempWorldPosition)
-                        if (this._sphere.containsPoint(worldPosition)) {
-                            return 0;
-                        }
-                    }
-                }
-
-                // calculate size on screen
-                this._box.copy(box);
-                this._box.applyMatrix4(mesh.matrixWorld);
-
-                // Converting into projection space has the disadvantage that objects further to the side
-                // will have a much larger coverage, especially with high-field-of-view situations like in VR.
-                // Alternatively, we could attempt to calculate angular coverage (some kind of polar coordinates maybe?)
-                // or introduce a correction factor based on "expected distortion" of the object.
-                // High distortions would lead to lower LOD levels.
-                // "Centrality" of the calculated screen-space bounding box could be a factor here –
-                // what's the distance of the bounding box to the center of the screen?
-                this._box.applyMatrix4(this.projectionScreenMatrix);
-
-                // TODO might need to be adjusted for cameras that are rendered during an XR session but are 
-                // actually not XR cameras (e.g. a render texture)
-                if (this.renderer.xr.enabled && camera.fov > 70) {
-                    // calculate centrality of the bounding box - how close is it to the screen center
-                    const min = this._box.min;
-                    const max = this._box.max;
-
-                    let minX = min.x;
-                    let minY = min.y;
-                    let maxX = max.x;
-                    let maxY = max.y;
-
-                    // enlarge
-                    const enlargementFactor = 2.0;
-                    const centerBoost = 1.5;
-                    const centerX = (min.x + max.x) * 0.5;
-                    const centerY = (min.y + max.y) * 0.5;
-                    minX = (minX - centerX) * enlargementFactor + centerX;
-                    minY = (minY - centerY) * enlargementFactor + centerY;
-                    maxX = (maxX - centerX) * enlargementFactor + centerX;
-                    maxY = (maxY - centerY) * enlargementFactor + centerY;
-
-                    const xCentrality = minX < 0 && maxX > 0 ? 0 : Math.min(Math.abs(min.x), Math.abs(max.x));
-                    const yCentrality = minY < 0 && maxY > 0 ? 0 : Math.min(Math.abs(min.y), Math.abs(max.y));
-                    const centrality = Math.max(xCentrality, yCentrality);
-
-                    // heuristically determined to lower quality for objects at the edges of vision
-                    state.lastCentrality = (centerBoost - centrality) * (centerBoost - centrality) * (centerBoost - centrality);
-                }
-                else {
-                    state.lastCentrality = 1;
-                }
-
-                const boxSize = this._box.getSize(this._tempBoxSize);
-                boxSize.multiplyScalar(0.5); // goes from -1..1, we want -0.5..0.5 for coverage in percent
-                if (screen.availHeight > 0)
-                    boxSize.multiplyScalar(this.renderer.domElement.clientHeight / screen.availHeight); // correct for size of context on screen
-                boxSize.x *= camera.aspect;
-
-                const matView = camera.matrixWorldInverse;
-                const box2 = new Box3();
-                box2.copy(box);
-                box2.applyMatrix4(mesh.matrixWorld);
-                box2.applyMatrix4(matView);
-                const boxSize2 = box2.getSize(this._tempBox2Size);
-
-                // approximate depth coverage in relation to screenspace size
-                const max2 = Math.max(boxSize2.x, boxSize2.y);
-                const max1 = Math.max(boxSize.x, boxSize.y);
-                if (max1 != 0 && max2 != 0)
-                    boxSize.z = boxSize2.z / Math.max(boxSize2.x, boxSize2.y) * Math.max(boxSize.x, boxSize.y);
-
-                state.lastScreenCoverage = Math.max(boxSize.x, boxSize.y, boxSize.z);
-                state.lastScreenspaceVolume.copy(boxSize);
-                state.lastScreenCoverage *= state.lastCentrality;
-
-                // draw screen size box
-                if (debugProgressiveLoading && LODsManager.debugDrawLine) {
-                    const mat = this.tempMatrix.copy(this.projectionScreenMatrix);
-                    mat.invert();
-
-                    const corner0 = LODsManager.corner0;
-                    const corner1 = LODsManager.corner1;
-                    const corner2 = LODsManager.corner2;
-                    const corner3 = LODsManager.corner3;
-
-                    // get box corners, transform with camera space, and draw as quad lines
-                    corner0.copy(this._box.min);
-                    corner1.copy(this._box.max);
-                    corner1.x = corner0.x;
-                    corner2.copy(this._box.max);
-                    corner2.y = corner0.y;
-                    corner3.copy(this._box.max);
-                    // draw outlines at the center of the box
-                    const z = (corner0.z + corner3.z) * 0.5;
-                    // all outlines should have the same depth in screen space
-                    corner0.z = corner1.z = corner2.z = corner3.z = z;
-
-                    corner0.applyMatrix4(mat);
-                    corner1.applyMatrix4(mat);
-                    corner2.applyMatrix4(mat);
-                    corner3.applyMatrix4(mat);
-
-                    LODsManager.debugDrawLine(corner0, corner1, 0x0000ff);
-                    LODsManager.debugDrawLine(corner0, corner2, 0x0000ff);
-                    LODsManager.debugDrawLine(corner1, corner3, 0x0000ff);
-                    LODsManager.debugDrawLine(corner2, corner3, 0x0000ff);
-                }
-
-                let expectedLevel = 999;
-                // const framerate = this.context.time.smoothedFps;
-                if (lods && state.lastScreenCoverage > 0) {
-                    for (let l = 0; l < lods.length; l++) {
-                        const densityForThisLevel = lods[l].density;
-                        if (densityForThisLevel / state.lastScreenCoverage < desiredDensity) {
-                            expectedLevel = l;
-                            break;
-                        }
-                    }
-                }
-
-                // expectedLevel -= meshDensity - 5;
-                // expectedLevel += meshDensity;
-                const isLowerLod = expectedLevel < level;
-                if (isLowerLod) {
-                    level = expectedLevel;
-                }
-            }
-            // }
-        }
-
-
-        // if (this._lastLodLevel != level) {
-        //     this._nextLodTestTime = this.context.time.realtimeSinceStartup + .5;
-        //     if (debugProgressiveLoading) {
-        //         if (debugProgressiveLoading == "verbose") console.warn(`LOD Level changed from ${this._lastLodLevel} to ${level} for ${this.name}`);
-        //         this.drawGizmoLodLevel(true);
-        //     }
-        // }
-
-        return level;
-    }
-}
-
-
-
-
-class LOD_state {
-    lastLodLevel: number = 0;
-    lastScreenCoverage: number = 0;
-    readonly lastScreenspaceVolume: Vector3 = new Vector3();
-    lastCentrality: number = 0;
-}

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/src/utils.ts

@@ -1,41 +0,0 @@
-
-
-
-
-
-
-
-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;
-}

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"]
-}