@needle-tools/engine 4.6.3 → 4.6.4

package/src/engine/engine_test_utils.ts

@@ -1,109 +1,109 @@
-import { DataTextureLoader,EquirectangularReflectionMapping, Object3D, PerspectiveCamera, Scene, Vector3 } from "three";
-import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
-
-import { AssetReference } from "./engine_addressables.js";
-import { getBoundingBox } from "./engine_three_utils.js";
-
-declare type ComparisonSceneOptions = {
-    /**
-     * An array of model urls to load
-     */
-    files: string[];
-    /**
-     * Optional dom element to attach the orbit controls to. By default this should be the WebGLRenderer.domElement
-     */
-    domElement?: HTMLElement;
-    /**
-     * Can be a .hdr or .exr file url
-     */
-    environment?: string;
-}
-
-/**
- * A collection of utility methods for quickly spinning up test environments
- */
-export class TestSceneUtils {
-
-    /**
-     * Use this method to quickly setup a scene to compare multiple models.  
-     * @example
-     * ```ts
-     * const files = [
-     *    "https://threejs.org/examples/models/gltf/RobotExpressive/RobotExpressive.glb",
-     *   "https://threejs.org/examples/models/gltf/Lantern/glTF-Binary/Lantern.glb",
-     * ];
-     * const { scene, camera } = await TestUtils.createComparisonScene({ files });
-     * // this could now be assigned to the Needle Engine Context
-     * context.scene = scene;
-     * context.mainCamera = camera;
-     * ```
-     */
-    static async createComparisonScene(opts: ComparisonSceneOptions) {
-
-        const { files } = opts;
-
-        const promises = Promise.all(files.map(file => new AssetReference(file).loadAssetAsync()));
-        const results = await promises;
-        const scene = new Scene();
-
-        let offset = 0;
-        for (const result of results) {
-            if (result instanceof Object3D) {
-                result.position.y = offset;
-                scene.add(result);
-                const box = getBoundingBox([result]);
-                offset += box.getSize(new Vector3()).y;
-                offset += .1;
-            }
-        }
-        const camera = new PerspectiveCamera(20);
-        scene.add(camera);
-
-        // Load an environment map
-        const environmentUrl = opts.environment || "https://dl.polyhaven.org/file/ph-assets/HDRIs/exr/1k/studio_small_09_1k.exr";
-        if (environmentUrl) {
-            let loader: DataTextureLoader | null = null;
-            if (environmentUrl.endsWith(".hdr")) {
-                const RGBELoader = (await import("three/examples/jsm/loaders/RGBELoader.js")).RGBELoader;
-                loader = new RGBELoader();
-            }
-            else if (environmentUrl.endsWith(".exr")) {
-                const EXRLoader = (await import("three/examples/jsm/loaders/EXRLoader.js")).EXRLoader;
-                loader = new EXRLoader();
-            }
-            if (loader) {
-                const envmap = await loader.loadAsync(environmentUrl).catch((e) => { console.error(e); return null; });
-                if (envmap) {
-                    envmap.mapping = EquirectangularReflectionMapping;
-                    envmap.needsUpdate = true;
-                    scene.background = envmap;
-                    scene.environment = envmap;
-                    scene.backgroundBlurriness = .75;
-                }
-            }
-            else console.warn("Unsupported environment map format", environmentUrl);
-        }
-
-        const box = getBoundingBox(scene.children);
-        const center = box.getCenter(new Vector3());
-        const size = box.getSize(new Vector3());
-        const max = Math.max(size.x, size.y, size.z);
-        const distance = max / (2 * Math.tan(Math.PI * camera.fov / 360));
-        camera.position.set(center.x, center.y, distance);
-        camera.lookAt(center);
-
-        const orbit = new OrbitControls(camera, opts.domElement || document.body);
-        orbit.target = center;
-        orbit.update();
-
-
-        const element = (opts.domElement || document.body).getBoundingClientRect();
-        camera.aspect = element.width / element.height;
-        camera.updateProjectionMatrix();
-
-        return {
-            scene,
-            camera
-        }
-    }
-}
+import { DataTextureLoader,EquirectangularReflectionMapping, Object3D, PerspectiveCamera, Scene, Vector3 } from "three";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
+
+import { AssetReference } from "./engine_addressables.js";
+import { getBoundingBox } from "./engine_three_utils.js";
+
+declare type ComparisonSceneOptions = {
+    /**
+     * An array of model urls to load
+     */
+    files: string[];
+    /**
+     * Optional dom element to attach the orbit controls to. By default this should be the WebGLRenderer.domElement
+     */
+    domElement?: HTMLElement;
+    /**
+     * Can be a .hdr or .exr file url
+     */
+    environment?: string;
+}
+
+/**
+ * A collection of utility methods for quickly spinning up test environments
+ */
+export class TestSceneUtils {
+
+    /**
+     * Use this method to quickly setup a scene to compare multiple models.  
+     * @example
+     * ```ts
+     * const files = [
+     *    "https://threejs.org/examples/models/gltf/RobotExpressive/RobotExpressive.glb",
+     *   "https://threejs.org/examples/models/gltf/Lantern/glTF-Binary/Lantern.glb",
+     * ];
+     * const { scene, camera } = await TestUtils.createComparisonScene({ files });
+     * // this could now be assigned to the Needle Engine Context
+     * context.scene = scene;
+     * context.mainCamera = camera;
+     * ```
+     */
+    static async createComparisonScene(opts: ComparisonSceneOptions) {
+
+        const { files } = opts;
+
+        const promises = Promise.all(files.map(file => new AssetReference(file).loadAssetAsync()));
+        const results = await promises;
+        const scene = new Scene();
+
+        let offset = 0;
+        for (const result of results) {
+            if (result instanceof Object3D) {
+                result.position.y = offset;
+                scene.add(result);
+                const box = getBoundingBox([result]);
+                offset += box.getSize(new Vector3()).y;
+                offset += .1;
+            }
+        }
+        const camera = new PerspectiveCamera(20);
+        scene.add(camera);
+
+        // Load an environment map
+        const environmentUrl = opts.environment || "https://dl.polyhaven.org/file/ph-assets/HDRIs/exr/1k/studio_small_09_1k.exr";
+        if (environmentUrl) {
+            let loader: DataTextureLoader | null = null;
+            if (environmentUrl.endsWith(".hdr")) {
+                const RGBELoader = (await import("three/examples/jsm/loaders/RGBELoader.js")).RGBELoader;
+                loader = new RGBELoader();
+            }
+            else if (environmentUrl.endsWith(".exr")) {
+                const EXRLoader = (await import("three/examples/jsm/loaders/EXRLoader.js")).EXRLoader;
+                loader = new EXRLoader();
+            }
+            if (loader) {
+                const envmap = await loader.loadAsync(environmentUrl).catch((e) => { console.error(e); return null; });
+                if (envmap) {
+                    envmap.mapping = EquirectangularReflectionMapping;
+                    envmap.needsUpdate = true;
+                    scene.background = envmap;
+                    scene.environment = envmap;
+                    scene.backgroundBlurriness = .75;
+                }
+            }
+            else console.warn("Unsupported environment map format", environmentUrl);
+        }
+
+        const box = getBoundingBox(scene.children);
+        const center = box.getCenter(new Vector3());
+        const size = box.getSize(new Vector3());
+        const max = Math.max(size.x, size.y, size.z);
+        const distance = max / (2 * Math.tan(Math.PI * camera.fov / 360));
+        camera.position.set(center.x, center.y, distance);
+        camera.lookAt(center);
+
+        const orbit = new OrbitControls(camera, opts.domElement || document.body);
+        orbit.target = center;
+        orbit.update();
+
+
+        const element = (opts.domElement || document.body).getBoundingClientRect();
+        camera.aspect = element.width / element.height;
+        camera.updateProjectionMatrix();
+
+        return {
+            scene,
+            camera
+        }
+    }
+}

