@needle-tools/engine 4.10.0-next.55c0bf9 → 4.10.0-next.f5ce0ae

package/src/engine/engine_gizmos.ts

@@ -1,4 +1,4 @@
-import { AxesHelper, Box3, BoxGeometry, BufferAttribute, BufferGeometry, Color, type ColorRepresentation, CylinderGeometry, EdgesGeometry, Line, LineBasicMaterial, LineSegments, Matrix4, Mesh, MeshBasicMaterial, Object3D, Quaternion, SphereGeometry, Vector3 } from 'three';
+import { AxesHelper, Box3, BoxGeometry, BufferAttribute, BufferGeometry, Color, type ColorRepresentation, CylinderGeometry, EdgesGeometry, Line, LineBasicMaterial, LineSegments, Material,Matrix4, Mesh, MeshBasicMaterial, Object3D, Quaternion, SphereGeometry, Vector3 } from 'three';
 import ThreeMeshUI, { Inline, Text } from "three-mesh-ui"
 import { type Options } from 'three-mesh-ui/build/types/core/elements/MeshUIBaseElement.js';
 
@@ -8,6 +8,7 @@ import { getTempVector, getWorldPosition, lookAtObject, setWorldPositionXYZ } fr
 import type { Vec3, Vec4 } from './engine_types.js';
 import { getParam } from './engine_utils.js';
 import { NeedleXRSession } from './engine_xr.js';
+import { RGBAColor } from './js-extensions/RGBAColor.js';
 
 const _tmp = new Vector3();
 const _tmp2 = new Vector3();
@@ -21,7 +22,7 @@ const circleSegments: number = 32;
 export type LabelHandle = {
     setText(str: string);
 }
-declare type ColorWithAlpha = Color & { a: number };
+type GizmoColor = ColorRepresentation | (Color & { a: number }) | RGBAColor;
 
 /** Gizmos are temporary objects that are drawn in the scene for debugging or visualization purposes  
  * They are automatically removed after a given duration and cached internally to reduce overhead.  
@@ -62,7 +63,7 @@ export class Gizmos {
      * @param parent the parent object to attach the label to. If no parent is provided the label will be attached to the scene
      * @returns a handle to the label that can be used to update the text
      */
