@needle-tools/engine 4.7.0-next.4ec920e → 4.7.0-next.598a777

package/src/engine/engine_addressables.ts

@@ -188,14 +188,11 @@ export class AssetReference {
     private _urlName: string;
     private _progressListeners: ProgressCallback[] = [];
 
-    private _hash?: string;
-    private _hashedUri: string;
-
     private _isLoadingRawBinary: boolean = false;
     private _rawBinary?: ArrayBufferLike | null;
 
     /** @internal */
-    constructor(uri: string, hash?: string, asset: any = null) {
+    constructor(uri: string, _hash?: string, asset: any = null) {
         this._url = uri;
 
         const lastUriPart = uri.lastIndexOf("/");
@@ -210,14 +207,8 @@ export class AssetReference {
         else {
             this._urlName = uri;
         }
-
-        this._hash = hash;
-        if (uri.includes("?v="))
-            this._hashedUri = uri;
-        else
-            this._hashedUri = hash ? uri + "?v=" + hash : uri;
+        
         if (asset !== null) this.asset = asset;
-
         registerPrefabProvider(this._url, this.onResolvePrefab.bind(this));
     }
 
@@ -263,8 +254,8 @@ export class AssetReference {
         if (this._isLoadingRawBinary) return null;
         if (this._rawBinary !== undefined) return this._rawBinary;
         this._isLoadingRawBinary = true;
-        if (debug) console.log("Preload", this._hashedUri);
-        const res = await BlobStorage.download(this._hashedUri, p => {
+        if (debug) console.log("Preload", this.url);
+        const res = await BlobStorage.download(this.url, p => {
             this.raiseProgressEvent(p);
         });
         this._rawBinary = res?.buffer ?? null;
@@ -294,7 +285,7 @@ export class AssetReference {
         // console.log("START LOADING");
         if (this._rawBinary) {
             if (!(this._rawBinary instanceof ArrayBuffer)) {
-                console.error("Invalid raw binary data", this._rawBinary);
+                console.error("Failed loading: Invalid raw binary data. Must be of type ArrayBuffer. " + (typeof this._rawBinary));
                 return null;
             }
             this._loading = getLoader().parseSync(context, this._rawBinary, this.url, null);
@@ -302,7 +293,7 @@ export class AssetReference {
         }
         else {
             if (debug) console.log("Load async", this.url);
-            this._loading = getLoader().loadSync(context, this._hashedUri, this.url, null, prog => {
+            this._loading = getLoader().loadSync(context, this.url, this.url, null, prog => {
                 this.raiseProgressEvent(prog);
             });
         }

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_lightdata.ts

@@ -53,10 +53,12 @@ export class LightDataRegistry implements ILightDataRegistry {
     }
 
     tryGetSkybox(sourceId?: SourceIdentifier | null): Texture | null {
+        if (debugLightmap) console.log("[Get Skybox]", sourceId, this._lightmaps)
         return this.tryGet(sourceId, LightmapType.Skybox, 0);
     }
 
     tryGetReflection(sourceId?: SourceIdentifier | null): Texture | null {
+        if (debugLightmap) console.log("[Get Reflection]", sourceId, this._lightmaps)
         return this.tryGet(sourceId, LightmapType.Reflection, 0);
     }
 
@@ -66,9 +68,15 @@ export class LightDataRegistry implements ILightDataRegistry {
             return null;
         }
         const entry = this._lightmaps.get(sourceId);
-        if (!entry) return null;
+        if (!entry) {
+            if (debugLightmap) console.warn(`[Lighting] No ${LightmapType[type]} texture entry for`, sourceId);
+            return null;
+        }
         const arr = entry.get(type);
-        if (arr === undefined) return null;
+        if (arr === undefined) {
+            if (debugLightmap) console.warn(`[Lighting] No ${LightmapType[type]} texture for`, sourceId, "index", index);
+            return null;
+        }
         if (!arr?.length || arr.length <= index) return null;
         return arr[index];
     }

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) {

package/src/engine-components/postprocessing/Effects/Antialiasing.ts

@@ -1,10 +1,13 @@
 import { MODULES } from "../../../engine/engine_modules.js";
 import { serializable } from "../../../engine/engine_serialization.js";
+import { getParam } from "../../../engine/engine_utils.js";
 import { type EffectProviderResult, PostProcessingEffect } from "../PostProcessingEffect.js";
 import { VolumeParameter } from "../VolumeParameter.js";
 import { registerCustomEffectType } from "../VolumeProfile.js";
 
 
+const debug = getParam("debugpost");
+
 
 export enum QualityLevel {
     LOW = 0,
@@ -32,15 +35,19 @@ export class Antialiasing extends PostProcessingEffect {
 
     onCreateEffect(): EffectProviderResult {
         const effect = new MODULES.POSTPROCESSING.MODULE.SMAAEffect({
-            preset: MODULES.POSTPROCESSING.MODULE.SMAAPreset.HIGH,
+            preset: this.preset?.value ?? MODULES.POSTPROCESSING.MODULE.SMAAPreset.HIGH,
             edgeDetectionMode: MODULES.POSTPROCESSING.MODULE.EdgeDetectionMode.LUMA,
             // Keep predication mode disabled (default) since it looks better
             // predicationMode: MODULES.POSTPROCESSING.MODULE.PredicationMode.DEPTH,
         });
 
         this.preset.onValueChanged = (newValue) => {
+            if(debug) console.log("Antialiasing preset changed to", newValue);
             effect.applyPreset(newValue);
         };
+        // setInterval(()=> {
+        //     effect.applyPreset(Math.floor(Math.random()*3))
+        // }, 1000)
 
         // effect.edgeDetectionMaterial.edgeDetectionThreshold = .01;
 

package/src/engine-components/postprocessing/Effects/ScreenspaceAmbientOcclusionN8.ts

@@ -124,7 +124,7 @@ export class ScreenSpaceAmbientOcclusionN8 extends PostProcessingEffect {
             cam,
             width, height
         ) as N8AOPostPass;
-        ssao.name = "SSAO N8";
+        ssao.name = "SSAO_N8";
 
         const mode = ScreenSpaceAmbientOcclusionN8QualityMode[this.quality];
         ssao.setQualityMode(mode);

package/src/engine-components/postprocessing/PostProcessingHandler.ts

@@ -162,9 +162,11 @@ export class PostProcessingHandler {
                     const res = component.apply(ctx);
                     if (!res) continue;
 
+                    const name = component.typeName || component.constructor.name;
 
                     if (Array.isArray(res)) {
                         for (const effect of res) {
+                            if (!validateEffect(name, effect)) continue;
                             this._effects.push({
                                 effect,
                                 typeName: component.typeName,
@@ -173,12 +175,23 @@ export class PostProcessingHandler {
                         }
                     }
                     else {
+                        if (!validateEffect(name, res)) continue;
                         this._effects.push({
                             effect: res,
                             typeName: component.typeName,
                             priority: component.order
                         });
                     }
+
+                    function validateEffect(source: string, effect: Effect | Pass): boolean {
+                        if (!effect) {
+                            return false;
+                        }
+                        if (!(effect instanceof MODULES.POSTPROCESSING.MODULE.Effect || effect instanceof MODULES.POSTPROCESSING.MODULE.Pass)) {
+                            console.warn(`PostprocessingEffect ${source} created neither Effect nor Pass - this might be caused by a bundler error or false import. Below you find some possible solutions:\n- If you create custom effect try creating it like this: 'new NEEDLE_ENGINE_MODULES.POSTPROCESSING.MODULE.Effect(...)' instead of 'new Effect(...)'`);
+                        }
+                        return true;
+                    }
                 }
             }
             else {
@@ -403,7 +416,7 @@ export class PostProcessingHandler {
                     if (attributes & convolution) {
                         if (debug) console.log("[PostProcessing] Convolution effect: " + ef.name);
                         if (hasConvolutionEffectInArray) {
-                            if (debug) console.log("[PostProcessing] Merging effects with convolution", effectsToMerge.map(e => e.name).join(", "));
+                            if (debug) console.log("[PostProcessing] → Merging effects [" + effectsToMerge.map(e => e.name).join(", ") + "]");
                             this.createPassForMergeableEffects(effectsToMerge, composer, cam, scene);
                         }
                         hasConvolutionEffectInArray = true;
@@ -448,7 +461,6 @@ export class PostProcessingHandler {
                 }
                 foundEnabled = true;
             }
-
             pass.renderToScreen = renderToScreen;
 
             if ((pass as any)?.configuration !== undefined) {

package/src/engine-components/postprocessing/Volume.ts

@@ -194,7 +194,7 @@ export class Volume extends Behaviour implements IEditorModificationReceiver, IP
                         if (this._postprocessing.multisampling !== 0) {
                             this._postprocessing.multisampling = 0;
                             if (debug || isDevEnvironment()) {
-                                console.warn(`[PostProcessing] Disabling multisampling you're using SMAA and have set the 'multisampling: auto' on your PostprocessingManager/Volume component. If you need anti-aliasing, consider adding an Antialiasing component or SMAA effect to the PostprocessingManager.`);
+                                console.log(`[PostProcessing] multisampling is disabled because it's set to 'auto' on your PostprocessingManager/Volume component that also has an SMAA effect.\n\nIf you need multisampling consider changing 'auto' to a fixed value (e.g. 4).`);
                             }
                         }
                     }