@needle-tools/engine 3.0.1-alpha.4 → 3.1.0-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@needle-tools/engine",
-    "version": "3.0.1-alpha.4",
+    "version": "3.1.0-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",
@@ -35,8 +35,7 @@
         "src",
         "dist",
         "lib",
-        "plugins",
-        "license-2447137e.js"
+        "plugins"
     ],
     "keywords": [
         "needle",
@@ -58,7 +57,7 @@
         "@dimforge/rapier3d-compat": "^0.9.0",
         "flatbuffers": "2.0.4",
         "md5": "^2.3.0",
-        "peerjs": "1.3.2",
+        "peerjs": "1.4.7",
         "postprocessing": "^6.30.1",
         "simplex-noise": "^4.0.1",
         "stats.js": "^0.17.0",

package/plugins/vite/config.js

@@ -1,5 +1,6 @@
 import { existsSync, readFileSync } from 'fs';
 
+/** the codegen meta file */
 export async function loadConfig(path) {
     try {
         // First try to get the path from the config
@@ -28,6 +29,7 @@ export async function loadConfig(path) {
     }
 }
 
+/** get the needle.config.json */
 export function tryLoadProjectConfig() {
     try {
         const root = process.cwd();
@@ -45,4 +47,10 @@ export function tryLoadProjectConfig() {
     }
 
     return null;
+}
+
+
+/** "assets" -> the directory name inside the output directory to put e.g. glb files into */
+export function builtAssetsDirectory(){
+    return "assets";
 }

package/plugins/vite/copyfiles.js

@@ -1,6 +1,7 @@
 
 import { resolve, join } from 'path'
 import { existsSync, statSync, mkdirSync, readdirSync, copyFileSync, mkdir } from 'fs';
+import { builtAssetsDirectory, tryLoadProjectConfig } from './config.js';
 
 
 /** copy files on build from assets to dist */
@@ -19,7 +20,14 @@ export const needleCopyFiles = (command, config, userSettings) => {
             const baseDir = process.cwd();
             const pluginName = "needle-copy-files";
 
-            const outdirName = "dist";
+            let assetsDirName = "assets";
+            let outdirName = "dist";
+
+            const needleConfig = tryLoadProjectConfig();
+            if(needleConfig){
+                assetsDirName = needleConfig.assetsDirectory;
+            }
+
             const outDir = resolve(baseDir, outdirName);
             if (!existsSync(outDir)) {
                 mkdirSync(outDir);
@@ -36,9 +44,9 @@ export const needleCopyFiles = (command, config, userSettings) => {
             }
 
             // copy assets dir
-            const assetsDir = resolve(baseDir, 'assets');
+            const assetsDir = resolve(baseDir, assetsDirName);
             if (existsSync(assetsDir)) {
-                console.log(`[${pluginName}] - Copy assets to ${outdirName}/assets`)
+                console.log(`[${pluginName}] - Copy assets to ${outdirName}/${builtAssetsDirectory()}`)
                 const targetDir = resolve(outDir, 'assets');
                 copyRecursiveSync(assetsDir, targetDir);
             }
@@ -53,6 +61,7 @@ export const needleCopyFiles = (command, config, userSettings) => {
     }
 }
 
+
 function copyRecursiveSync(src, dest) {
     var exists = existsSync(src);
     var stats = exists && statSync(src);

package/plugins/vite/drop.js

@@ -6,6 +6,7 @@ import { fileURLToPath } from 'url';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
+/** experimental, allow dropping files from Unity into the running scene */
 export const needleDrop = (command, config, userSettings) => {
     if (command === "build") return;
 

package/plugins/vite/index.js

@@ -6,6 +6,8 @@ import { needleDrop } from "./drop.js";
 import { editorConnection } from "./editor-connection.js";
 import { needleCopyFiles } from "./copyfiles.js";
 import { needleViteAlias } from "./alias.js";
+import { needleTransformCodegen } from "./transform-codegen.js";
+import { needleLicense } from "./license.js";
 
 export * from "./gzip.js";
 export * from "./config.js";
@@ -19,12 +21,14 @@ export const needlePlugins = async (command, config, userSettings) => {
     // ensure we have user settings initialized with defaults
     userSettings = { ...defaultUserSettings, ...userSettings }
     const array = [
+        needleLicense(command, config, userSettings),
         needleViteAlias(command, config, userSettings),
         needleMeta(command, config, userSettings),
         needlePoster(command),
         needleReload(command, config, userSettings),
         needleBuild(command, config, userSettings),
         needleCopyFiles(command, config, userSettings),
+        needleTransformCodegen(command, config, userSettings),
         needleDrop(command, config, userSettings),
     ];
     array.push(await editorConnection(command, config, userSettings, array));

package/plugins/vite/license.js

@@ -0,0 +1,24 @@
+import { loadConfig } from './config.js';
+
+
+export const needleLicense = (command, config, userSettings) => {
+
+    return {
+        name: "needle-license",
+        enforce: 'pre',
+        async transform(src, id) {
+            if (id.includes("engine/engine_license.ts")) {
+                const needleConfig = await loadConfig();
+                if (needleConfig) {
+                    if (needleConfig.hasProLicense !== undefined && typeof needleConfig.hasProLicense === "boolean") {
+                        src = src.replace("const HAS_LICENSE = false;", "const HAS_LICENSE = " + needleConfig.hasProLicense + ";");
+                        return { code: src, map: null }
+                    }
+                }
+                else {
+                    console.log("No config found - can not apply license");
+                }
+            }
+        }
+    }
+};

package/plugins/vite/transform-codegen.js

@@ -0,0 +1,45 @@
+import { builtAssetsDirectory, tryLoadProjectConfig } from './config.js';
+
+/** 
+ * modify the glb load path in codegen files
+ * this is necessary if the assets directory is not the default (changed by the user in needle.config.json)
+ */
+export const needleTransformCodegen = (command, config, userSettings) => {
+
+    if (config?.noCodegenTransform === true || userSettings?.noCodegenTransform === true) {
+        return;
+    }
+
+    let codegenDirectory = "src/generated";
+    const needleConfig = tryLoadProjectConfig();
+    if (needleConfig?.codegenDirectory?.length)
+        codegenDirectory = needleConfig.codegenDirectory;
+
+    let configuredAssetsDirectory = "assets";
+    if (needleConfig?.assetsDirectory?.length)
+        configuredAssetsDirectory = needleConfig.assetsDirectory;
+
+    // https://regex101.com/r/Y05z9P/1
+    // const matchCodegenFilePaths = /\"(.+)\/.+?\.(glb|gltf)/g;
+
+    return [
+        {
+            name: 'needle-transform-files',
+            apply: 'build',
+            transform(src, id) {
+                if (id.endsWith(codegenDirectory + "/gen.js")) {
+                    const assetsDir = builtAssetsDirectory();
+                    if (assetsDir !== configuredAssetsDirectory) {
+                        console.log(`[needle-transform-files] - Transform codegen paths \"${configuredAssetsDirectory}\" → \"${assetsDir}\"`)
+                        // replace codegen paths
+                        src = src.replaceAll(configuredAssetsDirectory, assetsDir);
+                        return {
+                            code: src,
+                            map: null
+                        }
+                    }
+                }
+            }
+        }
+    ];
+}

package/src/engine/api.ts

@@ -6,7 +6,7 @@ export { InstancingUtil } from "./engine_instancing";
 export * from "./engine_gameobject";
 export * from "./engine_components";
 export * from "./engine_components_internal";
-export { AssetReference } from "./engine_addressables";
+export { AssetReference, ImageReference } from "./engine_addressables";
 export { Context, FrameEvent } from "./engine_setup";
 export * from "./debug/debug";
 export { validate } from "./engine_util_decorator"
@@ -14,7 +14,7 @@ export { Gizmos } from "./engine_gizmos"
 export * from "./engine_scenetools";
 export * from "./engine_math"
 export * from "./js-extensions"
-
+export { hasProLicense } from "./engine_license"
 
 export {
     // url params

package/src/engine/codegen/register_types.js

@@ -1,5 +1,5 @@
 import { TypeStore } from "./../engine_typestore"
-
+
 // Import types
 import { __Ignore } from "../../engine-components/codegen/components";
 import { AlignmentConstraint } from "../../engine-components/AlignmentConstraint";
@@ -150,6 +150,7 @@ import { TestRunner } from "../../engine-components/TestRunner";
 import { TestSimulateUserData } from "../../engine-components/TestRunner";
 import { Text } from "../../engine-components/ui/Text";
 import { TextureSheetAnimationModule } from "../../engine-components/ParticleSystemModules";
+import { TiltShiftEffect } from "../../engine-components/postprocessing/Effects/TiltShiftEffect";
 import { ToneMapping } from "../../engine-components/postprocessing/Effects/Tonemapping";
 import { TrailModule } from "../../engine-components/ParticleSystemModules";
 import { TransformData } from "../../engine-components/export/usdz/extensions/Animation";
@@ -173,13 +174,16 @@ import { WebARSessionRoot } from "../../engine-components/WebARSessionRoot";
 import { WebXR } from "../../engine-components/WebXR";
 import { WebXRAvatar } from "../../engine-components/WebXRAvatar";
 import { WebXRController } from "../../engine-components/WebXRController";
+import { WebXRImageTracking } from "../../engine-components/WebXRImageTracking";
+import { WebXRImageTrackingModel } from "../../engine-components/WebXRImageTracking";
 import { WebXRSync } from "../../engine-components/WebXRSync";
+import { WebXRTrackedImage } from "../../engine-components/WebXRImageTracking";
 import { XRFlag } from "../../engine-components/XRFlag";
 import { XRGrabModel } from "../../engine-components/WebXRGrabRendering";
 import { XRGrabRendering } from "../../engine-components/WebXRGrabRendering";
 import { XRRig } from "../../engine-components/WebXRRig";
 import { XRState } from "../../engine-components/XRFlag";
-
+
 // Register types
 TypeStore.add("__Ignore", __Ignore);
 TypeStore.add("AlignmentConstraint", AlignmentConstraint);
@@ -330,6 +334,7 @@ TypeStore.add("TestRunner", TestRunner);
 TypeStore.add("TestSimulateUserData", TestSimulateUserData);
 TypeStore.add("Text", Text);
 TypeStore.add("TextureSheetAnimationModule", TextureSheetAnimationModule);
+TypeStore.add("TiltShiftEffect", TiltShiftEffect);
 TypeStore.add("ToneMapping", ToneMapping);
 TypeStore.add("TrailModule", TrailModule);
 TypeStore.add("TransformData", TransformData);
@@ -353,7 +358,10 @@ TypeStore.add("WebARSessionRoot", WebARSessionRoot);
 TypeStore.add("WebXR", WebXR);
 TypeStore.add("WebXRAvatar", WebXRAvatar);
 TypeStore.add("WebXRController", WebXRController);
+TypeStore.add("WebXRImageTracking", WebXRImageTracking);
+TypeStore.add("WebXRImageTrackingModel", WebXRImageTrackingModel);
 TypeStore.add("WebXRSync", WebXRSync);
+TypeStore.add("WebXRTrackedImage", WebXRTrackedImage);
 TypeStore.add("XRFlag", XRFlag);
 TypeStore.add("XRGrabModel", XRGrabModel);
 TypeStore.add("XRGrabRendering", XRGrabRendering);

package/src/engine/debug/debug_overlay.ts

@@ -108,6 +108,8 @@ function showMessage(type: LogType, element: HTMLElement, msg: string) {
     if (container.childElementCount >= 20) {
         return;
     }
+    // truncate long messages before they go into the cache/set
+    if(msg.length > 300) msg = msg.substring(0, 300) + "...";
     if (currentMessages.has(msg)) return;
     currentMessages.add(msg);
     const msgcontainer = getMessageContainer(type, msg);

package/src/engine/engine_addressables.ts

@@ -1,8 +1,8 @@
-import { getParam, getPath } from "../engine/engine_utils";
+import { getParam, resolveUrl } from "../engine/engine_utils";
 // import { loadSync, parseSync } from "./engine_scenetools";
 import { SerializationContext, TypeSerializer } from "./engine_serialization_core";
 import { Context } from "./engine_setup";
-import { Group, Object3D, Scene } from "three";
+import { Group, Object3D, Scene, Texture } from "three";
 import { processNewScripts } from "./engine_mainloop_utils";
 import { registerPrefabProvider, syncInstantiate } from "./engine_networking_instantiate";
 import { download, hash } from "./engine_web_api";
@@ -50,7 +50,7 @@ export type ProgressCallback = (asset: AssetReference, prog: ProgressEvent) => v
 export class AssetReference {
 
     static getOrCreate(sourceId: SourceIdentifier, uri: string, context: Context): AssetReference {
-        const fullPath = getPath(sourceId, uri);
+        const fullPath = resolveUrl(sourceId, uri);
         if (debug) console.log("GetOrCreate Addressable from", sourceId, uri, "FinalPath=", fullPath);
         const addressables = context.addressables;
         const existing = addressables.findAssetReference(fullPath);
@@ -72,15 +72,16 @@ export class AssetReference {
 
     private _loading?: PromiseLike<any>;
 
+    // TODO: rename to url
     get uri(): string {
-        return this._uri;
+        return this._url;
     }
 
     get rawAsset(): any { return this._asset; }
 
     private _asset: any;
     private _glbRoot?: Object3D | null;
-    private _uri: string;
+    private _url: string;
     private _progressListeners: ProgressCallback[] = [];
 
     private _hash?: string;
@@ -90,14 +91,14 @@ export class AssetReference {
     private _rawBinary?: ArrayBuffer | null;
 
     constructor(uri: string, hash?: string) {
-        this._uri = uri;
+        this._url = uri;
         this._hash = hash;
         if (uri.includes("?v="))
             this._hashedUri = uri;
         else
             this._hashedUri = hash ? uri + "?v=" + hash : uri;
 
-        registerPrefabProvider(this._uri, this.onResolvePrefab.bind(this));
+        registerPrefabProvider(this._url, this.onResolvePrefab.bind(this));
     }
 
     private async onResolvePrefab(uri: string): Promise<IGameObject | null> {
@@ -330,4 +331,97 @@ class AddressableSerializer extends TypeSerializer {
     }
 
 }
-new AddressableSerializer();
+new AddressableSerializer();
+
+
+
+
+
+
+export class ImageReference {
+
+    private static imageReferences = new Map<string, ImageReference>();
+
+    static getOrCreate(url: string) {
+        let ref = ImageReference.imageReferences.get(url);
+        if (!ref) {
+            ref = new ImageReference(url);
+            ImageReference.imageReferences.set(url, ref);
+        }
+        return ref;
+    }
+
+    constructor(url: string) {
+        this.url = url;
+    }
+
+    readonly url!: string;
+
+    private _bitmap?: Promise<ImageBitmap | null>;
+    private _bitmapObject?: ImageBitmap;
+
+    dispose() {
+        if (this._bitmapObject) {
+            this._bitmapObject.close();
+        }
+        this._bitmap = undefined;
+    }
+
+    createHTMLImage(): HTMLImageElement {
+        const img = new Image();
+        img.src = this.url;
+        return img;
+    }
+
+    createTexture(): Promise<Texture | null> {
+        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 */
+    getBitmap(): Promise<ImageBitmap | null> {
+        if (this._bitmap) return this._bitmap;
+        this._bitmap = new Promise((res, _) => {
+            const imageElement = document.createElement("img") as HTMLImageElement;
+            imageElement.addEventListener("load", () => {
+                this._bitmap = createImageBitmap(imageElement).then((bitmap) => {
+                    this._bitmapObject = bitmap;
+                    res(bitmap);
+                    return bitmap;
+                })
+            });
+            imageElement.addEventListener("error", err => {
+                console.error("Failed to load image:" + this.url, err);
+                res(null);
+            });
+            imageElement.src = this.url;
+        });
+        return this._bitmap;
+    }
+}
+
+
+export class ImageReferenceSerializer extends TypeSerializer {
+    constructor() {
+        super([ImageReference]);
+    }
+
+    onSerialize(_data: string, _context: SerializationContext) {
+        return null;
+    }
+
+    onDeserialize(data: string, _context: SerializationContext) {
+        if (typeof data === "string") {
+            const url = resolveUrl(_context.gltfId, data)
+            return ImageReference.getOrCreate(url);
+        }
+        return undefined;
+    }
+}
+new ImageReferenceSerializer();

package/src/engine/engine_context.ts

@@ -161,6 +161,8 @@ export class Context implements IContext {
 	get isInVR() { return this.xrSessionMode === XRSessionMode.ImmersiveVR; }
 	get isInAR() { return this.xrSessionMode === XRSessionMode.ImmersiveAR; }
 	get xrSession() { return this.renderer.xr?.getSession(); }
+	get xrFrame() { return this._xrFrame }
+	private _xrFrame: XRFrame | null = null;
 	get arOverlayElement(): HTMLElement {
 		const el = this.domElement as any;
 		if (typeof el.getAROverlayContainer === "function")
@@ -607,7 +609,8 @@ export class Context implements IContext {
 	private _accumulatedTime = 0;
 	private _framerateClock = new Clock();
 
-	private render(_, frame) {
+	private render(_, frame : XRFrame) {
+		this._xrFrame = frame;
 
 		this._currentFrameEvent = FrameEvent.Undefined;
 

package/src/engine/engine_element.ts

@@ -24,7 +24,7 @@ const arSessionActiveClassName = "ar-session-active";
 const desktopSessionActiveClassName = "desktop-session-active";
 
 // https://developers.google.com/web/fundamentals/web-components/customelements
-export class EngineElement extends HTMLElement implements INeedleEngineComponent {
+export class NeedleEngineHTMLElement extends HTMLElement implements INeedleEngineComponent {
 
     public get loadingProgress01(): number { return this._loadingProgress01; }
     public get loadingFinished(): boolean { return this.loadingProgress01 > .999; }
@@ -424,7 +424,7 @@ export class EngineElement extends HTMLElement implements INeedleEngineComponent
 }
 
 if (!window.customElements.get(htmlTagName))
-    window.customElements.define(htmlTagName, EngineElement);
+    window.customElements.define(htmlTagName, NeedleEngineHTMLElement);
 
 
 

package/src/engine/engine_element_loading.ts

@@ -3,6 +3,7 @@ import { Mathf } from "./engine_math";
 import { LoadingProgressArgs } from "./engine_setup";
 import { getParam } from "./engine_utils";
 import { logoSVG } from "./assets"
+import { hasProLicense } from "./engine_license";
 
 const debug = getParam("debugloadingbar");
 const debugRendering = getParam("debugloadingbarrendering");
@@ -50,7 +51,8 @@ export class EngineLoadingView implements ILoadingViewHandler {
     // the raw progress
     loadingProgress: number = 0;
 
-    private container: HTMLElement;
+    /** Usually the NeedleEngineHTMLElement */
+    private _element: HTMLElement;
     private _progress: number = 0;
     private _allowCustomLoadingElement: boolean = true;
     private _loadingElement?: HTMLElement;
@@ -59,20 +61,24 @@ export class EngineLoadingView implements ILoadingViewHandler {
     private _messageContainer: HTMLElement | null = null;
     private _loadingElementOptions?: LoadingElementOptions;
 
-    constructor(container: HTMLElement, opts?: LoadingElementOptions) {
-        this.container = container;
+    /**
+     * Creates a new loading view
+     * @param owner the element that will contain the loading view (should be the NeedleEngineHTMLElement)
+     */
+    constructor(owner: HTMLElement, opts?: LoadingElementOptions) {
+        this._element = owner;
         this._loadingElementOptions = opts;
     }
 
     onLoadingBegin(message?: string) {
         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;
+            for (let i = 0; i < this._element.children.length; i++) {
+                const el = this._element.children[i] as HTMLElement;
                 if (el.classList.contains(EngineLoadingView.LoadingContainerClassName)) {
                     if (!this._allowCustomLoadingElement) {
                         if (debug) console.warn("Remove custom loading container")
-                        this.container.removeChild(el);
+                        this._element.removeChild(el);
                         continue;
                     }
                     this._loadingElement = this.createLoadingElement(el);
@@ -84,7 +90,7 @@ export class EngineLoadingView implements ILoadingViewHandler {
         this._progress = 0;
         this.loadingProgress = 0;
         this._loadingElement.style.display = "flex";
-        this.container.appendChild(this._loadingElement);
+        this._element.appendChild(this._loadingElement);
         this.smoothProgressLoop();
         this.setMessage(message ?? "");
     }
@@ -113,8 +119,10 @@ export class EngineLoadingView implements ILoadingViewHandler {
     onLoadingFinished() {
         if (debug)
             console.warn("Finished Loading");
-        this.loadingProgress = 1;
-        this.onDoneLoading();
+        if (!debugRendering) {
+            this.loadingProgress = 1;
+            this.onDoneLoading();
+        }
     }
 
     setMessage(message: string) {
@@ -133,7 +141,7 @@ export class EngineLoadingView implements ILoadingViewHandler {
         }
         this._progressLoop = setInterval(() => {
             // increate loading speed when almost done
-            if (this.loadingProgress >= .95) dt = .9;
+            if (this.loadingProgress >= .95 && !debugRendering) dt = .9;
             this._progress = Mathf.lerp(this._progress, this.loadingProgress, dt * this.loadingProgress);
             this.updateDisplay();
         }, dt);
@@ -164,6 +172,7 @@ export class EngineLoadingView implements ILoadingViewHandler {
     private createLoadingElement(existing?: HTMLElement): HTMLElement {
         if (debug && !existing) console.log("Creating loading element");
         this._loadingElement = existing || document.createElement("div");
+        const hasLicense = hasProLicense();
         if (!existing) {
             this._loadingElement.style.position = "fixed";
             this._loadingElement.style.width = "100%";
@@ -178,6 +187,16 @@ export class EngineLoadingView implements ILoadingViewHandler {
             this._loadingElement.style.flexDirection = "column";
             this._loadingElement.style.pointerEvents = "none";
             this._loadingElement.style.color = "white";
+            if (hasLicense && this._element) {
+                const loadingBackgroundColor = this._element.getAttribute("loading-background-color");
+                if (loadingBackgroundColor) {
+                    this._loadingElement.style.backgroundColor = loadingBackgroundColor;
+                }
+                const textColor = this._element.getAttribute("loading-text-color");
+                if (textColor) {
+                    this._loadingElement.style.color = textColor;
+                }
+            }
         }
 
         const className = this._loadingElementOptions?.className ?? EngineLoadingView.LoadingContainerClassName;
@@ -198,19 +217,26 @@ export class EngineLoadingView implements ILoadingViewHandler {
         // loadingBarContainer.style.alignItems = "center";
         this._loadingElement.appendChild(loadingBarContainer);
 
-        const needleLogo = document.createElement("img");
+        const logo = 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.userSelect = "none";
-        needleLogo.style.pointerEvents = "all";
-        needleLogo.src = logoSVG;
-        loadingBarContainer.appendChild(needleLogo);
+        logo.style.width = `${logoSize}px`;
+        logo.style.height = `${logoSize}px`;
+        logo.style.position = "absolute";
+        logo.style.left = "50%";
+        logo.style.transform = `translate(-${logoSize * .5}px, -${logoSize + 32}px)`;
+        logo.addEventListener("click", () => window.open("https://needle.tools", "_blank"));
+        logo.style.cursor = "pointer";
+        logo.style.userSelect = "none";
+        logo.style.pointerEvents = "all";
+        logo.style.objectFit = "contain";
+        logo.src = logoSVG;
+        if (hasLicense && this._element) {
+            const customLogo = this._element.getAttribute("loading-logo-src");
+            if (customLogo) {
+                logo.src = customLogo;
+            }
+        }
+        loadingBarContainer.appendChild(logo);
 
         this._loadingBar = document.createElement("div");
         loadingBarContainer.appendChild(this._loadingBar);
@@ -222,6 +248,19 @@ export class EngineLoadingView implements ILoadingViewHandler {
         this._loadingBar.style.backgroundAttachment = "fixed";
         this._loadingBar.style.width = "0%";
         this._loadingBar.style.height = "100%";
+        if(hasLicense && this._element){
+            const primaryColor = this._element.getAttribute("primary-color");
+            const secondaryColor = this._element.getAttribute("secondary-color");
+            if(primaryColor && secondaryColor){
+                this._loadingBar.style.background = `linear-gradient(90deg, ${primaryColor} ${getGradientPos(0)}, ${secondaryColor} ${getGradientPos(1)})`;
+            }
+            else if(primaryColor){
+                this._loadingBar.style.background = primaryColor;
+            }
+            else if(secondaryColor){
+                this._loadingBar.style.background = secondaryColor;
+            }
+        }
 
         this._loadingTextContainer = document.createElement("div");
         this._loadingTextContainer.style.display = "flex";
@@ -241,6 +280,13 @@ export class EngineLoadingView implements ILoadingViewHandler {
         messageContainer.style.justifyContent = "center";
         this._loadingElement.appendChild(messageContainer);
 
+        if(hasLicense && this._element){
+            const loadingTextColor = this._element.getAttribute("loading-text-color");
+            if(loadingTextColor){
+                messageContainer.style.color = loadingTextColor;
+            }
+        }
+
         return this._loadingElement;
     }
 }