@needle-tools/engine 2.62.2-pre → 2.63.1-pre

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@needle-tools/engine",
-    "version": "2.62.2-pre",
+    "version": "2.63.1-pre",
     "description": "Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development, and can be deployed anywhere. It is flexible, extensible, and collaboration and XR come naturally.",
     "main": "dist/needle-engine.umd.cjs",
     "module": "dist/needle-engine.js",
@@ -60,7 +60,7 @@
         "@needle-tools/needle-component-compiler": "1.9.3",
         "@needle-tools/helper": "^0.2.1-pre",
         "@types/three": "0.146.0",
-        "copy-files-from-to": "^3.3.0",
+        "copy-files-from-to": "^3.7.0",
         "esbuild": "^0.15.10",
         "esbuild-node-externals": "^1.5.0",
         "jsdoc-babel": "^0.5.0",

package/src/engine/assets/index.ts

@@ -0,0 +1,4 @@
+
+//@ts-ignore
+import _logo from "./logo.svg"
+export const logoSVG = _logo;

package/src/engine/assets/logo.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Ebene_3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 160 187.74"><defs><style>.cls-1{fill:url(#Unbenannter_Verlauf_122);}.cls-2{fill:#f3e600;}.cls-3{fill:url(#Unbenannter_Verlauf_113);}.cls-4{fill:url(#gradient-6);}.cls-5{fill:url(#Unbenannter_Verlauf_110);}.cls-6{fill:url(#Unbenannter_Verlauf_101);}.cls-7{fill:#9c3;}.cls-8{fill:#ffe113;}.cls-9{fill:url(#gradient-5);}</style><linearGradient id="Unbenannter_Verlauf_113" x1="89.64" y1="184.81" x2="90.48" y2="21.85" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#62d399"/><stop offset=".51" stop-color="#acd842"/><stop offset=".9" stop-color="#d7db0a"/></linearGradient><linearGradient id="Unbenannter_Verlauf_110" x1="69.68" y1="178.9" x2="68.08" y2="16.77" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0ba398"/><stop offset=".5" stop-color="#4ca352"/><stop offset="1" stop-color="#76a30a"/></linearGradient><linearGradient id="Unbenannter_Verlauf_101" x1="36.6" y1="152.17" x2="34.7" y2="84.19" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" gradientUnits="userSpaceOnUse"><stop offset=".19" stop-color="#36a382"/><stop offset=".54" stop-color="#49a459"/><stop offset="1" stop-color="#76a30b"/></linearGradient><linearGradient id="Unbenannter_Verlauf_122" x1="15.82" y1="153.24" x2="18" y2="90.86" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#267880"/><stop offset=".51" stop-color="#457a5c"/><stop offset="1" stop-color="#717516"/></linearGradient><linearGradient id="gradient-6" x1="135.08" y1="135.43" x2="148.93" y2="63.47" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#b0d939"/><stop offset="1" stop-color="#eadb04"/></linearGradient><linearGradient id="gradient-5" x1="-4163.25" y1="2285.12" x2="-4160.81" y2="2215.34" gradientTransform="translate(4801.15 -595.25) rotate(20)" gradientUnits="userSpaceOnUse"><stop offset=".17" stop-color="#74af52"/><stop offset=".48" stop-color="#99be32"/><stop offset="1" stop-color="#c0c40a"/></linearGradient><symbol id="needle-icon" viewBox="0 0 160 187.74"><g><polygon class="cls-3" points="79.32 36.98 79.32 187.74 95 174.54 101.59 18.23 79.32 36.98"/><polygon class="cls-5" points="79.32 36.98 57.05 18.23 63.64 174.54 79.32 187.74 79.32 36.98"/><polygon class="cls-6" points="25.19 104.83 33.82 153.87 46.32 138.92 43.86 82.5 25.19 104.83"/><polygon class="cls-1" points="25.19 104.83 0 90.24 16.97 144.1 33.82 153.87 25.19 104.83"/><polygon class="cls-7" points="43.86 82.5 18.69 67.98 0 90.24 25.18 104.83 43.86 82.5"/><polygon class="cls-4" points="134.82 78.69 124.85 135.19 140.43 126.15 160 64.1 134.82 78.69"/><polygon class="cls-9" points="134.82 78.69 116.14 56.36 113.28 121.36 124.85 135.19 134.82 78.69"/><polygon class="cls-8" points="160 64.1 141.31 41.84 116.14 56.36 134.81 78.69 160 64.1"/><polygon class="cls-2" points="101.59 18.23 79.32 0 57.05 18.23 79.32 36.98 101.59 18.23"/></g></symbol></defs><use width="160" height="187.74" xlink:href="#needle-icon"/></svg>

