@needle-tools/engine 3.2.8-alpha → 3.2.9-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@needle-tools/engine",
-    "version": "3.2.8-alpha",
+    "version": "3.2.9-alpha",
     "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

@@ -1,7 +1,7 @@
 import { getParam, resolveUrl } from "../engine/engine_utils";
 import { SerializationContext, TypeSerializer } from "./engine_serialization_core";
 import { Context } from "./engine_setup";
-import { Group, Object3D, Texture } from "three";
+import { Group, Object3D, Texture, TextureLoader } from "three";
 import { processNewScripts } from "./engine_mainloop_utils";
 import { registerPrefabProvider, syncInstantiate } from "./engine_networking_instantiate";
 import { download } from "./engine_web_api";
@@ -372,15 +372,19 @@ export class ImageReference {
         return img;
     }
 
+    private loader: TextureLoader | null = null;
     createTexture(): Promise<Texture | null> {
-        return this.getBitmap().then((bitmap) => {
-            if (bitmap) {
-                const texture = new Texture(bitmap);
-                texture.needsUpdate = true;
-                return texture;
-            }
-            return null;
-        });
+        if (!this.loader) this.loader = new TextureLoader();
+        this.loader.setCrossOrigin("anonymous");
+        return this.loader.loadAsync(this.url);
+        // return this.getBitmap().then((bitmap) => {
+        //     if (bitmap) {
+        //         const texture = new Texture(bitmap);
+        //         texture.needsUpdate = true;
+        //         return texture;
+        //     }
+        //     return null;
+        // });
     }
 
     /** Loads the bitmap data of the image */

package/src/engine/engine_element_loading.ts

@@ -253,13 +253,14 @@ export class EngineLoadingView implements ILoadingViewHandler {
         }
         loadingBarContainer.appendChild(logo);
 
+
         this._loadingBar = document.createElement("div");
         loadingBarContainer.appendChild(this._loadingBar);
         const getGradientPos = function (t: number): string {
             return Mathf.lerp(maxWidth * .5, 100 - maxWidth * .5, t) + "%";
         }
         this._loadingBar.style.background =
-                `linear-gradient(90deg, #02022B ${getGradientPos(0)}, #0BA398 ${getGradientPos(.4)}, #99CC33 ${getGradientPos(.5)}, #D7DB0A ${getGradientPos(1)})`;
+            `linear-gradient(90deg, #02022B ${getGradientPos(0)}, #0BA398 ${getGradientPos(.4)}, #99CC33 ${getGradientPos(.5)}, #D7DB0A ${getGradientPos(1)})`;
         this._loadingBar.style.backgroundAttachment = "fixed";
         this._loadingBar.style.width = "0%";
         this._loadingBar.style.height = "100%";
@@ -301,6 +302,14 @@ export class EngineLoadingView implements ILoadingViewHandler {
             }
         }
 
+        if (!hasLicense) {
+            const nonCommercialContainer = document.createElement("div");
+            nonCommercialContainer.style.paddingTop = ".6em";
+            nonCommercialContainer.style.fontSize = ".8em";
+            nonCommercialContainer.innerText = "NON COMMERCIAL";
+            this._loadingElement.appendChild(nonCommercialContainer);
+        }
+
         return this._loadingElement;
     }
 }

package/src/engine/engine_license.ts

@@ -30,22 +30,18 @@ async function showLicenseInfo(ctx: IContext) {
 }
 
 
