@needle-tools/gltf-progressive 3.6.0-alpha.2 → 3.6.0-beta.1

package/examples/react-three-fiber/package.json

@@ -4,17 +4,17 @@
   "main": "src/index.tsx",
   "dependencies": {
     "@needle-tools/gltf-progressive": "file:../..",
-    "@react-three/drei": "^9.0.1",
-    "@react-three/fiber": "^8.0.6",
+    "@react-three/drei": "9.122.0",
+    "@react-three/fiber": "8.18.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "three": "0.162.0",
+    "three": "0.184.0",
     "typescript": "4.7.4"
   },
   "devDependencies": {
     "@types/react": "18.0.15",
     "@types/react-dom": "17.0.0",
-    "@types/three": "0.162.0",
+    "@types/three": "0.184.0",
     "@vitejs/plugin-basic-ssl": "^1.0.1",
     "@vitejs/plugin-react": "^1.3.0",
     "typescript": "4.1.3",

package/examples/react-three-fiber/src/App.tsx

@@ -2,37 +2,92 @@
 
 /* eslint-disable */
 import * as React from 'react'
+import * as THREE from 'three'
 import { Canvas, useThree } from '@react-three/fiber'
+import { OrbitControls, useGLTF } from '@react-three/drei'
+import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js'
 
 import { useNeedleProgressive } from '@needle-tools/gltf-progressive'
-import { Environment, OrbitControls, useGLTF } from '@react-three/drei'
+// @ts-ignore shared plain JS example helpers
+import { MODEL_URLS } from '../../shared/example-utils.js'
 
-function MyModel() {
-  const { gl } = useThree()
-  const url = 'https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb'
+function RoomEnvironmentSetup() {
+  const { gl, scene } = useThree()
+
+  React.useEffect(() => {
+    const pmrem = new THREE.PMREMGenerator(gl)
+    const environment = pmrem.fromScene(new RoomEnvironment(), 0.04).texture
+    scene.environment = environment
+
+    return () => {
+      scene.environment = null
+      environment.dispose()
+      pmrem.dispose()
+    }
+  }, [gl, scene])
+
+  return null
+}
+
+function Model({ controlsRef, url }: { controlsRef: React.MutableRefObject<any>, url: string }) {
+  const { gl, camera } = useThree()
   const { scene } = useGLTF(url, false, false, (loader) => {
-    useNeedleProgressive(loader as any, gl as any);
+    useNeedleProgressive(loader as any, gl as any)
   })
+
+  React.useLayoutEffect(() => {
+    const box = new THREE.Box3().setFromObject(scene)
+    const size = box.getSize(new THREE.Vector3())
+    const center = box.getCenter(new THREE.Vector3())
+    const maxSize = Math.max(size.x, size.y, size.z, 0.0001)
+    const perspectiveCamera = camera as THREE.PerspectiveCamera
+    const distance = maxSize / (2 * Math.tan(THREE.MathUtils.degToRad(perspectiveCamera.fov) / 2)) * 1.55
+    const direction = new THREE.Vector3(0.45, 0.35, 1).normalize()
+
+    perspectiveCamera.position.copy(center).addScaledVector(direction, distance)
+    perspectiveCamera.near = Math.max(0.01, distance / 100)
+    perspectiveCamera.far = Math.max(100, distance * 100)
+    perspectiveCamera.updateProjectionMatrix()
+
+    const controls = controlsRef.current
+    if (controls) {
+      controls.target.copy(center)
+      controls.minDistance = distance * 0.1
+      controls.maxDistance = distance * 10
+      controls.update()
+    }
+  }, [camera, controlsRef, scene])
+
   return <primitive object={scene} />
 }
 
-
 export default function App() {
+  const controlsRef = React.useRef<any>(null)
+  const [sceneIndex, setSceneIndex] = React.useState(0)
+  const modelUrl = MODEL_URLS[sceneIndex % MODEL_URLS.length]
+
+  React.useEffect(() => {
+    ;(globalThis as any).__GLTF_PROGRESSIVE_R3F_EXAMPLE__ = {
+      currentUrl: modelUrl,
+      sceneIndex,
+    }
+  }, [modelUrl, sceneIndex])
+
   return (
-    <Canvas
-      frameloop="demand"
-      camera={{ position: [25, 15, 25] }}>
-      <OrbitControls target={[0 , 10, 0]} />
-      <ambientLight intensity={1} />
-      <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} />
-      <pointLight position={[-10, -10, -10]} />
-      <Environment
-        files="https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/2k/evening_road_01_2k.hdr"
-      // ground={{ height: 5, radius: 40, scale: 10 }}
-      />
-      <MyModel />
-    </Canvas>
+    <>
+      <div className="example-toolbar">
+        <button type="button" onClick={() => setSceneIndex((sceneIndex + 1) % MODEL_URLS.length)}>Change scene</button>
+      </div>
+      <Canvas
+        camera={{ position: [0.5, 1.3, 2], fov: 60, near: 0.01, far: 200 }}>
+        <RoomEnvironmentSetup />
+        <gridHelper args={[50, 50, 0x444444, 0x666666]} />
+        <directionalLight position={[-50, 20, 50]} intensity={1} />
+        <OrbitControls ref={controlsRef} enableDamping dampingFactor={0.08} target={[0, 0.5, 0]} />
+        <React.Suspense fallback={null}>
+          <Model key={modelUrl} controlsRef={controlsRef} url={modelUrl} />
+        </React.Suspense>
+      </Canvas>
+    </>
   )
 }
-
-

package/examples/react-three-fiber/src/styles.css

@@ -1,3 +1,5 @@
+@import '../../shared/example.css';
+
 * {
   box-sizing: border-box;
 }
@@ -10,7 +12,3 @@ body,
   margin: 0;
   padding: 0;
 }