-    static DrawLabel(position: Vec3, text: string, size: number = .05, duration: number = 0, color?: ColorRepresentation, backgroundColor?: ColorRepresentation | ColorWithAlpha, parent?: Object3D,) {
+    static DrawLabel(position: Vec3, text: string, size: number = .05, duration: number = 0, color?: ColorRepresentation, backgroundColor?: ColorRepresentation | GizmoColor, parent?: Object3D,) {
         if (!Gizmos.enabled) return null;
         if (!color) color = defaultColor;
         const rigScale = NeedleXRSession.active?.rigScale ?? 1;
@@ -82,7 +83,7 @@ export class Gizmos {
      * @param duration the duration in seconds the ray will be rendered. If 0 it will be rendered for one frame
      * @param depthTest if true the ray will be rendered with depth test
      */
-    static DrawRay(origin: Vec3, dir: Vec3, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
+    static DrawRay(origin: Vec3, dir: Vec3, color: GizmoColor = defaultColor, duration: number = 0, depthTest: boolean = true) {
         if (!Gizmos.enabled) return;
         const obj = Internal.getLine(duration);
         const positions = obj.geometry.getAttribute("position");
@@ -90,9 +91,10 @@ export class Gizmos {
         _tmp.set(dir.x, dir.y, dir.z).multiplyScalar(999999999);
         positions.setXYZ(1, origin.x + _tmp.x, origin.y + _tmp.y, origin.z + _tmp.z);
         positions.needsUpdate = true;
-        obj.material["color"].set(color);
         obj.material["depthTest"] = depthTest;
         obj.material["depthWrite"] = false;
+        obj.material["fog"] = false;
+        applyGizmoColor(obj.material, color);
     }
 
     /**
@@ -104,7 +106,7 @@ export class Gizmos {
      * @param depthTest if true the line will be rendered with depth test
      * @param lengthFactor the length of the line. Default is 1
      */
-    static DrawDirection(pt: Vec3, direction: Vec3 | Vec4, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true, lengthFactor: number = 1) {
+    static DrawDirection(pt: Vec3, direction: Vec3 | Vec4, color: GizmoColor = defaultColor, duration: number = 0, depthTest: boolean = true, lengthFactor: number = 1) {
         if (!Gizmos.enabled) return;
         const obj = Internal.getLine(duration);
         const positions = obj.geometry.getAttribute("position");
@@ -120,10 +122,9 @@ export class Gizmos {
         }
         positions.setXYZ(1, pt.x + _tmp.x, pt.y + _tmp.y, pt.z + _tmp.z);
         positions.needsUpdate = true;
-        obj.material["color"].set(color);
         obj.material["depthTest"] = depthTest;
         obj.material["depthWrite"] = false;
-
+        applyGizmoColor(obj.material, color);
     }
 
     /**
@@ -134,17 +135,17 @@ export class Gizmos {
      * @param duration the duration in seconds the line will be rendered. If 0 it will be rendered for one frame
      * @param depthTest if true the line will be rendered with depth test
      */
-    static DrawLine(pt0: Vec3, pt1: Vec3, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
+    static DrawLine(pt0: Vec3, pt1: Vec3, color: GizmoColor = defaultColor, duration: number = 0, depthTest: boolean = true) {
         if (!Gizmos.enabled) return;
         const obj = Internal.getLine(duration);
         const positions = obj.geometry.getAttribute("position");
         positions.setXYZ(0, pt0.x, pt0.y, pt0.z);
         positions.setXYZ(1, pt1.x, pt1.y, pt1.z);
         positions.needsUpdate = true;
-        obj.material["color"].set(color);
         obj.material["depthTest"] = depthTest;
         obj.material["depthWrite"] = false;
         obj.material["fog"] = false;
+        applyGizmoColor(obj.material, color);
     }
 
     /**
@@ -162,10 +163,10 @@ export class Gizmos {
         obj.position.set(pt0.x, pt0.y, pt0.z);
         obj.scale.set(radius, radius, radius);
         obj.quaternion.setFromUnitVectors(this._up, _tmp.set(normal.x, normal.y, normal.z).normalize());
-        obj.material["color"].set(color);
         obj.material["depthTest"] = depthTest;
         obj.material["depthWrite"] = false;
         obj.material["fog"] = false;
+        applyGizmoColor(obj.material, color);
     }
 
     /**
@@ -176,14 +177,14 @@ export class Gizmos {
      * @param duration the duration in seconds the sphere will be rendered. If 0 it will be rendered for one frame
      * @param depthTest if true the sphere will be rendered with depth test
      */
-    static DrawWireSphere(center: Vec3, radius: number, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
+    static DrawWireSphere(center: Vec3, radius: number, color: GizmoColor = defaultColor, duration: number = 0, depthTest: boolean = true) {
         if (!Gizmos.enabled) return;
         const obj = Internal.getSphere(radius, duration, true);
         setWorldPositionXYZ(obj, center.x, center.y, center.z);
-        obj.material["color"].set(color);
         obj.material["depthTest"] = depthTest;
         obj.material["depthWrite"] = false;
         obj.material["fog"] = false;
+        applyGizmoColor(obj.material, color);
     }
 
     /**
@@ -194,13 +195,13 @@ export class Gizmos {
      * @param duration the duration in seconds the sphere will be rendered. If 0 it will be rendered for one frame
      * @param depthTest if true the sphere will be rendered with depth test
      */
-    static DrawSphere(center: Vec3, radius: number, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
+    static DrawSphere(center: Vec3, radius: number, color: GizmoColor = defaultColor, duration: number = 0, depthTest: boolean = true) {
         if (!Gizmos.enabled) return;
         const obj = Internal.getSphere(radius, duration, false);
         setWorldPositionXYZ(obj, center.x, center.y, center.z);
-        obj.material["color"].set(color);
         obj.material["depthTest"] = depthTest;
         obj.material["depthWrite"] = false;
+        applyGizmoColor(obj.material, color);
     }
 
     /**
@@ -212,18 +213,18 @@ export class Gizmos {
      * @param duration the duration in seconds the box will be rendered. If 0 it will be rendered for one frame
      * @param depthTest if true the box will be rendered with depth test
      */
-    static DrawWireBox(center: Vec3, size: Vec3, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true, rotation: Quaternion|undefined = undefined) {
+    static DrawWireBox(center: Vec3, size: Vec3, color: GizmoColor = defaultColor, duration: number = 0, depthTest: boolean = true, rotation: Quaternion | undefined = undefined) {
         if (!Gizmos.enabled) return;
         const obj = Internal.getBox(duration);
         obj.position.set(center.x, center.y, center.z);
         obj.scale.set(size.x, size.y, size.z);
-        if(rotation) obj.quaternion.copy(rotation);
+        if (rotation) obj.quaternion.copy(rotation);
         else obj.quaternion.identity();
-        obj.material["color"].set(color);
         obj.material["depthTest"] = depthTest;
         obj.material["wireframe"] = true;
         obj.material["depthWrite"] = false;
         obj.material["fog"] = false;
+        applyGizmoColor(obj.material, color);
     }
 
     /**
@@ -233,16 +234,16 @@ export class Gizmos {
      * @param duration the duration in seconds the box will be rendered. If 0 it will be rendered for one frame. Default: 0
      * @param depthTest if true the box will be rendered with depth test. Default: true
      */
-    static DrawWireBox3(box: Box3, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
+    static DrawWireBox3(box: Box3, color: GizmoColor = defaultColor, duration: number = 0, depthTest: boolean = true) {
         if (!Gizmos.enabled) return;
         const obj = Internal.getBox(duration);
         obj.position.copy(box.getCenter(_tmp));
         obj.scale.copy(box.getSize(_tmp));
-        obj.material["color"].set(color);
         obj.material["depthTest"] = depthTest;
         obj.material["wireframe"] = true;
         obj.material["depthWrite"] = false;
         obj.material["fog"] = false;
+        applyGizmoColor(obj.material, color);
     }
 
     private static _up = new Vector3(0, 1, 0);
@@ -263,9 +264,9 @@ export class Gizmos {
         const dist = _tmp.set(pt1.x, pt1.y, pt1.z).sub(_tmp2.set(pt0.x, pt0.y, pt0.z)).length();
         const scale = dist * 0.1;
         obj.scale.set(scale, scale, scale);
-        obj.material["color"].set(color);
         obj.material["depthTest"] = depthTest;
         obj.material["wireframe"] = wireframe;
+        applyGizmoColor(obj.material, color);
         this.DrawLine(pt0, pt1, color, duration, depthTest);
     }
 
@@ -296,9 +297,9 @@ export class Gizmos {
         }
         mesh.matrixAutoUpdate = false;
         mesh.matrixWorldAutoUpdate = false;
-        mesh.material["color"].set(options.color ?? defaultColor);
         mesh.material["depthTest"] = options.depthTest ?? true;
         mesh.material["wireframe"] = true;
+        applyGizmoColor(mesh.material, options.color ?? defaultColor);
     }
 }
 
@@ -316,6 +317,19 @@ export function CreateWireCube(col: ColorRepresentation | null = null): LineSegm
 }
 
 
+function applyGizmoColor(material: Material | Material[], color: GizmoColor) {
+    if (Array.isArray(material)) {
+        for (const mat of material) {
+            applyGizmoColor(mat, color);
+        }
+        return;
+    }
+    const alpha = (color instanceof RGBAColor) ? color.a : 1.0;
+    material["color"].set(color);
+    material["opacity"] = alpha;
+    material["transparent"] = alpha < 1.0;
+}
+
 
 const $cacheSymbol = Symbol("GizmoCache");
 class Internal {
@@ -335,7 +349,7 @@ class Internal {
         }
     }
 
-    static getTextLabel(duration: number, text: string, size: number, color: ColorRepresentation, backgroundColor?: ColorRepresentation | ColorWithAlpha): Text & LabelHandle {
+    static getTextLabel(duration: number, text: string, size: number, color: ColorRepresentation, backgroundColor?: ColorRepresentation | GizmoColor): Text & LabelHandle {
         this.ensureFont();
         let element = this.textLabelCache.pop();
 

package/src/engine/engine_license.ts

@@ -342,7 +342,7 @@ async function sendUsageMessageToAnalyticsBackend(context: IContext) {
     if (window.crossOriginIsolated) return;
 
     const licenseType = NEEDLE_ENGINE_LICENSE_TYPE;
-    if (licenseType === "pro") {
+    if (licenseType === "pro" || licenseType === "enterprise") {
         const attribute = context?.domElement?.getAttribute("no-telemetry");
         if (attribute === "" || attribute === "true" || attribute === "1") {
             if (debug) console.debug("Telemetry is disabled");

package/src/engine/engine_lightdata.ts

@@ -1,7 +1,7 @@
 import { ShaderChunk, Texture, UniformsLib, Vector4 } from "three";
 
 import { setDisposable } from "./engine_assetdatabase.js";
-import { Context } from "./engine_setup.js";
+import type { Context } from "./engine_setup.js";
 import type { SourceIdentifier } from "./engine_types.js";
 import { getParam } from "./engine_utils.js";
 import { LightmapType } from "./extensions/NEEDLE_lightmaps.js";
@@ -27,22 +27,22 @@ export interface ILightDataRegistry {
 
 export class LightDataRegistry implements ILightDataRegistry {
 
-    private _context: Context;
-    private _lightmaps: Map<SourceIdentifier, Map<LightmapType, Texture[]>> = new Map();
+    private readonly context: Context;
+    private readonly map: Map<SourceIdentifier, Map<LightmapType, Texture[]>> = new Map();
 
     clear() {
-        this._lightmaps.clear();
+        this.map.clear();
     }
 
     constructor(context: Context) {
-        this._context = context;
+        this.context = context;
     }
 
     registerTexture(sourceId: SourceIdentifier, type: LightmapType, tex: Texture, index: number) {
         if (debugLightmap) console.log("Registering ", LightmapType[type] + " \"" + sourceId + "\"", tex);
-        if (!this._lightmaps.has(sourceId))
-            this._lightmaps.set(sourceId, new Map());
-        const map = this._lightmaps.get(sourceId);
+        if (!this.map.has(sourceId))
+            this.map.set(sourceId, new Map());
+        const map = this.map.get(sourceId);
         const arr = map?.get(type) ?? [];
         if (arr.length < index) arr.length = index + 1;
         setDisposable(tex, false);
@@ -55,12 +55,12 @@ export class LightDataRegistry implements ILightDataRegistry {
     }
 
     tryGetSkybox(sourceId?: SourceIdentifier | null): Texture | null {
-        if (debugLightmap) console.log("[Get Skybox]", sourceId, this._lightmaps)
+        if (debugLightmap) console.log("[Get Skybox]", sourceId, this.map)
         return this.tryGet(sourceId, LightmapType.Skybox, 0);
     }
 
     tryGetReflection(sourceId?: SourceIdentifier | null): Texture | null {
-        if (debugLightmap) console.log("[Get Reflection]", sourceId, this._lightmaps)
+        if (debugLightmap) console.log("[Get Reflection]", sourceId, this.map)
         return this.tryGet(sourceId, LightmapType.Reflection, 0);
     }
 
@@ -69,7 +69,7 @@ export class LightDataRegistry implements ILightDataRegistry {
             if (debugLightmap) console.warn("Missing source id");
             return null;
         }
-        const entry = this._lightmaps.get(sourceId);
+        const entry = this.map.get(sourceId);
         if (!entry) {
             if (debugLightmap) console.warn(`[Lighting] No ${LightmapType[type]} texture entry for`, sourceId);
             return null;

package/src/engine/engine_physics_rapier.ts

@@ -67,6 +67,7 @@ export class RapierPhysics implements IPhysicsEngine {
     debugRenderRaycasts: boolean = false;
 
     removeBody(obj: IComponent) {
+        if(debugPhysics) console.log("REMOVE BODY", obj?.name, obj[$bodyKey]);
         if (!obj) return;
         this.validate();
         const body = obj[$bodyKey];
@@ -901,6 +902,8 @@ export class RapierPhysics implements IPhysicsEngine {
             // set the collider layers
             this.updateColliderCollisionGroups(collider);
 
+            if (debugPhysics) console.log("Created collider", collider.name, col);
+
             return col;
         }
         catch (e) {

package/src/engine/engine_scenelighting.ts

@@ -162,7 +162,7 @@ export class RendererData {
     private __currentReflectionId: SourceIdentifier | null = null;
 
     /** @internal */
-    internalEnableReflection(sourceId: SourceIdentifier) {
+    internalEnableReflection(sourceId: SourceIdentifier) : Texture | null {
         this.__currentReflectionId = sourceId;
         const settings = this._sceneLightSettings?.get(sourceId);
 
@@ -181,7 +181,7 @@ export class RendererData {
                     const tex = existing.Source;
                     tex.mapping = EquirectangularReflectionMapping;
                     scene.environment = tex;
-                    return;
+                    return tex;
                 }
                 else if (debug) console.warn("Could not find reflection for source", sourceId);
                 break;
@@ -196,22 +196,21 @@ export class RendererData {
                         tex.colorSpace = SRGBColorSpace;
                         tex.mapping = EquirectangularReflectionMapping;
                         this.context.scene.environment = tex;
+                        return tex;
                     }
                     else console.error("Missing ambient trilight", settings.sourceId);
-                    return;
                 case AmbientMode.Flat:
                     if (settings.ambientLight) {
                         const tex = createFlatTexture(settings.ambientLight, 64);
                         tex.colorSpace = SRGBColorSpace;
                         tex.mapping = EquirectangularReflectionMapping;
                         this.context.scene.environment = tex;
+                        return tex;
                     }
                     else console.error("Missing ambientlight", settings.sourceId);
-                    return;
-                default:
-                    return;
             }
         }
+        return null;
     }
 
     /** @internal */

package/src/engine/engine_utils.ts

@@ -381,6 +381,14 @@ export function resolveUrl(source: SourceIdentifier | undefined, uri: string): s
     }
     return uri;
 }
+
+export function toSourceId(src: string | null): SourceIdentifier | undefined {
+    if (!src) return undefined;
+    src = src.trim();
+    src = src.split("?")[0]?.split("#")[0];
+    return src;
+}
+
 // export function getPath(glbLocation: SourceIdentifier | undefined, path: string) {
 //     if (path && glbLocation && !path.includes("/")) {
 //         // get directory of glb and prepend it to the audio file path
@@ -793,6 +801,7 @@ const mutationObserverMap = new WeakMap<HTMLElement, HtmlElementExtra>();
 /** 
  * Register a callback when an {@link HTMLElement} attribute changes.   
  * This is used, for example, by the Skybox component to watch for changes to the environment-* and skybox-* attributes.
+ * @returns A function that can be used to unregister the callback
 */
 export function addAttributeChangeCallback(domElement: HTMLElement, name: string, callback: AttributeChangeCallback) {
     if (!mutationObserverMap.get(domElement)) {
@@ -811,6 +820,9 @@ export function addAttributeChangeCallback(domElement: HTMLElement, name: string
         listeners.set(name, []);
     }
     listeners.get(name)!.push(callback);
+    return () => {
+        removeAttributeChangeCallback(domElement, name, callback);
+    }
 };
 
 /** 

package/src/engine/extensions/NEEDLE_lightmaps.ts

@@ -107,7 +107,7 @@ export class NEEDLE_lightmaps implements GLTFLoaderPlugin {
 
     private resolveTexture(entry: LightmapInfo, res: any) {
         const tex: Texture = res as unknown as Texture;
-        if (debug) console.log("Lightmap loaded:", tex);
+        if (debug) console.log("Light Texture loaded:", tex);
         if (tex?.isTexture) {
             if (!this.registry)
                 console.log(LightmapType[entry.type], entry.pointer, tex);

package/src/engine/extensions/extension_utils.ts

@@ -89,7 +89,7 @@ function internalResolve(paths: DependencyInfo[], parser: GLTFParserWithCache, o
                 for (let i = 0; i < val.length; i++) {
                     const entry = val[i];
                     const ext = resolveExtension(parser, entry);
-                    if (ext !== null) {
+                    if (ext !== null && ext !== undefined) {
                         if (typeof ext.then === "function")
                             promises.push(ext.then(res => val[i] = res));
                         else val[i] = ext;

package/src/engine/webcomponents/logo-element.ts

@@ -32,10 +32,22 @@ export class NeedleLogoElement extends HTMLElement {
             cursor: pointer;
         }
         img {
-            width: 95px;
             height: 100%;
             align-self: end;
             margin-left: 0.6rem;
+            transition: transform 0.2s;
+        }
+        img.with-text {
+            width: 11.5ch;
+            &:hover {
+                transform: scale(1.02);
+            }
+        }
+        img.compact {
+            width: 1.7em;
+            &:hover {
+                transform: scale(1.1);
+            }
         }
         span {
             font-size: 1rem;
@@ -43,12 +55,14 @@ export class NeedleLogoElement extends HTMLElement {
         }
         </style>
         <div class="wrapper">
-            <img class="logo" src=${needleLogoSVG} />
+            <img class="logo with-text" src=${needleLogoSVG} />
         </div>
         `;
         this._root.appendChild(template.content.cloneNode(true));
         this.wrapper = this._root.querySelector(".wrapper") as HTMLDivElement;
         this._root.appendChild(this.wrapper);
+        this.logoElement = this._root.querySelector("img.logo") as HTMLImageElement;
+
         // this.wrapper.classList.add("wrapper");
 
         // this.wrapper.appendChild(this.logoElement);
@@ -67,13 +81,24 @@ export class NeedleLogoElement extends HTMLElement {
 
     private readonly _root: ShadowRoot;
     private readonly wrapper: HTMLDivElement;
-    private readonly logoElement: HTMLImageElement = document.createElement("img");
-    private readonly textElement: HTMLSpanElement = document.createElement("span");
+    private readonly logoElement: HTMLImageElement;
 
     setLogoVisible(val: boolean) {
         this.logoElement.style.display = val ? "block" : "none";
     }
 
+    setType(type: "full" | "compact") {
+        if (type === "full") {
+            this.logoElement.src = needleLogoSVG;
+            this.logoElement.classList.remove("with-text");
+            this.logoElement.classList.remove("compact");
+        } else {
+            this.logoElement.src = needleLogoOnlySVG;
+            this.logoElement.classList.add("with-text");
+            this.logoElement.classList.add("compact");
+        }
+    }
+
 }
 if (!customElements.get(elementName))
     customElements.define(elementName, NeedleLogoElement);

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

@@ -459,7 +459,7 @@ export class NeedleMenuElement extends HTMLElement {
 
         .logo {
             cursor: pointer;
-            padding-left: 0.6rem;
+            padding-left: 0.0rem;
             padding-bottom: .02rem;
             margin-right: 0.5rem;
         }
@@ -664,8 +664,8 @@ export class NeedleMenuElement extends HTMLElement {
                         <slot name="end"></slot>
                     </div>
                 </div>
-                <div style="user-select:none" class="logo">
-                    <span class="madewith notranslate">powered by</span>
+                <div style="user-select:none;" class="logo">
+                    <span class="madewith notranslate" style="display:none;">powered by</span>
                 </div>
             </div>
             <button class="compact-menu-button">
@@ -698,6 +698,7 @@ export class NeedleMenuElement extends HTMLElement {
         this.wrapper.classList.add("wrapper");
 
         const logo = NeedleLogoElement.create();
+        logo.setType("compact");
         logo.style.minHeight = "1rem";
         this.logoContainer.append(logo);
         this.logoContainer.addEventListener("click", () => {

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

@@ -374,40 +374,40 @@ export class EngineLoadingView implements ILoadingViewHandler {
         //     }
         // }
 
-        this.handleRuntimeLicense(this._loadingElement);
+        // this.handleRuntimeLicense(this._loadingElement);
 
         return this._loadingElement;
     }
 
-    private async handleRuntimeLicense(loadingElement: HTMLElement) {
-        // First check if we have a commercial license
-        let commercialLicense = hasCommercialLicense();
-        // if it's the case then we don't need to perform a runtime check
-        if (commercialLicense) return;
-
-        // If we don't have a commercial license, then we need to display our message
-        if (debugLicense) console.log("Loading UI has commercial license?", commercialLicense);
-        const nonCommercialContainer = document.createElement("div");
-        nonCommercialContainer.style.paddingTop = ".6em";
-        nonCommercialContainer.style.fontSize = ".8em";
-        nonCommercialContainer.style.textTransform = "uppercase";
-        nonCommercialContainer.innerText = "NEEDLE ENGINE NON COMMERCIAL VERSION\nCLICK HERE TO GET A LICENSE";
-        nonCommercialContainer.style.cursor = "pointer";
-        nonCommercialContainer.style.userSelect = "none";
-        nonCommercialContainer.style.textAlign = "center";
-        nonCommercialContainer.style.pointerEvents = "all";
-        nonCommercialContainer.addEventListener("click", () => window.open("https://needle.tools/pricing", "_self"));
-        nonCommercialContainer.style.opacity = "0";
-        loadingElement.appendChild(nonCommercialContainer);
-
-        // Use the runtime license check
-        if (!isDevEnvironment() && runtimeLicenseCheckPromise) {
-            if (debugLicense) console.log("Waiting for runtime license check");
-            await runtimeLicenseCheckPromise;
-            commercialLicense = hasCommercialLicense();
-        }
-        if (commercialLicense) return;
-        nonCommercialContainer.style.transition = "opacity .5s ease-in-out";
-        nonCommercialContainer.style.opacity = "1";
-    }
+    // private async handleRuntimeLicense(loadingElement: HTMLElement) {
+    //     // First check if we have a commercial license
+    //     let commercialLicense = hasCommercialLicense();
+    //     // if it's the case then we don't need to perform a runtime check
+    //     if (commercialLicense) return;
+
+    //     // If we don't have a commercial license, then we need to display our message
+    //     if (debugLicense) console.log("Loading UI has commercial license?", commercialLicense);
+    //     const nonCommercialContainer = document.createElement("div");
+    //     nonCommercialContainer.style.paddingTop = ".6em";
+    //     nonCommercialContainer.style.fontSize = ".8em";
+    //     nonCommercialContainer.style.textTransform = "uppercase";
+    //     nonCommercialContainer.innerText = "NEEDLE ENGINE NON COMMERCIAL VERSION\nCLICK HERE TO GET A LICENSE";
+    //     nonCommercialContainer.style.cursor = "pointer";
+    //     nonCommercialContainer.style.userSelect = "none";
+    //     nonCommercialContainer.style.textAlign = "center";
+    //     nonCommercialContainer.style.pointerEvents = "all";
+    //     nonCommercialContainer.addEventListener("click", () => window.open("https://needle.tools/pricing", "_self"));
+    //     nonCommercialContainer.style.opacity = "0";
+    //     loadingElement.appendChild(nonCommercialContainer);
+
+    //     // Use the runtime license check
+    //     if (!isDevEnvironment() && runtimeLicenseCheckPromise) {
+    //         if (debugLicense) console.log("Waiting for runtime license check");
+    //         await runtimeLicenseCheckPromise;
+    //         commercialLicense = hasCommercialLicense();
+    //     }
+    //     if (commercialLicense) return;
+    //     nonCommercialContainer.style.transition = "opacity .5s ease-in-out";
+    //     nonCommercialContainer.style.opacity = "1";
+    // }
 }