-const _licenseText = "🌵 <span class=\"text\">Made with <a href=\"https://needle.tools\" target=\"_blank\">Needle</a></span>";
 const licenseElementIdentifier = "needle-license-element";
 const licenseDuration = 30000;
 const licenseDelay = 600;
 
 function onNonCommercialVersionDetected(ctx: IContext) {
-    insertNonCommercialUseHint(ctx);
-    sendNonCommercialUsageMessageToAnalyticsBackend();
+    setTimeout(() => insertNonCommercialUseHint(ctx), 2000);
+    sendUsageMessageToAnalyticsBackend();
 }
 
 function insertNonCommercialUseHint(ctx: IContext) {
 
-    let licenseText = _licenseText;
     const licenseElement = createLicenseElement();
-    licenseElement.innerHTML = licenseText;
-
     const style = createLicenseStyle();
 
     const interval = setInterval(() => {
@@ -59,9 +55,21 @@ function insertNonCommercialUseHint(ctx: IContext) {
     logNonCommercialUse();
 
     let svg = `<img class="logo" src="${logoSVG}" style="width: 40px; height: 40px; margin-right: 2px; vertical-align: middle; margin-bottom: 2px;"/>`;
-    svg = "<a href=\"https://needle.tools\" target=\"_blank\">" + svg + "</a>";
-    licenseText = svg; //licenseText.replace("🌵", svg);
-    licenseElement.innerHTML = licenseText;
+    const logoElement = document.createElement("div");
+    logoElement.innerHTML = svg;
+    logoElement.classList.add("logo");
+    licenseElement.appendChild(logoElement);
+
+    const textElement = document.createElement("div");
+    textElement.classList.add("text");
+    textElement.innerHTML = "Needle Engine<br/><span class=\"non-commercial\">Non Commercial</span>";
+    licenseElement.appendChild(textElement);
+
+    licenseElement.title = "Needle Engine — non commercial version";
+    licenseElement.addEventListener("click", () => {
+        console.log("CLICK")
+        globalThis.open("https://needle.tools", "_blank");
+    });
 
     const removeDelay = licenseDuration + licenseDelay;
     setTimeout(() => {
@@ -110,6 +118,13 @@ function createLicenseStyle() {
     ${selector} {
         font-family: 'Roboto', sans-serif !important;
         font-weight: 300;
+        transition: all 0.1s ease-in-out !important;
+        pointer-events: all;
+    }
+
+    ${selector}:hover {
+        cursor: pointer;
+        transition: all 0.1s ease-in-out !important;
     }
 
     ${selector}, ${selector} > * {
@@ -118,22 +133,51 @@ function createLicenseStyle() {
         background: none !important;
         border: none !important;
         text-decoration: none !important;
+        vertical-align: middle !important;
+    }
+    
+    @keyframes license-animation {
+        1% {
+            opacity: 0;
+        }
+        2.5% {
+            opacity: 1;
+        }
+        98% {
+            opacity: 1;
+        }
+        99% {
+            opacity: 0;
+        }
+    }
+    ${selector} .text {
+        opacity: 0;
+        animation: license-animation;
+        animation-iteration-count: 1;
+        animation-duration: ${(licenseDuration / 1000)}s;
+        animation-delay: ${licenseDelay / 1000}s;
+        animation-easing: ease-in-out;
+        mix-blend-mode: difference;
+        color: rgb(40, 40, 40); 
+        mix-blend-mode: difference;
+        line-height: 1em;
+        margin-left: -3px;
     }
 
-    ${selector} a {
-        color: black !important;
-        font-weight: 500 !important;
+    ${selector} .text .non-commercial {
+        font-size: 0.8em;
+        font-weight: 600;
+        text-transform: uppercase;
     }
     
-    @keyframes append-animate {
+    @keyframes logo-animation {
         0% {
             transform: translate(0px, 10px);
-            opacity: 0;
             pointer-events: none;
         }
         1% {
             transform: translate(0, -5px);
-            opacity: .9;
+            opacity: 1;
         }
         2% {
             transform: translate(0, 2.5px);
@@ -141,7 +185,6 @@ function createLicenseStyle() {
         3% {
             transform: translate(0, 0px);
             pointer-events: all;
-            opacity: 1;
         }
         4% {
             transform: scale(1)
@@ -161,14 +204,15 @@ function createLicenseStyle() {
             transform: scale(1)
         }
         100% {
-            opacity: 0;
             pointer-events: none;
+            opacity: 0;
         }
     }
-    ${selector} {
+
+    ${selector} .logo {
         opacity: 0;
         pointer-events: none;
-        animation: append-animate;
+        animation: logo-animation;
         animation-iteration-count: 1;
         animation-duration: ${(licenseDuration / 1000)}s;
         animation-delay: ${licenseDelay / 1000}s;
@@ -184,8 +228,9 @@ function createLicenseStyle() {
         transition: all 0.1s ease-in-out !important;
     }
 
-    ${selector} .logo:hover {
-        transform: scale(1.3) !important;
+    ${selector}:hover .logo {
+        transition: all 0.1s ease-in-out !important;
+        transform: scale(1.1) !important;
         cursor: pointer !important;
     }
     `
@@ -193,7 +238,7 @@ function createLicenseStyle() {
 }
 
 
-async function sendNonCommercialUsageMessageToAnalyticsBackend() {
+async function sendUsageMessageToAnalyticsBackend() {
     try {
         const analyticsBackendUrlForward = "https://urls.needle.tools/analytics-endpoint";
         const res = await fetch(analyticsBackendUrlForward);
@@ -207,7 +252,8 @@ async function sendNonCommercialUsageMessageToAnalyticsBackend() {
 
             let endpoint = "api/v1/register/web-request";
             if (!analyticsUrl.endsWith("/")) endpoint = "/" + endpoint;
-            const finalUrl = `${analyticsUrl}${endpoint}?type=non-commercial&url=${encodeURIComponent(currentUrl)}&hostname=${encodeURIComponent(window.location.hostname)}&pathname=${encodeURIComponent(window.location.pathname)}&search=${encodeURIComponent(window.location.search)}&hash=${encodeURIComponent(window.location.hash)}`;
+            const type = hasProLicense() ? "commercial" : "non-commercial";
+            const finalUrl = `${analyticsUrl}${endpoint}?type=${type}&url=${encodeURIComponent(currentUrl)}&hostname=${encodeURIComponent(window.location.hostname)}&pathname=${encodeURIComponent(window.location.pathname)}&search=${encodeURIComponent(window.location.search)}&hash=${encodeURIComponent(window.location.hash)}`;
             if (debug) console.log("Sending non-commercial usage message to analytics backend", finalUrl);
 
 

package/src/engine/engine_serialization_builtin_serializer.ts

@@ -362,7 +362,7 @@ export class UriSerializer extends TypeSerializer {
     }
 
     onDeserialize(data: string, _context: SerializationContext) {
-        if (typeof data === "string") {
+        if (typeof data === "string" && data.length > 0) {
             return resolveUrl(_context.gltfId, data);
         }
         return undefined;

package/src/engine-components/Component.ts

@@ -486,8 +486,8 @@ export class Component implements IComponent, EventTarget {
         }
         // console.trace("INTERNAL ENABLE");
         this.__didEnable = true;
-        this.onEnable();
         this.__isEnabled = true;
+        this.onEnable();
         return true;
     }
 
@@ -501,8 +501,8 @@ export class Component implements IComponent, EventTarget {
             return;
         }
         this.__didEnable = false;
-        this.onDisable();
         this.__isEnabled = false;
+        this.onDisable();
     }
 
     /** @internal */

package/src/engine-components/ScreenCapture.ts

@@ -40,6 +40,13 @@ declare type ScreenCaptureOptions = {
 
 export class ScreenCapture extends Behaviour implements IPointerClickHandler {
 
+    onPointerEnter() {
+        this.context.input.setCursorPointer();
+    }
+    onPointerExit() {
+        this.context.input.setCursorNormal();
+    }
+
     onPointerClick(evt : PointerEventData) {
         if(evt && evt.pointerId !== 0) return;
         if(this.context.connection.isInRoom === false) return;

package/src/engine-components/VideoPlayer.ts

@@ -1,13 +1,13 @@
 import { Behaviour, GameObject } from "./Component";
-import * as THREE from "three";
 import { serializable } from "../engine/engine_serialization_decorator";
-import { LinearFilter, Material, Mesh, Object3D, RawShaderMaterial, ShaderMaterial, Texture, TextureLoader, Vector2, Vector4, VideoTexture } from "three";
+import { Material, Mesh, Object3D, ShaderMaterial, sRGBEncoding, Texture, Vector2, Vector4, VideoTexture } from "three";
 import { awaitInput } from "../engine/engine_input_utils";
-import { getParam, resolveUrl } from "../engine/engine_utils";
+import { getParam } from "../engine/engine_utils";
 import { Renderer } from "./Renderer";
 import { getWorldScale } from "../engine/engine_three_utils";
 import { ObjectUtils, PrimitiveType } from "../engine/engine_create_objects";
 import { Context } from "../engine/engine_setup";
+import { isDevEnvironment } from "../engine/debug";
 
 const debug = getParam("debugvideo");
 
@@ -46,7 +46,7 @@ export enum VideoRenderMode {
 export class VideoPlayer extends Behaviour {
 
     @serializable(Object3D)
-    renderer: THREE.Object3D | null = null;
+    renderer: Object3D | null = null;
     @serializable()
     playOnAwake: boolean = true;
 
@@ -149,18 +149,29 @@ export class VideoPlayer extends Behaviour {
     }
     private _muted: boolean = false;
 
+    @serializable()
+    private set audioOutputMode(mode: VideoAudioOutputMode) {
+        if (mode !== this._audioOutputMode) {
+            if (mode === VideoAudioOutputMode.AudioSource && isDevEnvironment()) console.warn("VideoAudioOutputMode.AudioSource is not yet implemented");
+            this._audioOutputMode = mode;
+            this.updateVideoElementSettings();
+        }
+    }
+    private get audioOutputMode() { return this._audioOutputMode; }
+
+    private _audioOutputMode: VideoAudioOutputMode = VideoAudioOutputMode.Direct;
+
     /** Set this to false to pause video playback while the tab is not active */
     playInBackground: boolean = true;
 
     private _crossOrigin: string | null = "anonymous";
 
-    private audioOutputMode: VideoAudioOutputMode = VideoAudioOutputMode.AudioSource;
 
     private source!: VideoSource;
     private url?: string | null = null;
 
     private _videoElement: HTMLVideoElement | null = null;
-    private _videoTexture: THREE.VideoTexture | null = null;
+    private _videoTexture: VideoTexture | null = null;
     private _videoMaterial: Material | null = null;
 
     private _isPlaying: boolean = false;
@@ -195,27 +206,11 @@ export class VideoPlayer extends Behaviour {
         }
     }
 
-    awake(): void {
-        this.create(this.playOnAwake);
-
-        window.addEventListener('visibilitychange', _evt => {
-            switch (document.visibilityState) {
-                case "hidden":
-                    if(!this.playInBackground){
-                        this.wasPlaying = this._isPlaying;
-                        this.pause();
-                    }
-                    break;
-                case "visible":
-                    if (this.wasPlaying && !this._isPlaying) this.play();
-                    break;
-            }
-        });
-    }
-
     onEnable(): void {
+        window.addEventListener('visibilitychange', this.visibilityChanged);
+
         if (this.playOnAwake === true) {
-            this.handleBeginPlaying(true);
+            this.create(true);
         }
         if (this.screenspace) {
             this._overlay?.start();
@@ -224,9 +219,24 @@ export class VideoPlayer extends Behaviour {
     }
 
     onDisable(): void {
+        window.removeEventListener('visibilitychange', this.visibilityChanged);
         this.pause();
     }
 
+    private visibilityChanged = (_: Event) => {
+        switch (document.visibilityState) {
+            case "hidden":
+                if (!this.playInBackground) {
+                    this.wasPlaying = this._isPlaying;
+                    this.pause();
+                }
+                break;
+            case "visible":
+                if (this.wasPlaying && !this._isPlaying) this.play();
+                break;
+        }
+    }
+
     onDestroy(): void {
         if (this._videoElement) {
             this._videoElement.parentElement?.removeChild(this._videoElement);
@@ -258,12 +268,15 @@ export class VideoPlayer extends Behaviour {
     }
 
     play() {
+        if (!this._videoElement) this.create(false);
         if (!this._videoElement) return;
         if (this._isPlaying && !this._videoElement?.ended && !this._videoElement?.paused) return;
         this._isPlaying = true;
         if (!this._receivedInput) this._videoElement.muted = true;
         this.updateVideoElementSettings();
-        this._videoElement?.play().catch(err => {
+        this._videoElement.currentTime = this.time;
+        this._videoElement.play().catch(err => {
+            console.log(err);
             // https://developer.chrome.com/blog/play-request-was-interrupted/
             if (debug)
                 console.error("Error playing video", err, "CODE=" + err.code, this.videoElement?.src, this);
@@ -272,19 +285,23 @@ export class VideoPlayer extends Behaviour {
                     this.play();
             }, 1000);
         });
-        if (debug) console.log("play", this._videoElement);
+        if (debug) console.log("play", this._videoElement, this.time);
     }
 
     stop() {
         this._isPlaying = false;
+        this.time = 0;
         if (!this._videoElement) return;
         this._videoElement.currentTime = 0;
         this._videoElement.pause();
+        if (debug) console.log("STOP", this);
     }
 
     pause(): void {
+        this.time = this._videoElement?.currentTime ?? 0;
         this._isPlaying = false;
         this._videoElement?.pause();
+        if (debug) console.log("PAUSE", this, this.currentTime);
     }
 
 
@@ -301,30 +318,36 @@ export class VideoPlayer extends Behaviour {
 
         if (!src) return;
 
-        // console.log(src, this);
 
         if (!this._videoElement) {
+            if (debug)
+                console.warn("Create VideoElement", this);
             this._videoElement = this.createVideoElement();
             this.context.domElement?.prepend(this._videoElement);
             // hide it because otherwise it would overlay the website with default css
             this.updateVideoElementStyles();
         }
+
         if (typeof src === "string") {
+            if (debug) console.log("Set Video src", src);
             this._videoElement.src = src;
-            const str = this._videoElement["captureStream"]?.call(this._videoElement);
-            this.clip = str;
+            // Nor sure why we did this here, but with this code the video does not restart when being paused / enable toggled
+            // const str = this._videoElement["captureStream"]?.call(this._videoElement);
+            // this.clip = str;
         }
-        else
+        else {
+            if (debug) console.log("Set Video srcObject", src);
             this._videoElement.srcObject = src;
+        }
 
 
         if (!this._videoTexture)
-            this._videoTexture = new THREE.VideoTexture(this._videoElement);
+            this._videoTexture = new VideoTexture(this._videoElement);
         this._videoTexture.flipY = false;
-        this._videoTexture.encoding = THREE.sRGBEncoding;
+        this._videoTexture.encoding = sRGBEncoding;
         this.handleBeginPlaying(playAutomatically);
         if (debug)
-            console.log(this);
+            console.log(this, playAutomatically);
     }
 
     updateAspect() {
@@ -354,7 +377,7 @@ export class VideoPlayer extends Behaviour {
         const video = document.createElement("video") as HTMLVideoElement;
         if (this._crossOrigin)
             video.setAttribute("crossorigin", this._crossOrigin);
-        if (debug) console.log("create video elment", video);
+        if (debug) console.log("created video element", video);
         return video;
     }