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

package/lib/index.d.ts

@@ -0,0 +1,26 @@
+export * from "./extension.js";
+export * from "./plugins/index.js";
+export { LODsManager } from "./lods_manager.js";
+import { WebGLRenderer } from "three";
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+import { LODsManager } from "./lods_manager.js";
+declare class UseNeedleGLTFProgressive {
+    /** */
+    enableLODsManager?: boolean;
+}
+/** Use this function to enable progressive loading of gltf models.
+ * @param url The url of the gltf model.
+ * @param renderer The renderer of the scene.
+ * @param loader The gltf loader.
+ * @param opts Options.
+ * @returns The LODsManager instance.
+ * @example In react-three-fiber:
+ * ```ts
+ *  const url = 'https://yourdomain.com/yourmodel.glb'
+ * const { scene } = useGLTF(url, false, false, (loader) => {
+ *   useNeedleGLTFProgressive(url, gl, loader)
+ * })
+ * return <primitive object={scene} />
+ * ```
+ */
+export declare function useNeedleProgressive(url: string, renderer: WebGLRenderer, loader: GLTFLoader, opts?: UseNeedleGLTFProgressive): LODsManager;

package/lib/index.js

@@ -0,0 +1,37 @@
+export * from "./extension.js";
+export * from "./plugins/index.js";
+export { LODsManager } from "./lods_manager.js";
+import { addDracoAndKTX2Loaders, createLoaders } from "./loaders.js";
+import { NEEDLE_progressive } from "./extension.js";
+import { LODsManager } from "./lods_manager.js";
+;
+/** Use this function to enable progressive loading of gltf models.
+ * @param url The url of the gltf model.
+ * @param renderer The renderer of the scene.
+ * @param loader The gltf loader.
+ * @param opts Options.
+ * @returns The LODsManager instance.
+ * @example In react-three-fiber:
+ * ```ts
+ *  const url = 'https://yourdomain.com/yourmodel.glb'
+ * const { scene } = useGLTF(url, false, false, (loader) => {
+ *   useNeedleGLTFProgressive(url, gl, loader)
+ * })
+ * return <primitive object={scene} />
+ * ```
+ */
+export function useNeedleProgressive(url, renderer, loader, opts) {
+    createLoaders(renderer);
+    addDracoAndKTX2Loaders(loader);
+    loader.register(p => new NEEDLE_progressive(p, url));
+    const lod = new LODsManager(renderer);
+    if (opts?.enableLODsManager !== false) {
+        lod.enable();
+    }
+    return lod;
+}
+import { patchModelViewer } from "./plugins/modelviewer.js";
+// Query once for model viewer. If a user does not have model-viewer in their page, this will return null.
+document.addEventListener("DOMContentLoaded", () => {
+    patchModelViewer(document.querySelector("model-viewer"));
+});

package/lib/loaders.d.ts

@@ -0,0 +1,4 @@
+import { WebGLRenderer } from 'three';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+export declare function createLoaders(renderer: WebGLRenderer): void;
+export declare function addDracoAndKTX2Loaders(loader: GLTFLoader): void;

package/lib/loaders.js

@@ -0,0 +1,35 @@
+import { MeshoptDecoder } from 'three/examples/jsm/libs/meshopt_decoder.module.js';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
+import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader.js';
+const DEFAULT_DRACO_DECODER_LOCATION = 'https://www.gstatic.com/draco/versioned/decoders/1.4.1/';
+const DEFAULT_KTX2_TRANSCODER_LOCATION = 'https://www.gstatic.com/basis-universal/versioned/2021-04-15-ba1c3e4/';
+let dracoLoader;
+let meshoptDecoder;
+let ktx2Loader;
+export function createLoaders(renderer) {
+    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 function addDracoAndKTX2Loaders(loader) {
+    if (!loader.dracoLoader)
+        loader.setDRACOLoader(dracoLoader);
+    if (!loader.ktx2Loader)
+        loader.setKTX2Loader(ktx2Loader);
+    if (!loader.meshoptDecoder)
+        loader.setMeshoptDecoder(meshoptDecoder);
+}

package/lib/lods_manager.d.ts

@@ -0,0 +1,70 @@
+import { Frustum, Matrix4, Object3D, Vector3, WebGLRenderer } from "three";
+import { NEEDLE_progressive_plugin } from "./plugins/plugin.js";
+/**
+ * The LODsManager class is responsible for managing the LODs and progressive assets in the scene. It will automatically update the LODs based on the camera position, screen coverage and mesh density of the objects.
+ * It must be enabled by calling the `enable` method.
+ *
+ * Instead of using the LODs manager directly you can also call `useNeedleProgressive` to enable progressive loading for a GLTFLoader
+ */
+export declare class LODsManager {
+    /** Assign a function to draw debug lines for the LODs. This function will be called with the start and end position of the line and the color of the line when the `debugprogressive` query parameter is set.
+     */
+    static debugDrawLine?: (a: Vector3, b: Vector3, color: number) => void;
+    /** @internal */
+    static getObjectLODState(object: Object3D): LOD_state | undefined;
+    readonly renderer: WebGLRenderer;
+    readonly projectionScreenMatrix: Matrix4;
+    readonly cameraFrustrum: Frustum;
+    /**
+     * The update interval in frames. If set to 0, the LODs will be updated every frame. If set to 1, the LODs will be updated every second frame, etc.
+     */
+    updateInterval: number;
+    /**
+     * If set to true, the LODsManager will not update the LODs.
+     */
+    pause: boolean;
+    readonly plugins: NEEDLE_progressive_plugin[];
+    constructor(renderer: WebGLRenderer);
+    private _frame;
+    private _originalRender?;
+    /**
+     * Enable the LODsManager. This will replace the render method of the renderer with a method that updates the LODs.
+     */
+    enable(): void;
+    disable(): void;
+    private onBeforeRender;
+    private onAfterRender;
+    /** Update the LOD levels for the renderer. */
+    private updateLODs;
+    /** 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;
+    /** 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;
+    private readonly _sphere;
+    private readonly _tempBox;
+    private readonly tempMatrix;
+    private readonly _tempWorldPosition;
+    private readonly _tempBoxSize;
+    private readonly _tempBox2Size;
+    private static corner0;
+    private static corner1;
+    private static corner2;
+    private static corner3;
+    private calculateLodLevel;
+}
+declare class LOD_state {
+    lastLodLevel: number;
+    lastScreenCoverage: number;
+    readonly lastScreenspaceVolume: Vector3;
+    lastCentrality: number;
+}
+export {};