-
-body {
-  background: #f0f0f0;
-}

package/examples/react-three-fiber/vite.config.js

@@ -14,7 +14,7 @@ export default defineConfig(async (command) => {
         plugins: [
             react(),
             basicSsl(),
-            viteCompression({ deleteOriginFile: true }),
+            viteCompression({ deleteOriginFile: false }),
         ],
 
         server: {
@@ -36,4 +36,4 @@ export default defineConfig(async (command) => {
             }
         }
     }
-});
+});

package/examples/shared/example-utils.js

@@ -0,0 +1,297 @@
+export const MODEL_URLS = [
+    "https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb",
+    "https://engine.needle.tools/demos/gltf-progressive/assets/putti gruppe/model.glb",
+    "https://engine.needle.tools/demos/gltf-progressive/assets/cyberpunk/model.glb",
+    "https://engine.needle.tools/demos/gltf-progressive/assets/robot/model.glb",
+    "https://engine.needle.tools/demos/gltf-progressive/assets/vase/model.glb",
+    "https://engine.needle.tools/demos/gltf-progressive/assets/jupiter_und_ganymed/model.glb",
+];
+
+export const DEFAULT_MODEL_URL = MODEL_URLS[0];
+
+export function createExampleState(label) {
+    const state = {
+        label,
+        done: false,
+        ok: false,
+        errors: [],
+        frames: 0,
+        loaded: false,
+        renderer: "",
+        currentUrl: "",
+        sceneIndex: 0,
+        sceneLoads: 0,
+        progressiveObjects: 0,
+        lodChanges: 0,
+        lodChangeTypes: [],
+    };
+    globalThis.__GLTF_PROGRESSIVE_EXAMPLE__ = state;
+
+    globalThis.addEventListener?.("error", event => {
+        state.errors.push(event.message || String(event.error || event));
+    });
+    globalThis.addEventListener?.("unhandledrejection", event => {
+        state.errors.push(event.reason?.message || String(event.reason || event));
+    });
+
+    return state;
+}
+
+export function updateStatus(message) {
+    const element = globalThis.document?.getElementById("status");
+    if (element) element.textContent = message;
+}
+
+export function markReady(state, rendererLabel) {
+    state.loaded = true;
+    state.ok = true;
+    state.done = true;
+    state.renderer = rendererLabel;
+    updateStatus(rendererLabel);
+}
+
+export function markError(state, error) {
+    const message = error?.stack || error?.message || String(error);
+    state.errors.push(message);
+    state.ok = false;
+    state.done = true;
+    updateStatus(message);
+}
+
+export function getModelUrl(params = new URLSearchParams(globalThis.location?.search || ""), sceneIndex = 0) {
+    const asset = params.get("asset");
+    if (asset === "minimal") return createMinimalGltfUrl();
+    if (asset) return new URL(asset, globalThis.location?.href).href;
+    return MODEL_URLS[normalizeSceneIndex(sceneIndex)];
+}
+
+export function normalizeSceneIndex(sceneIndex) {
+    return ((sceneIndex % MODEL_URLS.length) + MODEL_URLS.length) % MODEL_URLS.length;
+}
+
+export function getInitialSceneIndex(params = new URLSearchParams(globalThis.location?.search || "")) {
+    const scene = Number(params.get("scene"));
+    return Number.isFinite(scene) ? normalizeSceneIndex(scene) : 0;
+}
+
+export function createSceneChangeButton(onChange) {
+    const document = globalThis.document;
+    if (!document) return null;
+
+    const toolbar = document.createElement("div");
+    toolbar.className = "example-toolbar";
+    const button = document.createElement("button");
+    button.type = "button";
+    button.textContent = "Change scene";
+    button.addEventListener("click", () => onChange());
+    toolbar.append(button);
+    document.body.append(toolbar);
+    return button;
+}
+
+export function markSceneLoading(state, sceneIndex, url) {
+    state.sceneIndex = normalizeSceneIndex(sceneIndex);
+    state.currentUrl = url;
+    updateStatus("loading");
+}
+
+export function markSceneLoaded(state, runtime, root) {
+    state.loaded = true;
+    state.sceneLoads += 1;
+    state.progressiveObjects = countProgressiveObjects(runtime, root);
+}
+
+export function trackLODChanges(lodsManager, state, notify) {
+    return lodsManager.addEventListener?.("changed", event => {
+        state.lodChanges += 1;
+        state.lodChangeTypes.push(event.type);
+        if (notify) notify(event);
+    });
+}
+
+export function countProgressiveObjects(runtime, root) {
+    const progressive = runtime.NEEDLE_progressive;
+    if (!progressive || !root) return 0;
+
+    let count = 0;
+    root.traverse?.(object => {
+        if (object?.isMesh && progressive.hasLODLevelAvailable(object)) count += 1;
+        const material = object?.material;
+        if (material && progressive.hasLODLevelAvailable(material)) count += 1;
+    });
+    return count;
+}
+
+export function createMinimalGltfUrl() {
+    const positions = new Float32Array([
+        -0.8, -0.5, 0,
+        0.8, -0.5, 0,
+        0, 0.8, 0,
+    ]);
+    const normals = new Float32Array([
+        0, 0, 1,
+        0, 0, 1,
+        0, 0, 1,
+    ]);
+    const indices = new Uint16Array([0, 1, 2]);
+    const bytes = concatBytes(
+        new Uint8Array(positions.buffer),
+        new Uint8Array(normals.buffer),
+        new Uint8Array(indices.buffer),
+    );
+    const gltf = {
+        asset: { version: "2.0", generator: "gltf-progressive example" },
+        scene: 0,
+        scenes: [{ nodes: [0] }],
+        nodes: [{ mesh: 0, name: "MinimalTriangle" }],
+        meshes: [{
+            primitives: [{
+                attributes: { POSITION: 0, NORMAL: 1 },
+                indices: 2,
+                material: 0,
+            }],
+        }],
+        materials: [{
+            pbrMetallicRoughness: {
+                baseColorFactor: [0.2, 0.55, 1, 1],
+                roughnessFactor: 0.55,
+                metallicFactor: 0,
+            },
+        }],
+        buffers: [{
+            uri: `data:application/octet-stream;base64,${base64(bytes)}`,
+            byteLength: bytes.byteLength,
+        }],
+        bufferViews: [
+            { buffer: 0, byteOffset: 0, byteLength: positions.byteLength, target: 34962 },
+            { buffer: 0, byteOffset: positions.byteLength, byteLength: normals.byteLength, target: 34962 },
+            { buffer: 0, byteOffset: positions.byteLength + normals.byteLength, byteLength: indices.byteLength, target: 34963 },
+        ],
+        accessors: [
+            { bufferView: 0, componentType: 5126, count: 3, type: "VEC3", min: [-0.8, -0.5, 0], max: [0.8, 0.8, 0] },
+            { bufferView: 1, componentType: 5126, count: 3, type: "VEC3" },
+            { bufferView: 2, componentType: 5123, count: 3, type: "SCALAR" },
+        ],
+    };
+    return `data:model/gltf+json;charset=utf-8,${encodeURIComponent(JSON.stringify(gltf))}`;
+}
+
+export function setupScene(THREE, width, height) {
+    const scene = new THREE.Scene();
+    scene.background = new THREE.Color(0x555555);
+
+    const camera = new THREE.PerspectiveCamera(60, width / height, 0.01, 200);
+    camera.position.set(0.5, 1.3, 2);
+
+    const grid = new THREE.GridHelper(50, 50, 0x444444, 0x666666);
+    scene.add(grid);
+
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+    directionalLight.position.set(-50, 20, 50);
+    scene.add(directionalLight);
+
+    return { scene, camera };
+}
+
+export function setupRoomEnvironment(THREE, RoomEnvironment, renderer, scene, options = {}) {
+    if (!RoomEnvironment) return () => { };
+    const PMREMGenerator = options.PMREMGenerator || THREE.PMREMGenerator;
+    const pmremGenerator = new PMREMGenerator(renderer);
+    const environment = pmremGenerator.fromScene(new RoomEnvironment(), 0.04).texture;
+    scene.environment = environment;
+    return () => {
+        environment.dispose?.();
+        pmremGenerator.dispose();
+    };
+}
+
+export function createOrbitControls(OrbitControls, camera, domElement) {
+    const controls = new OrbitControls(camera, domElement);
+    controls.enableDamping = true;
+    controls.dampingFactor = 0.08;
+    controls.target.set(0, 0.5, 0);
+    controls.update();
+    return controls;
+}
+
+export function addLoadedScene(THREE, scene, gltf, options = {}) {
+    const root = gltf.scene;
+    scene.add(root);
+    const fit = fitObjectToView(THREE, options.camera, root, options.controls);
+    if (options.onFit) options.onFit(fit);
+    return root;
+}
+
+export function fitObjectToView(THREE, camera, root, controls) {
+    if (!camera) return null;
+    const box = new THREE.Box3().setFromObject(root);
+    const size = box.getSize(new THREE.Vector3());
+    const center = box.getCenter(new THREE.Vector3());
+    const maxSize = Math.max(size.x, size.y, size.z, 0.0001);
+    const distance = maxSize / (2 * Math.tan(THREE.MathUtils.degToRad(camera.fov) / 2)) * 1.55;
+    const direction = new THREE.Vector3(0.45, 0.35, 1).normalize();
+
+    camera.position.copy(center).addScaledVector(direction, distance);
+    camera.near = Math.max(0.01, distance / 100);
+    camera.far = Math.max(100, distance * 100);
+    camera.updateProjectionMatrix();
+
+    if (controls) {
+        controls.target.copy(center);
+        controls.minDistance = distance * 0.1;
+        controls.maxDistance = distance * 10;
+        controls.update();
+    }
+
+    return {
+        target: center.toArray(),
+        minDistance: distance * 0.1,
+        maxDistance: distance * 10,
+    };
+}
+
+export function resizeRenderer(renderer, camera, width, height, pixelRatio = 1) {
+    renderer.setPixelRatio?.(pixelRatio);
+    renderer.setSize(width, height, false);
+    camera.aspect = width / height;
+    camera.updateProjectionMatrix();
+}
+
+export function serializeCamera(camera) {
+    return {
+        position: camera.position.toArray(),
+        quaternion: camera.quaternion.toArray(),
+        near: camera.near,
+        far: camera.far,
+        fov: camera.fov,
+        aspect: camera.aspect,
+    };
+}
+
+export function applyCameraState(camera, state) {
+    if (!state) return;
+    camera.position.fromArray(state.position);
+    camera.quaternion.fromArray(state.quaternion);
+    camera.near = state.near;
+    camera.far = state.far;
+    camera.fov = state.fov;
+    camera.aspect = state.aspect;
+    camera.updateProjectionMatrix();
+}
+
+function concatBytes(...arrays) {
+    const total = arrays.reduce((sum, array) => sum + array.byteLength, 0);
+    const result = new Uint8Array(total);
+    let offset = 0;
+    for (const array of arrays) {
+        result.set(array, offset);
+        offset += array.byteLength;
+    }
+    return result;
+}
+
+function base64(bytes) {
+    let binary = "";
+    for (const byte of bytes) binary += String.fromCharCode(byte);
+    return btoa(binary);
+}