package/src/engine/codegen/license.json

@@ -0,0 +1 @@
+{}

package/src/engine/engine_element.ts

@@ -214,7 +214,7 @@ export class EngineElement extends HTMLElement implements INeedleEngineComponent
                 }
                 this._loadingProgress01 = 1;
                 if (useDefaultLoading)
-                    this._loadingView?.onLoadingFinished("create scene");
+                    this._loadingView?.onLoadingFinished("creating scene");
                 this.classList.remove("loading");
                 this.classList.add("loading-finished");
                 if (debug)

package/src/engine/engine_element_loading.ts

@@ -2,6 +2,7 @@ import { showBalloonWarning } from "./api";
 import { Mathf } from "./engine_math";
 import { LoadingProgressArgs } from "./engine_setup";
 import { getParam } from "./engine_utils";
+import { logoSVG } from "./assets"
 
 const debug = getParam("debugloadingbar");
 const debugRendering = getParam("debugloadingbarrendering");
@@ -64,13 +65,13 @@ export class EngineLoadingView implements ILoadingViewHandler {
     }
 
     onLoadingBegin(message?: string) {
-        if(debug) console.log("Begin Loading")
+        if (debug) console.log("Begin Loading")
         if (!this._loadingElement) {
             for (let i = 0; i < this.container.children.length; i++) {
                 const el = this.container.children[i] as HTMLElement;
                 if (el.classList.contains(EngineLoadingView.LoadingContainerClassName)) {
                     if (!this._allowCustomLoadingElement) {
-                        if(debug) console.warn("Remove custom loading container")
+                        if (debug) console.warn("Remove custom loading container")
                         this.container.removeChild(el);
                         continue;
                     }
@@ -102,7 +103,7 @@ export class EngineLoadingView implements ILoadingViewHandler {
             if ("index" in progress)
                 total01 = calculateProgress01(progress);
             if (!message && "name" in progress)
-                this.setMessage(progress.name);
+                this.setMessage("loading " + progress.name);
         }
         this.loadingProgress = total01;
         if (message) this.setMessage(message);
@@ -125,11 +126,14 @@ export class EngineLoadingView implements ILoadingViewHandler {
         if (this._progressLoop) return;
         let dt = 1 / 12;
         const max = 1 - .05;
-        if(debugRendering) dt = 1 / 500;
+        if (debugRendering) {
+            dt = 1 / 500;
+            if (typeof debugRendering === "number") dt *= debugRendering;
+        }
         this._progressLoop = setInterval(() => {
             if (this.loadingProgress >= 1 && this._progress >= max) {
                 if (this._loadingElement) {
-                    if(debug) console.log("Hiding loading element");
+                    if (debug) console.log("Hiding loading element");
                     this._loadingElement.style.display = "none";
                     this._loadingElement.remove();
                 }
@@ -154,7 +158,7 @@ export class EngineLoadingView implements ILoadingViewHandler {
     }
 
     private createLoadingElement(existing?: HTMLElement): HTMLElement {
-    if(debug && !existing) console.log("Creating loading element");
+        if (debug && !existing) console.log("Creating loading element");
         this._loadingElement = existing || document.createElement("div");
         if (!existing) {
             this._loadingElement.style.position = "fixed";
@@ -186,9 +190,23 @@ export class EngineLoadingView implements ILoadingViewHandler {
         loadingBarContainer.style.display = "flex";
         loadingBarContainer.style.width = maxWidth + "%";
         loadingBarContainer.style.height = "2px";
-        loadingBarContainer.style.background = "rgba(255,255,255,.1)"
+        loadingBarContainer.style.background = "rgba(255,255,255,.2)"
+        // loadingBarContainer.style.alignItems = "center";
         this._loadingElement.appendChild(loadingBarContainer);
 
+        const needleLogo = document.createElement("img");
+        const logoSize = 64;
+        needleLogo.style.width = `${logoSize}px`;
+        needleLogo.style.height = `${logoSize}px`;
+        needleLogo.style.position = "absolute";
+        needleLogo.style.left = "50%";
+        needleLogo.style.transform = `translate(-${logoSize * .5}px, -${logoSize + 32}px)`;
+        needleLogo.addEventListener("click", () => window.open("https://needle.tools", "_blank"));
+        needleLogo.style.cursor = "pointer";
+        needleLogo.style.pointerEvents = "all";
+        needleLogo.src = logoSVG;
+        loadingBarContainer.appendChild(needleLogo);
+
         this._loadingBar = document.createElement("div");
         loadingBarContainer.appendChild(this._loadingBar);
         const getGradientPos = function (t: number): string {
@@ -203,7 +221,7 @@ export class EngineLoadingView implements ILoadingViewHandler {
         this._loadingTextContainer = document.createElement("div");
         this._loadingTextContainer.style.display = "flex";
         this._loadingTextContainer.style.justifyContent = "center";
-        this._loadingTextContainer.style.marginTop = ".9em";
+        this._loadingTextContainer.style.marginTop = "1.2em";
         this._loadingElement.appendChild(this._loadingTextContainer);
 
         const messageContainer = document.createElement("div");
@@ -212,6 +230,8 @@ export class EngineLoadingView implements ILoadingViewHandler {
         messageContainer.style.fontSize = ".8em";
         messageContainer.style.paddingTop = ".5em";
         messageContainer.style.color = "rgba(255,255,255,.5)";
+        messageContainer.style.fontWeight = "200";
+        messageContainer.style.fontFamily = "Roboto, sans-serif";
         // messageContainer.style.border = "1px solid rgba(255,255,255,.1)";
         messageContainer.style.justifyContent = "center";
         this._loadingElement.appendChild(messageContainer);

package/src/engine/engine_license.ts

@@ -0,0 +1,229 @@
+import { getParam } from "./engine_utils";
+import { ContextEvent, ContextRegistry } from "./engine_context_registry";
+import { IContext } from "./engine_types";
+import { logoSVG } from "./assets";
+
+const debug = getParam("debuglicense");
+
+
+// import licenseInformation from "./codegen/license.json";
+let licenseInformation: any = null;
+let licenseImportPromise: Promise<any> | null = null;
+try {
+    licenseImportPromise = import("./codegen/license.json");
+    licenseImportPromise.then(res => {
+        licenseInformation = res.default;
+        licenseImportPromise = null;
+        if (debug) console.log("License imported via dynamic import", licenseInformation)
+    }).catch(err => { if (debug) console.error("Error on dynamic license import", err) });
+}
+catch (err) {
+    if (debug)
+        console.log("Importing license failed", err)
+}
+
+
+ContextRegistry.registerCallback(ContextEvent.ContextCreated, evt => {
+    showLicenseInfo(evt.context);
+});
+
+async function showLicenseInfo(ctx: IContext) {
+    try {
+        // if(licenseImportPromise) await licenseImportPromise;
+        //@ts-ignore
+        if (!licenseInformation || licenseInformation.hasLicense !== true || debug) return onNonCommercialVersionDetected(ctx);
+    }
+    catch (err) {
+        if (debug) console.log("License check failed", err)
+        return onNonCommercialVersionDetected(ctx)
+    }
+    if (debug) onNonCommercialVersionDetected(ctx)
+}
+
+
+const _licenseText = "🌵 <span class=\"text\">Made with <a href=\"https://needle.tools\" target=\"_blank\">Needle</a></span>";
+const licenseElementClass = "needle-license-element";
+const licenseDuration = 30000;
+const licenseDelay = 600;
+
+function onNonCommercialVersionDetected(ctx: IContext) {
+    insertNonCommercialUseHint(ctx);
+    sendNonCommercialUsageMessageToAnalyticsBackend();
+}
+
+function insertNonCommercialUseHint(ctx: IContext) {
+
+    let licenseText = _licenseText;
+    const licenseElement = createLicenseElement();
+    licenseElement.innerHTML = licenseText;
+
+    const style = createLicenseStyle();
+
+    const interval = setInterval(() => {
+        if (!licenseElement) return;
+        if (licenseElement.parentElement !== ctx.domElement) {
+            ctx.domElement.appendChild(licenseElement);
+            if (style) ctx.domElement.appendChild(style);
+        }
+    }, 100);
+
+    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 removeDelay = licenseDuration + licenseDelay;
+    setTimeout(() => {
+        clearInterval(interval);
+        licenseElement?.remove();
+    }, removeDelay);
+
+}
+
+async function logNonCommercialUse(_logo?: string) {
+    const logo = "data:image/webp;base64,UklGRrABAABXRUJQVlA4WAoAAAAQAAAAHwAAHwAAQUxQSKEAAAARN6CmbSM4WR7vdARON11EBDq3fLiNbVtVzpMCPlKAEzsx0Y/x+Ovuv4dn0EFE/ydAvz6YggXzgh5sVgXM/zOC/4sii7qgGvB5N7hmuQYwkvazWAu1JPW41FXSHq6pnaQWvqYH18Fc0j1hO/BFTtIeSBlJi5w6qIIO7IOrwhFsB2Yxukif0FTRLpXswHR8MxbslKe9VZsn/Ub5C7YFOpqSTABWUDgg6AAAAFAGAJ0BKiAAIAA+7VyoTqmkpCI3+qgBMB2JbACdMt69DwMIQBLhkTO6XwY00UEDK6cNIDnuNibPf0EgAP7Y1myuiQHLDsF/0h5unrGh6WAbv7aegg2ZMd3uRKfT/3SJztcaujYfTvMXspfCTmYcoO6a+vhC3ss4M8uM58t4siiu59I4aOl59e9Sr6xoxYlHf2v+NnBNpJYeJf8jABQAId/PXuBkLEFkiCucgSGEcfhvajql/j3reCGl0M5/9gQWy7ayNPs+wlvIxFnNfSlfuND4CZOCyxOHhRqOmHN4ULHo3tCSrUNvgAA=";
+    const style = `
+        font-size:18px;
+        background-size: contain;
+        background-position: left center;
+        background-repeat:no-repeat;
+        background-image:url('${logo}')
+    `;
+    let licenseText = "Needle Engine — non commercial version";
+    console.log("%c   " + licenseText, style)
+}
+
+function createLicenseElement() {
+    const licenseElement = document.createElement("div");
+    licenseElement.classList.add(licenseElementClass);
+    licenseElement.setAttribute("data-needle_engine_license_element", "");
+    licenseElement.style.position = "fixed";
+    licenseElement.style.bottom = "12px";
+    licenseElement.style.right = "15px";
+
+    // licenseElement.style.textShadow = "0 0 2px rgba(200,200,200, 1)";
+    const maxPossibleZIndex = 2147483647;
+    licenseElement.style.zIndex = `${maxPossibleZIndex}`;
+    return licenseElement;
+}
+
+function createLicenseStyle() {
+    const licenseStyle = document.createElement("style");
+    const selector = "." + licenseElementClass;
+    licenseStyle.innerHTML = `
+    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap');
+
+    ${selector} {
+        font-family: 'Roboto', sans-serif !important;
+        font-weight: 300;
+    }
+
+    ${selector} a {
+        color: black;
+        text-decoration: none;
+        font-weight: 500;
+    }
+    
+    @keyframes append-animate {
+        0% {
+            transform: translate(0px, 10px);
+            opacity: 0;
+            pointer-events: none;
+        }
+        1% {
+            transform: translate(0, -5px);
+            opacity: .9;
+        }
+        2% {
+            transform: translate(0, 3px);
+        }
+        6% {
+            transform: translate(0, 0px);
+            pointer-events: all;
+            opacity: 1;
+        }
+        50% {
+            transform: scale(1)
+        }
+        51% {
+            transform: scale(1.2)
+        }
+        53% {
+            transform: scale(1)
+        }
+        90% {
+            opacity: 1;
+            pointer-events: all;
+            transform: scale(1)
+        }
+        100% {
+            opacity: 0;
+            pointer-events: none;
+        }
+    }
+    ${selector} {
+        opacity: 0;
+        pointer-events: none;
+        animation: append-animate;
+        animation-iteration-count: 1;
+        animation-duration: ${(licenseDuration / 1000)}s;
+        animation-delay: ${licenseDelay / 1000}s;
+        animation-easing: ease-in-out;
+    }
+
+    ${selector} .text, ${selector} a {
+        color: rgb(255, 0, 0); 
+        mix-blend-mode: difference;
+    }
+
+    ${selector} .logo {
+        border-radius: 50%;
+        background-color: transparent;
+        padding: 5px;
+        transition: all 0.1s ease-in-out;
+    }
+
+    ${selector} .logo:hover {
+        transform: scale(1.3);
+        cursor: pointer;
+    }
+    `
+    return licenseStyle;
+}
+
+
+async function sendNonCommercialUsageMessageToAnalyticsBackend() {
+    try {
+        const analyticsBackendUrlForward = "https://urls.needle.tools/analytics-endpoint";
+        const res = await fetch(analyticsBackendUrlForward);
+        let analyticsUrl = await res.text();
+        if (analyticsUrl) {
+            if (debug) console.log("Analytics backend url", analyticsUrl);
+
+            // analyticsUrl = "http://localhost:3000/";
+
+            const currentUrl = window.location.href;
+
+            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)}`;
+            if (debug) console.log("Sending non-commercial usage message to analytics backend", finalUrl);
+
+
+            fetch(finalUrl,
+                {
+                    mode: "no-cors"
+                })
+                .catch(err => {
+                    if (debug)
+                        console.log("Failed to send non-commercial usage message to analytics backend", err);
+                });
+        }
+    }
+    catch (err) {
+        if (debug)
+            console.log("Failed to send non-commercial usage message to analytics backend", err);
+    }
+}

package/src/engine/engine_physics.ts

@@ -324,8 +324,22 @@ export class Physics {
             await RAPIER.init().then(() => RAPIER)
             Physics._didLoadPhysicsEngine = true;
         }
-        const gravity = { x: 0.0, y: -9.81, z: 0.0 };
-        this.world = new World(gravity);
+        this.world = new World(this._gravity);
+    }
+
+    private _gravity = { x: 0.0, y: -9.81, z: 0.0 };
+
+    get gravity() {
+        return this.world?.gravity ?? this._gravity;
+    }
+
+    set gravity(value: Vec3) {
+        if (this.world) {
+            this.world.gravity = value;
+        }
+        else {
+            this._gravity = value;
+        }
     }
 
     clearCaches() {

package/src/engine-components/Component.ts

@@ -559,6 +559,14 @@ class Component implements IComponent, EventTarget {
     public get forward(): THREE.Vector3 {
         return Component._forward.set(0, 0, -1).applyQuaternion(this.worldQuaternion);
     }
+    private static _right: THREE.Vector3 = new THREE.Vector3();
+    public get right(): THREE.Vector3 {
+        return Component._right.set(1, 0, 0).applyQuaternion(this.worldQuaternion);
+    }
+    private static _up: THREE.Vector3 = new THREE.Vector3();
+    public get up(): THREE.Vector3 {
+        return Component._up.set(0, 1, 0).applyQuaternion(this.worldQuaternion);
+    }
 
 
 

package/src/engine-components/ScreenCapture.ts

@@ -5,7 +5,7 @@ import { Context } from "../engine/engine_setup";
 import { RoomEvents } from "../engine/engine_networking";
 import { UserJoinedOrLeftRoomModel } from "../engine/engine_networking";
 import { serializable } from "../engine/engine_serialization";
-import { IPointerClickHandler } from "./ui/PointerEvents";
+import { IPointerClickHandler, PointerEventData } from "./ui/PointerEvents";
 import { EventDispatcher } from "three";
 import { AudioSource } from "./AudioSource";
 import { getParam } from "../engine/engine_utils";
@@ -39,7 +39,8 @@ declare type ScreenCaptureOptions = {
 
 export class ScreenCapture extends Behaviour implements IPointerClickHandler {
 
-    onPointerClick() {
+    onPointerClick(evt : PointerEventData) {
+        if(evt && evt.pointerId !== 0) return;
         if(this.context.connection.isInRoom === false) return;
         if (this.isReceiving) {
             if (this.videoPlayer)

package/src/engine-components/VideoPlayer.ts

@@ -122,6 +122,10 @@ export class VideoPlayer extends Behaviour {
         }
     }
 
+    get videoMaterial() {
+        return this._videoMaterial;
+    }
+
     get videoTexture() {
         return this._videoTexture;
     }
@@ -140,7 +144,7 @@ export class VideoPlayer extends Behaviour {
 
     private _videoElement: HTMLVideoElement | null = null;
     private _videoTexture: THREE.VideoTexture | null = null;
-    private videoMaterial: Material | null = null;
+    private _videoMaterial: Material | null = null;
 
     private _isPlaying: boolean = false;
     private wasPlaying: boolean = false;
@@ -355,18 +359,18 @@ export class VideoPlayer extends Behaviour {
         if (mat) {
             this._targetObjects.push(target);
 
-            if (mat !== this.videoMaterial) {
-                this.videoMaterial = mat.clone();
-                target["material"] = this.videoMaterial;
+            if (mat !== this._videoMaterial) {
+                this._videoMaterial = mat.clone();
+                target["material"] = this._videoMaterial;
             }
 
             if (!this.targetMaterialProperty) {
-                (this.videoMaterial as any).map = this._videoTexture;
+                (this._videoMaterial as any).map = this._videoTexture;
             }
             else {
                 switch (this.targetMaterialProperty) {
                     default:
-                        (this.videoMaterial as any).map = this._videoTexture;
+                        (this._videoMaterial as any).map = this._videoTexture;
                         break;
                     // doesnt render:
                     // case "emissiveTexture":

package/src/needle-engine.ts

@@ -50,3 +50,7 @@ if(!globalThis["THREE"]) {
     globalThis["THREE"] = THREE;
 }
 else console.warn("Threejs is already imported");
+
+
+
+import "./engine/engine_license";