@needle-tools/engine 3.27.0-beta → 3.27.2-beta

package/lib/engine-components/export/usdz/index.d.ts

@@ -1,3 +1,3 @@
 export { USDZExporter } from "./USDZExporter.js";
-export { USDObject } from "./ThreeUSDZExporter.js";
+export { USDObject, imageToCanvas } from "./ThreeUSDZExporter.js";
 export { type UsdzBehaviour } from "./extensions/behavior/Behaviour.js";

package/lib/engine-components/export/usdz/index.js

@@ -1,3 +1,3 @@
 export { USDZExporter } from "./USDZExporter.js";
-export { USDObject } from "./ThreeUSDZExporter.js";
+export { USDObject, imageToCanvas } from "./ThreeUSDZExporter.js";
 //# sourceMappingURL=index.js.map

package/lib/engine-components/export/usdz/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/engine-components/export/usdz/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/engine-components/export/usdz/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@needle-tools/engine",
-    "version": "3.27.0-beta",
+    "version": "3.27.2-beta",
     "description": "Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development with great integrations into editors like Unity or Blender - and can be deployed onto any device! It is flexible, extensible and networking and XR are built-in",
     "main": "dist/needle-engine.umd.cjs",
     "type": "module",

package/src/engine/engine_addressables.ts

@@ -186,7 +186,7 @@ export class AssetReference {
             this._progressListeners.push(prog);
         if (this._loading !== undefined) {
             // console.warn("Wait for other loading thiny");
-            return this._loading;
+            return this._loading.then(_ => this.asset);
         }
         const context = Context.Current;
         // TODO: technically we shouldnt call awake only when the object is added to a scene

package/src/engine/engine_element.ts

@@ -94,7 +94,7 @@ export class NeedleEngineHTMLElement extends HTMLElement implements INeedleEngin
         this._overlay_ar = new AROverlayHandler();
         // TODO: do we want to rename this event?
         this.addEventListener("ready", this.onReady);
-
+ 
         this.attachShadow({ mode: 'open' });
         const template = document.createElement('template');
         template.innerHTML = `<style>
@@ -105,8 +105,8 @@ export class NeedleEngineHTMLElement extends HTMLElement implements INeedleEngin
         display: block;
         width: max(600px, 100%);
         height: max(300px, 100%);
-        font-family: 'Roboto', sans-serif;
     }
+
     @media (max-width: 600px) {
         :host {
             width: 100%;

package/src/engine/extensions/extensions.ts

@@ -1,12 +1,9 @@
 import { NEEDLE_techniques_webgl } from "./NEEDLE_techniques_webgl.js";
-import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+import { GLTFLoader, GLTFParser } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { NEEDLE_components } from "./NEEDLE_components.js";
 import { EXT_texture_exr } from "./EXT_texture_exr.js";
 import { NEEDLE_gameobject_data } from "./NEEDLE_gameobject_data.js";
-// import { NEEDLE_timeline } from "./NEEDLE_timeline.js";
-// import { NEEDLE_animator_controller } from "./NEEDLE_animator_controller.js";
 import { NEEDLE_persistent_assets } from "./NEEDLE_persistent_assets.js";
-// import { KHR_animation_pointer } from "./KHR_animation_pointer.js";
 import { NEEDLE_lightmaps } from "../extensions/NEEDLE_lightmaps.js";
 import { type ConstructorConcrete, type SourceIdentifier } from "../engine_types.js";
 import { Context } from "../engine_setup.js";
@@ -15,10 +12,9 @@ import { NEEDLE_render_objects } from "./NEEDLE_render_objects.js";
 import { NEEDLE_progressive } from "./NEEDLE_progressive.js";
 import { InternalUsageTrackerPlugin } from "./usage_tracker.js";
 import { isResourceTrackingEnabled } from "../engine_assetdatabase.js";
-import { type GLTFLoaderPlugin } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { getParam } from "../engine_utils.js";
 import { isDevEnvironment } from "../debug/index.js";
-// import { GLTFAnimationPointerExtension } from "three/examples/jsm/loaders/GLTFLoaderAnimationPointer.js";
+import { GLTFExporter, GLTFExporterPlugin, GLTFWriter } from "three/examples/jsm/exporters/GLTFExporter.js";
 
 const debug = getParam("debugextensions");
 
@@ -31,20 +27,32 @@ const KHR_ANIMATIONPOINTER_IMPORT = import("three/examples/jsm/loaders/GLTFLoade
     console.warn("Failed to import GLTFLoaderAnimationPointer. Please use @needle-tools/three for full KHR_animation support", e);
 });
 
-const _addedCustomExtension = new Array<ConstructorConcrete<GLTFLoaderPlugin>>();
 
-export function addCustomExtension(ext: ConstructorConcrete<GLTFLoaderPlugin>) {
-    if (!_addedCustomExtension.includes(ext)) {
-        if(!ext.name) console.warn("Custom extension has no name", ext);
-        _addedCustomExtension.push(ext);
+declare type OnImportCallback = (loader: GLTFLoader, sourceId: SourceIdentifier, context: Context) => void;
+declare type OnExportCallback = (exp: GLTFExporter, context: Context) => void;
+
+export interface INeedleGLTFExtensionPlugin {
+    name: string;
+    onImport?: OnImportCallback;
+    onExport?: OnExportCallback
+}
+
+/** Register callbacks for registering custom gltf importer or exporter plugins */
+export function addCustomExtensionPlugin(ext: INeedleGLTFExtensionPlugin) {
+    if (!_plugins.includes(ext)) {
+        _plugins.push(ext);
     }
 }
-export function removeCustomExtension(ext: ConstructorConcrete<GLTFLoaderPlugin>) {
-    const index = _addedCustomExtension.indexOf(ext);
+/** Unregister callbacks for registering custom gltf importer or exporter plugins */
+export function removeCustomImportExtensionType(ext: INeedleGLTFExtensionPlugin) {
+    const index = _plugins.indexOf(ext);
     if (index >= 0)
-        _addedCustomExtension.splice(index, 1);
+        _plugins.splice(index, 1);
 }
+const _plugins = new Array<INeedleGLTFExtensionPlugin>();
+
 
+/** Registers the Needle Engine components extension */
 export function registerComponentExtension(loader: GLTFLoader): NEEDLE_components {
     const ext = new NEEDLE_components();
     loader.register(p => {
@@ -83,8 +91,9 @@ export async function registerExtensions(loader: GLTFLoader, context: Context, s
     loader.register(p => new EXT_texture_exr(p));
     if (isResourceTrackingEnabled()) loader.register(p => new InternalUsageTrackerPlugin(p))
 
-    for (const ext of _addedCustomExtension)
-        loader.register(p => new ext(p));
+    for (const plugin of _plugins) {
+        if (plugin.onImport) plugin.onImport(loader, sourceId, context);
+    }
 
     await KHR_ANIMATIONPOINTER_IMPORT.catch(_ => { })
     loader.register(p => {
@@ -102,4 +111,9 @@ export async function registerExtensions(loader: GLTFLoader, context: Context, s
         }
     });
 
+}
+
+export function registerExportExtensions(exp: GLTFExporter, context: Context) {
+    for (const ext of _plugins)
+        if (ext.onExport) ext.onExport(exp, context);
 }

package/src/engine-components/OrbitControls.ts

@@ -204,7 +204,7 @@ export class OrbitControls extends Behaviour implements ICameraController {
                 this._cameraObject = cam;
             // Using the parent if possible to make it possible to disable input on the canvas
             // for having HTML content behind it and still receive input
-            const element = this.targetElement ?? this.context.domElement;
+            const element = this.targetElement ?? this.context.renderer.domElement;
             // HACK: workaround for three orbit controls forcing an update when being created....
             const mat = cam?.quaternion.clone();
             this._controls = new ThreeOrbitControls(cam!, element);

package/src/engine-components/Renderer.ts

@@ -8,7 +8,7 @@ import { serializable } from "../engine/engine_serialization_decorator.js";
 import { AxesHelper, Material, Matrix4, Mesh, Object3D, SkinnedMesh, Texture, Vector4 } from "three";
 import { NEEDLE_render_objects } from "../engine/extensions/NEEDLE_render_objects.js";
 import { NEEDLE_progressive } from "../engine/extensions/NEEDLE_progressive.js";
-import { NEED_UPDATE_INSTANCE_KEY } from "../engine/engine_instancing.js";
+import { InstancingUtil, NEED_UPDATE_INSTANCE_KEY } from "../engine/engine_instancing.js";
 import type { IRenderer, ISharedMaterials } from "../engine/engine_types.js";
 import { ReflectionProbe } from "./ReflectionProbe.js";
 import { setCustomVisibility } from "../engine/js-extensions/Layers.js";
@@ -505,6 +505,9 @@ export class Renderer extends Behaviour implements IRenderer {
     start() {
         if (this.enableInstancing && !suppressInstancing) {
             this.setInstancingEnabled(true);
+            // make sure the instance is marked dirty once for cases where e.g. an animator animates the instanced object
+            // in the first frame we want the updated matrix then to be applied immediately to the instancing
+            InstancingUtil.markDirty(this.gameObject);
         }
         this.gameObject.frustumCulled = this.allowOcclusionWhenDynamic;
         if (this.isMultiMaterialObject(this.gameObject)) {

package/src/engine-components/export/gltf/GltfExport.ts

@@ -1,5 +1,5 @@
 import { Object3D, Vector3 } from "three";
-import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js';
+import { GLTFExporter, type GLTFExporterOptions } from 'three/examples/jsm/exporters/GLTFExporter.js';
 
 import { Behaviour, GameObject } from "../../Component.js";
 import GLTFMeshGPUInstancingExtension from '../../../include/three/EXT_mesh_gpu_instancing_exporter.js';
@@ -11,11 +11,11 @@ import { getWorldPosition } from "../../../engine/engine_three_utils.js";
 import { BoxHelperComponent } from "../../BoxHelperComponent.js";
 import { AnimationClip } from "three";
 import { getParam } from "../../../engine/engine_utils.js";
+import { registerExportExtensions } from "../../../engine/extensions/index.js";
 
 const debugExport = getParam("debuggltfexport");
 
-declare type ExportOptions = {
-    binary: boolean,
+declare type ExportOptions = GLTFExporterOptions & {
     pivot?: THREE.Vector3
 }
 
@@ -34,7 +34,6 @@ export class GltfExport extends Behaviour {
     @serializable(Object3D)
     objects: Object3D[] = [];
 
-    private exporter?: GLTFExporter;
     private ext?: NEEDLE_components;
 
     async exportNow(name: string) {
@@ -70,15 +69,10 @@ export class GltfExport extends Behaviour {
             return;
         }
 
-        if (!this.exporter) {
-            // Instantiate a exporter
-            this.exporter = new GLTFExporter();
-            this.exporter.register(writer => new GLTFMeshGPUInstancingExtension(writer));
-
-            // TODO
-            // this.ext = new NEEDLE_components();
-            // this.ext.registerExport(this.exporter);
-        }
+        // Instantiate a exporter
+        const exporter = new GLTFExporter();
+        exporter.register(writer => new GLTFMeshGPUInstancingExtension(writer));
+        registerExportExtensions(exporter, this.context);
 
         GltfExport.filterTopmostParent(objectsToExport);
 
@@ -90,11 +84,12 @@ export class GltfExport extends Behaviour {
             trs: false,
             onlyVisible: true,
             truncateDrawRange: false,
-            binary: opts?.binary ?? true,
+            binary: true,
             maxTextureSize: Infinity, // To prevent NaN value,
             embedImages: true,
             includeCustomExtensions: true,
-            animations: GltfExport.collectAnimations(objectsToExport),
+            animations: opts?.animations || GltfExport.collectAnimations(objectsToExport),
+            ...opts
         };
 
         // hide objects that we don't want to export
@@ -128,7 +123,7 @@ export class GltfExport extends Behaviour {
             if (debugExport) console.log("Starting glTF export.")
             try {
                 // Parse the input and generate the glTF output
-                this.exporter?.parse(
+                exporter?.parse(
                     exportScene,
                     // called when the gltf has been generated
                     res => {
@@ -140,7 +135,6 @@ export class GltfExport extends Behaviour {
                         cleanup();
                         reject(err);
                     },
-                    //@ts-ignore
                     options
                 );
             }

package/src/engine-components/export/usdz/index.ts

@@ -1,3 +1,3 @@
 export { USDZExporter } from "./USDZExporter.js";
-export { USDObject } from "./ThreeUSDZExporter.js";
+export { USDObject, imageToCanvas } from "./ThreeUSDZExporter.js";
 export { type UsdzBehaviour } from "./extensions/behavior/Behaviour.js";