package/examples/shared/example.css

@@ -0,0 +1,44 @@
+html,
+body {
+    height: 100%;
+    margin: 0;
+    overflow: hidden;
+    background: #20242a;
+    color: #f5f7fa;
+    font-family: system-ui, sans-serif;
+}
+
+canvas {
+    display: block;
+    width: 100vw;
+    height: 100vh;
+}
+
+.example-status {
+    position: fixed;
+    left: 12px;
+    top: 12px;
+    z-index: 10;
+    padding: 6px 8px;
+    background: rgba(18, 22, 28, 0.78);
+    color: #f5f7fa;
+    font-size: 12px;
+    line-height: 1.3;
+}
+
+.example-toolbar {
+    position: fixed;
+    right: 12px;
+    top: 12px;
+    z-index: 10;
+}
+
+.example-toolbar button {
+    padding: 6px 9px;
+    border: 1px solid rgba(245, 247, 250, 0.35);
+    background: rgba(18, 22, 28, 0.78);
+    color: #f5f7fa;
+    font: inherit;
+    font-size: 12px;
+    cursor: pointer;
+}

package/examples/shared/runtime.js

@@ -0,0 +1,34 @@
+const DEFAULT_THREE_VERSION = "0.184.0";
+const DEFAULT_PROGRESSIVE_VERSION = "3.6.0-canary.5401de9";
+
+export async function loadRuntime(options = {}) {
+    const params = options.params || new URLSearchParams(options.search || globalThis.location?.search || "");
+    const runtimeUrl = params.get("runtime");
+    if (runtimeUrl) {
+        return await import(new URL(runtimeUrl, globalThis.location?.href).href);
+    }
+
+    const threeVersion = params.get("three") || DEFAULT_THREE_VERSION;
+    const threeBase = `https://esm.sh/three@${threeVersion}`;
+    const progressiveUrl = params.get("progressive") || `https://esm.sh/@needle-tools/gltf-progressive@${DEFAULT_PROGRESSIVE_VERSION}?deps=three@${threeVersion}`;
+
+    const [THREE, THREE_WEBGPU, gltfLoaderModule, orbitControlsModule, roomEnvironmentModule, progressiveModule] = await Promise.all([
+        import(threeBase),
+        import(`${threeBase}/webgpu`),
+        import(`${threeBase}/examples/jsm/loaders/GLTFLoader.js`),
+        import(`${threeBase}/examples/jsm/controls/OrbitControls.js`),
+        import(`${threeBase}/examples/jsm/environments/RoomEnvironment.js`),
+        import(progressiveUrl),
+    ]);
+
+    return {
+        THREE,
+        THREE_WEBGPU,
+        GLTFLoader: gltfLoaderModule.GLTFLoader,
+        OrbitControls: orbitControlsModule.OrbitControls,
+        RoomEnvironment: roomEnvironmentModule.RoomEnvironment,
+        useNeedleProgressive: progressiveModule.useNeedleProgressive,
+        LODsManager: progressiveModule.LODsManager,
+        NEEDLE_progressive: progressiveModule.NEEDLE_progressive,
+    };
+}