package/src/engine/engine_texture.ts

@@ -1,82 +1,82 @@
-import type { EffectComposer } from "postprocessing";
-import { Camera, Mesh, Object3D, Texture, WebGLRenderer, WebGLRenderTarget } from "three";
-import type { EffectComposer as ThreeEffectComposer } from "three/examples/jsm/postprocessing/EffectComposer";
-
-import { findResourceUsers } from "./engine_assetdatabase.js";
-
-
-const _prevVisible = Symbol("previous-visibility");
-
-/** 
- * A RenderTexture can be used to render a scene to a texture automatically by assigning it to the `Camera` component's `targetTexture` property.
- * You can then assign the `RenderTexture.texture` to materials to be displayed
- * @example Create a new RenderTexture and assign it to a camera and material
- * ```typescript
- * // create new RenderTexture with a resolution
- * const rt = new RenderTexture(256, 256);
- * // assign to a camera
- * myCameraComponent.targetTexture = rt;
- * // assign to a material
- * myMaterial.map = rt.texture;
- * ```
- */
-export class RenderTexture extends WebGLRenderTarget {
-
-    /**
-     * Render the scene to the texture
-     * @param scene The scene to render
-     * @param camera The camera to render from
-     * @param renderer The renderer or effectcomposer to use
-     */
-    render(scene: Object3D, camera: Camera, renderer: WebGLRenderer | EffectComposer | ThreeEffectComposer) {
-
-        const composer = renderer as (EffectComposer | ThreeEffectComposer);
-
-        if ("addPass" in composer) {
-            if (!this["_unsupported_effectcomposer_warning"]) {
-                console.warn("RenderTexture.render() does not yet support EffectComposer");
-                this["_unsupported_effectcomposer_warning"] = true;
-            }
-        }
-        else if (renderer instanceof WebGLRenderer) {
-            this.onBeforeRender();
-            const prev = renderer.getRenderTarget();
-            const xr = renderer.xr.enabled;
-            renderer.xr.enabled = false;
-            renderer.setRenderTarget(this);
-            renderer.clear(true, true, true);
-            renderer.render(scene, camera);
-            renderer.setRenderTarget(prev);
-            renderer.xr.enabled = xr;
-            this.onAfterRender();
-        }
-    }
-
-
-    private static _userSet: Set<object> = new Set();
-
-    private onBeforeRender() {
-        RenderTexture._userSet.clear();
-        const users = findResourceUsers(this.texture, true, null, RenderTexture._userSet);
-        for (const user of users) {
-            if (user instanceof Mesh) {
-                user[_prevVisible] = user.visible;
-                user.visible = false;
-            }
-        }
-    }
-
-    private onAfterRender() {
-        for (const user of RenderTexture._userSet) {
-            if (user instanceof Mesh) {
-                user.visible = user[_prevVisible];
-            }
-        }
-        RenderTexture._userSet.clear();
-    }
-}
-
-
-
-
-
+import type { EffectComposer } from "postprocessing";
+import { Camera, Mesh, Object3D, Texture, WebGLRenderer, WebGLRenderTarget } from "three";
+import type { EffectComposer as ThreeEffectComposer } from "three/examples/jsm/postprocessing/EffectComposer";
+
+import { findResourceUsers } from "./engine_assetdatabase.js";
+
+
+const _prevVisible = Symbol("previous-visibility");
+
+/** 
+ * A RenderTexture can be used to render a scene to a texture automatically by assigning it to the `Camera` component's `targetTexture` property.
+ * You can then assign the `RenderTexture.texture` to materials to be displayed
+ * @example Create a new RenderTexture and assign it to a camera and material
+ * ```typescript
+ * // create new RenderTexture with a resolution
+ * const rt = new RenderTexture(256, 256);
+ * // assign to a camera
+ * myCameraComponent.targetTexture = rt;
+ * // assign to a material
+ * myMaterial.map = rt.texture;
+ * ```
+ */
+export class RenderTexture extends WebGLRenderTarget {
+
+    /**
+     * Render the scene to the texture
+     * @param scene The scene to render
+     * @param camera The camera to render from
+     * @param renderer The renderer or effectcomposer to use
+     */
+    render(scene: Object3D, camera: Camera, renderer: WebGLRenderer | EffectComposer | ThreeEffectComposer) {
+
+        const composer = renderer as (EffectComposer | ThreeEffectComposer);
+
+        if ("addPass" in composer) {
+            if (!this["_unsupported_effectcomposer_warning"]) {
+                console.warn("RenderTexture.render() does not yet support EffectComposer");
+                this["_unsupported_effectcomposer_warning"] = true;
+            }
+        }
+        else if (renderer instanceof WebGLRenderer) {
+            this.onBeforeRender();
+            const prev = renderer.getRenderTarget();
+            const xr = renderer.xr.enabled;
+            renderer.xr.enabled = false;
+            renderer.setRenderTarget(this);
+            renderer.clear(true, true, true);
+            renderer.render(scene, camera);
+            renderer.setRenderTarget(prev);
+            renderer.xr.enabled = xr;
+            this.onAfterRender();
+        }
+    }
+
+
+    private static _userSet: Set<object> = new Set();
+
+    private onBeforeRender() {
+        RenderTexture._userSet.clear();
+        const users = findResourceUsers(this.texture, true, null, RenderTexture._userSet);
+        for (const user of users) {
+            if (user instanceof Mesh) {
+                user[_prevVisible] = user.visible;
+                user.visible = false;
+            }
+        }
+    }
+
+    private onAfterRender() {
+        for (const user of RenderTexture._userSet) {
+            if (user instanceof Mesh) {
+                user.visible = user[_prevVisible];
+            }
+        }
+        RenderTexture._userSet.clear();
+    }
+}
+
+
+
+
+