@needle-tools/engine 4.7.0-next.a507c47 → 4.7.0-next.b344106

package/plugins/vite/materialx.js

@@ -1,8 +1,8 @@
 import { existsSync } from 'fs';
 
 const materialx_packagejson_path = "node_modules/@needle-tools/materialx/package.json";
-const materialx_import_chunk =
-    `import { useNeedleMaterialX } from "@needle-tools/materialx/needle";
+const materialx_import_chunk = `
+import { useNeedleMaterialX } from "@needle-tools/materialx/needle";
 useNeedleMaterialX();
 `
 
@@ -20,8 +20,10 @@ export const needleMaterialXLoader = (command, config, userSettings) => {
         transform: (code, id) => {
             if (id.endsWith("src/main.ts")) {
                 if (userSettings?.loadMaterialX !== false && existsSync(materialx_packagejson_path)) {
-                    console.log("[needle-materialx-loader] Adding MaterialX import to main.ts");
-                    code = materialx_import_chunk + "\n" + code;
+                    if (!code.includes("@needle-tools/materialx")) {
+                        console.log("[needle-materialx-loader] Adding MaterialX import to main.ts");
+                        code = materialx_import_chunk + "\n" + code;
+                    }
                 }
             }
             return code;

package/src/engine/engine_context.ts

@@ -751,7 +751,7 @@ export class Context implements IContext {
 		ContextRegistry.dispatchCallback(ContextEvent.ContextClearing, this);
 		invokeLifecycleFunctions(this, ContextEvent.ContextClearing);
 		// NOTE: this does dispose the environment/background image too
-		// which is probably not desired if it is set via the skybox-image attribute
+		// which is probably not desired if it is set via the background-image attribute
 		destroy(this.scene, true, true);
 		this.scene = new Scene();
 		this.addressables?.dispose();

package/src/engine/engine_three_utils.ts

@@ -734,6 +734,9 @@ export function getBoundingBox(objects: Object3D | Object3D[], ignore: ((obj: Ob
                 console.warn(`Object \"${obj.name}\" has NaN values in position or scale.... will ignore it`, pos, scale);
                 return;
             }
+            // Sanitize for the three.js method that only checks for undefined here
+            // @ts-ignore
+            if (obj.geometry === null) obj.geometry = undefined;
             box.expandByObject(obj, true);
             obj.children = children;
         }

package/src/engine/webcomponents/needle-engine.attributes.ts

@@ -44,7 +44,7 @@ type LoadingAttributes = {
 }
 
 type SkyboxAttributes = {
-    /** use background-image instead - URL to .exr, .hdr, .png, .jpg to be used as skybox */
+    /** @deprecated. Use background-image instead - URL to .exr, .hdr, .png, .jpg to be used as skybox */
     "skybox-image"?: string,
     /** URL to .exr, .hdr, .png, .jpg to be used as skybox */
     "background-image"?: string, 

package/src/engine-components/Camera.ts

@@ -560,7 +560,7 @@ export class Camera extends Behaviour implements ICamera {
             console.debug(msg);
         }
 
-        const hasBackgroundImageOrColorAttribute = this.context.domElement.getAttribute("background-image") || this.context.domElement.getAttribute("background-color") || this.context.domElement.getAttribute("skybox-image");
+        const hasBackgroundImageOrColorAttribute = this.context.domElement.getAttribute("background-image") || this.context.domElement.getAttribute("background-color");
 
         switch (this._clearFlags) {
             case ClearFlags.None:

package/src/engine-components/CameraUtils.ts

@@ -36,12 +36,14 @@ ContextRegistry.registerCallback(ContextEvent.MissingCamera, (evt) => {
     if (transparentAttribute != undefined) {
         camInstance.clearFlags = ClearFlags.Uninitialized;
     }
-    // Set the clearFlags to a skybox if we have one OR if the user set a skybox image attribute
-    else if (evt.context.domElement.getAttribute("skybox-image")?.length || evt.context.domElement.getAttribute("background-image")?.length || (evt.context as Context).lightmaps.tryGetSkybox(camInstance.sourceId)) {
+    // Set the clearFlags to a skybox if we have one OR if the user set a background-image attribute
+    else if (evt.context.domElement.getAttribute("background-image")?.length || (evt.context as Context).lightmaps.tryGetSkybox(camInstance.sourceId)) {
         camInstance.clearFlags = ClearFlags.Skybox;
         // TODO: can we store the backgroundBlurriness in the gltf file somewhere except inside the camera?
         // e.g. when we export a scene from blender without a camera in the scene
-        camInstance.backgroundBlurriness = .2; // same as in blender 0.5
+        if (evt.context.domElement.getAttribute("background-blurriness") === null) {
+            evt.context.scene.backgroundBlurriness = 0.2; // default value, same as in Blender
+        }
     }
     else {
         camInstance.clearFlags = ClearFlags.SolidColor;

package/src/engine-components/Skybox.ts

@@ -16,10 +16,10 @@ import { Behaviour, GameObject } from "./Component.js";
 
 const debug = getParam("debugskybox");
 
-registerObservableAttribute("skybox-image");
+registerObservableAttribute("background-image");
 registerObservableAttribute("environment-image");
 
-function createRemoteSkyboxComponent(context: IContext, url: string, skybox: boolean, environment: boolean, attribute: "skybox-image" | "environment-image") {
+function createRemoteSkyboxComponent(context: IContext, url: string, skybox: boolean, environment: boolean, attribute: "background-image" | "environment-image") {
     const remote = new RemoteSkybox();
     remote.allowDrop = false;
     remote.allowNetworking = false;
@@ -42,7 +42,7 @@ function createRemoteSkyboxComponent(context: IContext, url: string, skybox: boo
 const promises = new Array<Promise<any>>();
 ContextRegistry.registerCallback(ContextEvent.ContextCreationStart, (args) => {
     const context = args.context;
-    const skyboxImage = context.domElement.getAttribute("skybox-image") || context.domElement.getAttribute("background-image");
+    const skyboxImage = context.domElement.getAttribute("background-image");
     const environmentImage = context.domElement.getAttribute("environment-image");
     if (skyboxImage) {
         if (debug)
@@ -50,8 +50,8 @@ ContextRegistry.registerCallback(ContextEvent.ContextCreationStart, (args) => {
         // if the user is loading a GLB without a camera then the CameraUtils (which creates the default camera)
         // checks if we have this attribute set and then sets the skybox clearflags accordingly
         // if the user has a GLB with a camera but set to solid color then the skybox image is not visible -> we will just warn then and not override the camera settings
-        if (context.mainCameraComponent?.clearFlags !== ClearFlags.Skybox) console.warn("\"skybox-image\"/\"background-image\" attribute has no effect: camera clearflags are not set to \"Skybox\"");
-        const promise = createRemoteSkyboxComponent(context, skyboxImage, true, false, "skybox-image");
+        if (context.mainCameraComponent?.clearFlags !== ClearFlags.Skybox) console.warn("\"background-image\" attribute has no effect: camera clear flags are not set to \"Skybox\"");
+        const promise = createRemoteSkyboxComponent(context, skyboxImage, true, false, "background-image");
         promises.push(promise);
     }
     if (environmentImage) {