package/examples/threejs/index.html

@@ -5,18 +5,14 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Threejs Progressive Loading</title>
-    <style>
-        body {
-            margin: 0;
-        }
-    </style>
+    <link rel="stylesheet" href="../shared/example.css">
     <script type="importmap">
     {
         "imports": {
-            "three": "https://cdn.jsdelivr.net/npm/three@latest/build/three.module.js",
-            "three/addons/": "https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/",
-            "three/examples/": "https://cdn.jsdelivr.net/npm/three@latest/examples/",
-            "@needle-tools/gltf-progressive": "https://cdn.jsdelivr.net/npm/@needle-tools/gltf-progressive/gltf-progressive.min.js"
+            "three": "https://cdn.jsdelivr.net/npm/three@0.184.0/build/three.module.js",
+            "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.184.0/examples/jsm/",
+            "three/examples/": "https://cdn.jsdelivr.net/npm/three@0.184.0/examples/",
+            "@needle-tools/gltf-progressive": "https://cdn.jsdelivr.net/npm/@needle-tools/gltf-progressive@3.6.0-canary.5401de9/gltf-progressive.min.js"
         }
     }
     </script>
@@ -49,4 +45,4 @@
     });
 </script>
 
-</html>
+</html>

package/examples/threejs/main.js

@@ -1,8 +1,9 @@
 import * as THREE from 'three';
-import { EXRLoader } from 'three/addons/loaders/EXRLoader.js';
 import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
 import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 import { useNeedleProgressive, getRaycastMesh, useRaycastMeshes } from "@needle-tools/gltf-progressive";
+import { fitObjectToView, setupRoomEnvironment } from "../shared/example-utils.js";
 import { Pane } from 'https://cdn.jsdelivr.net/npm/tweakpane@4.0.3/dist/tweakpane.min.js';
 
 
@@ -34,6 +35,8 @@ const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
 directionalLight.position.set(-50, 20, 50);
 scene.add(directionalLight);
 
+setupRoomEnvironment(THREE, RoomEnvironment, renderer, scene);
+
 
 // Animate the scene
 function animate() {
@@ -43,19 +46,6 @@ function animate() {
 }
 animate();
 
-const environmentTextureUrl = "https://dl.polyhaven.org/file/ph-assets/HDRIs/exr/1k/studio_small_09_1k.exr";
-const pmremGenerator = new THREE.PMREMGenerator(renderer);
-pmremGenerator.compileEquirectangularShader();
-new EXRLoader().load(environmentTextureUrl, texture => {
-    const envMap = pmremGenerator.fromEquirectangular(texture).texture;
-    scene.environment = envMap;
-    texture.dispose();
-    pmremGenerator.dispose();
-});
-
-
-
-
 const modelUrls = [
     "https://engine.needle.tools/demos/gltf-progressive/assets/putti gruppe/model.glb",
     "https://engine.needle.tools/demos/gltf-progressive/assets/cyberpunk/model.glb",
@@ -100,15 +90,7 @@ function loadScene() {
         currentScene?.removeFromParent();
         currentScene = gltf.scene;
         scene.add(gltf.scene)
-        gltf.scene.position.y += .01;
-
-        // the church is huge - scaling it down so we don't have a big difference between the models
-        if (url.includes("church")) {
-            gltf.scene.scale.multiplyScalar(.1);
-        }
-        else if (url.includes("cyberpunk")) {
-            gltf.scene.scale.multiplyScalar(15);
-        }
+        fitObjectToView(THREE, camera, gltf.scene, orbit);
 
         if (gltf.animations?.length) {
             console.log("Playing animation", gltf.animations)

package/examples/webgpu/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" href="data:,">
+    <link rel="stylesheet" href="../shared/example.css">
+    <title>glTF Progressive WebGPU</title>
+</head>
+<body>
+    <canvas id="view"></canvas>
+    <div id="status" class="example-status">loading</div>
+    <script type="module" src="./main.js"></script>
+</body>
+</html>